{{-- Platform usage + performance reports (sysadmin). Stat tiles + small tables,
     styled to match the org-dashboard. No charts library. --}}
@php($d = $this->getData())
@php($u = $d['usage'])
@php($p = $d['performance'])
@php($fmt = fn ($v) => is_null($v) ? '—' : number_format((int) $v))

<x-filament-panels::page>
    <p class="text-xs text-gray-400">Generated {{ $d['generatedAt']->format('D, d M Y H:i') }}</p>

    {{-- ════════════════════════════ USAGE ════════════════════════════ --}}
    <section>
        <h2 class="mb-2 text-lg font-bold text-gray-900 dark:text-white">Usage</h2>

        <div class="flex flex-wrap gap-2">
            @php($tiles = [
                ['Total users', $fmt($u['total_users']), null],
                ['Students', $fmt($u['total_students']), null],
                ['New signups (30d)', $fmt($u['new_signups_30d']), 'primary'],
                ['Active (7d)', $fmt($u['active_7d']), 'primary'],
                ['Active (30d)', $fmt($u['active_30d']), 'primary'],
                ['Answered (7d)', $fmt($u['answered_7d']), null],
                ['Answered (30d)', $fmt($u['answered_30d']), null],
                ['Tests (7d)', $fmt($u['tests_7d']), null],
                ['Tests (30d)', $fmt($u['tests_30d']), null],
            ])
            @foreach ($tiles as [$label, $value, $tone])
                <div class="flex min-w-[120px] flex-1 flex-col rounded-lg border border-gray-200 px-3 py-2 dark:border-gray-700">
                    <span class="text-[10px] font-medium uppercase tracking-wide text-gray-400">{{ $label }}</span>
                    <span @class([
                        'text-lg font-bold leading-tight',
                        'text-primary-600' => $tone === 'primary',
                        'text-gray-900 dark:text-white' => $tone === null,
                    ])>{{ $value }}</span>
                </div>
            @endforeach
        </div>

        {{-- Per-org seat utilisation --}}
        <div class="mt-4">
            <div class="mb-1 text-sm font-semibold text-gray-700 dark:text-gray-200">Seat utilisation by organisation</div>
            <div class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-left text-xs uppercase tracking-wide text-gray-400 dark:bg-gray-800">
                        <tr>
                            <th class="px-3 py-2 font-medium">Organisation</th>
                            <th class="px-3 py-2 text-right font-medium">Seats used</th>
                            <th class="px-3 py-2 text-right font-medium">Purchased</th>
                            <th class="px-3 py-2 text-right font-medium">Utilisation</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                        @forelse ($u['orgs'] as $org)
                            <tr>
                                <td class="px-3 py-2 text-gray-900 dark:text-white">{{ $org['name'] }}</td>
                                <td class="px-3 py-2 text-right text-gray-700 dark:text-gray-300">{{ number_format($org['used']) }}</td>
                                <td class="px-3 py-2 text-right text-gray-700 dark:text-gray-300">{{ number_format($org['bought']) }}</td>
                                <td class="px-3 py-2 text-right">
                                    <span @class([
                                        'font-semibold',
                                        'text-danger-600' => $org['util_pct'] >= 90,
                                        'text-success-600' => $org['util_pct'] < 90,
                                    ])>{{ $org['util_pct'] }}%</span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="px-3 py-6 text-center text-gray-500">No organisations.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>

    {{-- ═══════════════════════════ PERFORMANCE ═══════════════════════════ --}}
    <section class="mt-6">
        <h2 class="mb-2 text-lg font-bold text-gray-900 dark:text-white">Performance — question bank health</h2>

        <div class="flex flex-wrap gap-2">
            @php($ptiles = [
                ['Total questions', $fmt($p['total']), null],
                ['Public', $fmt($p['public']), 'primary'],
                ['Draft', $fmt($p['draft']), null],
                ['With images', $fmt($p['with_images']), null],
                ['Avg. correctness', is_null($p['avg_correct_pct']) ? '—' : $p['avg_correct_pct'] . '%', 'primary'],
            ])
            @foreach ($ptiles as [$label, $value, $tone])
                <div class="flex min-w-[120px] flex-1 flex-col rounded-lg border border-gray-200 px-3 py-2 dark:border-gray-700">
                    <span class="text-[10px] font-medium uppercase tracking-wide text-gray-400">{{ $label }}</span>
                    <span @class([
                        'text-lg font-bold leading-tight',
                        'text-primary-600' => $tone === 'primary',
                        'text-gray-900 dark:text-white' => $tone === null,
                    ])>{{ $value }}</span>
                </div>
            @endforeach
        </div>

        <div class="mt-4 grid gap-4 md:grid-cols-2">
            {{-- By QA status --}}
            <div>
                <div class="mb-1 text-sm font-semibold text-gray-700 dark:text-gray-200">By QA status</div>
                <div class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
                    <table class="w-full text-sm">
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @forelse ($p['by_qa'] as $status => $count)
                                <tr>
                                    <td class="px-3 py-2 capitalize text-gray-700 dark:text-gray-300">{{ str_replace('_', ' ', $status) }}</td>
                                    <td class="px-3 py-2 text-right font-medium text-gray-900 dark:text-white">{{ number_format($count) }}</td>
                                </tr>
                            @empty
                                <tr><td class="px-3 py-6 text-center text-gray-500">No QA data.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- Maxile distribution (active students, 30d) --}}
            <div>
                <div class="mb-1 text-sm font-semibold text-gray-700 dark:text-gray-200">Maxile distribution — active students (30d)</div>
                <div class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
                    <table class="w-full text-sm">
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            @forelse ($p['maxile_buckets'] as $band => $count)
                                <tr>
                                    <td class="px-3 py-2 text-gray-700 dark:text-gray-300">{{ $band }}</td>
                                    <td class="px-3 py-2 text-right font-medium text-gray-900 dark:text-white">{{ number_format($count) }}</td>
                                </tr>
                            @empty
                                <tr><td class="px-3 py-6 text-center text-gray-500">No active students.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        {{-- 10 lowest-accuracy questions --}}
        <div class="mt-4">
            <div class="mb-1 text-sm font-semibold text-gray-700 dark:text-gray-200">10 lowest-accuracy questions <span class="font-normal text-gray-400">(min. 5 attempts)</span></div>
            <div class="overflow-hidden rounded-xl border border-gray-200 dark:border-gray-700">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-left text-xs uppercase tracking-wide text-gray-400 dark:bg-gray-800">
                        <tr>
                            <th class="px-3 py-2 font-medium">Question</th>
                            <th class="px-3 py-2 font-medium">Skill</th>
                            <th class="px-3 py-2 text-right font-medium">Attempts</th>
                            <th class="px-3 py-2 text-right font-medium">Accuracy</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                        @forelse ($p['lowest'] as $q)
                            <tr>
                                <td class="px-3 py-2">
                                    @if (! empty($q['url']))
                                        <a href="{{ $q['url'] }}" class="font-medium text-primary-600 hover:underline">#{{ $q['id'] }}</a>
                                    @else
                                        <span class="font-medium text-gray-900 dark:text-white">#{{ $q['id'] }}</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2 text-gray-700 dark:text-gray-300">{{ $q['skill'] ?? '—' }}</td>
                                <td class="px-3 py-2 text-right text-gray-700 dark:text-gray-300">{{ number_format($q['attempts']) }}</td>
                                <td class="px-3 py-2 text-right">
                                    <span @class([
                                        'font-semibold',
                                        'text-danger-600' => $q['accuracy'] < 40,
                                        'text-gray-900 dark:text-white' => $q['accuracy'] >= 40,
                                    ])>{{ $q['accuracy'] }}%</span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="px-3 py-6 text-center text-gray-500">No questions with enough attempts.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </section>
</x-filament-panels::page>