@php
    /** @var \App\Models\User $user */
    $user = $this->record;
    $score = $this->getCurrentScore();
    $trajectory = $this->getTrajectory();
    $byPos = $this->getStrengthsByPos();
    $bySkill = $this->getStrengthsBySkill();
    $byBloom = $this->getStrengthsByBloom();
    $mastered = $this->getWordsMastered();
    $struggled = $this->getWordsStruggled();
    $eng = $this->getEngagement();
    $classes = $this->getClassrooms();

    // pretty colour ramp for success-rate bars: red → amber → green
    $pctColor = function ($pct) {
        if ($pct === null) return '#9CA3AF';
        if ($pct >= 80) return '#16A34A';
        if ($pct >= 60) return '#84CC16';
        if ($pct >= 40) return '#CA8A04';
        return '#C9302C';
    };
@endphp

<x-filament-panels::page>
    {{-- Header strip --}}
    <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; padding: 1.5rem; margin-bottom: 1.25rem; display: flex; gap: 1.5rem; align-items: center;">
        <div style="width: 64px; height: 64px; border-radius: 50%; background: #D0ACAC33; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #960000;">
            {{ strtoupper(substr($user->name ?? '?', 0, 1)) }}
        </div>
        <div style="flex: 1;">
            <div style="font-size: 1.4rem; font-weight: 800;">{{ $user->name }}</div>
            <div style="color: #6B6B6B;">{{ $user->email ?? $user->phone }}</div>
            @if (count($classes) > 0)
                <div style="margin-top: 0.4rem; font-size: 0.8rem; color: #6B6B6B;">
                    @foreach ($classes as $c)
                        <span style="background: #FBF9F4; padding: 0.15rem 0.6rem; border-radius: 999px; margin-right: 0.4rem;">
                            {{ $c['name'] }} <strong style="color: #960000;">·</strong> {{ strtoupper($c['role']) }}
                        </span>
                    @endforeach
                </div>
            @endif
        </div>
        <div style="text-align: right;">
            <div style="font-size: 2.2rem; font-weight: 900; color: #BF9237; line-height: 1;">{{ $score?->vocabile_score ?? '—' }}</div>
            <div style="font-size: 0.78rem; color: #6B6B6B; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.3rem;">Vocabile {{ $score?->level_code ? '· '.$score->level_code : '' }}</div>
        </div>
    </div>

    {{-- Engagement strip --}}
    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem;">
        @php $stats = [
            ['label' => 'Sessions (7d)',  'value' => $eng['sessions_7d']],
            ['label' => 'Sessions (30d)', 'value' => $eng['sessions_30d']],
            ['label' => 'Kudos (7d)',     'value' => '+'.$eng['kudos_7d']],
            ['label' => 'Lives',          'value' => $eng['is_unlimited'] ? '∞' : $eng['current_lives']],
        ]; @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: 1.7rem; font-weight: 800; color: #960000;">{{ $s['value'] }}</div>
                <div style="font-size: 0.75rem; color: #6B6B6B; text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.4rem;">{{ $s['label'] }}</div>
            </div>
        @endforeach
    </div>

    {{-- Trajectory --}}
    <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; padding: 1.25rem; margin-bottom: 1.5rem;">
        <div style="font-size: 0.85rem; color: #6B6B6B; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem;">Vocabile Trajectory</div>
        @if (empty($trajectory))
            <div style="color: #6B6B6B; font-style: italic;">No completed assessments yet.</div>
        @else
            <div style="display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.4rem 0; align-items: flex-end; min-height: 90px;">
                @foreach ($trajectory as $t)
                    @php
                        $h = $t['score'] !== null ? min(80, max(8, ($t['score'] / 1500) * 80)) : 8;
                    @endphp
                    <div style="display: flex; flex-direction: column; align-items: center; min-width: 44px;">
                        <div style="font-size: 0.7rem; font-weight: 700; color: #960000;">{{ $t['score'] ?? '—' }}</div>
                        <div style="width: 28px; height: {{ $h }}px; background: #BF9237; border-radius: 4px 4px 0 0; margin: 0.3rem 0;"></div>
                        <div style="font-size: 0.65rem; color: #6B6B6B;">{{ $t['at']->format('M d') }}</div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Strengths / weaknesses --}}
    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem;">
        @foreach ([
            ['title' => 'By Part of Speech', 'rows' => $byPos],
            ['title' => 'By Skill',          'rows' => $bySkill],
            ['title' => 'By Bloom level',    'rows' => $byBloom],
        ] as $panel)
            <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; padding: 1rem;">
                <div style="font-size: 0.8rem; color: #6B6B6B; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.7rem;">{{ $panel['title'] }}</div>
                @if (empty($panel['rows']))
                    <div style="color: #9CA3AF; font-size: 0.85rem; font-style: italic;">No data yet</div>
                @else
                    @foreach ($panel['rows'] as $r)
                        <div style="margin-bottom: 0.5rem;">
                            <div style="display: flex; justify-content: space-between; font-size: 0.8rem;">
                                <span>{{ $r['name'] }}</span>
                                <span style="color: {{ $pctColor($r['pct']) }}; font-weight: 700;">{{ $r['pct'] }}%</span>
                            </div>
                            <div style="background: #F0EAEA; height: 6px; border-radius: 3px; margin-top: 3px;">
                                <div style="background: {{ $pctColor($r['pct']) }}; height: 100%; width: {{ $r['pct'] ?? 0 }}%; border-radius: 3px;"></div>
                            </div>
                            <div style="font-size: 0.65rem; color: #9CA3AF; margin-top: 2px;">{{ $r['attempts'] }} attempts</div>
                        </div>
                    @endforeach
                @endif
            </div>
        @endforeach
    </div>

    {{-- Words mastered / struggled --}}
    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">
        <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; padding: 1rem;">
            <div style="font-size: 0.85rem; color: #16A34A; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.7rem; font-weight: 700;">✓ Words mastered</div>
            @if (empty($mastered))
                <div style="color: #9CA3AF; font-size: 0.85rem; font-style: italic;">No mastered words yet — need 2+ correct attempts.</div>
            @else
                @foreach ($mastered as $w)
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid #F4F4F4;">
                        <div>
                            <div style="font-weight: 600;">{{ $w['lemma'] }}</div>
                            @if ($w['definition'])
                                <div style="font-size: 0.75rem; color: #6B6B6B;">{{ $w['definition'] }}</div>
                            @endif
                        </div>
                        <div style="font-size: 0.75rem; color: #16A34A; font-weight: 700;">{{ $w['correct'] }}/{{ $w['attempts'] }}</div>
                    </div>
                @endforeach
            @endif
        </div>

        <div style="background: white; border: 1px solid #E8DADA; border-radius: 12px; padding: 1rem;">
            <div style="font-size: 0.85rem; color: #C9302C; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.7rem; font-weight: 700;">⚠ Needs work</div>
            @if (empty($struggled))
                <div style="color: #9CA3AF; font-size: 0.85rem; font-style: italic;">No struggle points yet — keep practising!</div>
            @else
                @foreach ($struggled as $w)
                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid #F4F4F4;">
                        <div>
                            <div style="font-weight: 600;">{{ $w['lemma'] }}</div>
                            @if ($w['definition'])
                                <div style="font-size: 0.75rem; color: #6B6B6B;">{{ $w['definition'] }}</div>
                            @endif
                        </div>
                        <div style="font-size: 0.75rem; color: #C9302C; font-weight: 700;">{{ $w['correct'] }}/{{ $w['attempts'] }}</div>
                    </div>
                @endforeach
            @endif
        </div>
    </div>
</x-filament-panels::page>