@extends('layouts.app')

@section('title', config('game.name', 'The Crime Syndicate') . ' - ' . ($title ?? 'Game'))

@section('content')
<div class="flex flex-col min-h-screen">

    {{-- TOP BAR --}}
    <header class="bg-syndicate-900 border-b border-syndicate-700 h-14 flex items-center px-6 flex-shrink-0 z-10">
        {{-- Logo --}}
        <a href="{{ route('game.dashboard') }}" class="font-display font-bold text-xl text-crime-400 uppercase tracking-widest mr-8 flex-shrink-0">
            {{ config('game.name', 'The Crime Syndicate') }}
        </a>

        {{-- Stats bar --}}
        <div class="flex-1 flex items-center justify-center space-x-4">
            @if(auth()->check() && auth()->user()->character)
                @include('game.partials.stats-bar')
            @endif
        </div>

        {{-- User menu --}}
        <div class="flex items-center space-x-3 flex-shrink-0">
            <span class="text-sm text-gray-400">{{ auth()->user()->name ?? '' }}</span>
            <div x-data="{ open: false }" class="relative">
                <button @click="open = !open" class="flex items-center text-gray-400 hover:text-gray-100 transition">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <div x-show="open" @click.away="open = false"
                     class="absolute right-0 mt-2 w-48 bg-syndicate-800 border border-syndicate-700 rounded-lg shadow-xl z-50">
                    <a href="{{ route('profile.edit') }}" class="block px-4 py-2 text-sm text-gray-300 hover:bg-syndicate-700 hover:text-gray-100 rounded-t-lg transition">
                        Settings
                    </a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-syndicate-700 hover:text-gray-100 rounded-b-lg transition">
                            Log Out
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </header>

    {{-- BODY: sidebar + content --}}
    <div class="flex flex-1">

        {{-- SIDEBAR --}}
        @include('layouts.navigation')

        {{-- CONTENT --}}
        <main class="flex-1 bg-syndicate-950 p-6 overflow-auto">

            {{-- Flash messages --}}
            @if(session('success'))
                <div class="mb-4 px-4 py-3 bg-green-900/40 border border-green-700 text-green-400 rounded-lg text-sm">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="mb-4 px-4 py-3 bg-red-900/40 border border-red-800 text-red-400 rounded-lg text-sm">
                    {{ session('error') }}
                </div>
            @endif

            @yield('game-content')
        </main>
    </div>

    {{-- FOOTER --}}
    <footer class="bg-syndicate-900 border-t border-syndicate-700 py-3 text-center text-xs text-gray-600">
        &copy; {{ date('Y') }} {{ config('game.name', 'The Crime Syndicate') }} &mdash; v{{ config('game.version', '1.0.0') }}
    </footer>

</div>
@endsection