<?php
$title = "Dashboard Utama";
require_once 'includes/header.php';

// Stats
$total_siswa = $pdo->query("SELECT COUNT(*) FROM siswa")->fetchColumn();
$total_gejala = $pdo->query("SELECT COUNT(*) FROM gejala")->fetchColumn();
$total_diagnosa = $pdo->query("SELECT COUNT(*) FROM diagnosa")->fetchColumn();
$total_history = $pdo->query("SELECT COUNT(*) FROM riwayat_diagnosa")->fetchColumn();

// Latest History
$stmt = $pdo->query("
    SELECT r.*, s.nama as siswa_nama, d.nama as diagnosa_nama 
    FROM riwayat_diagnosa r
    JOIN siswa s ON r.nis = s.nis
    JOIN diagnosa d ON r.id_diagnosa = d.id
    ORDER BY r.tanggal DESC LIMIT 5
");
$latest_history = $stmt->fetchAll();

// Chart Data (By Month/Year - simplified)
$chart_stmt = $pdo->query("
    SELECT DATE_FORMAT(tanggal, '%Y-%m') as bulan, COUNT(*) as jumlah 
    FROM riwayat_diagnosa 
    GROUP BY bulan 
    ORDER BY bulan ASC LIMIT 12
");
$chart_data = $chart_stmt->fetchAll();
$labels = array();
$counts = array();
foreach ($chart_data as $row) {
    $labels[] = $row['bulan'];
    $counts[] = $row['jumlah'];
}
?>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
    <div class="card p-6 border-l-4 border-primary">
        <p class="text-slate-500 text-sm font-semibold uppercase tracking-wider">Total Siswa</p>
        <h3 class="text-3xl font-extrabold text-slate-800 mt-2"><?= $total_siswa ?></h3>
    </div>
    <div class="card p-6 border-l-4 border-blue-500">
        <p class="text-slate-500 text-sm font-semibold uppercase tracking-wider">Data Gejala</p>
        <h3 class="text-3xl font-extrabold text-slate-800 mt-2"><?= $total_gejala ?></h3>
    </div>
    <div class="card p-6 border-l-4 border-accent">
        <p class="text-slate-500 text-sm font-semibold uppercase tracking-wider">Hasil Diagnosa</p>
        <h3 class="text-3xl font-extrabold text-slate-800 mt-2"><?= $total_history ?></h3>
    </div>
    <div class="card p-6 border-l-4 border-green-500">
        <p class="text-slate-500 text-sm font-semibold uppercase tracking-wider">Kategori Diagnosis</p>
        <h3 class="text-3xl font-extrabold text-slate-800 mt-2"><?= $total_diagnosa ?></h3>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <div class="lg:col-span-2 card p-8">
        <div class="flex justify-between items-center mb-8">
            <h3 class="text-lg font-bold text-slate-800">Trend Diagnosa Masuk</h3>
            <span class="text-xs font-medium px-3 py-1 bg-slate-100 text-slate-600 rounded-full">12 Bulan Terakhir</span>
        </div>
        <canvas id="trendingChart" height="120"></canvas>
    </div>

    <div class="card p-8">
        <h3 class="text-lg font-bold text-slate-800 mb-6">Diagnosa Terbaru</h3>
        <?php if (empty($latest_history)): ?>
            <p class="text-slate-500 text-sm italic">Belum ada data diagnosa.</p>
        <?php else: ?>
            <ul class="space-y-6">
                <?php foreach ($latest_history as $h): ?>
                    <li class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0">
                            <span class="text-xs font-bold"><?= substr($h['siswa_nama'], 0, 1) ?></span>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-bold text-slate-800 truncate"><?= $h['siswa_nama'] ?></p>
                            <p class="text-xs text-primary font-medium"><?= $h['diagnosa_nama'] ?> (<?= round($h['total_cf'] * 100, 2) ?>%)</p>
                            <p class="text-[10px] text-slate-400 mt-1"><?= date('d M Y, H:i', strtotime($h['tanggal'])) ?></p>
                        </div>
                    </li>
                <?php endforeach; ?>
            </ul>
            <a href="riwayat.php" class="block w-full text-center py-3 bg-slate-50 text-slate-600 text-xs font-bold rounded-xl mt-8 hover:bg-slate-100 transition-colors">Lihat Semua Riwayat</a>
        <?php endif; ?>
    </div>
</div>

<script>
const ctx = document.getElementById('trendingChart').getContext('2d');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: <?= json_encode($labels) ?>,
        datasets: [{
            label: 'Jumlah Diagnosa',
            data: <?= json_encode($counts) ?>,
            borderColor: '#5b18c8',
            backgroundColor: 'rgba(91, 24, 200, 0.05)',
            fill: true,
            tension: 0.4,
            borderWidth: 3,
            pointBackgroundColor: '#fff',
            pointBorderColor: '#5b18c8',
            pointBorderWidth: 2,
            pointRadius: 4
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: { borderDash: [2, 4] }
            },
            x: {
                grid: { display: false }
            }
        }
    }
});
</script>

<?php require_once 'includes/footer.php'; ?>
