<?php ob_start(); ?>

<div class="space-y-6">
    <!-- Header avec toggle -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">🚨 Signalements</h1>
            <p class="text-gray-500 mt-1">Gérez les signalements reçus via le widget</p>
        </div>
        <div class="flex items-center gap-4">
            <div class="flex items-center gap-3 bg-white rounded-xl px-4 py-3 shadow-sm">
                <span class="text-sm text-gray-600">Signalements activés</span>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" id="toggle-denonciations" class="sr-only peer" <?= !isset($entreprise['denonciations_enabled']) || $entreprise['denonciations_enabled'] ? 'checked' : '' ?>>
                    <div class="w-11 h-6 bg-gray-200 peer-focus:ring-4 peer-focus:ring-cyan-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-cyan-500"></div>
                </label>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-xl p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-inbox text-blue-600"></i>
                </div>
                <div>
                    <p class="text-2xl font-bold text-gray-900"><?= $stats['total'] ?? 0 ?></p>
                    <p class="text-xs text-gray-500">Total</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-clock text-yellow-600"></i>
                </div>
                <div>
                    <p class="text-2xl font-bold text-gray-900"><?= $stats['nouveaux'] ?? 0 ?></p>
                    <p class="text-xs text-gray-500">Nouveaux</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-spinner text-orange-600"></i>
                </div>
                <div>
                    <p class="text-2xl font-bold text-gray-900"><?= $stats['en_cours'] ?? 0 ?></p>
                    <p class="text-xs text-gray-500">En cours</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl p-4 shadow-sm">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check text-green-600"></i>
                </div>
                <div>
                    <p class="text-2xl font-bold text-gray-900"><?= $stats['traites'] ?? 0 ?></p>
                    <p class="text-xs text-gray-500">Traités</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Types breakdown -->
    <div class="grid grid-cols-4 gap-3">
        <div class="bg-white rounded-lg p-3 text-center shadow-sm">
            <i class="fas fa-pen text-cyan-500 mb-1"></i>
            <p class="text-lg font-bold"><?= $stats['texte'] ?? 0 ?></p>
            <p class="text-xs text-gray-500">Texte</p>
        </div>
        <div class="bg-white rounded-lg p-3 text-center shadow-sm">
            <i class="fas fa-microphone text-red-500 mb-1"></i>
            <p class="text-lg font-bold"><?= $stats['audio'] ?? 0 ?></p>
            <p class="text-xs text-gray-500">Audio</p>
        </div>
        <div class="bg-white rounded-lg p-3 text-center shadow-sm">
            <i class="fas fa-camera text-blue-500 mb-1"></i>
            <p class="text-lg font-bold"><?= $stats['photo'] ?? 0 ?></p>
            <p class="text-xs text-gray-500">Photo</p>
        </div>
        <div class="bg-white rounded-lg p-3 text-center shadow-sm">
            <i class="fas fa-video text-purple-500 mb-1"></i>
            <p class="text-lg font-bold"><?= $stats['video'] ?? 0 ?></p>
            <p class="text-xs text-gray-500">Vidéo</p>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl p-4 shadow-sm">
        <form method="GET" class="flex flex-wrap gap-3">
            <select name="statut" class="px-4 py-2 rounded-lg border border-gray-200 text-sm">
                <option value="">Tous les statuts</option>
                <option value="nouveau" <?= ($filters['statut'] ?? '') === 'nouveau' ? 'selected' : '' ?>>Nouveaux</option>
                <option value="en_cours" <?= ($filters['statut'] ?? '') === 'en_cours' ? 'selected' : '' ?>>En cours</option>
                <option value="traite" <?= ($filters['statut'] ?? '') === 'traite' ? 'selected' : '' ?>>Traités</option>
                <option value="rejete" <?= ($filters['statut'] ?? '') === 'rejete' ? 'selected' : '' ?>>Rejetés</option>
            </select>
            <select name="type" class="px-4 py-2 rounded-lg border border-gray-200 text-sm">
                <option value="">Tous les types</option>
                <option value="texte" <?= ($filters['type'] ?? '') === 'texte' ? 'selected' : '' ?>>Texte</option>
                <option value="audio" <?= ($filters['type'] ?? '') === 'audio' ? 'selected' : '' ?>>Audio</option>
                <option value="photo" <?= ($filters['type'] ?? '') === 'photo' ? 'selected' : '' ?>>Photo</option>
                <option value="video" <?= ($filters['type'] ?? '') === 'video' ? 'selected' : '' ?>>Vidéo</option>
            </select>
            <button type="submit" class="px-4 py-2 bg-cyan-500 text-white rounded-lg text-sm hover:bg-cyan-600">
                <i class="fas fa-filter mr-1"></i> Filtrer
            </button>
        </form>
    </div>

    <!-- List -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <?php if (empty($denonciations)): ?>
        <div class="p-8 text-center text-gray-500">
            <i class="fas fa-inbox text-4xl mb-3"></i>
            <p>Aucun signalement trouvé</p>
        </div>
        <?php else: ?>
        <div class="divide-y divide-gray-100">
            <?php foreach ($denonciations as $d): ?>
            <div class="p-4 hover:bg-gray-50 transition cursor-pointer" onclick="viewDenonciation(<?= $d['id'] ?>)">
                <div class="flex items-start justify-between">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center <?php
                            echo match($d['type']) {
                                'audio' => 'bg-red-100 text-red-600',
                                'photo' => 'bg-blue-100 text-blue-600',
                                'video' => 'bg-purple-100 text-purple-600',
                                default => 'bg-cyan-100 text-cyan-600'
                            };
                        ?>">
                            <i class="fas fa-<?php
                                echo match($d['type']) {
                                    'audio' => 'microphone',
                                    'photo' => 'camera',
                                    'video' => 'video',
                                    default => 'pen'
                                };
                            ?>"></i>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900"><?= htmlspecialchars($d['titre'] ?: 'Sans titre') ?></p>
                            <p class="text-sm text-gray-500 line-clamp-1"><?= htmlspecialchars(substr($d['description'] ?? '', 0, 100)) ?></p>
                            <div class="flex items-center gap-3 mt-2 text-xs text-gray-400">
                                <?php if ($d['anonyme']): ?>
                                <span><i class="fas fa-user-secret mr-1"></i>Anonyme</span>
                                <?php else: ?>
                                <span><i class="fas fa-user mr-1"></i><?= htmlspecialchars($d['client_nom'] ?? 'Inconnu') ?></span>
                                <?php endif; ?>
                                <span><i class="fas fa-clock mr-1"></i><?= date('d/m/Y H:i', strtotime($d['created_at'])) ?></span>
                                <?php if ($d['categorie']): ?>
                                <span class="px-2 py-0.5 bg-gray-100 rounded"><?= htmlspecialchars($d['categorie']) ?></span>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <div class="flex flex-col items-end gap-2">
                        <span class="px-3 py-1 rounded-full text-xs font-medium <?php
                            echo match($d['statut']) {
                                'nouveau' => 'bg-yellow-100 text-yellow-700',
                                'en_cours' => 'bg-blue-100 text-blue-700',
                                'traite' => 'bg-green-100 text-green-700',
                                'rejete' => 'bg-red-100 text-red-700',
                                default => 'bg-gray-100 text-gray-700'
                            };
                        ?>">
                            <?= ucfirst(str_replace('_', ' ', $d['statut'])) ?>
                        </span>
                        <div class="flex gap-1">
                            <button onclick="event.stopPropagation(); updateStatus(<?= $d['id'] ?>, 'en_cours')" class="p-2 hover:bg-blue-100 rounded text-blue-600" title="Prendre en charge">
                                <i class="fas fa-play text-xs"></i>
                            </button>
                            <button onclick="event.stopPropagation(); updateStatus(<?= $d['id'] ?>, 'traite')" class="p-2 hover:bg-green-100 rounded text-green-600" title="Marquer traité">
                                <i class="fas fa-check text-xs"></i>
                            </button>
                            <button onclick="event.stopPropagation(); updateStatus(<?= $d['id'] ?>, 'rejete')" class="p-2 hover:bg-red-100 rounded text-red-600" title="Rejeter">
                                <i class="fas fa-times text-xs"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
</div>

<script>
function viewDenonciation(id) {
    window.location.href = '<?= BASE_URL ?>/admin/denonciations/' + id;
}

function updateStatus(id, status) {
    fetch('<?= BASE_URL ?>/admin/denonciations/' + id + '/status', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ statut: status })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur lors de la mise à jour');
        }
    });
}

document.getElementById('toggle-denonciations').addEventListener('change', function() {
    fetch('<?= BASE_URL ?>/admin/denonciations/toggle', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ enabled: this.checked })
    })
    .then(res => res.json())
    .then(data => {
        if (!data.success) {
            alert('Erreur lors de la mise à jour');
            this.checked = !this.checked;
        }
    });
});
</script>

<?php 
$content = ob_get_clean();
$title = 'Signalements - ' . APP_NAME;
$pageTitle = 'Signalements';
include VIEWS_PATH . '/layouts/main.php';
?>
