@extends('layouts.admin')

@section('content')
<style>
.analytics-reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: analyticsFadeUp .55s ease forwards;
}

.analytics-delay-1 { animation-delay: .06s; }
.analytics-delay-2 { animation-delay: .14s; }
.analytics-delay-3 { animation-delay: .22s; }

.analytics-row {
    opacity: 0;
    transform: translateY(10px);
    animation: analyticsFadeUp .45s ease forwards;
}

@keyframes analyticsFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.analytics-insight-card,
.analytics-side-card,
.analytics-kpi-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)), rgba(8, 10, 34, 0.58);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.analytics-insight-card::before,
.analytics-side-card::before,
.analytics-kpi-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent 36%);
    pointer-events: none;
}

.analytics-summary-layout { display: grid; gap: 1rem; }

.analytics-summary-block {
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1.35rem;
    background: rgba(255,255,255,0.05);
}

.analytics-summary-grid { display: grid; gap: 0.85rem; }
.analytics-top-hidden { display: none; }

.analytics-leaderboard-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)), rgba(15, 23, 42, 0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}

.analytics-leaderboard-rank {
    width: 2rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.analytics-leaderboard-rank.is-gold { color: rgb(253 224 71); }
.analytics-leaderboard-rank.is-silver { color: rgb(209 213 219); }
.analytics-leaderboard-rank.is-bronze { color: rgb(253 186 116); }

.analytics-leaderboard-score { text-align: right; }

.analytics-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    padding-inline: 0.85rem;
}

.analytics-toggle-btn svg { transition: transform 0.2s ease; }
.analytics-toggle-btn.is-collapsed svg { transform: rotate(180deg); }
.analytics-summary-hidden { display: none; }

.analytics-kpi-strip { display: grid; gap: 0.85rem; }

/* Filter pill */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s;
    text-decoration: none;
}
.filter-pill:hover {
    background: rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.4);
    color: #67e8f9;
}
.filter-pill.is-active {
    background: linear-gradient(135deg, rgba(34,211,238,0.18), rgba(59,130,246,0.18));
    border-color: rgba(34, 211, 238, 0.5);
    color: #67e8f9;
    box-shadow: 0 4px 14px rgba(34,211,238,0.15);
}

.filter-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.65rem;
    font-weight: 700;
}

/* KPI mini cards */
.kpi-mini {
    padding: 1rem 1.1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(8px);
}
.kpi-mini-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #94a3b8;
}
.kpi-mini-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-top: 0.35rem;
    line-height: 1;
}
.kpi-mini-blue { border-color: rgba(59,130,246,0.25); background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(15,23,42,0.4)); }
.kpi-mini-cyan { border-color: rgba(34,211,238,0.25); background: linear-gradient(135deg, rgba(34,211,238,0.08), rgba(15,23,42,0.4)); }
.kpi-mini-green { border-color: rgba(34,197,94,0.25); background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(15,23,42,0.4)); }
.kpi-mini-purple { border-color: rgba(139,92,246,0.25); background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(15,23,42,0.4)); }

