{% extends 'base.html.twig' %}

{% block title %}Around the World | Dart Board{% endblock %}

{% block body %}
    {{ encore_entry_script_tags('dart', null) }}
    {{ encore_entry_script_tags('socketClient', null) }}

    {% set panelClass = 'rounded-[18px] border border-[#314254] bg-[linear-gradient(160deg,#182334,#121c29)] p-[1.2rem] shadow-[0_16px_36px_rgba(0,0,0,0.35)]' %}
    {% set buttonBaseClass = 'inline-flex cursor-pointer items-center justify-center rounded-[10px] border px-[0.95rem] py-[0.65rem] text-sm font-bold text-[#f6f3e8] transition disabled:cursor-not-allowed disabled:opacity-60' %}
    {% set buttonPrimaryClass = buttonBaseClass ~ ' border-[#1f9d62] bg-[#1f9d62] text-[#f7f2dc] hover:border-[#16714a] hover:bg-[#16714a]' %}
    {% set buttonDangerClass = buttonBaseClass ~ ' border-[#b53d52] bg-[#33141e] text-[#ffd6dd] hover:bg-[#431a27]' %}
    {% set buttonWarningClass = buttonBaseClass ~ ' border-[#b88f3f] bg-[#3a2d14] text-[#f6df9f] hover:bg-[#4a3918]' %}
    {% set multiplierButtonBaseClass = buttonBaseClass ~ ' min-h-[58px] min-w-[128px] border-2 px-5 py-[0.85rem] text-[1.02rem] hover:brightness-95 max-[640px]:flex-1' %}

    <div
        x-data="socketClient({ url: '{{ websocketUri|e('js') }}', room: 'game:{{ gameId }}' })"
        @game:throw-committed.window="if (socket) { socket.emit('game:throw', Object.assign({}, $event.detail, { originSocketId: socketId })); }"
        @game:turn-changed.window="if (socket) { socket.emit('game:turn', Object.assign({}, $event.detail, { originSocketId: socketId })); }"
    >
    <div x-data="dart({ gameId: '{{ gameId }}', ownerOnly: true, guestPath: '{{ path('game_guest_show', { id: gameId }) }}' })">
        <template x-if="loading">
            <div class="{{ panelClass }}">
                <p class="mt-[0.4rem] text-[#aab4c3]">Spiel wird geladen...</p>
            </div>
        </template>

        <template x-if="errorMessage && !loading && !game">
            <div class="rounded-xl border border-[#b53d52] bg-[#37121a] px-4 py-3 font-semibold text-[#ffd6dd]" x-text="errorMessage"></div>
        </template>

        <template x-if="game && !loading">
            <div>
                <section class="{{ panelClass }} flex flex-col gap-4 mb-5 min-[641px]:flex-row min-[641px]:items-center min-[641px]:justify-between">
                    <div class="flex flex-wrap items-baseline gap-4">
                        <h1 class="m-0 font-space" x-text="'Game ' + game.mode.name"></h1>
                        <p class="m-0 text-[#aab4c3]">Status: <strong class="text-[#f6f3e8]" x-text="game.status"></strong></p>
                        <p class="m-0 text-[#aab4c3]">Treffe die Felder <strong class="text-[#f6f3e8]">1 bis 20</strong> in Reihenfolge. Danach gewinnst du mit <strong class="text-[#f6f3e8]">Bull (25 oder 50)</strong>.</p>
                    </div>
                    <div class="flex flex-col gap-[0.6rem] min-[641px]:items-end">
                        {% include 'game/_share_actions.html.twig' %}
                        <button x-show="canEdit && isRunning" class="{{ buttonDangerClass }}" type="button" @click="finishGame()" :disabled="isSubmittingAction">Spiel abbrechen</button>
                    </div>
                </section>

                <div x-cloak x-show="errorMessage" class="mb-4 rounded-xl border border-[#b53d52] bg-[#37121a] px-4 py-3 font-semibold text-[#ffd6dd]" x-text="errorMessage"></div>

                <section class="grid items-start gap-4 [grid-template-columns:minmax(280px,0fr)_minmax(360px,1fr)] max-[960px]:grid-cols-1">
                    <aside class="{{ panelClass }}">
                        <h2 class="m-0 mb-[0.8rem] font-space">Around The World</h2>
                        <ul class="grid list-none gap-[0.7rem] p-0">
                            <template x-for="player in players" :key="player.id">
                                <li class="rounded-xl border p-3"
                                    :class="player.isWinner
                                        ? 'border-[#b88f3f] bg-[#2b2413]'
                                        : (activePlayerId === player.id ? 'border-[#2c9c69] bg-[#112d24]' : 'border-[#3b4f63] bg-[#101a27]')">
                                    <div class="flex items-baseline justify-between gap-3 text-[1.75rem] text-[#f6f3e8]">
                                        <strong x-text="player.name"></strong>
                                        <span class="text-right">
                                            <small class="block text-[0.78rem] uppercase tracking-[0.05em] text-[#9db0c6]">Ziel</small>
                                            <strong class="block" x-text="displayPlayerScore(player)"></strong>
                                        </span>
                                    </div>

                                    <div x-show="player.isWinner" class="my-[0.4rem] inline-block rounded-full border border-[#b88f3f] bg-[#433114] px-[0.6rem] py-[0.2rem] text-[0.77rem] font-bold text-[#f6df9f]">Gewinner</div>

                                    <small class="block text-[#c6d2e2]"
                                           x-text="isRunning
                                               ? (activePlayerId === player.id ? ('Aktueller Wurf: ' + dartInTurn + '/3') : 'Wartet auf nächsten Zug')
                                               : (player.isWinner ? 'Zug abgeschlossen' : 'Kein aktiver Wurf')"></small>
                                    <small class="block text-[#9db0c6]" x-text="activePlayerId === player.id ? 'Würfe im aktuellen Turn' : 'Würfe aus letztem Turn'"></small>
                                    <div class="mt-[0.35rem] flex flex-wrap gap-[0.35rem]">
                                        <template x-for="t in player.throws" :key="t.id">
                                            <span class="rounded-full border border-[#3d5369] bg-[#182437] px-[0.55rem] py-[0.2rem] text-[0.82rem] text-[#dbe3ee]" x-text="formatThrow(t)"></span>
                                        </template>
                                        <em x-show="player.throws.length === 0" class="text-[0.85rem] not-italic text-[#9db0c6]">Noch keine Würfe</em>
                                    </div>
                                </li>
                            </template>
                        </ul>
                    </aside>

                    <div class="{{ panelClass }}">
                        {# Not running states #}
                        <template x-if="!isRunning">
                            <div>
                                <h2 class="m-0 font-space">Wurf-Eingabe</h2>
                                <template x-if="isFinished">
                                    <div>
                                        <p class="mt-[0.4rem] text-[#aab4c3]" x-text="canEdit ? 'Spiel beendet. Mit Undo letzter Wurf wird das Spiel wieder fortgesetzt.' : 'Spiel beendet.'"></p>
                                        <div class="mt-[0.9rem] flex flex-wrap gap-[0.6rem]" x-show="canEdit">
                                            <button class="{{ buttonWarningClass }}" type="button" @click="undoLastThrow()" :disabled="isSubmittingAction">Undo letzter Wurf</button>
                                        </div>
                                    </div>


                                </template>
                                <template x-if="isAborted">
                                    <p class="mt-[0.4rem] text-[#aab4c3]">Dieses Spiel wurde abgebrochen.</p>
                                </template>
                                <template x-if="isDraft && canEdit">
                                    <div>
                                        <p class="mt-[0.4rem] text-[#aab4c3] mb-5">Starte das Spiel, um Würfe zu erfassen.</p>
                                        <button class="{{ buttonPrimaryClass }}" type="button" @click="startGame()" :disabled="isSubmittingAction">Spiel starten</button>
                                    </div>
                                </template>
                                <template x-if="isDraft && !canEdit">
                                    <p class="mt-[0.4rem] text-[#aab4c3]">Dieses Spiel ist noch nicht gestartet.</p>
                                </template>
                            </div>
                        </template>

                        {# Running state - throw input #}
                        <template x-if="isRunning && canEdit">
                            <div>
                                <div class="flex items-start justify-between gap-[0.8rem]">
                                    <div>
                                        <h2 class="m-0 font-space">Wurf-Eingabe</h2>
                                        <p class="m-0 mt-1 text-[#aab4c3]" x-show="activePlayer">Aktuelles Ziel: <strong class="text-[#f6f3e8]" x-text="displayPlayerScore(activePlayer)"></strong></p>
                                    </div>
                                    <span class="rounded-full border border-[#b88f3f] bg-[#2f2615] px-[0.7rem] py-[0.3rem] text-[0.85rem] font-bold text-[#f6df9f]" x-text="'Dart ' + dartInTurn + '/3'"></span>
                                </div>

                                <section class="mt-4 grid gap-[0.55rem] [grid-template-columns:repeat(5,minmax(44px,1fr))] max-[640px]:[grid-template-columns:repeat(4,minmax(44px,1fr))]" x-show="phase === 'select_number'">
                                    <template x-for="number in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]" :key="number">
                                        <button type="button" class="min-h-[55px] cursor-pointer rounded-[10px] border border-[#3f546a] bg-[#121d2b] text-[1.75rem] font-bold text-[#f6f3e8] transition hover:border-[#d8a64a] hover:bg-[#1b2a3d]"
                                                :class="selectedNumber === number ? 'border-[#d8a64a] bg-[#332a16] text-[#f6df9f]' : ''"
                                                @click="selectNumber(number)"
                                                x-text="number"></button>
                                    </template>
                                    <button type="button" class="col-span-5 min-h-[55px] cursor-pointer rounded-[10px] border border-[#2f8e61] bg-[#143423] text-[1.5rem] font-bold text-[#daf3e6] transition hover:border-[#4ec586] hover:bg-[#1b4a30] max-[640px]:col-span-4"
                                            :class="selectedNumber === 'BULL' ? 'border-[#d8a64a] bg-[#332a16] text-[#f6df9f]' : ''"
                                            @click="selectBull()">Bull</button>
                                </section>

                                <section class="mt-4 grid gap-4" x-show="phase === 'select_multiplier'">
                                    <template x-if="selectedNumber !== 'BULL'">
                                        <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] p-4">
                                            <p class="m-0 mb-3 text-[#aab4c3]">Wie wurde das Feld getroffen?</p>
                                            <div class="flex flex-wrap gap-[0.65rem]">
                                                <button type="button" class="{{ multiplierButtonBaseClass }}" :class="Number(selectedNumber) % 2 === 0 ? 'border-[#5a6676] bg-[#0f1824] text-[#f6f3e8]' : 'border-[#778191] bg-[#e7e4dc] text-[#111822]'" @click="selectMultiplier(1)">Single</button>
                                                <button type="button" class="{{ multiplierButtonBaseClass }}" :class="Number(selectedNumber) % 2 === 0 ? 'border-[#1f9d62] bg-[#1f9d62] text-[#f7f2dc]' : 'border-[#a43a4c] bg-[#b53d52] text-[#fff0f3]'" @click="selectMultiplier(2)">Double</button>
                                                <button type="button" class="{{ multiplierButtonBaseClass }}" :class="Number(selectedNumber) % 2 === 0 ? 'border-[#1f9d62] bg-[#1f9d62] text-[#f7f2dc]' : 'border-[#a43a4c] bg-[#b53d52] text-[#fff0f3]'" @click="selectMultiplier(3)">Triple</button>
                                            </div>
                                            <button type="button" class="{{ multiplierButtonBaseClass }} mt-3 border-[#42566d] bg-[#0f1824] text-[#f6f3e8] max-[640px]:w-full" @click="backToNumber()">Zurück</button>
                                        </div>
                                    </template>

                                    <template x-if="selectedNumber === 'BULL'">
                                        <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] p-4">
                                            <p class="m-0 mb-3 text-[#aab4c3]">Bull-Wert auswählen</p>
                                            <div class="flex flex-wrap gap-[0.65rem]">
                                                <button type="button" class="{{ multiplierButtonBaseClass }} border-[#1f9d62] bg-[#1f9d62] text-[#f7f2dc]" @click="selectBullValue(25)">Bull klein (25)</button>
                                                <button type="button" class="{{ multiplierButtonBaseClass }} border-[#a43a4c] bg-[#b53d52] text-[#fff0f3]" @click="selectBullValue(50)">Bull gross (50)</button>
                                            </div>
                                            <button type="button" class="{{ multiplierButtonBaseClass }} mt-3 border-[#42566d] bg-[#0f1824] text-[#f6f3e8] max-[640px]:w-full" @click="backToNumber()">Zurück</button>
                                        </div>
                                    </template>
                                </section>

                                <div class="mt-[0.9rem] flex flex-wrap gap-[0.6rem]">
                                    <button class="{{ buttonWarningClass }}" type="button" @click="undoLastThrow()" :disabled="isSubmittingAction">Undo letzter Wurf</button>
                                </div>
                            </div>
                        </template>

                        <template x-if="isRunning && !canEdit">
                            <div>
                                <h2 class="m-0 font-space">Wurf-Eingabe</h2>
                                <p class="mt-[0.4rem] text-[#aab4c3]">Live-Ansicht aktiv. Du kannst das Spiel beobachten, aber keine Würfe erfassen.</p>
                                <p class="mt-[0.6rem] text-[#9db0c6]">Aktueller Turn: <strong class="text-[#f6f3e8]" x-text="game.currentTurnNumber"></strong> · Dart <strong class="text-[#f6f3e8]" x-text="dartInTurn"></strong>/3</p>
                            </div>
                        </template>
                    </div>
                </section>

                <section x-data="gameStatistics({ gameId: '{{ gameId }}' })" x-cloak x-show="isVisible" class="{{ panelClass }} mt-4">
                    <div class="flex flex-wrap items-center justify-between gap-3">
                        <h2 class="m-0 font-space">Spielstatistik</h2>
                        <span class="rounded-full border border-[#3d5369] bg-[#182437] px-[0.6rem] py-[0.22rem] text-[0.78rem] text-[#dbe3ee]" x-show="statistics?.winner?.name" x-text="'Gewinner: ' + statistics?.winner?.name"></span>
                    </div>

                    <template x-if="loading">
                        <p class="mt-3 text-[#aab4c3]">Statistik wird geladen...</p>
                    </template>

                    <template x-if="!loading && errorMessage">
                        <div class="mt-3 rounded-xl border border-[#b53d52] bg-[#37121a] px-4 py-3 font-semibold text-[#ffd6dd]" x-text="errorMessage"></div>
                    </template>

                    <template x-if="!loading && !errorMessage && statistics">
                        <div class="mt-4 grid gap-4">
                            <div class="grid gap-[0.6rem] [grid-template-columns:repeat(2,minmax(140px,1fr))] min-[960px]:[grid-template-columns:repeat(5,minmax(120px,1fr))]">
                                <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] p-3">
                                    <small class="text-[#9db0c6]">Turns</small>
                                    <p class="m-0 mt-1 text-[1.2rem] font-bold text-[#f6f3e8]" x-text="statistics.totalTurns"></p>
                                </div>
                                <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] p-3">
                                    <small class="text-[#9db0c6]">Darts</small>
                                    <p class="m-0 mt-1 text-[1.2rem] font-bold text-[#f6f3e8]" x-text="statistics.totalThrows"></p>
                                </div>
                                <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] p-3">
                                    <small class="text-[#9db0c6]">Trefferpunkte</small>
                                    <p class="m-0 mt-1 text-[1.2rem] font-bold text-[#f6f3e8]" x-text="statistics.totalScoredPoints"></p>
                                </div>
                                <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] p-3">
                                    <small class="text-[#9db0c6]">Ø pro Dart</small>
                                    <p class="m-0 mt-1 text-[1.2rem] font-bold text-[#f6f3e8]" x-text="formatAverage(statistics.averagePointsPerDart)"></p>
                                </div>
                                <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] p-3">
                                    <small class="text-[#9db0c6]">Spielzeit</small>
                                    <p class="m-0 mt-1 text-[1.2rem] font-bold text-[#f6f3e8]" x-text="formatDuration(statistics.durationSeconds)"></p>
                                </div>
                            </div>

                            <div class="overflow-x-auto rounded-xl border border-[#3b4f63] bg-[#101a27]">
                                <table class="w-full border-collapse text-left text-[0.92rem]">
                                    <thead>
                                        <tr class="border-b border-[#3b4f63] text-[#9db0c6]">
                                            <th class="px-3 py-2 font-semibold">Spieler</th>
                                            <th class="px-3 py-2 font-semibold">Turns</th>
                                            <th class="px-3 py-2 font-semibold">Busts</th>
                                            <th class="px-3 py-2 font-semibold">Darts</th>
                                            <th class="px-3 py-2 font-semibold">Trefferpunkte</th>
                                            <th class="px-3 py-2 font-semibold">Ø/Dart</th>
                                            <th class="px-3 py-2 font-semibold">Best Dart</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <template x-for="player in statistics.playerStats" :key="player.playerId">
                                            <tr class="border-b border-[#273a4f] last:border-b-0">
                                                <td class="px-3 py-2 font-semibold text-[#f6f3e8]">
                                                    <span x-text="player.name"></span>
                                                    <span x-show="player.isWinner" class="ml-2 rounded-full border border-[#b88f3f] bg-[#433114] px-[0.5rem] py-[0.15rem] text-[0.72rem] font-bold text-[#f6df9f]">Gewinner</span>
                                                </td>
                                                <td class="px-3 py-2 text-[#dbe3ee]" x-text="player.turnsPlayed"></td>
                                                <td class="px-3 py-2 text-[#dbe3ee]" x-text="player.bustTurns"></td>
                                                <td class="px-3 py-2 text-[#dbe3ee]" x-text="player.dartsThrown"></td>
                                                <td class="px-3 py-2 text-[#dbe3ee]" x-text="player.totalScoredPoints"></td>
                                                <td class="px-3 py-2 text-[#dbe3ee]" x-text="formatAverage(player.averagePointsPerDart)"></td>
                                                <td class="px-3 py-2 text-[#dbe3ee]" x-text="player.highestThrowPoints"></td>
                                            </tr>
                                        </template>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </template>
                </section>
            </div>
        </template>
    </div>
    </div>
{% endblock %}
