<?php ob_start(); ?>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Score principal -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 text-center">
        <h3 class="text-lg font-medium text-gray-600 mb-4">Score CX Index</h3>
        <div class="relative w-40 h-40 mx-auto">
            <svg class="w-40 h-40 transform -rotate-90">
                <circle cx="80" cy="80" r="70" stroke="#e5e7eb" stroke-width="12" fill="none"/>
                <circle cx="80" cy="80" r="70" 
                        stroke="<?= $cxData['score'] >= 60 ? '#10B981' : ($cxData['score'] >= 40 ? '#F59E0B' : '#EF4444') ?>" 
                        stroke-width="12" fill="none"
                        stroke-dasharray="<?= 440 * $cxData['score'] / 100 ?> 440"
                        stroke-linecap="round"/>
            </svg>
            <div class="absolute inset-0 flex flex-col items-center justify-center">
                <span class="text-4xl font-bold <?= $cxData['score'] >= 60 ? 'text-green-600' : ($cxData['score'] >= 40 ? 'text-yellow-600' : 'text-red-600') ?>">
                    <?= $cxData['score'] ?>
                </span>
                <span class="text-sm text-gray-500">sur 100</span>
            </div>
        </div>
        <p class="mt-4 text-lg font-medium <?= $cxData['score'] >= 60 ? 'text-green-600' : ($cxData['score'] >= 40 ? 'text-yellow-600' : 'text-red-600') ?>">
            <?= $cxData['niveau'] ?>
        </p>
    </div>
    
    <!-- Détails -->
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-6">Indicateurs détaillés</h3>
        
        <div class="grid grid-cols-2 gap-6">
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Taux de résolution</span>
                    <span class="font-bold text-gray-800"><?= $cxData['details']['resolution'] ?? 0 ?>%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-green-500 h-2 rounded-full" style="width: <?= min(100, $cxData['details']['resolution'] ?? 0) ?>%"></div>
                </div>
            </div>
            
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Temps moyen de réponse</span>
                    <span class="font-bold text-gray-800"><?= $cxData['details']['temps_moyen'] ?? 0 ?> min</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-blue-500 h-2 rounded-full" style="width: <?= max(0, 100 - ($cxData['details']['temps_moyen'] ?? 0)) ?>%"></div>
                </div>
            </div>
            
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Satisfaction client</span>
                    <span class="font-bold text-gray-800"><?= $cxData['details']['satisfaction'] ?? 0 ?>/5</span>
                </div>
                <div class="flex items-center">
                    <?php for ($i = 1; $i <= 5; $i++): ?>
                        <i class="fas fa-star <?= $i <= round($cxData['details']['satisfaction'] ?? 0) ? 'text-yellow-400' : 'text-gray-300' ?>"></i>
                    <?php endfor; ?>
                </div>
            </div>
            
            <div class="p-4 bg-gray-50 rounded-lg">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm text-gray-600">Taux d'escalade</span>
                    <span class="font-bold text-gray-800"><?= $cxData['details']['escalade'] ?? 0 ?>%</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-red-500 h-2 rounded-full" style="width: <?= min(100, $cxData['details']['escalade'] ?? 0) ?>%"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Historique -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <div class="p-6 border-b border-gray-100">
        <h3 class="text-lg font-semibold text-gray-800">
            <i class="fas fa-chart-line mr-2 text-indigo-600"></i>Historique (30 derniers jours)
        </h3>
    </div>
    <div class="p-6">
        <?php if (empty($historique)): ?>
            <p class="text-gray-500 text-center py-8">Aucune donnée historique disponible</p>
        <?php else: ?>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead>
                        <tr class="text-left text-sm text-gray-500 border-b">
                            <th class="pb-3">Date</th>
                            <th class="pb-3">Conversations</th>
                            <th class="pb-3">Résolues</th>
                            <th class="pb-3">Satisfaction</th>
                            <th class="pb-3">Score CX</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($historique as $h): ?>
                        <tr class="border-b border-gray-100">
                            <td class="py-3 text-gray-800"><?= date('d/m/Y', strtotime($h['date'])) ?></td>
                            <td class="py-3 text-gray-600"><?= $h['total_conversations'] ?></td>
                            <td class="py-3 text-green-600"><?= $h['conversations_resolues'] ?></td>
                            <td class="py-3"><?= $h['taux_satisfaction'] ? number_format($h['taux_satisfaction'], 1) . '%' : '-' ?></td>
                            <td class="py-3">
                                <span class="font-bold <?= $h['score_cx'] >= 60 ? 'text-green-600' : ($h['score_cx'] >= 40 ? 'text-yellow-600' : 'text-red-600') ?>">
                                    <?= $h['score_cx'] ?? '-' ?>
                                </span>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- Info CX Index -->
<div class="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-6">
    <h4 class="font-medium text-blue-800 mb-2">
        <i class="fas fa-info-circle mr-2"></i>Comprendre le CX Index
    </h4>
    <p class="text-sm text-blue-700">
        Le CX Index est un score composite qui mesure la qualité de votre service client. Il est calculé à partir de :
    </p>
    <ul class="text-sm text-blue-700 mt-2 ml-4 list-disc">
        <li><strong>Taux de résolution (30%)</strong> - Pourcentage de demandes résolues</li>
        <li><strong>Temps de réponse (20%)</strong> - Rapidité de la première réponse</li>
        <li><strong>Satisfaction client (35%)</strong> - Note moyenne donnée par les clients</li>
        <li><strong>Taux d'escalade (15%)</strong> - Moins d'escalades = meilleur score</li>
    </ul>
</div>

<?php 
$content = ob_get_clean();
$title = 'CX Index - ' . APP_NAME;
$pageTitle = 'Indice de Satisfaction Client (CX Index)';
include VIEWS_PATH . '/layouts/main.php';
?>
