<?php
$statusColors = [
    'pending'   => 'bg-yellow-100 text-yellow-800',
    'reviewed'  => 'bg-blue-100 text-blue-800',
    'resolved'  => 'bg-green-100 text-green-800',
    'dismissed' => 'bg-gray-100 text-gray-500',
];
$reasonColors = [
    'illegal'   => 'bg-red-100 text-red-800',
    'copyright' => 'bg-purple-100 text-purple-800',
    'spam'      => 'bg-orange-100 text-orange-800',
    'broken'    => 'bg-gray-100 text-gray-600',
    'underage'  => 'bg-red-200 text-red-900',
    'other'     => 'bg-gray-100 text-gray-600',
];
?>


<div class="mb-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
    <div class="flex items-center gap-2 flex-wrap">
        <a href="/admin/reports" class="px-2.5 py-1 text-xs font-medium rounded border <?= $currentStatus === 'all' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' ?>">All</a>
        <a href="/admin/reports?status=pending" class="px-2.5 py-1 text-xs font-medium rounded border <?= $currentStatus === 'pending' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' ?>">
            Pending<?php if ($pendingCount > 0): ?> <span class="ml-1 inline-flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-bold bg-red-500 text-white rounded-full"><?= $pendingCount ?></span><?php endif; ?>
        </a>
        <a href="/admin/reports?status=reviewed" class="px-2.5 py-1 text-xs font-medium rounded border <?= $currentStatus === 'reviewed' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' ?>">Under Review</a>
        <a href="/admin/reports?status=resolved" class="px-2.5 py-1 text-xs font-medium rounded border <?= $currentStatus === 'resolved' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' ?>">Resolved</a>
        <a href="/admin/reports?status=dismissed" class="px-2.5 py-1 text-xs font-medium rounded border <?= $currentStatus === 'dismissed' ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' ?>">Dismissed</a>
    </div>
    <div class="flex items-center gap-3">
        <select onchange="var u=new URL(window.location);if(this.value==='all'){u.searchParams.delete('reason')}else{u.searchParams.set('reason',this.value)}u.searchParams.delete('page');window.location=u" class="px-2.5 py-1.5 border border-gray-300 rounded-lg text-xs bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none">
            <option value="all">All reasons</option>
            <?php foreach (Report::REASON_LABELS as $key => $label): ?>
                <option value="<?= $key ?>" <?= $currentReason === $key ? 'selected' : '' ?>><?= $label ?></option>
            <?php endforeach; ?>
        </select>
        <span class="text-xs text-gray-500 whitespace-nowrap hidden sm:inline"><?= $totalReports ?> report<?= $totalReports !== 1 ? 's' : '' ?></span>
    </div>
</div>


<div class="bg-white rounded-lg shadow-sm border border-gray-200">
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50">
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Status</th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Video</th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500">Reason</th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 hide-mobile">Reporter</th>
                    <th class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-gray-500 hide-mobile">Date</th>
                    <th class="px-3 py-2 text-right text-[11px] font-semibold uppercase tracking-wider text-gray-500">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php if (!empty($reports)): ?>
                    <?php foreach ($reports as $report): ?>
                        <tr class="hover:bg-gray-50 transition-colors <?= $report['status'] === 'pending' ? 'bg-yellow-50/30' : '' ?>">
                            <td class="px-3 py-2 text-xs">
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium <?= $statusColors[$report['status']] ?? 'bg-gray-100 text-gray-600' ?>">
                                    <?= Report::STATUS_LABELS[$report['status']] ?? $report['status'] ?>
                                </span>
                            </td>
                            <td class="px-3 py-2 text-xs">
                                <a href="/admin/videos/<?= (int)$report['video_id'] ?>/edit" class="text-blue-600 hover:text-blue-800 line-clamp-1" title="<?= htmlspecialchars($report['video_title'] ?? 'Deleted video') ?>">
                                    <?= htmlspecialchars(mb_strimwidth($report['video_title'] ?? 'Deleted video', 0, 50, '...')) ?>
                                </a>
                            </td>
                            <td class="px-3 py-2 text-xs">
                                <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px] font-medium <?= $reasonColors[$report['reason']] ?? 'bg-gray-100 text-gray-600' ?>">
                                    <?= Report::REASON_LABELS[$report['reason']] ?? $report['reason'] ?>
                                </span>
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-600 hide-mobile">
                                <?= htmlspecialchars($report['username'] ?? 'Guest') ?>
                                <div class="text-[10px] text-gray-400 font-mono"><?= htmlspecialchars($report['ip_address'] ?? '') ?></div>
                            </td>
                            <td class="px-3 py-2 text-xs text-gray-400 whitespace-nowrap hide-mobile"><?= htmlspecialchars(substr($report['created_at'], 0, 16)) ?></td>
                            <td class="px-3 py-2 text-xs text-right">
                                <div class="flex items-center justify-end gap-1">
                                    <a href="/admin/reports/<?= (int)$report['id'] ?>" class="px-2 py-1 text-[11px] font-medium rounded border bg-white text-gray-600 border-gray-300 hover:bg-gray-50">View</a>
                                    <form method="POST" action="/admin/reports/<?= (int)$report['id'] ?>/delete" onsubmit="return confirm('Delete this report?');">
                                        <?= Router::csrfField() ?>
                                        <button type="submit" class="px-2 py-1 text-[11px] font-medium rounded border bg-red-600 text-white border-red-600 hover:bg-red-700">Del</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="6" class="text-center py-8 text-gray-500 text-xs">No reports found.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<?php require APP_ROOT . '/templates/admin/_admin_pagination.php'; ?>
