@php
    /** @var \App\Models\Classroom $classroom */
    $classroom = $this->record;
    $snapshot = $this->getSnapshot();
    $roster = $this->getRoster();

    $fmtScore = fn ($v) => $v === null ? '—' : (string) $v;
    $fmtLastSeen = function ($dt) {
        if ($dt === null) return ['label' => 'Never', 'color' => '#C9302C'];
        $days = $dt->diffInDays(now());
        if ($days < 1) return ['label' => 'today', 'color' => '#16A34A'];
        if ($days < 3) return ['label' => $days.'d ago', 'color' => '#16A34A'];
        if ($days < 7) return ['label' => $days.'d ago', 'color' => '#CA8A04'];
        return ['label' => $days.'d ago', 'color' => '#C9302C'];
    };
@endphp

<x-filament-panels::page>
    {{-- Summary header --}}
    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem;">
        @php $stats = [
            ['label' => 'Enrolled', 'value' => $snapshot?->enrolled_count ?? count($roster), 'color' => '#960000'],
            ['label' => 'Active last 7d', 'value' => $snapshot?->active_students_7d ?? '—', 'color' => '#16A34A'],
            ['label' => 'Items last 7d', 'value' => $snapshot?->items_administered_7d ?? '—', 'color' => '#3BA9F4'],
            ['label' => 'Avg Vocabile', 'value' => $snapshot?->avg_vocabile_score ?? '—', 'color' => '#BF9237'],
        ]; @endphp
        @foreach ($stats as $s)
            <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; padding: 1rem; text-align: center;">
                <div style="font-size: 2rem; font-weight: 800; color: {{ $s['color'] }}; line-height: 1;">{{ $s['value'] }}</div>
                <div style="font-size: 0.75rem; color: #6B6B6B; text-transform: uppercase; margin-top: 0.4rem; letter-spacing: 0.1em;">{{ $s['label'] }}</div>
            </div>
        @endforeach
    </div>

    @if ($snapshot && $snapshot->avg_vocabile_score !== null)
        <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.5rem;">
            <div style="font-size: 0.8rem; color: #6B6B6B; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.3rem;">Distribution</div>
            <div style="font-size: 1rem;">
                25th pct: <strong style="color: #960000;">{{ $snapshot->score_p25 ?? '—' }}</strong>
                &nbsp;·&nbsp;
                Median: <strong style="color: #960000;">{{ $snapshot->score_p50 ?? '—' }}</strong>
                &nbsp;·&nbsp;
                75th pct: <strong style="color: #960000;">{{ $snapshot->score_p75 ?? '—' }}</strong>
            </div>
        </div>
    @endif

    {{-- Roster --}}
    <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; overflow: hidden;">
        <div style="padding: 0.75rem 1.25rem; border-bottom: 1px solid #E8DADA; font-weight: 700;">
            Roster ({{ count($roster) }})
        </div>

        @if (empty($roster))
            <div style="padding: 2.5rem; text-align: center; color: #6B6B6B;">
                No students enrolled yet. Share the QR code or class code <strong>{{ $classroom->join_code }}</strong>
                so students can join.
            </div>
        @else
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #F9F9F9; text-align: left; font-size: 0.78rem; text-transform: uppercase; color: #6B6B6B; letter-spacing: 0.08em;">
                        <th style="padding: 0.7rem 1.25rem;">Student</th>
                        <th style="padding: 0.7rem 1.25rem; text-align: right;">Vocabile</th>
                        <th style="padding: 0.7rem 1.25rem;">Band</th>
                        <th style="padding: 0.7rem 1.25rem;">Last seen</th>
                        <th style="padding: 0.7rem 1.25rem; text-align: right;">Sessions 7d</th>
                        <th style="padding: 0.7rem 1.25rem;"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($roster as $row)
                        @php $lastSeen = $fmtLastSeen($row['last_seen']); @endphp
                        <tr style="border-top: 1px solid #F0EAEA;">
                            <td style="padding: 0.7rem 1.25rem;">
                                <div style="font-weight: 600;">{{ $row['name'] }}</div>
                                <div style="font-size: 0.78rem; color: #6B6B6B;">{{ $row['email'] }}</div>
                            </td>
                            <td style="padding: 0.7rem 1.25rem; text-align: right; font-weight: 700; color: #BF9237; font-size: 1.05rem;">
                                {{ $fmtScore($row['vocabile_score']) }}
                            </td>
                            <td style="padding: 0.7rem 1.25rem;">
                                @if ($row['level_code'])
                                    <span style="background: #FBF9F4; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;">
                                        {{ $row['level_code'] }}
                                    </span>
                                @else
                                    <span style="color: #9CA3AF;">—</span>
                                @endif
                            </td>
                            <td style="padding: 0.7rem 1.25rem;">
                                <span style="color: {{ $lastSeen['color'] }}; font-weight: 600;">{{ $lastSeen['label'] }}</span>
                            </td>
                            <td style="padding: 0.7rem 1.25rem; text-align: right; color: #374151;">
                                {{ $row['sessions_7d'] }}
                            </td>
                            <td style="padding: 0.7rem 1.25rem;">
                                <a href="{{ route('filament.admin.resources.users.view', ['tenant' => $classroom->school->slug, 'record' => $row['user_id']]) }}"
                                   style="color: #960000; font-weight: 700; text-decoration: none; font-size: 0.85rem;">
                                    Open →
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</x-filament-panels::page>