@extends('admin.layout')
@section('title', 'User: ' . ($user->battle_name ?? $user->name))

@section('content')
<div class="mb-4 flex items-center justify-between">
    <a href="{{ route('admin.users.index') }}" class="text-sm text-slate-500 hover:underline">← Back to users</a>
    <div class="flex gap-2">
        <a href="{{ route('admin.users.edit', $user) }}" class="bg-slate-900 text-white px-4 py-2 rounded-md text-sm">Edit</a>
        @if ($user->is_banned)
            <form method="POST" action="{{ route('admin.users.unban', $user) }}">
                @csrf
                <button class="bg-emerald-600 text-white px-4 py-2 rounded-md text-sm">Unban</button>
            </form>
        @else
            <form method="POST" action="{{ route('admin.users.ban', $user) }}" onsubmit="return confirm('Ban this user?')">
                @csrf
                <input type="hidden" name="banned_reason" value="Suspended by admin">
                <button class="bg-red-600 text-white px-4 py-2 rounded-md text-sm">Ban</button>
            </form>
        @endif
        <form method="POST" action="{{ route('admin.users.reset-energy', $user) }}">
            @csrf
            <button class="bg-amber-500 text-white px-4 py-2 rounded-md text-sm">Restore Energy</button>
        </form>
    </div>
</div>

<div class="grid md:grid-cols-3 gap-6">
    <div class="md:col-span-1 space-y-4">
        <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-5">
            <h3 class="font-semibold mb-3">Profile</h3>
            <dl class="text-sm space-y-2">
                <div><dt class="text-slate-500 text-xs">Battle Name</dt><dd class="font-medium">{{ $user->battle_name }}</dd></div>
                <div><dt class="text-slate-500 text-xs">Name</dt><dd>{{ $user->name }}</dd></div>
                <div><dt class="text-slate-500 text-xs">Email</dt><dd>{{ $user->email }}</dd></div>
                <div><dt class="text-slate-500 text-xs">Favorite Category</dt><dd>{{ $user->favorite_category ?? '—' }}</dd></div>
                <div><dt class="text-slate-500 text-xs">Joined</dt><dd>{{ $user->created_at->format('M j, Y') }}</dd></div>
                <div><dt class="text-slate-500 text-xs">Last Played</dt><dd>{{ $user->last_played_at?->format('M j, Y') ?? 'Never' }}</dd></div>
            </dl>
            @if ($user->is_banned)
                <div class="mt-3 p-3 bg-red-50 rounded border border-red-200 text-sm">
                    <div class="font-semibold text-red-800">Banned</div>
                    <div class="text-red-700 text-xs">{{ $user->banned_reason ?: 'No reason' }}</div>
                    <div class="text-red-600 text-xs">{{ $user->banned_at?->diffForHumans() }}</div>
                </div>
            @endif
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-5">
            <h3 class="font-semibold mb-3">Stats</h3>
            <div class="grid grid-cols-2 gap-3 text-sm">
                <div><div class="text-xs text-slate-500">Level</div><div class="text-xl font-bold">{{ $user->level }}</div></div>
                <div><div class="text-xs text-slate-500">XP</div><div class="text-xl font-bold">{{ number_format($user->xp) }}</div></div>
                <div><div class="text-xs text-slate-500">Coins</div><div class="text-xl font-bold">{{ number_format($user->coins) }}</div></div>
                <div><div class="text-xs text-slate-500">Energy</div><div class="text-xl font-bold">{{ $user->energy }}</div></div>
                <div><div class="text-xs text-slate-500">Games</div><div class="text-xl font-bold">{{ $user->games_played }}</div></div>
                <div><div class="text-xs text-slate-500">Won</div><div class="text-xl font-bold">{{ $user->games_won }}</div></div>
                <div><div class="text-xs text-slate-500">Streak</div><div class="text-xl font-bold">{{ $user->streak }}</div></div>
                <div><div class="text-xs text-slate-500">Best</div><div class="text-xl font-bold">{{ $user->best_streak }}</div></div>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-5">
            <h3 class="font-semibold mb-3">Grant Coins</h3>
            <form method="POST" action="{{ route('admin.users.grant-coins', $user) }}" class="flex gap-2">
                @csrf
                <input type="number" name="amount" placeholder="amount (- to deduct)" class="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm">
                <button class="bg-yellow-500 text-white px-4 py-2 rounded-md text-sm">Apply</button>
            </form>
        </div>
    </div>

    <div class="md:col-span-2 space-y-4">
        <div class="bg-white rounded-lg shadow-sm border border-slate-200">
            <div class="px-5 py-3 border-b border-slate-200"><h3 class="font-semibold">Recent Quiz Sessions ({{ $user->quiz_sessions_count }})</h3></div>
            <div class="divide-y">
                @forelse ($recentSessions as $s)
                    <div class="px-5 py-3 flex justify-between text-sm">
                        <div>
                            <a href="{{ route('admin.sessions.show', $s) }}" class="font-medium hover:underline">{{ $s->category->label ?? '—' }}</a>
                            <div class="text-xs text-slate-500">{{ $s->mode }} · {{ $s->created_at->format('M j, Y g:ia') }}</div>
                        </div>
                        <div class="text-right">
                            <div>{{ $s->correct_answers }}/{{ $s->total_questions }}</div>
                            <div class="text-xs text-slate-500">{{ ucfirst($s->status) }} · {{ $s->grade ?: '—' }}</div>
                        </div>
                    </div>
                @empty
                    <div class="px-5 py-6 text-center text-slate-500 text-sm">No sessions yet.</div>
                @endforelse
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-slate-200">
            <div class="px-5 py-3 border-b border-slate-200"><h3 class="font-semibold">Recent Battles ({{ $user->challenger_battles_count }})</h3></div>
            <div class="divide-y">
                @forelse ($recentBattles as $b)
                    <div class="px-5 py-3 flex justify-between text-sm">
                        <div>
                            <a href="{{ route('admin.battles.show', $b) }}" class="font-medium hover:underline">vs {{ $b->is_bot_match ? $b->bot_name : ($b->opponent->battle_name ?? '—') }}</a>
                            <div class="text-xs text-slate-500">{{ $b->category->label ?? '—' }} · {{ $b->created_at->format('M j, Y') }}</div>
                        </div>
                        <div class="text-right">
                            <div>{{ $b->challenger_score }} – {{ $b->opponent_score }}</div>
                            <div class="text-xs text-slate-500">{{ ucfirst($b->status) }}</div>
                        </div>
                    </div>
                @empty
                    <div class="px-5 py-6 text-center text-slate-500 text-sm">No battles yet.</div>
                @endforelse
            </div>
        </div>

        <div class="bg-white rounded-lg shadow-sm border border-slate-200">
            <div class="px-5 py-3 border-b border-slate-200"><h3 class="font-semibold">Achievements ({{ $user->achievements_count }})</h3></div>
            <div class="p-5 flex flex-wrap gap-2">
                @forelse ($achievements as $a)
                    <span class="bg-amber-50 border border-amber-200 text-amber-900 px-3 py-1 rounded-full text-xs">
                        🏆 {{ $a->title }}
                    </span>
                @empty
                    <div class="text-sm text-slate-500">No achievements unlocked yet.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection