@extends('layouts.app')

@section('body_class', 'fit')

@section('nav')
    <a href="{{ route('leaderboard') }}" class="nav-link">🏆 LEADERBOARD</a>
@endsection

@section('content')
<main class="page">

    {{-- 1. Choose a batch --}}
    <section id="batchesScreen">
        <h1 class="headline glitch">CHOOSE YOUR BATCH</h1>
        <p class="subline">Find the passcode. Crack the vault. Beat the clock.</p>
        <div class="batch-picker" id="batchPicker"></div>
        <div class="empty" id="emptyBatches" hidden>
            <big>NO TEAMS IN A BATCH YET</big>
            The game master will put the teams into batches.
        </div>
    </section>

    {{-- 2. Choose a team in that batch --}}
    <section id="teamsScreen" hidden>
        <button class="back-btn" data-back-batches>← All batches</button>
        <h1 class="headline" id="teamsTitle">BATCH</h1>
        <p class="teams-info" id="teamsInfo"></p>
        <div class="team-grid" id="teamGrid"></div>
        <div class="empty" id="noTeams" hidden>
            <big>NO TEAMS IN THIS BATCH</big>
            The game master hasn't added teams to this batch yet.
        </div>
    </section>

    {{-- 3. Waiting room: opens by itself when the game master starts the team's batch --}}
    <section id="introScreen" hidden>
        <button class="back-btn" data-back>← Teams</button>
        <div class="intro">
            <div class="intro-avatar" id="introAvatar"></div>
            <div class="label" id="introBatch">BATCH</div>
            <h1 class="intro-name" id="introName"></h1>
            <ul class="rules">
                <li><span>⏱</span><b id="introMinutes">25 minutes</b> for your batch, from the start signal</li>
                <li><span>🔑</span>The passcode has <b id="introLength">10</b> characters</li>
                <li><span>🎯</span><b id="introAttempts">5 attempts</b> to open the vault; the clock keeps running</li>
            </ul>
            <div class="waiting" id="waitingMsg"><span class="dot"></span><span id="waitingText">Waiting for the game master to start your batch…</span></div>
        </div>
    </section>

    {{-- 4. The vault: feed characters, OPEN THE VAULT --}}
    <section id="entryScreen" hidden>
        <button class="back-btn" data-back>← Teams</button>

        <div class="entry">
            <div class="vault-wrap" id="vault">
                <div class="vault-inside"><span>💎</span></div>
                <div class="vault-door">
                    @for ($i = 0; $i < 12; $i++)
                        <span class="bolt" style="--a: {{ $i * 30 }}deg"></span>
                    @endfor
                    <div class="ring r1"></div>
                    <div class="ring r2"></div>
                    <div class="door-led"></div>
                    <div class="dial" id="dial">
                        @for ($i = 0; $i < 40; $i++)
                            <span class="tick" style="--a: {{ $i * 9 }}deg"></span>
                        @endfor
                        <span class="spoke" style="--a: 0deg"></span>
                        <span class="spoke" style="--a: 60deg"></span>
                        <span class="spoke" style="--a: 120deg"></span>
                        <div class="hub"></div>
                    </div>
                </div>
            </div>

            <div class="console">
                <div class="label">TEAM</div>
                <div class="team-name" id="teamName"></div>
                <div class="meta-row">
                    <span><span id="attemptLabel">Attempts left</span> <b id="attemptCount">1</b></span>
                    <span>Characters <b id="lengthInfo">0</b></span>
                </div>

                <div class="code-area">
                    <div class="code-boxes" id="codeBoxes"></div>
                    <input class="code-input" id="codeInput" autocomplete="off" autocapitalize="characters" spellcheck="false" aria-label="Passcode">
                </div>

                <div class="keypad" id="keypad">
                    @foreach ([1, 2, 3, 4, 5, 6, 7, 8, 9] as $n)
                        <button class="key" data-key="{{ $n }}">{{ $n }}</button>
                    @endforeach
                    <button class="key fn" data-key="clear">CLR</button>
                    <button class="key" data-key="0">0</button>
                    <button class="key fn" data-key="back">⌫</button>
                </div>
                <p class="keyboard-hint" id="keyboardHint" hidden>⌨️ Type the passcode on your keyboard</p>

                <button class="unlock-btn" id="unlockBtn">🔓 OPEN THE VAULT</button>
                <div class="feedback" id="feedback"></div>
            </div>
        </div>
    </section>
</main>

{{-- Final-answer confirmation --}}
<div class="overlay confirm" id="confirm" hidden>
    <div class="overlay-card">
        <div class="trophy">⚠️</div>
        <h2>OPEN THE VAULT?</h2>
        <p class="confirm-text" id="confirmText"></p>
        <div class="confirm-code" id="confirmCode"></div>
        <div class="confirm-actions">
            <button class="btn" id="confirmNo">✎ KEEP EDITING</button>
            <button class="btn gold big" id="confirmYes">🔓 YES, OPEN IT!</button>
        </div>
    </div>
</div>

{{-- Result: congratulations / invalid / time's up --}}
<div class="overlay" id="overlay" hidden>
    <div class="overlay-card">
        <div class="trophy" id="ovIcon">🏆</div>
        <h2 id="ovTitle">CONGRATULATIONS!</h2>
        <div class="who" id="ovTeam"></div>
        <p class="ov-message" id="ovMessage"></p>
        <div class="confirm-code result-code" id="ovCode" hidden></div>
        <div class="overlay-stats" id="ovStats"></div>
        <button class="btn gold" id="ovClose">CONTINUE ➜</button>
    </div>
</div>
@endsection

@push('scripts')
<script>
    window.VAULT_ROUTES = {
        state: @json(route('vault.state')),
        attempt: @json(route('vault.attempt')),
    };
</script>
<script src="{{ asset('js/vault.js') }}?v={{ config('vault.asset_version') }}"></script>
@endpush