<?php ob_start(); ?>

<div class="mb-6 bg-white rounded-xl shadow-sm border border-gray-100 p-4">
    <form method="GET" class="flex flex-wrap gap-4 items-end">
        <div>
            <label class="block text-sm text-gray-600 mb-1">Du</label>
            <input type="date" name="from" value="<?= $dateFrom ?>" 
                   class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <div>
            <label class="block text-sm text-gray-600 mb-1">Au</label>
            <input type="date" name="to" value="<?= $dateTo ?>" 
                   class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
        </div>
        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
            <i class="fas fa-filter mr-2"></i>Filtrer
        </button>
    </form>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Total conversations</p>
                <p class="text-3xl font-bold text-gray-800"><?= number_format($stats['total'] ?? 0) ?></p>
            </div>
            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-comments text-xl text-indigo-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Résolues</p>
                <p class="text-3xl font-bold text-green-600"><?= number_format($stats['resolues'] ?? 0) ?></p>
            </div>
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-check text-xl text-green-600"></i>
            </div>
        </div>
        <?php if (($stats['total'] ?? 0) > 0): ?>
            <p class="text-sm text-gray-500 mt-2"><?= round(($stats['resolues'] ?? 0) / $stats['total'] * 100) ?>% du total</p>
        <?php endif; ?>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Escaladées</p>
                <p class="text-3xl font-bold text-red-600"><?= number_format($stats['escaladees'] ?? 0) ?></p>
            </div>
            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-exclamation-triangle text-xl text-red-600"></i>
            </div>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-sm text-gray-500">Satisfaction moyenne</p>
                <p class="text-3xl font-bold text-yellow-600">
                    <?= $stats['satisfaction_moyenne'] ? number_format($stats['satisfaction_moyenne'], 1) : '-' ?>
                </p>
            </div>
            <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-star text-xl text-yellow-600"></i>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Par statut -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Répartition par statut</h3>
        <div class="space-y-4">
            <?php 
            $statuts = [
                'ouvertes' => ['label' => 'Ouvertes', 'color' => 'yellow'],
                'en_cours' => ['label' => 'En cours', 'color' => 'blue'],
                'resolues' => ['label' => 'Résolues', 'color' => 'green'],
                'fermees' => ['label' => 'Fermées', 'color' => 'gray']
            ];
            foreach ($statuts as $key => $info):
                $count = $stats[$key] ?? 0;
                $percent = ($stats['total'] ?? 0) > 0 ? ($count / $stats['total'] * 100) : 0;
            ?>
            <div>
                <div class="flex justify-between text-sm mb-1">
                    <span class="text-gray-600"><?= $info['label'] ?></span>
                    <span class="font-medium"><?= $count ?> (<?= round($percent) ?>%)</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-<?= $info['color'] ?>-500 h-2 rounded-full" style="width: <?= $percent ?>%"></div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
    
    <!-- Par canal -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Répartition par canal</h3>
        <?php if (empty($byCanal)): ?>
            <p class="text-gray-500 text-center py-8">Aucune donnée</p>
        <?php else: ?>
            <div class="space-y-4">
                <?php 
                $canalConfig = [
                    'web' => ['label' => 'Web Chat', 'color' => 'blue', 'icon' => 'fa-globe'],
                    'whatsapp' => ['label' => 'WhatsApp', 'color' => 'green', 'icon' => 'fa-whatsapp fab'],
                    'voice' => ['label' => 'Voix', 'color' => 'purple', 'icon' => 'fa-phone']
                ];
                $totalCanaux = array_sum(array_column($byCanal, 'count'));
                foreach ($byCanal as $canal):
                    $config = $canalConfig[$canal['canal']] ?? ['label' => ucfirst($canal['canal']), 'color' => 'gray', 'icon' => 'fa-comment'];
                    $percent = $totalCanaux > 0 ? ($canal['count'] / $totalCanaux * 100) : 0;
                ?>
                <div class="flex items-center p-3 bg-gray-50 rounded-lg">
                    <div class="w-10 h-10 bg-<?= $config['color'] ?>-100 rounded-lg flex items-center justify-center mr-4">
                        <i class="<?= strpos($config['icon'], 'fab') !== false ? $config['icon'] : 'fas ' . $config['icon'] ?> text-<?= $config['color'] ?>-600"></i>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <span class="font-medium text-gray-800"><?= $config['label'] ?></span>
                            <span class="text-gray-600"><?= $canal['count'] ?></span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                            <div class="bg-<?= $config['color'] ?>-500 h-1.5 rounded-full" style="width: <?= $percent ?>%"></div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>
</div>

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