@media (min-width: 1280px) {
    .analytics-summary-layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .analytics-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .analytics-insight-card, .analytics-side-card, .analytics-summary-block, .analytics-kpi-card { min-width: 0; }
    .analytics-insight-card { padding: 1.25rem; }
    .analytics-kpi-strip { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .analytics-insight-card, .analytics-side-card { padding: 1rem; }
    .analytics-leaderboard-card {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        padding: 0.85rem 0.9rem !important;
        border-radius: 1rem;
    }
    .analytics-leaderboard-rank { width: 1.6rem; font-size: 0.95rem; flex-shrink: 0; }
    .analytics-leaderboard-card img { width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
    .analytics-leaderboard-name { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .analytics-leaderboard-subtext, .analytics-leaderboard-view { display: none !important; }
    .analytics-leaderboard-score { font-size: 0.98rem; text-align: right; flex-shrink: 0; }
    .kpi-mini-value { font-size: 1.25rem; }
}
</style>

{{-- ============ HEADER ============ --}}
<div class="flex flex-col gap-2 mb-6">
    <h1 class="text-2xl font-bold text-white">Analytics Dashboard</h1>
    <p class="text-sm text-slate-400">Deep insights across exam types, subjects, and student performance</p>
</div>

{{-- ============ FILTER: EXAM TYPE ============ --}}
@php
    $selectedExamType = request('exam_type', '');
    $examTypes = config('academix.exam_types', []);
@endphp

<div class="mb-6">
    <label class="mb-3 block text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Filter by Exam Type</label>
    <div class="flex flex-wrap items-center gap-2">
        <a href="{{ route('admin.analytics') }}"
           class="filter-pill {{ $selectedExamType === '' ? 'is-active' : '' }}">
            All Exams
        </a>
        @foreach($examTypes as $key => $label)
            <a href="{{ route('admin.analytics', ['exam_type' => $key]) }}"
               class="filter-pill {{ $selectedExamType === $key ? 'is-active' : '' }}">
                {{ $key }}
                @if(isset($examTypeCounts[$key]))
                    <span class="filter-pill-count">{{ $examTypeCounts[$key] }}</span>
                @endif
            </a>
        @endforeach
    </div>
</div>

{{-- ============ KPI STRIP ============ --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    <div class="kpi-mini kpi-mini-blue">
        <p class="kpi-mini-label">Total Exams</p>
        <p class="kpi-mini-value">{{ $totalExams ?? 0 }}</p>
    </div>
    <div class="kpi-mini kpi-mini-cyan">
        <p class="kpi-mini-label">Total Attempts</p>
        <p class="kpi-mini-value">{{ $totalAttempts ?? 0 }}</p>
    </div>
    <div class="kpi-mini kpi-mini-green">
        <p class="kpi-mini-label">Active Students</p>
        <p class="kpi-mini-value">{{ $totalStudents ?? 0 }}</p>
    </div>
    <div class="kpi-mini kpi-mini-purple">
        <p class="kpi-mini-label">Avg Score</p>
        <p class="kpi-mini-value">{{ number_format($averageScore ?? 0, 1) }}%</p>
    </div>
</div>

<div class="grid grid-cols-1 gap-6">

    {{-- ============ TOP CHARTS ROW ============ --}}
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

        {{-- Exam Type Performance --}}
        <div class="analytics-side-card p-5 analytics-reveal analytics-delay-1">
            <h2 class="text-xl font-semibold mb-1 text-white">Exam Type Performance</h2>
            <p class="mb-4 text-xs uppercase tracking-[0.18em] text-slate-400">
                Average score per exam type
            </p>
            <canvas id="examPerformanceChart" height="150"></canvas>
        </div>

        {{-- Daily Attempts --}}
        <div class="analytics-side-card p-5 analytics-reveal analytics-delay-2">
            <h2 class="text-xl font-semibold mb-1 text-white">Daily Attempts</h2>
            <p class="mb-4 text-xs uppercase tracking-[0.18em] text-slate-400">
                Last 7 days · Click on a point to see details
            </p>
            <canvas id="dailyAttemptsChart" height="150"></canvas>
        </div>
    </div>

    {{-- ============ LEADERBOARD ============ --}}
    <section class="analytics-insight-card p-5 analytics-reveal analytics-delay-3">
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-amber-100/80">Leaderboard</p>
                <h2 class="mt-2 text-2xl font-semibold text-white">Top Performing Students</h2>
                <p class="mt-2 text-sm text-slate-400">
                    Ranked by average score across all attempted tests
                </p>
            </div>
            <button type="button" id="toggleTopStudentsBtn"
                    class="admin-action-btn bg-slate-700/80 text-white analytics-toggle-btn"
                    aria-expanded="true">
                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M5 12.5L10 7.5L15 12.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
            </button>
        </div>

        <div id="topStudentsBody" class="mt-6 space-y-4">
            @forelse ($topStudents as $index => $row)
                <div class="analytics-leaderboard-card px-4 py-4 analytics-row" style="animation-delay: {{ 0.06 + ($loop->index * 0.04) }}s;">
                    <div class="flex items-center gap-3">
                        <div class="analytics-leaderboard-rank {{ $loop->first ? 'is-gold' : ($loop->iteration === 2 ? 'is-silver' : ($loop->iteration === 3 ? 'is-bronze' : '')) }}">
                            #{{ $index + 1 }}
                        </div>
                        <img src="{{ $row->user->profilePhotoUrl() ?? asset('images/default-male.png') }}"
                             alt="{{ $row->user->name }}"
                             class="h-10 w-10 rounded-full object-cover border border-white/20">
                        <div>
                            <p class="analytics-leaderboard-name font-semibold text-white">{{ $row->user->name }}</p>
                            <p class="analytics-leaderboard-subtext text-sm text-slate-400">
                                {{ $row->attempts ?? 0 }} test{{ ($row->attempts ?? 0) > 1 ? 's' : '' }} attempted
                            </p>
                        </div>
                    </div>

                    <div class="flex items-center gap-3">
                        <div class="analytics-leaderboard-score">
                            <p class="text-lg font-bold text-emerald-300">{{ number_format($row->avg_percentage, 2) }}%</p>
                        </div>
                        <a href="{{ route('admin.students.show', $row->user->id) }}"
                           class="analytics-leaderboard-view admin-action-btn bg-indigo-600 text-white hover:bg-indigo-700 transition">
                            View
                        </a>
                    </div>
                </div>
            @empty
                <div class="text-center py-8 text-slate-400 text-sm">
                    No student data yet.
                </div>
            @endforelse
        </div>
    </section>

    {{-- ============ AI INSIGHTS ============ --}}
    <section class="analytics-insight-card p-6 analytics-reveal analytics-delay-1">
        <div class="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-amber-100/80">AI Summary</p>
                <h2 class="mt-2 max-w-4xl text-2xl font-semibold leading-tight text-white">
                    {{ $aiInsights['headline'] ?? 'AI Insights' }}
                </h2>
                <p class="mt-3 max-w-5xl text-sm leading-6 text-slate-300">
                    {{ $aiInsights['summary'] ?? 'Analytics insights will appear here once enough exam data is available.' }}
                </p>
            </div>
            <div class="flex items-center gap-2">
                <div class="rounded-2xl border border-cyan-300/20 bg-cyan-400/10 px-4 py-3 text-sm text-cyan-100 lg:max-w-xs">
                    Data-backed guidance for exam planning
                </div>
                <button type="button" id="toggleAnalyticsSummaryBtn"
                        class="admin-action-btn bg-slate-700/80 text-white"
                        aria-expanded="true">
                    <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M5 12.5L10 7.5L15 12.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/></svg>
                </button>
            </div>
        </div>

        <div id="analyticsSummaryBody" class="mt-6 analytics-summary-layout">
            <div class="analytics-kpi-strip">
                <div class="analytics-kpi-card px-4 py-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Key Focus</p>
                    <p class="mt-2 text-sm font-semibold leading-6 text-white">
                        {{ collect($aiInsights['insights'] ?? [])->first() ?? 'Awaiting stronger patterns from exam activity.' }}
                    </p>
                </div>
                <div class="analytics-kpi-card px-4 py-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Priority Action</p>
                    <p class="mt-2 text-sm font-semibold leading-6 text-emerald-100">
                        {{ collect($aiInsights['actions'] ?? [])->first() ?? 'No urgent intervention suggested yet.' }}
                    </p>
                </div>
                <div class="analytics-kpi-card px-4 py-4">
                    <p class="text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">Signal Strength</p>
                    <p class="mt-2 text-sm font-semibold leading-6 text-cyan-100">
                        {{ count($aiInsights['insights'] ?? []) ? 'Focused summary from current trends.' : 'More exam data will sharpen future recommendations.' }}
                    </p>
                </div>
            </div>

            <div class="analytics-side-card p-5">
                <h3 class="text-lg font-semibold text-white">Top Findings</h3>
                <div class="mt-4 analytics-summary-grid">
                    @forelse(collect($aiInsights['insights'] ?? [])->take(3) as $insight)
                        <div class="analytics-summary-block px-4 py-3 text-sm leading-6 text-slate-200">
                            {{ $insight }}
                        </div>
                    @empty
                        <p class="text-sm text-slate-400">No findings yet.</p>
                    @endforelse
                </div>
            </div>

            <div class="analytics-side-card p-5">
                <h3 class="text-lg font-semibold text-white">Priority Actions</h3>
                <div class="mt-4 space-y-3">
                    @forelse(collect($aiInsights['actions'] ?? [])->take(3) as $action)
                        <div class="rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-3 text-sm leading-6 text-emerald-100">
                            {{ $action }}
                        </div>
                    @empty
                        <p class="text-sm text-slate-400">No actions yet.</p>
                    @endforelse
                </div>
            </div>
        </div>
    </section>

    {{-- ============ WEAK TOPICS + HARDEST QUESTIONS ============ --}}
    <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
        <section class="analytics-side-card p-5 analytics-reveal analytics-delay-2">
            <div>
                <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Weak Topic Detection</p>
                <h2 class="mt-2 text-2xl font-semibold text-white">Lowest Accuracy Topics</h2>
            </div>
            <div class="mt-4">
                <canvas id="weakTopicsChart" height="200"></canvas>
            </div>
        </section>

        <section class="analytics-side-card p-5 analytics-reveal analytics-delay-3">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-amber-100/80">Hardest Questions</p>
            <h2 class="mt-2 text-2xl font-semibold text-white">Most Missed Questions</h2>

            <div class="mt-5 space-y-3">
                @forelse($hardestQuestions as $item)
                    <article class="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-4">
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <p class="text-sm font-semibold text-white">{{ $item->question_text }}</p>
                                <p class="mt-2 text-xs uppercase tracking-[0.18em] text-slate-400">
                                    {{ $item->exam_title }} • {{ $item->topic ?? 'No topic' }}
                                </p>
                            </div>
                            <div class="rounded-full border border-rose-300/25 bg-rose-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.16em] text-rose-100">
                                {{ number_format($item->wrong_rate, 2) }}% wrong
                            </div>
                        </div>
                        <p class="mt-3 text-sm text-slate-300">{{ $item->attempts }} student attempts recorded</p>
                    </article>
                @empty
                    <div class="rounded-2xl border border-dashed border-white/12 bg-white/[0.03] px-5 py-6 text-sm text-slate-300">
                        Hardest-question analytics will appear once students complete more exams.
                    </div>
                @endforelse
            </div>
        </section>
    </div>
</div>

{{-- ============ DAILY ATTEMPTS MODAL ============ --}}
<div id="dailyAttemptsModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4">
    <div class="w-full max-w-2xl bg-slate-900/90 border border-white/20 rounded-xl shadow-2xl">
        <div class="flex items-center justify-between p-4 border-b border-white/15">
            <h3 id="dailyAttemptsModalTitle" class="text-lg font-semibold text-white">Daily Attempts</h3>
            <button id="dailyAttemptsModalClose" type="button" class="text-gray-300 hover:text-white text-xl leading-none">&times;</button>
        </div>
        <div id="dailyAttemptsModalBody" class="max-h-[65vh] overflow-y-auto p-4 space-y-3"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
    const examLabels = {!! json_encode($examLabels ?? []) !!};
    const examScores = {!! json_encode($examScores ?? []) !!};
    const examBaseColor = 'rgba(34, 211, 238, 0.85)';
    const examDimColor = 'rgba(34, 211, 238, 0.18)';
    const examFocusBorder = 'rgba(255, 255, 255, 0.9)';

    function applyExamBarFocus(chart, focusedIndex) {
        const total = chart.data.labels.length;
        const bg = [], border = [], bw = [];
        for (let i = 0; i < total; i++) {
            const isFocused = focusedIndex === null || i === focusedIndex;
            bg.push(isFocused ? examBaseColor : examDimColor);
            border.push(isFocused ? examFocusBorder : 'rgba(255,255,255,0.12)');
            bw.push(isFocused ? 1.4 : 0.6);
        }
        chart.data.datasets[0].backgroundColor = bg;
        chart.data.datasets[0].borderColor = border;
        chart.data.datasets[0].borderWidth = bw;
        chart.update('none');
    }

    let examChart, dailyAttemptsChart, weakTopicsChart, examChartRevealTimer;

    const dailyLabels = {!! json_encode($dailyLabels ?? []) !!};
    const dailyCounts = {!! json_encode($dailyCounts ?? []) !!};
    const dailyAttemptDetails = @json($dailyAttemptDetails->toArray() ?? []);
    const weakTopicLabels = @json(collect($weakTopicsData ?? [])->pluck('topic'));
    const weakTopicAccuracy = @json(collect($weakTopicsData ?? [])->pluck('accuracy'));

    const modal = document.getElementById('dailyAttemptsModal');
    const modalBody = document.getElementById('dailyAttemptsModalBody');
    const modalTitle = document.getElementById('dailyAttemptsModalTitle');
    const closeModalBtn = document.getElementById('dailyAttemptsModalClose');
    const defaultStudentPhoto = @json(asset('images/default-male.png'));

    function escapeHtml(value) {
        return String(value ?? '')
            .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
            .replaceAll('"', '&quot;').replaceAll("'", '&#039;');
    }

    function openDailyAttemptsModal(day) {
        const attempts = Array.isArray(dailyAttemptDetails?.[day])
            ? dailyAttemptDetails[day]
            : Object.values(dailyAttemptDetails?.[day] || {});
        modalTitle.textContent = `Attempts on ${day}`;

        if (!attempts.length) {
            modalBody.innerHTML = '<p class="text-gray-300">No attempts found for this day.</p>';
        } else {
            modalBody.innerHTML = attempts.map((item) => {
                const studentName = escapeHtml(item?.student_name || 'Unknown');
                const studentReg = escapeHtml(item?.student_reg || 'N/A');
                const examTitle = escapeHtml(item?.exam_title || 'Exam');
                const examType = escapeHtml(item?.exam_type || 'N/A');
                const status = escapeHtml(item?.status || 'Unknown');
                const time = escapeHtml(item?.time || 'Time unavailable');
                const percentage = Number(item?.percentage ?? 0).toFixed(2);
                const studentPhoto = escapeHtml(item?.student_photo || defaultStudentPhoto);

                return `
                <div class="rounded-lg border border-white/15 bg-white/5 p-3">
                    <div class="flex items-start gap-3">
                        <img src="${studentPhoto}" alt="${studentName}" class="w-10 h-10 rounded-full object-cover border border-white/20" />
                        <div class="flex-1">
                            <div class="flex items-center justify-between gap-2">
                                <p class="text-white font-semibold">${studentName}</p>
                                <span class="text-xs px-2 py-1 rounded ${status === 'Pass' ? 'bg-green-600/80' : 'bg-red-600/80'} text-white">${status}</span>
                            </div>
                            <p class="text-xs text-gray-300">Reg No: ${studentReg}</p>
                            <p class="text-sm text-cyan-300 mt-1">${examTitle} <span class="text-xs text-slate-400">(${examType})</span></p>
                            <div class="flex items-center justify-between mt-1 text-xs text-gray-300">
                                <span>${time}</span>
                                <span>${percentage}%</span>
                            </div>
                        </div>
                    </div>
                </div>
            `;
            }).join('');
        }

        modal.classList.remove('hidden');
        modal.classList.add('flex');
    }

    function closeDailyAttemptsModal() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
    }

    closeModalBtn.addEventListener('click', closeDailyAttemptsModal);
    modal.addEventListener('click', (e) => { if (e.target === modal) closeDailyAttemptsModal(); });

    const analyticsSummaryBody = document.getElementById('analyticsSummaryBody');
    const toggleAnalyticsSummaryBtn = document.getElementById('toggleAnalyticsSummaryBtn');
    const topStudentsBody = document.getElementById('topStudentsBody');
    const toggleTopStudentsBtn = document.getElementById('toggleTopStudentsBtn');
    let isAnalyticsSummaryCollapsed = false;
    let isTopStudentsCollapsed = false;

    function syncAnalyticsSummaryVisibility() {
        analyticsSummaryBody?.classList.toggle('analytics-summary-hidden', isAnalyticsSummaryCollapsed);
        if (toggleAnalyticsSummaryBtn) {
            toggleAnalyticsSummaryBtn.setAttribute('aria-expanded', String(!isAnalyticsSummaryCollapsed));
            toggleAnalyticsSummaryBtn.querySelector('svg')?.classList.toggle('rotate-180', isAnalyticsSummaryCollapsed);
        }
    }

    function syncTopStudentsVisibility() {
        topStudentsBody?.classList.toggle('analytics-top-hidden', isTopStudentsCollapsed);
        if (toggleTopStudentsBtn) {
            toggleTopStudentsBtn.classList.toggle('is-collapsed', isTopStudentsCollapsed);
            toggleTopStudentsBtn.setAttribute('aria-expanded', String(!isTopStudentsCollapsed));
        }
    }

    function renderAnalyticsCharts() {
        window.clearTimeout(examChartRevealTimer);
        examChart?.destroy();
        dailyAttemptsChart?.destroy();
        weakTopicsChart?.destroy();

        // Exam Type Performance chart
        const examCanvas = document.getElementById('examPerformanceChart');
        if (examCanvas && examLabels.length) {
            examChart = new Chart(examCanvas, {
                type: 'bar',
                data: {
                    labels: examLabels,
                    datasets: [{
                        label: 'Average %',
                        data: examScores,
                        backgroundColor: examBaseColor,
                        borderRadius: 8,
                        borderSkipped: false,
                    }]
                },
                options: {
                    animation: { duration: 1400, easing: 'easeOutQuart' },
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, max: 100, ticks: { color: '#94a3b8', callback: v => v + '%' }, grid: { color: 'rgba(148,163,184,0.1)' } },
                        x: { ticks: { color: '#cbd5e1' }, grid: { display: false } }
                    },
                    interaction: { mode: 'nearest', intersect: true },
                    onHover: (event, activeElements, chart) => {
                        const focusedIndex = activeElements.length ? activeElements[0].index : null;
                        applyExamBarFocus(chart, focusedIndex);
                    }
                }
            });
            applyExamBarFocus(examChart, null);
        }

        // Daily Attempts chart
        const dailyCanvas = document.getElementById('dailyAttemptsChart');
        if (dailyCanvas && dailyLabels.length) {
            dailyAttemptsChart = new Chart(dailyCanvas, {
                type: 'line',
                data: {
                    labels: dailyLabels,
                    datasets: [{
                        label: 'Attempts',
                        data: dailyCounts,
                        borderColor: '#22c55e',
                        backgroundColor: 'rgba(34, 197, 94, 0.16)',
                        pointBackgroundColor: '#22c55e',
                        pointBorderColor: '#dcfce7',
                        pointBorderWidth: 1.5,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    animation: { duration: 1400, easing: 'easeOutQuart' },
                    plugins: { legend: { display: false } },
                    scales: {
                        y: { beginAtZero: true, ticks: { color: '#94a3b8', precision: 0 }, grid: { color: 'rgba(148,163,184,0.1)' } },
                        x: { ticks: { color: '#cbd5e1' }, grid: { display: false } }
                    },
                    onClick: (event, elements, chart) => {
                        if (!elements.length) return;
                        const index = elements[0].index;
                        const day = chart.data.labels[index];
                        openDailyAttemptsModal(day);
                    }
                }
            });
        }

        // Weak Topics chart
        const weakCanvas = document.getElementById('weakTopicsChart');
        if (weakCanvas && weakTopicLabels.length) {
            weakTopicsChart = new Chart(weakCanvas, {
                type: 'bar',
                data: {
                    labels: weakTopicLabels,
                    datasets: [{
                        label: 'Accuracy %',
                        data: weakTopicAccuracy,
                        backgroundColor: [
                            'rgba(248, 113, 113, 0.82)',
                            'rgba(251, 146, 60, 0.82)',
                            'rgba(250, 204, 21, 0.82)',
                            'rgba(34, 197, 94, 0.82)',
                            'rgba(59, 130, 246, 0.82)',
                            'rgba(14, 165, 233, 0.82)'
                        ],
                        borderRadius: 10,
                        borderSkipped: false
                    }]
                },
                options: {
                    indexAxis: 'y',
                    animation: { duration: 1200, easing: 'easeOutQuart' },
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { beginAtZero: true, suggestedMax: 100, ticks: { color: '#94a3b8', callback: v => v + '%' }, grid: { color: 'rgba(148,163,184,0.1)' } },
                        y: { ticks: { color: '#cbd5e1' }, grid: { display: false } }
                    }
                }
            });
        }
    }

    toggleAnalyticsSummaryBtn?.addEventListener('click', () => {
        isAnalyticsSummaryCollapsed = !isAnalyticsSummaryCollapsed;
        syncAnalyticsSummaryVisibility();
    });

    toggleTopStudentsBtn?.addEventListener('click', () => {
        isTopStudentsCollapsed = !isTopStudentsCollapsed;
        syncTopStudentsVisibility();
    });

    syncAnalyticsSummaryVisibility();
    syncTopStudentsVisibility();
    renderAnalyticsCharts();
    window.addEventListener('pageshow', renderAnalyticsCharts);
</script>

@endsection