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

{% block title %}Game (Guest) | 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 heroClass = 'rounded-[22px] border border-[#3a4d62] bg-[radial-gradient(120%_130%_at_0%_0%,rgba(43,163,105,0.24)_0%,rgba(43,163,105,0)_50%),radial-gradient(120%_130%_at_100%_0%,rgba(184,143,63,0.20)_0%,rgba(184,143,63,0)_52%),linear-gradient(155deg,#182739_0%,#111c2a_58%,#0f1723_100%)] p-[1.25rem] shadow-[0_18px_42px_rgba(0,0,0,0.36)]' %}

    <div x-data="socketClient({ url: '{{ websocketUri|e('js') }}', room: 'game:{{ gameId }}' })">
        <div x-data="dart({ gameId: '{{ gameId }}', guestOnly: true, ownerPath: '{{ path('game_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="{{ heroClass }} mb-5">
                        <div class="flex flex-wrap items-start justify-between gap-4">
                            <div class="grid gap-2">
                                <p class="m-0 text-[0.78rem] font-bold uppercase tracking-[0.08em] text-[#8fa3bb]">Gastansicht</p>
                                <h1 class="m-0 font-space text-[clamp(1.45rem,3vw,2.1rem)] leading-[1.1]" x-text="'Game ' + game.mode.name"></h1>
                            </div>
                            <span class="inline-flex items-center rounded-full border border-[#3e5368] bg-[#141f2d] px-[0.85rem] py-[0.35rem] text-[0.82rem] font-bold tracking-[0.02em] text-[#dbe3ee]">
                                Status: <span class="ml-2 text-[#f7f2dc]" x-text="game.status"></span>
                            </span>
                        </div>

                        <div class="mt-4 grid gap-2 min-[740px]:grid-cols-2">
                            <p class="m-0 rounded-xl border border-[#34465a] bg-[#132131] px-3 py-2 text-[0.93rem] text-[#dbe3ee]" x-show="!isAroundTheWorld">
                                In: <strong class="text-[#f6f3e8]" x-text="game.inRule"></strong>
                                <span class="mx-2 text-[#6f849c]">|</span>
                                Out: <strong class="text-[#f6f3e8]" x-text="game.outRule"></strong>
                            </p>
                            <p class="m-0 rounded-xl border border-[#34465a] bg-[#132131] px-3 py-2 text-[0.93rem] text-[#dbe3ee]" x-show="isAroundTheWorld">
                                Treffe die Felder 1 bis 20 in Reihenfolge, dann Bull (25 oder 50).
                            </p>
                            <p class="m-0 rounded-xl border border-[#34465a] bg-[#132131] px-3 py-2 text-[0.93rem] text-[#dbe3ee]">
                                Read-only Ansicht: Dieses Spiel wird live aktualisiert.
                            </p>
                        </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(340px,1.25fr)_minmax(260px,0.75fr)] max-[1040px]:grid-cols-1">
                        <aside class="{{ panelClass }}">
                            <div class="mb-3 flex items-end justify-between gap-3">
                                <div>
                                    <h2 class="m-0 font-space text-[1.35rem]">Live Scoreboard</h2>
                                    <p class="m-0 mt-1 text-[0.9rem] text-[#9db0c6]" x-text="isAroundTheWorld ? 'Aktuelles Ziel und letzte Würfe' : 'Punkte und letzte Würfe'"></p>
                                </div>
                            </div>

                            <ul class="grid list-none gap-[0.9rem] p-0">
                                <template x-for="player in players" :key="player.id">
                                    <li class="rounded-2xl border p-[1rem]"
                                        :class="player.isWinner
                                            ? 'border-[#b88f3f] bg-[linear-gradient(145deg,#2d2616,#211b10)]'
                                            : (activePlayerId === player.id ? 'border-[#2c9c69] bg-[linear-gradient(145deg,#113126,#0f241e)]' : 'border-[#3b4f63] bg-[linear-gradient(145deg,#132031,#101a27)]')">
                                        <div class="flex items-end justify-between gap-4">
                                            <div class="min-w-0">
                                                <p class="m-0 text-[0.78rem] font-bold uppercase tracking-[0.07em] text-[#9db0c6]">Spieler</p>
                                                <strong class="block truncate font-space text-[1.35rem] text-[#f6f3e8]" x-text="player.name"></strong>
                                            </div>
                                            <div class="text-right">
                                                <p class="m-0 text-[0.78rem] font-bold uppercase tracking-[0.07em] text-[#9db0c6]" x-text="isAroundTheWorld ? 'Ziel' : 'Punkte'"></p>
                                                <strong class="block font-space text-[clamp(2.35rem,6vw,3.7rem)] leading-[0.9] text-[#f7f2dc]" x-text="displayPlayerScore(player)"></strong>
                                            </div>
                                        </div>

                                        <div x-show="player.isWinner" class="mt-2 inline-block rounded-full border border-[#b88f3f] bg-[#4b3616] px-[0.72rem] py-[0.26rem] text-[0.8rem] font-bold text-[#f6df9f]">Gewinner</div>

                                        <small class="mt-3 block text-[0.84rem] text-[#9db0c6]" x-text="activePlayerId === player.id ? 'Würfe im aktuellen Turn' : 'Würfe aus letztem Turn'"></small>
                                        <div class="mt-[0.45rem] flex flex-wrap gap-[0.45rem]">
                                            <template x-for="t in player.throws" :key="t.id">
                                                <span class="rounded-full border border-[#4a6178] bg-[#1a2a3f] px-[0.88rem] py-[0.4rem] text-[1.05rem] font-bold text-[#f2f6fb] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.05)]" x-text="formatThrow(t)"></span>
                                            </template>
                                            <em x-show="player.throws.length === 0" class="text-[0.95rem] not-italic text-[#9db0c6]">Noch keine Würfe</em>
                                        </div>
                                    </li>
                                </template>
                            </ul>
                        </aside>

                        <div class="{{ panelClass }} min-[1041px]:sticky min-[1041px]:top-20">
                            <h2 class="m-0 font-space text-[1.25rem]">Live Status</h2>
                            <div class="mt-3 grid gap-3">
                                <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] px-3 py-2">
                                    <p class="m-0 text-[0.78rem] font-bold uppercase tracking-[0.07em] text-[#9db0c6]">Turn</p>
                                    <p class="m-0 mt-1 font-space text-[1.8rem] leading-[1] text-[#f6f3e8]" x-text="game.currentTurnNumber"></p>
                                </div>
                                <div class="rounded-xl border border-[#3b4f63] bg-[#101a27] px-3 py-2">
                                    <p class="m-0 text-[0.78rem] font-bold uppercase tracking-[0.07em] text-[#9db0c6]">Aktueller Dart</p>
                                    <p class="m-0 mt-1 font-space text-[1.8rem] leading-[1] text-[#f6f3e8]"><span x-text="dartInTurn"></span>/3</p>
                                </div>
                            </div>

                            <p class="mt-4 text-[#aab4c3]" x-show="isDraft">Das Spiel ist noch nicht gestartet.</p>
                            <p class="mt-4 text-[#aab4c3]" x-show="isRunning">Laufendes Spiel mit Live-Updates.</p>
                            <p class="mt-4 text-[#aab4c3]" x-show="isFinished">Dieses Spiel ist beendet.</p>
                            <p class="mt-4 text-[#aab4c3]" x-show="isAborted">Dieses Spiel wurde abgebrochen.</p>
                        </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]">Punkte gesamt</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>
                        </template>
                    </section>
                </div>
            </template>
        </div>
    </div>
{% endblock %}
