<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ASGARD - Dashboard Siswa</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
        .card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02); }
    </style>
</head>
<body class="flex flex-col min-h-screen">

    <nav class="bg-white border-b border-slate-100 px-6 py-4 mb-10">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <div class="flex items-center gap-4">
                <div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center text-emerald-600 font-bold">AS</div>
                <span class="font-black text-xl tracking-tighter text-emerald-950 uppercase italic">ASGARD.</span>
            </div>
            <div class="flex items-center gap-8">
                <div class="hidden md:flex gap-8 text-[11px] font-bold uppercase tracking-widest text-slate-400">
                    <a href="{{ route('student.profile') }}" class="text-emerald-600">Beranda</a>
                    <a href="{{ route('student.prediction') }}" class="hover:text-emerald-600 transition">Cek Rekomendasi</a>
                    <a href="#" class="hover:text-emerald-600 transition">Kontak BK</a>
                </div>
                <div class="flex items-center gap-3">
                    <div class="flex items-center gap-3 bg-emerald-50 px-4 py-2 rounded-full border border-emerald-100">
                        <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
                        <span class="text-[10px] font-bold text-emerald-700 uppercase">Galang Sefian</span>
                    </div>
                    <button onclick="handleLogout()" class="bg-red-50 hover:bg-red-100 text-red-600 border border-red-100 px-4 py-2 rounded-full transition-all">
                        <span class="text-[10px] font-bold uppercase tracking-widest">Logout</span>
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="max-w-7xl mx-auto px-6 flex-grow mb-20">
        <header class="mb-10">
            <h1 class="text-4xl font-extrabold text-slate-900 tracking-tight">Halo, Siswa SMAPA! 👋</h1>
            <p class="text-slate-500 font-medium mt-2">Senang melihat Anda kembali! Mari terus pantau masa depan Anda. ✨</p>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
            <div class="bg-white p-8 rounded-3xl card-shadow border border-slate-100">
                <h4 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Total Aktivitas Rekomendasi</h4>
                <p id="stat-total" class="text-6xl font-black text-emerald-600 tracking-tighter">0</p>
                <p class="text-[11px] text-slate-400 mt-6 font-medium leading-relaxed">Jumlah total diagnosis & prediksi jurusan kuliah kamu.</p>
            </div>
            <div class="bg-white p-8 rounded-3xl card-shadow border border-slate-100">
                <h4 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Rekomendasi Terakhir</h4>
                <p id="stat-last" class="text-sm font-bold text-slate-700 italic leading-relaxed">Memuat data...</p>
            </div>
            <div class="bg-white p-8 rounded-3xl card-shadow border border-slate-100">
                <h4 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Aktivitas Terbaru</h4>
                <div id="activity-list" class="space-y-3 py-2">
                    <p class="text-xs text-slate-300 italic">Belum ada aktivitas baru.</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-10 rounded-[2.5rem] card-shadow border border-slate-100 mb-10">
            <h3 class="text-lg font-black text-emerald-950 mb-8 uppercase italic tracking-wider">Akses Cepat</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <a href="{{ route('student.prediction') }}" class="flex items-center p-6 bg-blue-50 rounded-2xl border border-blue-100 hover:scale-[1.02] transition-all">
                    <div class="w-12 h-12 bg-blue-500 text-white rounded-xl flex items-center justify-center text-xl mr-5 shadow-lg shadow-blue-200">🤖</div>
                    <div>
                        <h4 class="font-black text-blue-900 text-sm italic">Mulai Analisis Jurusan Baru</h4>
                        <p class="text-[10px] text-blue-600 font-bold mt-1">Dapatkan Rekomendasi AI Sekarang.</p>
                    </div>
                </a>
                <a href="#" class="flex items-center p-6 bg-yellow-50 rounded-2xl border border-yellow-100 hover:scale-[1.02] transition-all">
                    <div class="w-12 h-12 bg-yellow-400 text-white rounded-xl flex items-center justify-center text-xl mr-5 shadow-lg shadow-yellow-200">📊</div>
                    <div>
                        <h4 class="font-black text-yellow-900 text-sm italic">Lengkapi Data Rapor</h4>
                        <p class="text-[10px] text-yellow-700 font-bold mt-1">Input variabel nilai semester 1-5.</p>
                    </div>
                </a>
                <a href="#" class="flex items-center p-6 bg-purple-50 rounded-2xl border border-purple-100 hover:scale-[1.02] transition-all">
                    <div class="w-12 h-12 bg-purple-500 text-white rounded-xl flex items-center justify-center text-xl mr-5 shadow-lg shadow-purple-200">🎓</div>
                    <div>
                        <h4 class="font-black text-purple-900 text-sm italic">Riwayat Rekomendasi</h4>
                        <p class="text-[10px] text-purple-600 font-bold mt-1">Pantau progres pilihan kuliah.</p>
                    </div>
                </a>
            </div>
        </div>

        <div class="bg-white p-10 rounded-[2.5rem] card-shadow border border-slate-100 mb-10">
            <h3 class="text-lg font-black text-emerald-950 mb-2 uppercase italic tracking-wider">Tren Prestasi Akademik Anda</h3>
            <p class="text-xs text-slate-400 font-medium italic mb-10">Grafik ini menunjukkan perkembangan rata-rata nilai Anda seiring waktu.</p>
            <div id="chart-container" class="h-80 w-full">
                <canvas id="trendChart"></canvas>
            </div>
            <p id="chart-placeholder" class="hidden text-center text-slate-400 italic text-sm py-20">Input minimal 2 sesi rekomendasi untuk melihat tren di sini.</p>
        </div>

        <div class="bg-indigo-600 p-12 rounded-[3.5rem] text-white relative overflow-hidden shadow-2xl mb-16">
            <div class="relative z-10">
                <div class="flex items-center gap-3 mb-8">
                    <span class="text-3xl">🎓</span>
                    <h2 class="text-3xl font-black italic tracking-tighter uppercase leading-none">Masa Depan Anda Prioritas Kami</h2>
                </div>
                <p class="text-indigo-100 max-w-3xl mb-12 leading-relaxed font-medium">
                    Tahukah kamu? <span class="font-black text-white italic underline">87% mahasiswa merasa salah jurusan</span>. ASGARD hadir membantu siswa SMAN 4 Jember menghindari risiko tersebut melalui analisis profil yang objektif menggunakan Random Forest.
                </p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="bg-white/10 backdrop-blur-md p-8 rounded-[2rem] border border-white/20">
                        <h4 class="font-black text-sm uppercase italic mb-3 tracking-widest">Anti-Blacklist SNBP</h4>
                        <p class="text-xs text-indigo-100 leading-relaxed italic">Hindari risiko sekolah masuk blacklist perguruan tinggi karena pembatalan kelulusan.</p>
                    </div>
                    <div class="bg-white/10 backdrop-blur-md p-8 rounded-[2rem] border border-white/20">
                        <h4 class="font-black text-sm uppercase italic mb-3 tracking-widest">Prospek Karir AI</h4>
                        <p class="text-xs text-indigo-100 leading-relaxed italic">Dapatkan informasi jalur karir yang dapat ditempuh sesuai rekomendasi jurusan.</p>
                    </div>
                </div>
            </div>
            <p class="mt-12 text-center text-[10px] font-black uppercase tracking-[0.2em] italic opacity-80 border-t border-white/10 pt-8 text-white">Penting untuk berkonsultasi dengan Guru BK setelah mendapatkan hasil rekomendasi AI ❤️</p>
        </div>
    </div>

    <footer class="bg-[#062C22] text-white py-16 px-6">
        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
            <div class="space-y-6">
                <div class="flex items-center gap-4">
                    <span class="font-black text-2xl tracking-tighter uppercase italic">ASGARD.</span>
                </div>
                <p class="text-slate-300 text-sm leading-relaxed max-w-xs">
                    Sistem pakar rekomendasi jurusan kuliah SMAN 4 Jember berbasis data-driven.
                </p>
            </div>
            <div>
                <h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6">Informasi</h5>
                <ul class="space-y-4 text-sm text-slate-300">
                    <li><a href="{{ route('panduan') }}" class="hover:text-white transition">Panduan Sistem</a></li>
                    <li><a href="#" class="hover:text-white transition">Kebijakan Privasi</a></li>
                </ul>
            </div>
            <div>
                <h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6">Sekolah</h5>
                <ul class="space-y-4 text-sm text-slate-300">
                    <li>SMAN 4 Jember</li>
                    <li>Jl. Wolter Monginsidi No.24</li>
                    <li>Jember, Jawa Timur</li>
                </ul>
            </div>
        </div>
        <div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/10 text-center">
            <p class="text-[10px] font-medium uppercase tracking-[0.5em] text-slate-400">© 2026 GALANG SEFIAN ADJI - POLITEKNIK NEGERI JEMBER</p>
        </div>
    </footer>

    <script>
        async function handleLogout() {
            const token = localStorage.getItem('access_token');
            if (token) {
                try {
                    await fetch('/api/logout', {
                        method: 'POST',
                        headers: {
                            'Authorization': `Bearer ${token}`,
                            'Accept': 'application/json'
                        }
                    });
                } catch (error) {
                    console.error('Logout error:', error);
                }
                localStorage.removeItem('access_token');
            }
            window.location.href = '/';
        }

        document.addEventListener('DOMContentLoaded', async function() {
            const token = localStorage.getItem('access_token');
            if (!token) {
                window.location.href = '/login';
                return;
            }

            try {
                const response = await fetch('/api/student/dashboard-stats', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                });

                const result = await response.json();
                if (result.success) {
                    const data = result.data;

                    // Update Statistik
                    document.getElementById('stat-total').innerText = data.total_aktivitas;
                    document.getElementById('stat-last').innerText = data.rekomendasi_terakhir;

                    // Update List Aktivitas
                    const listContainer = document.getElementById('activity-list');
                    if (data.aktivitas_terbaru.length > 0) {
                        listContainer.innerHTML = data.aktivitas_terbaru.map(act => `
                            <div class="flex items-center justify-between bg-slate-50 p-3 rounded-xl border border-slate-100">
                                <div class="flex items-center gap-3">
                                    <span class="text-lg">📋</span>
                                    <span class="text-[11px] font-bold text-slate-700 uppercase tracking-tight">${act.jurusan}</span>
                                </div>
                                <span class="text-[9px] font-black text-slate-400 uppercase italic">${act.tanggal}</span>
                            </div>
                        `).join('');
                    }

                    // Render Chart
                    const tren = data.tren_nilai;
                    if (tren.length >= 1) {
                        const ctx = document.getElementById('trendChart').getContext('2d');
                        new Chart(ctx, {
                            type: 'line',
                            data: {
                                labels: tren.map(t => t.label),
                                datasets: [{
                                    label: 'Rata-rata Nilai',
                                    data: tren.map(t => t.nilai),
                                    borderColor: '#10b981',
                                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                                    fill: true,
                                    tension: 0.4,
                                    pointRadius: 6,
                                    pointBackgroundColor: '#fff',
                                    pointBorderColor: '#10b981',
                                    pointBorderWidth: 3
                                }]
                            },
                            options: {
                                responsive: true,
                                maintainAspectRatio: false,
                                plugins: { legend: { display: false } },
                                scales: {
                                    y: { min: 0, max: 100, grid: { display: false } },
                                    x: { grid: { display: false } }
                                }
                            }
                        });
                    } else {
                        document.getElementById('trendChart').classList.add('hidden');
                        document.getElementById('chart-placeholder').classList.remove('hidden');
                    }
                }
            } catch (error) {
                console.error('Gagal memuat data dashboard:', error);
            }
        });
    </script>
</body>
</html>