<?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="max-w-3xl">
    <a href="/admin/inbox?tab=reports" class="inline-flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 mb-4">
        <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
        Back to Inbox
    </a>

    <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
        
        <div class="px-5 py-4 border-b border-gray-100 bg-gray-50">
            <div class="flex items-center gap-3 mb-3">
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium <?= $statusColors[$report['status']] ?? '' ?>">
                    <?= Report::STATUS_LABELS[$report['status']] ?? $report['status'] ?>
                </span>
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium <?= $reasonColors[$report['reason']] ?? '' ?>">
                    <?= Report::REASON_LABELS[$report['reason']] ?? $report['reason'] ?>
                </span>
            </div>

            <div class="flex flex-wrap items-center gap-2 sm:gap-4 text-xs text-gray-500">
                <div class="flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
                    <a href="/admin/videos/<?= (int)$report['video_id'] ?>/edit" class="text-blue-600 hover:text-blue-800 font-medium">
                        <?= htmlspecialchars($report['video_title'] ?? 'Deleted video') ?>
                    </a>
                    <?php if ($reportCount > 1): ?>
                        <span class="text-red-600 font-medium">(<?= $reportCount ?> total reports)</span>
                    <?php endif; ?>
                </div>
                <div class="flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    <span class="font-medium text-gray-700"><?= htmlspecialchars($report['username'] ?? 'Guest') ?></span>
                </div>
                <div class="flex items-center gap-1.5">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    <?= htmlspecialchars($report['created_at']) ?>
                </div>
                <?php if (!empty($report['ip_address'])): ?>
                <div class="flex items-center gap-1.5">
                    <span class="font-mono text-gray-400">IP: <?= htmlspecialchars($report['ip_address']) ?></span>
                </div>
                <?php endif; ?>
            </div>
        </div>

        
        <?php if (!empty($report['details'])): ?>
        <div class="px-5 py-4 border-b border-gray-100">
            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">User Details</h4>
            <div class="text-sm text-gray-700 whitespace-pre-wrap"><?= htmlspecialchars($report['details']) ?></div>
        </div>
        <?php endif; ?>

        <?php if (!empty($report['admin_note'])): ?>
        <div class="px-5 py-4 border-b border-gray-100 bg-blue-50/50">
            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Admin Note</h4>
            <div class="text-sm text-gray-700 whitespace-pre-wrap"><?= htmlspecialchars($report['admin_note']) ?></div>
        </div>
        <?php endif; ?>

        
        <div class="px-5 py-4 border-b border-gray-100">
            <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Update Status</h4>
            <form method="POST" action="/admin/reports/<?= (int)$report['id'] ?>/status">
                <?= Router::csrfField() ?>
                <div class="flex flex-col gap-3">
                    <div class="flex items-center gap-2 flex-wrap">
                        <?php foreach (Report::STATUS_LABELS as $key => $label): ?>
                            <label class="flex items-center gap-1.5 cursor-pointer">
                                <input type="radio" name="status" value="<?= $key ?>" <?= $report['status'] === $key ? 'checked' : '' ?> class="text-blue-600 focus:ring-blue-500">
                                <span class="text-xs font-medium text-gray-700"><?= $label ?></span>
                            </label>
                        <?php endforeach; ?>
                    </div>
                    <textarea name="admin_note" rows="2" placeholder="Admin note (optional)..." class="w-full px-3 py-2 border border-gray-300 rounded-lg text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none resize-y"><?= htmlspecialchars($report['admin_note'] ?? '') ?></textarea>
                    <div>
                        <button type="submit" class="px-4 py-1.5 text-xs font-medium rounded bg-blue-600 text-white hover:bg-blue-700 transition-colors">Update</button>
                    </div>
                </div>
            </form>
        </div>

        
        <div class="px-5 py-3 bg-gray-50 flex items-center gap-2 flex-wrap">
            <?php if (!empty($report['video_slug'])): ?>
            <a href="/video/<?= htmlspecialchars($report['video_slug']) ?>" target="_blank" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded border bg-white text-gray-600 border-gray-300 hover:bg-gray-50">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                View video
            </a>
            <?php endif; ?>
            <a href="/admin/videos/<?= (int)$report['video_id'] ?>/edit" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded border bg-white text-gray-600 border-gray-300 hover:bg-gray-50">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                Edit video
            </a>
            <form method="POST" action="/admin/reports/<?= (int)$report['id'] ?>/delete" onsubmit="return confirm('Delete this report permanently?');">
                <?= Router::csrfField() ?>
                <button type="submit" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded border bg-red-600 text-white border-red-600 hover:bg-red-700">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    Delete report
                </button>
            </form>
        </div>
    </div>
</div>
