<?php ob_start(); ?>

<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mb-8">
    <!-- Conversations -->
    <div class="stat-card bg-white rounded-2xl p-6 border border-slate-200 gradient-border">
        <div class="flex items-center justify-between mb-4">
            <div class="w-14 h-14 bg-gradient-to-br from-cyan-500 to-cyan-600 rounded-2xl flex items-center justify-center shadow-lg shadow-cyan-500/30">
                <i class="fas fa-comments text-xl text-white"></i>
            </div>
            <div class="flex items-center text-emerald-500 text-sm font-medium bg-emerald-50 px-3 py-1 rounded-full">
                <i class="fas fa-arrow-up mr-1 text-xs"></i>12%
            </div>
        </div>
        <p class="text-4xl font-bold text-slate-800 mb-1"><?= number_format($stats['total'] ?? 0) ?></p>
        <p class="text-slate-500 font-medium">Conversations</p>
        <div class="mt-4 flex items-center gap-4 text-sm">
            <span class="flex items-center text-emerald-600">
                <span class="w-2 h-2 bg-emerald-500 rounded-full mr-2"></span>
                <?= $stats['resolues'] ?? 0 ?> résolues
            </span>
            <span class="flex items-center text-amber-600">
                <span class="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
                <?= $stats['en_cours'] ?? 0 ?> en cours
            </span>
        </div>
    </div>
    
    <!-- CX Index -->
    <div class="stat-card bg-white rounded-2xl p-6 border border-slate-200">
        <div class="flex items-center justify-between mb-4">
            <div class="w-14 h-14 bg-gradient-to-br from-pink-500 to-rose-500 rounded-2xl flex items-center justify-center shadow-lg shadow-pink-500/30">
                <i class="fas fa-heart text-xl text-white"></i>
            </div>
            <div class="text-sm font-medium px-3 py-1 rounded-full <?= $cxIndex['score'] >= 60 ? 'bg-emerald-50 text-emerald-600' : ($cxIndex['score'] >= 40 ? 'bg-amber-50 text-amber-600' : 'bg-red-50 text-red-600') ?>">
                <?= $cxIndex['niveau'] ?>
            </div>
        </div>
        <p class="text-4xl font-bold <?= $cxIndex['score'] >= 60 ? 'text-emerald-600' : ($cxIndex['score'] >= 40 ? 'text-amber-600' : 'text-red-600') ?> mb-1">
            <?= $cxIndex['score'] ?><span class="text-2xl text-slate-400">/100</span>
        </p>
        <p class="text-slate-500 font-medium">CX Index</p>
        <div class="mt-4 w-full h-2 bg-slate-100 rounded-full overflow-hidden">
            <div class="h-full rounded-full <?= $cxIndex['score'] >= 60 ? 'bg-gradient-to-r from-emerald-400 to-emerald-500' : ($cxIndex['score'] >= 40 ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-red-400 to-red-500') ?>" style="width: <?= $cxIndex['score'] ?>%"></div>
        </div>
    </div>
    
    <!-- Agents -->
    <div class="stat-card bg-white rounded-2xl p-6 border border-slate-200">
        <div class="flex items-center justify-between mb-4">
            <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/30">
                <i class="fas fa-users text-xl text-white"></i>
            </div>
            <div class="flex -space-x-2">
                <?php foreach (array_slice($agents, 0, 3) as $agent): ?>
                <div class="w-8 h-8 bg-gradient-to-br from-slate-200 to-slate-300 rounded-full border-2 border-white flex items-center justify-center text-xs font-bold text-slate-600">
                    <?= strtoupper(substr($agent['prenom'], 0, 1)) ?>
                </div>
                <?php endforeach; ?>
                <?php if (count($agents) > 3): ?>
                <div class="w-8 h-8 bg-slate-100 rounded-full border-2 border-white flex items-center justify-center text-xs font-medium text-slate-500">
                    +<?= count($agents) - 3 ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
        <p class="text-4xl font-bold text-slate-800 mb-1"><?= count($agents) ?></p>
        <p class="text-slate-500 font-medium">Agents</p>
        <div class="mt-4 flex items-center gap-2">
            <span class="w-3 h-3 bg-emerald-500 rounded-full animate-pulse"></span>
            <span class="text-sm text-slate-600"><?= count(array_filter($agents, fn($a) => $a['is_online'])) ?> en ligne maintenant</span>
        </div>
    </div>
    
    <!-- Alertes -->
    <div class="stat-card bg-white rounded-2xl p-6 border border-slate-200 <?= count($alertes) > 0 ? 'ring-2 ring-red-100' : '' ?>">
        <div class="flex items-center justify-between mb-4">
            <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-2xl flex items-center justify-center shadow-lg shadow-orange-500/30 <?= count($alertes) > 0 ? 'animate-pulse' : '' ?>">
                <i class="fas fa-bell text-xl text-white"></i>
            </div>
            <?php if (count($alertes) > 0): ?>
            <a href="<?= BASE_URL ?>/admin/alertes" class="text-sm font-medium text-red-600 hover:text-red-700">
                Voir tout <i class="fas fa-arrow-right ml-1"></i>
            </a>
            <?php endif; ?>
        </div>
        <p class="text-4xl font-bold <?= count($alertes) > 0 ? 'text-red-600' : 'text-slate-800' ?> mb-1"><?= count($alertes) ?></p>
        <p class="text-slate-500 font-medium">Alertes actives</p>
        <div class="mt-4 text-sm text-slate-500">
            <?= count($alertes) > 0 ? 'Actions requises' : '✓ Tout est en ordre' ?>
        </div>
    </div>
