<?php ob_start(); ?>

<div class="mb-4">
    <a href="<?= BASE_URL ?>/agent/conversations" class="text-indigo-600 hover:text-indigo-800">
        <i class="fas fa-arrow-left mr-2"></i>Retour aux conversations
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Zone de chat -->
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col" style="height: 70vh;">
        <!-- Header -->
        <div class="p-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                    <i class="fas fa-user text-indigo-600"></i>
                </div>
                <div>
                    <p class="font-medium text-gray-800"><?= htmlspecialchars($client['nom'] ?? 'Client') ?></p>
                    <p class="text-xs text-gray-500">
                        <i class="<?= $conversation['canal'] === 'whatsapp' ? 'fab fa-whatsapp' : 'fas fa-globe' ?> mr-1"></i>
                        <?= ucfirst($conversation['canal']) ?>
                    </p>
                </div>
            </div>
            <div class="flex items-center space-x-2">
                <span class="px-3 py-1 text-xs rounded-full 
                    <?= $conversation['statut'] === 'resolved' ? 'bg-green-100 text-green-700' : 
                       ($conversation['statut'] === 'in_progress' ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700') ?>">
                    <?= ucfirst(str_replace('_', ' ', $conversation['statut'])) ?>
                </span>
            </div>
        </div>
        
        <!-- Messages -->
        <div class="flex-1 overflow-y-auto p-4 space-y-4" id="messages-container">
            <?php foreach ($conversation['messages'] as $msg): ?>
            <div class="flex <?= $msg['sender_type'] === 'client' ? 'justify-start' : 'justify-end' ?>">
                <div class="max-w-xs lg:max-w-md px-4 py-2 rounded-lg <?= $msg['sender_type'] === 'client' ? 'bg-gray-100 text-gray-800' : 
                    ($msg['sender_type'] === 'bot' ? 'bg-purple-100 text-purple-800' : 'bg-indigo-600 text-white') ?>">
                    <?php if ($msg['sender_type'] === 'bot'): ?>
                        <p class="text-xs font-medium mb-1 opacity-75"><i class="fas fa-robot mr-1"></i>Bot</p>
                    <?php endif; ?>
                    <p class="text-sm"><?= nl2br(htmlspecialchars($msg['contenu'])) ?></p>
                    <p class="text-xs mt-1 opacity-60"><?= date('H:i', strtotime($msg['created_at'])) ?></p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        
        <!-- Input -->
        <?php if ($conversation['statut'] !== 'closed' && $conversation['statut'] !== 'resolved'): ?>
        <form action="<?= BASE_URL ?>/agent/conversations/<?= $conversation['id'] ?>/reply" method="POST" class="p-4 border-t border-gray-100">
            <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
            <div class="flex space-x-2">
                <input type="text" name="message" placeholder="Tapez votre message..." required
                       class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </form>
        <?php endif; ?>
    </div>
    
    <!-- Sidebar infos -->
    <div class="space-y-4">
        <!-- Client info -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            <h4 class="font-medium text-gray-800 mb-3"><i class="fas fa-user mr-2"></i>Client</h4>
            <div class="space-y-2 text-sm">
                <p><span class="text-gray-500">Nom:</span> <?= htmlspecialchars($client['nom'] ?? '-') ?></p>
                <p><span class="text-gray-500">Tél:</span> <?= htmlspecialchars($client['telephone'] ?? '-') ?></p>
                <p><span class="text-gray-500">Email:</span> <?= htmlspecialchars($client['email'] ?? '-') ?></p>
                <p><span class="text-gray-500">Langue:</span> <?= LANGUAGES[$client['langue_preferee']] ?? $client['langue_preferee'] ?></p>
            </div>
        </div>
        
        <!-- Conversation info -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            <h4 class="font-medium text-gray-800 mb-3"><i class="fas fa-info-circle mr-2"></i>Conversation</h4>
            <div class="space-y-2 text-sm">
                <p><span class="text-gray-500">Sujet:</span> <?= htmlspecialchars($conversation['sujet'] ?? '-') ?></p>
                <p><span class="text-gray-500">Créée:</span> <?= date('d/m/Y H:i', strtotime($conversation['created_at'])) ?></p>
                <?php if ($conversation['is_escalated']): ?>
                    <p class="text-red-600"><i class="fas fa-exclamation-triangle mr-1"></i>Escaladée</p>
                <?php endif; ?>
            </div>
        </div>
        
        <!-- Actions -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            <h4 class="font-medium text-gray-800 mb-3"><i class="fas fa-cogs mr-2"></i>Actions</h4>
            <div class="space-y-2">
                <?php if ($conversation['statut'] !== 'resolved' && $conversation['statut'] !== 'closed'): ?>
                <form action="<?= BASE_URL ?>/agent/conversations/<?= $conversation['id'] ?>/close" method="POST">
                    <button type="submit" class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                        <i class="fas fa-check mr-2"></i>Marquer résolu
                    </button>
                </form>
                
                <button onclick="document.getElementById('transfer-modal').classList.remove('hidden')" 
                        class="w-full px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition text-sm">
                    <i class="fas fa-exchange-alt mr-2"></i>Transférer
                </button>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- Modal Transfert -->
<div id="transfer-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-xl p-6 w-full max-w-md">
        <h3 class="text-lg font-semibold mb-4">Transférer la conversation</h3>
        <form action="<?= BASE_URL ?>/agent/conversations/<?= $conversation['id'] ?>/transfer" method="POST">
            <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">
            <div class="mb-4">
                <label class="block text-sm text-gray-600 mb-2">Agent</label>
                <select name="agent_id" class="w-full px-4 py-2 border rounded-lg">
                    <option value="0">-- Remettre en file d'attente --</option>
                    <?php foreach ($agents as $agent): ?>
                        <?php if ($agent['id'] != $user['id']): ?>
                        <option value="<?= $agent['id'] ?>"><?= htmlspecialchars($agent['prenom'] . ' ' . $agent['nom']) ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-sm text-gray-600 mb-2">Raison (optionnel)</label>
                <textarea name="reason" rows="2" class="w-full px-4 py-2 border rounded-lg"></textarea>
            </div>
            <div class="flex space-x-2">
                <button type="button" onclick="document.getElementById('transfer-modal').classList.add('hidden')" 
                        class="flex-1 px-4 py-2 border rounded-lg hover:bg-gray-50">Annuler</button>
                <button type="submit" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Transférer</button>
            </div>
        </form>
    </div>
</div>

<script>
document.getElementById('messages-container').scrollTop = document.getElementById('messages-container').scrollHeight;
</script>

<?php 
$content = ob_get_clean();
$title = 'Conversation #' . $conversation['id'] . ' - ' . APP_NAME;
$pageTitle = 'Conversation avec ' . htmlspecialchars($client['nom'] ?? 'Client');
include VIEWS_PATH . '/layouts/main.php';
?>
