<?php ob_start(); ?>

<!-- Alertes urgentes -->
<?php if (!empty($escalation['counts']['urgent'])): ?>
<div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl flex items-center gap-4">
    <div class="w-12 h-12 bg-red-500 rounded-full flex items-center justify-center animate-pulse">
        <i class="fas fa-exclamation-triangle text-white text-xl"></i>
    </div>
    <div class="flex-1">
        <p class="font-bold text-red-800"><?= $escalation['counts']['urgent'] ?> demande(s) urgente(s) en attente!</p>
        <p class="text-sm text-red-600">Des clients attendent une assistance immédiate.</p>
    </div>
    <a href="#live-requests" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
        Voir les demandes
    </a>
</div>
<?php endif; ?>

<!-- Stats principales -->
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
    <div class="bg-white rounded-xl shadow-sm p-5 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">En cours</p>
                <p class="text-2xl font-bold text-blue-600"><?= $stats['en_cours'] ?></p>
            </div>
            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-spinner text-blue-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-5 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Résolues</p>
                <p class="text-2xl font-bold text-green-600"><?= $stats['resolues'] ?></p>
            </div>
            <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>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-5 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs text-gray-500 uppercase tracking-wide">Non assignées</p>
                <p class="text-2xl font-bold text-yellow-600"><?= count($nonAssignees) ?></p>
            </div>
            <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-inbox text-yellow-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl shadow-sm p-5 text-white">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs uppercase tracking-wide opacity-80">Chat en direct</p>
                <p class="text-2xl font-bold"><?= $escalation['counts']['live_requests'] ?? 0 ?></p>
            </div>
            <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-headset"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-gradient-to-br from-orange-500 to-red-500 rounded-xl shadow-sm p-5 text-white">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-xs uppercase tracking-wide opacity-80">Tickets ouverts</p>
                <p class="text-2xl font-bold"><?= $escalation['counts']['open_tickets'] ?? 0 ?></p>
            </div>
            <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-ticket-alt"></i>
            </div>
        </div>
    </div>
</div>

<!-- Demandes de chat en direct -->
<?php if (!empty($escalation['live_requests'])): ?>
<div id="live-requests" class="mb-8 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-xl border border-cyan-200 overflow-hidden">
    <div class="p-4 bg-gradient-to-r from-cyan-500 to-blue-600 text-white flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-headset text-xl"></i>
            </div>
            <div>
                <h3 class="font-bold">Demandes de chat en direct</h3>
                <p class="text-sm opacity-80"><?= count($escalation['live_requests']) ?> client(s) en attente</p>
            </div>
        </div>
        <span class="px-3 py-1 bg-white/20 rounded-full text-sm">
            <i class="fas fa-clock mr-1"></i> En temps réel
        </span>
    </div>
    <div class="divide-y divide-cyan-100">
        <?php foreach ($escalation['live_requests'] as $request): ?>
        <div class="p-4 flex items-center justify-between hover:bg-white/50 transition">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-cyan-100 rounded-full flex items-center justify-center">
                    <i class="fas fa-user text-cyan-600"></i>
                </div>
                <div>
                    <p class="font-semibold text-gray-800"><?= htmlspecialchars($request['client_nom'] ?? 'Client') ?></p>
                    <p class="text-sm text-gray-500">
                        <i class="fas fa-clock mr-1"></i>
                        En attente depuis <?= date('H:i', strtotime($request['wait_started_at'] ?? $request['created_at'])) ?>
                    </p>
                    <?php if ($request['reason']): ?>
                    <p class="text-sm text-cyan-700 mt-1"><?= htmlspecialchars($request['reason']) ?></p>
                    <?php endif; ?>
                </div>
            </div>
            <form action="<?= BASE_URL ?>/agent/live-request/<?= $request['id'] ?>/take" method="POST">
                <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-lg hover:from-cyan-600 hover:to-blue-700 transition shadow-sm flex items-center gap-2">
                    <i class="fas fa-hand-paper"></i>
                    Prendre en charge
                </button>
            </form>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