</div>

<!-- Section CSAT - Satisfaction Client -->
<?php if (!empty($csatStats)): ?>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Score CSAT -->
    <div class="bg-gradient-to-br from-purple-500 to-indigo-600 rounded-2xl p-6 text-white">
        <div class="flex items-center justify-between mb-4">
            <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-star text-xl"></i>
            </div>
            <span class="text-sm font-medium bg-white/20 px-3 py-1 rounded-full">
                <?= $csatStats['total_responses'] ?> avis
            </span>
        </div>
        <p class="text-5xl font-bold mb-1">
            <?= $csatStats['average_score'] ?><span class="text-2xl opacity-70">/5</span>
        </p>
        <p class="opacity-80 font-medium">Score satisfaction</p>
        <div class="mt-4 flex gap-1">
            <?php for ($i = 1; $i <= 5; $i++): ?>
            <span class="text-2xl <?= $i <= round($csatStats['average_score']) ? '' : 'opacity-30' ?>">⭐</span>
            <?php endfor; ?>
        </div>
    </div>

    <!-- Distribution des notes -->
    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <div class="flex items-center mb-4">
            <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mr-3">
                <i class="fas fa-chart-bar text-purple-600"></i>
            </div>
            <h3 class="font-bold text-slate-800">Distribution</h3>
        </div>
        <div class="space-y-3">
            <?php 
            $total = max(array_sum($csatStats['distribution']), 1);
            foreach ([5, 4, 3, 2, 1] as $score): 
                $count = $csatStats['distribution'][$score] ?? 0;
                $pct = round(($count / $total) * 100);
                $colors = [5 => 'emerald', 4 => 'green', 3 => 'yellow', 2 => 'orange', 1 => 'red'];
                $color = $colors[$score];
            ?>
            <div class="flex items-center gap-3">
                <span class="text-sm w-6 font-medium text-slate-600"><?= $score ?>★</span>
                <div class="flex-1 h-3 bg-slate-100 rounded-full overflow-hidden">
                    <div class="h-full bg-<?= $color ?>-500 rounded-full transition-all" style="width: <?= $pct ?>%"></div>
                </div>
                <span class="text-xs text-slate-500 w-10"><?= $count ?></span>
            </div>
            <?php endforeach; ?>
        </div>
    </div>

    <!-- Derniers avis -->
    <div class="bg-white rounded-2xl border border-slate-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center mr-3">
                    <i class="fas fa-comments text-indigo-600"></i>
                </div>
                <h3 class="font-bold text-slate-800">Derniers avis</h3>
            </div>
        </div>
        <div class="space-y-3 max-h-48 overflow-y-auto">
            <?php if (empty($csatRecent)): ?>
            <p class="text-sm text-slate-500 text-center py-4">Aucun avis pour le moment</p>
            <?php else: ?>
            <?php foreach ($csatRecent as $csat): ?>
            <div class="p-3 bg-slate-50 rounded-xl">
                <div class="flex items-center justify-between mb-1">
                    <span class="text-sm font-medium text-slate-800"><?= htmlspecialchars($csat['client_nom'] ?? 'Client') ?></span>
                    <span class="text-xs text-slate-400"><?= date('d/m', strtotime($csat['created_at'])) ?></span>
                </div>
                <div class="flex items-center gap-1 mb-1">
                    <?php for ($i = 1; $i <= 5; $i++): ?>
                    <span class="text-xs <?= $i <= $csat['score'] ? 'text-yellow-400' : 'text-slate-300' ?>">★</span>
                    <?php endfor; ?>
                </div>
                <?php if ($csat['comment']): ?>
                <p class="text-xs text-slate-600 truncate"><?= htmlspecialchars($csat['comment']) ?></p>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</div>
