{% extends "base.html" %}
{% block page_title %}{{ game.name }}{% endblock %}

{% block head %}{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-7xl px-4 py-6 text-foreground sm:px-6 lg:px-8" data-game-id="{{ game.id }}" data-game-status="{{ game.status }}" data-join-token="{{ game.join_token | default(value='') }}">
    <header class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div class="min-w-0"><h1 class="break-words text-2xl font-bold sm:text-3xl">{{ game.name }}</h1><div class="mt-2 flex flex-wrap gap-2"><span class="blocks-status-pill {% if game.status == 'completed' %}is-success{% elif game.status == 'generating' %}is-warning{% elif game.status == 'in_progress' %}is-info{% else %}is-neutral{% endif %}">{{ game.status | replace(from="_", to=" ") | title }}</span><span class="blocks-status-pill is-neutral">{{ game.game_type | title }}</span></div></div>
        <nav aria-label="Session actions" class="flex flex-wrap gap-2">
            <a href="/plugins/howzzy/games_announcer/{{ game.id }}" class="blocks-button blocks-button-primary">Announcer</a>
            <button type="button" class="blocks-button blocks-button-secondary" id="tvPairBtn">TV Pair</button>
            <a href="/plugins/howzzy/games_play/{{ game.id }}" class="blocks-button blocks-button-secondary">Winners</a>
            {% if game.game_type == "offline" %}<a href="/plugins/howzzy/print/{{ game.id }}" class="blocks-button blocks-button-secondary">Print / PDF</a>{% endif %}
            <a href="/plugins/howzzy/games_index" class="blocks-button blocks-button-secondary">Back</a>
        </nav>
    </header>

    {% if game.status == "generating" %}
    <section class="rounded-2xl border border-divider bg-surface p-5 shadow-sm sm:p-7" aria-labelledby="generation-heading">
        <div class="flex flex-wrap items-center justify-between gap-2"><h2 id="generation-heading" class="text-lg font-semibold">Generating tickets…</h2><span id="progressText" class="text-sm font-semibold text-brand">{{ generation_progress | default(value=0) | round }}%</span></div>
        <div class="mt-4 h-3 overflow-hidden rounded-full border border-divider bg-canvas" role="progressbar" aria-label="Ticket generation progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ generation_progress | default(value=0) | round }}"><div class="h-full rounded-full bg-brand transition-[width] duration-300" id="progressBar" style="width: {{ generation_progress | default(value=0) }}%"></div></div>
        <p class="mt-3 text-sm text-muted">This page will refresh when ready.</p>
    </section>
    {% else %}
    <div class="grid min-w-0 gap-6 lg:grid-cols-[minmax(0,1.4fr)_minmax(18rem,1fr)]">
        <section class="min-w-0 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6" aria-labelledby="tickets-heading">
            <div class="flex flex-wrap items-end justify-between gap-3"><div><h2 id="tickets-heading" class="text-xl font-semibold">Tickets</h2><p class="mt-1 text-sm text-muted">{{ total_tickets }} play sheets</p></div><div class="flex items-end gap-2"><label for="ticketSearchInput" class="sr-only">Ticket number</label><input type="number" class="blocks-input blocks-control--compact w-28" id="ticketSearchInput" min="1" max="{{ total_tickets }}" value="1"><button type="button" class="blocks-button blocks-button-primary blocks-button-sm" id="goToTicketBtn">Go</button></div></div>
            <div id="ticketPreview" class="mt-4 overflow-auto rounded-xl border border-divider bg-canvas p-3"><canvas id="hubTicketCanvas" class="mx-auto block h-auto max-w-full"></canvas></div>
        </section>

        <aside class="min-w-0 space-y-4">
            {% if game.game_type == "online" %}
            <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5"><h2 class="font-semibold">Share / Join</h2><div id="qrcode" class="mt-3 flex justify-center overflow-hidden"></div><div class="mt-3 flex flex-col gap-2 sm:flex-row"><label for="shareUrl" class="sr-only">Session join link</label><input type="text" class="blocks-input blocks-control--compact" readonly id="shareUrl" value=""><button type="button" class="blocks-button blocks-button-secondary blocks-button-sm shrink-0" id="copyShareBtn">Copy</button></div><p id="shareFeedback" class="mt-2 text-sm text-muted" role="status" aria-live="polite"></p></section>
            {% endif %}

            <section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5"><h2 class="font-semibold">Prizes</h2><ul class="mt-3 divide-y divide-divider">
            {% for prize in prizes %}<li class="flex flex-wrap items-center justify-between gap-2 py-3"><div class="min-w-0"><strong class="break-words">{{ prize.name }}</strong><span class="ml-2 text-sm text-muted">×{{ prize.quantity }}</span></div><button type="button" class="blocks-button blocks-button-secondary blocks-button-sm customize-prize" data-prize-id="{{ prize.prize_id }}" data-name="{{ prize.name }}" data-description="{{ prize.description | default(value='') }}">Customize</button></li>
            {% else %}<li class="py-4 text-sm text-muted">No prizes configured</li>{% endfor %}</ul></section>

            {% if game.game_type == "online" %}<section class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5"><h2 class="font-semibold">Players <span class="text-sm font-normal text-muted">({{ players | length }})</span></h2><ul class="mt-3 divide-y divide-divider">
            {% for player in players %}<li class="flex min-w-0 items-center gap-3 py-3">{% if player.user_avatar %}<img class="h-10 w-10 rounded-full object-cover" src="{{ player.user_avatar }}" alt="">{% else %}<span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-canvas font-semibold text-muted">{{ player.user_name | default(value='P') | truncate(length=1, end="") }}</span>{% endif %}<div class="min-w-0"><span class="block truncate font-medium">{{ player.user_name }}</span><span class="block break-all text-xs text-muted">Ticket #{{ player.ticket_number }} · {{ player.user_email }}</span></div></li>
            {% else %}<li class="py-4 text-sm text-muted">No players joined yet</li>{% endfor %}</ul></section>{% endif %}
        </aside>
    </div>
    {% endif %}
</main>

<div id="tvModal" class="crud-modal" aria-hidden="true" aria-modal="true" role="dialog" aria-labelledby="tv-modal-title">
    <div class="modal-content">
        <div class="modal-header"><h3 id="tv-modal-title">Pair TV</h3><button type="button" class="close-btn" data-modal-dismiss aria-label="Close">&times;</button></div>
        <div class="modal-body"><p>Enter the 4-digit code shown on Howzzy TV.</p><label for="tvCodeInput" class="mb-2 block text-sm font-medium">Pairing code</label><input type="text" class="blocks-input" id="tvCodeInput" maxlength="4" inputmode="numeric" autocomplete="one-time-code" placeholder="0000"><p id="tvPairFeedback" class="mt-2 text-sm text-muted" role="status" aria-live="polite"></p></div>
        <div class="modal-footer"><button type="button" class="blocks-button blocks-button-secondary" data-modal-dismiss>Cancel</button><button type="button" class="blocks-button blocks-button-primary" id="tvPairSubmit">Pair</button></div>
    </div>
</div>

<div id="prizeModal" class="crud-modal" aria-hidden="true" aria-modal="true" role="dialog" aria-labelledby="prize-modal-title">
    <div class="modal-content"><div class="modal-header"><h3 id="prize-modal-title">Customize Prize</h3><button type="button" class="close-btn" data-modal-dismiss aria-label="Close">&times;</button></div>
        <form id="prizeCustomizeForm"><div class="modal-body space-y-4"><input type="hidden" name="prize_id" id="customizePrizeId"><div><label for="customizeName" class="mb-2 block text-sm font-medium">Display name</label><input type="text" class="blocks-input" name="custom_name" id="customizeName"></div><div><label for="customizeDesc" class="mb-2 block text-sm font-medium">Description</label><textarea class="blocks-input" name="custom_description" id="customizeDesc" rows="3"></textarea></div><div><label for="customizeImage" class="mb-2 block text-sm font-medium">Image URL</label><input type="url" class="blocks-input" name="image_url" id="customizeImage"></div><p id="prizeSaveFeedback" class="text-sm text-muted" role="status" aria-live="polite"></p></div>
        <div class="modal-footer"><button type="button" class="blocks-button blocks-button-secondary" data-modal-dismiss>Cancel</button><button type="submit" class="blocks-button blocks-button-primary" id="prizeSaveSubmit">Save</button></div></form>
    </div>
</div>

<script type="application/json" id="hub-tickets-data">{{ tickets | json_encode | safe }}</script>
<script type="application/json" id="hub-template-data">{{ template | json_encode | safe }}</script>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-overlay-stack.js"></script>
<script src="/static/js/blocks-admin-modal.js"></script>
<script src="/plugins/howzzy/assets/js/ticket-renderer.js"></script>
<script src="/plugins/howzzy/assets/js/qrcode.min.js"></script>
<script src="/plugins/howzzy/assets/js/game-show.js"></script>
{% endblock %}