<!-- Tickets en attente -->
<?php if (!empty($escalation['open_tickets'])): ?>
<div class="mb-8 bg-gradient-to-r from-orange-50 to-red-50 rounded-xl border border-orange-200 overflow-hidden">
    <div class="p-4 bg-gradient-to-r from-orange-500 to-red-500 text-white flex items-center justify-between">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center">
                <i class="fas fa-ticket-alt text-xl"></i>
            </div>
            <div>
                <h3 class="font-bold">Tickets de support</h3>
                <p class="text-sm opacity-80"><?= count($escalation['open_tickets']) ?> ticket(s) ouvert(s)</p>
            </div>
        </div>
        <a href="<?= BASE_URL ?>/agent/tickets" class="px-3 py-1 bg-white/20 rounded-full text-sm hover:bg-white/30 transition">
            Voir tous <i class="fas fa-arrow-right ml-1"></i>
        </a>
    </div>
    <div class="divide-y divide-orange-100">
        <?php foreach (array_slice($escalation['open_tickets'], 0, 5) as $ticket): ?>
        <div class="p-4 flex items-center justify-between hover:bg-white/50 transition">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center">
                    <span class="text-orange-600 font-bold text-xs">#<?= $ticket['id'] ?></span>
                </div>
                <div>
                    <p class="font-semibold text-gray-800">
                        <span class="font-mono text-orange-600"><?= htmlspecialchars($ticket['ticket_number']) ?></span>
                        - <?= htmlspecialchars($ticket['sujet']) ?>
                    </p>
                    <p class="text-sm text-gray-500">
                        <?= htmlspecialchars($ticket['client_nom'] ?? 'Client') ?> 
                        • <?= date('d/m/Y H:i', strtotime($ticket['created_at'])) ?>
                    </p>
                    <?php 
                    $priorityColors = ['urgent' => 'red', 'high' => 'orange', 'medium' => 'yellow', 'low' => 'gray'];
                    $color = $priorityColors[$ticket['priorite']] ?? 'gray';
                    ?>
                    <span class="inline-block mt-1 px-2 py-0.5 text-xs bg-<?= $color ?>-100 text-<?= $color ?>-700 rounded-full">
                        <?= ucfirst($ticket['priorite']) ?>
                    </span>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <?php if (empty($ticket['assigned_agent_id'])): ?>
                <form action="<?= BASE_URL ?>/agent/tickets/<?= $ticket['id'] ?>/take" method="POST">
                    <button type="submit" class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition text-sm">
                        <i class="fas fa-hand-paper mr-1"></i> Prendre
                    </button>
                </form>
                <?php else: ?>
                <a href="<?= BASE_URL ?>/agent/tickets/<?= $ticket['id'] ?>" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm">
                    <i class="fas fa-eye mr-1"></i> Voir
                </a>
                <?php endif; ?>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Mes conversations -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="p-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800">
                <i class="fas fa-comments mr-2 text-indigo-600"></i>Mes conversations
            </h3>
            <a href="<?= BASE_URL ?>/agent/conversations" class="text-sm text-indigo-600">Voir tout</a>
        </div>
        <div class="divide-y divide-gray-100 max-h-96 overflow-y-auto">
            <?php if (empty($mesConversations)): ?>
                <div class="p-6 text-center text-gray-500">Aucune conversation assignée</div>
            <?php else: ?>
                <?php foreach (array_slice($mesConversations, 0, 5) as $conv): ?>
                <a href="<?= BASE_URL ?>/agent/conversations/<?= $conv['id'] ?>" class="block p-4 hover:bg-gray-50 transition">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user text-gray-500"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800"><?= htmlspecialchars($conv['client_nom'] ?? 'Client') ?></p>
                                <p class="text-sm text-gray-500 truncate max-w-xs"><?= htmlspecialchars($conv['sujet'] ?? '-') ?></p>
                            </div>
                        </div>
                        <span class="px-2 py-1 text-xs rounded-full <?= $conv['statut'] === 'in_progress' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700' ?>">
                            <?= $conv['statut'] === 'in_progress' ? 'En cours' : 'Résolu' ?>
                        </span>
                    </div>
                </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
    
    <!-- Non assignées -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100">
        <div class="p-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800">
                <i class="fas fa-inbox mr-2 text-yellow-600"></i>En attente d'assignation
            </h3>
            <a href="<?= BASE_URL ?>/agent/conversations?type=non-assignees" class="text-sm text-indigo-600">Voir tout</a>
        </div>
        <div class="divide-y divide-gray-100 max-h-96 overflow-y-auto">
            <?php if (empty($nonAssignees)): ?>
                <div class="p-6 text-center text-gray-500">Aucune conversation en attente</div>
            <?php else: ?>
                <?php foreach (array_slice($nonAssignees, 0, 5) as $conv): ?>
                <a href="<?= BASE_URL ?>/agent/conversations/<?= $conv['id'] ?>?assign=1" class="block p-4 hover:bg-yellow-50 transition">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-user text-yellow-600"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-800"><?= htmlspecialchars($conv['client_nom'] ?? 'Client') ?></p>
                                <p class="text-sm text-gray-500"><?= htmlspecialchars($conv['sujet'] ?? '-') ?></p>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="text-xs text-gray-400"><?= date('H:i', strtotime($conv['created_at'])) ?></span>
                            <?php if ($conv['is_escalated']): ?>
                                <span class="block mt-1 px-2 py-0.5 text-xs bg-red-100 text-red-600 rounded-full">Escaladé</span>
                            <?php endif; ?>
                        </div>
                    </div>
                </a>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
</div>

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