<?php
$data = $unique_subs[$sub['id']];
$date = date('M d, Y', strtotime($data['created_at']));
$cats = $data['cats'] ?? [];
$mc = $media_counts[$data['id']] ?? [];
$org = clean_out($data['org_name'] ?? 'Unknown Org');
$title = clean_out($data['title']);
$role = clean_out($data['role'] ?? 'Contributor');
$user_id = $data['user_id'] ?? 0;
$profile_slug = $slug_map[$user_id] ?? '';

$view_count = number_format((int) ($data['view_count'] ?? 0));
$rating_data = $batch_ratings[$data['id']] ?? ['avg' => 0, 'count' => 0];
$rating_stars = render_stars($rating_data['avg'], $rating_data['count'], 'submission', $data['id'], ($batch_user_ratings[$data['id']] ?? 0), $is_logged_in);

// Build clickable category pills
$cat_pills = '';
if (!empty($cats)) {
    foreach ($cats as $cat) {
        $label = is_numeric($cat) ? ($cat_map[$cat] ?? 'Thematic Area') : $cat;
        $cat_url = 'submitted.php?subcategory=' . urlencode($cat);
        $cat_pills .= '<a href="' . $cat_url . '" onclick="event.stopPropagation()" class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-white/10 text-white/80 border border-white/20 whitespace-nowrap hover:bg-teal-500/30 hover:text-teal-200 hover:border-teal-400/40 transition-colors">'
            . htmlspecialchars($label) . '</a>';
    }
} else {
    $cat_pills = '<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-semibold bg-white/10 text-white/60">General</span>';
}

$badges = '';
if (!empty($mc['image']))
    $badges .= '<span class="text-xs text-white/60"><i class="fa-solid fa-image text-white/40 mr-1"></i>' . $mc['image'] . '</span>';
if (!empty($mc['video']))
    $badges .= '<span class="text-xs text-white/60"><i class="fa-solid fa-video text-white/40 mr-1"></i>' . $mc['video'] . '</span>';
if (!empty($mc['audio']))
    $badges .= '<span class="text-xs text-white/60"><i class="fa-solid fa-microphone text-white/40 mr-1"></i>' . $mc['audio'] . '</span>';
if (!empty($mc['pdf']))
    $badges .= '<span class="text-xs text-white/60"><i class="fa-solid fa-file-pdf text-white/40 mr-1"></i>' . $mc['pdf'] . '</span>';

// Org name: link to profile if slug exists, otherwise plain text
$org_html = $org;
if (!empty($profile_slug)) {
    $org_html = '<a href="/profile/' . htmlspecialchars($profile_slug) . '" onclick="event.stopPropagation()" class="text-xs font-bold text-teal-300 truncate max-w-[110px] hover:text-teal-100 hover:underline transition-colors" title="View ' . $org . ' profile">' . $org . '</a>';
} else {
    $org_html = '<p class="text-xs font-bold text-white truncate max-w-[110px]">' . $org . '</p>';
}

$raw_story = strip_tags($data['story'] ?? '');
$excerpt = mb_strlen($raw_story) > 120
    ? mb_substr($raw_story, 0, 120) . '…'
    : $raw_story;
?>
<div class="group glass-card rounded-xl hover:shadow-2xl hover:-translate-y-0.5 transition-all flex flex-col h-full"
    style="border:1px solid rgba(255,255,255,0.12);">
    <a href="view_submission.php?id=<?= $data['id'] ?>" class="p-5 flex-1 flex flex-col">
        <div class="flex items-center justify-between mb-3">
            <span class="text-xs text-blue-200 shrink-0"><i class="fa-regular fa-clock mr-1"></i>
                <?= $date ?>
            </span>
            <span class="text-xs text-blue-200 shrink-0" title="<?= $view_count ?> views"><i
                    class="fa-regular fa-eye mr-1"></i>
                <?= $view_count ?>
            </span>
        </div>
        <h3 class="font-bold text-white group-hover:text-teal-300 transition-colors mb-3 leading-snug text-sm flex-1">
            <?= $title ?>
        </h3>

        <?php if ($excerpt): ?>
            <p class="text-xs text-white/50 leading-relaxed mb-3 line-clamp-2 flex-1">
                <?= htmlspecialchars($excerpt) ?>
            </p>
        <?php endif; ?>

        <div class="mb-3 scale-90 origin-left">
            <?= $rating_stars ?>
        </div>
    </a>
    <div class="px-5 pb-2">
        <div class="flex flex-wrap gap-1.5 mb-3">
            <?= $cat_pills ?>
        </div>
    </div>
    <div class="px-5 pb-3 pt-3 flex items-center justify-between" style="border-top:1px solid rgba(255,255,255,0.08);">
        <div class="flex items-center gap-2 min-w-0">
            <div class="w-7 h-7 rounded-full flex items-center justify-center font-bold text-xs shrink-0 text-white"
                style="background:rgba(0,128,128,0.35)">
                <?= substr($org, 0, 1) ?>
            </div>
            <div class="min-w-0">
                <?= $org_html ?>
                <p class="text-[11px] text-blue-200/50 truncate max-w-[110px]">
                    <?= $role ?>
                </p>
            </div>
        </div>
        <div class="flex items-center gap-2 shrink-0">
            <?= $badges ?>
        </div>
    </div>
    <a href="view_submission.php?id=<?= $data['id'] ?>"
        class="block px-5 py-2.5 rounded-b-xl text-center text-xs font-bold text-teal-300 hover:text-white transition-colors"
        style="background:rgba(0,128,128,0.2);border-top:1px solid rgba(0,180,180,0.15);">
        <i class="fa-solid fa-book-open mr-1"></i> View Data <i class="fa-solid fa-arrow-right ml-1"></i>
    </a>
</div>