@extends('admin.layout')
@section('title', 'Quiz Sessions')
@section('subtitle', $sessions->total() . ' total')

@section('content')
<div class="bg-white rounded-lg shadow-sm border border-slate-200 p-4 mb-4">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div>
            <label class="block text-xs text-slate-500 mb-1">Status</label>
            <select name="status" class="rounded-md border border-slate-300 px-3 py-2 text-sm">
                <option value="">All</option>
                @foreach (['in_progress', 'completed', 'abandoned'] as $s)
                    <option value="{{ $s }}" @selected(request('status') === $s)>{{ ucfirst(str_replace('_', ' ', $s)) }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1">Mode</label>
            <select name="mode" class="rounded-md border border-slate-300 px-3 py-2 text-sm">
                <option value="">All</option>
                @foreach (['quick_play', 'daily_challenge', 'tournament'] as $m)
                    <option value="{{ $m }}" @selected(request('mode') === $m)>{{ str_replace('_', ' ', $m) }}</option>
                @endforeach
            </select>
        </div>
        <button class="bg-slate-900 text-white px-4 py-2 rounded-md text-sm">Filter</button>
    </form>
</div>

<div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-slate-50 border-b text-xs uppercase text-slate-500">
            <tr>
                <th class="text-left px-4 py-3">User</th>
                <th class="text-left px-4 py-3">Category</th>
                <th class="text-left px-4 py-3">Mode</th>
                <th class="text-right px-4 py-3">Score</th>
                <th class="text-right px-4 py-3">XP / Coins</th>
                <th class="text-center px-4 py-3">Grade</th>
                <th class="text-left px-4 py-3">Status</th>
                <th class="text-left px-4 py-3">When</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y">
            @forelse ($sessions as $s)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3">{{ $s->user->battle_name ?? '—' }}</td>
                    <td class="px-4 py-3">{{ $s->category->label ?? '—' }}</td>
                    <td class="px-4 py-3 text-xs">{{ str_replace('_', ' ', $s->mode) }}</td>
                    <td class="px-4 py-3 text-right">{{ $s->correct_answers }}/{{ $s->total_questions }}</td>
                    <td class="px-4 py-3 text-right text-xs">+{{ $s->xp_earned }} / +{{ $s->coins_earned }}</td>
                    <td class="px-4 py-3 text-center">{{ $s->grade ?: '—' }}</td>
                    <td class="px-4 py-3 text-xs">{{ ucfirst($s->status) }}</td>
                    <td class="px-4 py-3 text-xs text-slate-500">{{ $s->created_at->diffForHumans() }}</td>
                    <td class="px-4 py-3 text-right whitespace-nowrap">
                        <a href="{{ route('admin.sessions.show', $s) }}" class="text-blue-600 text-sm hover:underline">View</a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="9" class="px-4 py-8 text-center text-slate-500">No sessions.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $sessions->links() }}</div>
@endsection