<?php endif; ?>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-8">
    <!-- Conversations récentes -->
    <div class="xl:col-span-2 bg-white rounded-2xl border border-slate-200 overflow-hidden">
        <div class="p-6 border-b border-slate-100 flex justify-between items-center bg-gradient-to-r from-slate-50 to-white">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-xl flex items-center justify-center mr-3">
                    <i class="fas fa-comments text-white"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-slate-800">Conversations récentes</h3>
                    <p class="text-sm text-slate-500">Dernières interactions clients</p>
                </div>
            </div>
            <a href="<?= BASE_URL ?>/admin/conversations" class="flex items-center px-4 py-2 bg-slate-100 hover:bg-slate-200 rounded-xl text-sm font-medium text-slate-600 transition">
                Voir tout <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        <div class="divide-y divide-slate-100">
            <?php if (empty($conversations)): ?>
                <div class="p-12 text-center">
                    <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-inbox text-2xl text-slate-400"></i>
                    </div>
                    <p class="text-slate-500">Aucune conversation pour le moment</p>
                </div>
            <?php else: ?>
                <?php foreach (array_slice($conversations, 0, 5) as $index => $conv): ?>
                <div class="p-5 hover:bg-slate-50 transition cursor-pointer group">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-slate-100 to-slate-200 rounded-xl flex items-center justify-center mr-4 group-hover:scale-105 transition">
                                <span class="text-lg font-bold text-slate-500"><?= strtoupper(substr($conv['client_nom'] ?? 'C', 0, 1)) ?></span>
                            </div>
                            <div>
                                <p class="font-semibold text-slate-800"><?= htmlspecialchars($conv['client_nom'] ?? 'Client anonyme') ?></p>
                                <p class="text-sm text-slate-500 mt-0.5"><?= htmlspecialchars(substr($conv['sujet'] ?? 'Sans sujet', 0, 50)) ?><?= strlen($conv['sujet'] ?? '') > 50 ? '...' : '' ?></p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="inline-flex items-center px-3 py-1 text-xs font-medium rounded-full 
                                <?= $conv['statut'] === 'resolved' ? 'bg-emerald-100 text-emerald-700' : 
                                   ($conv['statut'] === 'in_progress' ? 'bg-blue-100 text-blue-700' : 
                                   ($conv['statut'] === 'open' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-700')) ?>">
                                <span class="w-1.5 h-1.5 rounded-full mr-2 <?= $conv['statut'] === 'resolved' ? 'bg-emerald-500' : ($conv['statut'] === 'in_progress' ? 'bg-blue-500' : 'bg-amber-500') ?>"></span>
                                <?= $conv['statut'] === 'resolved' ? 'Résolu' : ($conv['statut'] === 'in_progress' ? 'En cours' : ($conv['statut'] === 'open' ? 'Ouvert' : ucfirst($conv['statut']))) ?>
                            </span>
                            <p class="text-xs text-slate-400 mt-2">
                                <i class="far fa-clock mr-1"></i><?= date('d/m H:i', strtotime($conv['updated_at'])) ?>
                            </p>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="space-y-6">
        <!-- Quick Actions -->
        <div class="bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-2xl p-6 text-white">
            <h3 class="text-lg font-bold mb-4">Actions rapides</h3>
            <div class="grid grid-cols-2 gap-3">
                <a href="<?= BASE_URL ?>/admin/agents/create" class="bg-white/20 hover:bg-white/30 rounded-xl p-4 text-center transition">
                    <i class="fas fa-user-plus text-2xl mb-2"></i>
                    <p class="text-sm font-medium">Nouvel agent</p>
                </a>
                <a href="<?= BASE_URL ?>/admin/conversations" class="bg-white/20 hover:bg-white/30 rounded-xl p-4 text-center transition">
                    <i class="fas fa-inbox text-2xl mb-2"></i>
                    <p class="text-sm font-medium">Conversations</p>
                </a>
                <a href="<?= BASE_URL ?>/admin/statistiques" class="bg-white/20 hover:bg-white/30 rounded-xl p-4 text-center transition">
                    <i class="fas fa-chart-bar text-2xl mb-2"></i>
                    <p class="text-sm font-medium">Rapports</p>
                </a>
                <a href="<?= BASE_URL ?>/admin/parametres" class="bg-white/20 hover:bg-white/30 rounded-xl p-4 text-center transition">
                    <i class="fas fa-cog text-2xl mb-2"></i>
                    <p class="text-sm font-medium">Paramètres</p>
                </a>
            </div>
        </div>
        
        <!-- Alertes -->
        <div class="bg-white rounded-2xl border border-slate-200">
            <div class="p-5 border-b border-slate-100 flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-9 h-9 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-bell text-orange-500"></i>
                    </div>
                    <span class="font-bold text-slate-800">Alertes</span>
                </div>
                <?php if (count($alertes) > 0): ?>
                <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full"><?= count($alertes) ?></span>
                <?php endif; ?>
            </div>
            <div class="p-4">
                <?php if (empty($alertes)): ?>
                    <div class="text-center py-6">
                        <div class="w-12 h-12 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-check text-emerald-500"></i>
                        </div>
                        <p class="text-sm text-slate-500">Aucune alerte active</p>
                    </div>
                <?php else: ?>
                    <div class="space-y-3">
                        <?php foreach (array_slice($alertes, 0, 3) as $alerte): ?>
                        <div class="p-4 rounded-xl <?= $alerte['severite'] === 'critical' ? 'bg-red-50 border border-red-100' : 'bg-amber-50 border border-amber-100' ?>">
                            <div class="flex items-start">
                                <div class="w-8 h-8 rounded-lg flex items-center justify-center mr-3 flex-shrink-0 <?= $alerte['severite'] === 'critical' ? 'bg-red-100' : 'bg-amber-100' ?>">
                                    <i class="fas fa-exclamation <?= $alerte['severite'] === 'critical' ? 'text-red-500' : 'text-amber-500' ?> text-sm"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-slate-800"><?= htmlspecialchars($alerte['titre']) ?></p>
                                    <p class="text-xs text-slate-500 mt-1">
                                        <i class="far fa-clock mr-1"></i><?= date('d/m H:i', strtotime($alerte['created_at'])) ?>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        
        <!-- Agents en ligne -->
        <div class="bg-white rounded-2xl border border-slate-200">
            <div class="p-5 border-b border-slate-100 flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-9 h-9 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-users text-blue-500"></i>
                    </div>
                    <span class="font-bold text-slate-800">Équipe</span>
                </div>
                <a href="<?= BASE_URL ?>/admin/agents" class="text-sm text-cyan-600 hover:text-cyan-700 font-medium">Gérer</a>
            </div>
            <div class="p-4">
                <div class="space-y-3">
                    <?php foreach (array_slice($agents, 0, 5) as $agent): ?>
                    <div class="flex items-center justify-between p-2 rounded-lg hover:bg-slate-50 transition">
                        <div class="flex items-center">
                            <div class="relative">
                                <div class="w-10 h-10 bg-gradient-to-br from-blue-100 to-indigo-100 rounded-full flex items-center justify-center">
                                    <span class="font-bold text-blue-600 text-sm"><?= strtoupper(substr($agent['prenom'], 0, 1) . substr($agent['nom'], 0, 1)) ?></span>
                                </div>
                                <span class="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full border-2 border-white <?= $agent['is_online'] ? 'bg-emerald-500' : 'bg-slate-300' ?>"></span>
                            </div>
                            <div class="ml-3">
                                <p class="text-sm font-medium text-slate-800"><?= htmlspecialchars($agent['prenom'] . ' ' . $agent['nom']) ?></p>
                                <p class="text-xs text-slate-500"><?= $agent['is_online'] ? 'En ligne' : 'Hors ligne' ?></p>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Widget Integration -->
<div class="mt-8 bg-gradient-to-r from-slate-800 to-slate-900 rounded-2xl p-8 text-white">
    <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
        <div class="flex items-start">
            <div class="w-14 h-14 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-2xl flex items-center justify-center mr-5 shadow-lg">
                <i class="fas fa-code text-xl"></i>
            </div>
            <div>
                <h4 class="text-xl font-bold mb-1">Widget Chat</h4>
                <p class="text-slate-400">Intégrez le widget chat sur votre site web pour communiquer avec vos clients</p>
            </div>
        </div>
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full lg:w-auto">
            <code class="bg-slate-700/50 px-4 py-3 rounded-xl text-sm font-mono text-cyan-400 border border-slate-600"><?= $entreprise['widget_token'] ?></code>
            <div class="flex gap-2">
                <button onclick="navigator.clipboard.writeText('<?= $entreprise['widget_token'] ?>')" class="flex-1 sm:flex-none px-4 py-3 bg-slate-700 hover:bg-slate-600 rounded-xl text-sm font-medium transition">
                    <i class="fas fa-copy mr-2"></i>Copier
                </button>
                <a href="<?= BASE_URL ?>/widget/<?= $entreprise['widget_token'] ?>" target="_blank" class="flex-1 sm:flex-none px-4 py-3 bg-gradient-to-r from-cyan-500 to-emerald-500 hover:from-cyan-600 hover:to-emerald-600 rounded-xl text-sm font-medium transition text-center">
                    <i class="fas fa-external-link-alt mr-2"></i>Tester
                </a>
            </div>
        </div>
    </div>
</div>

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