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

{% block content %}
<main class="mx-auto min-h-screen w-full max-w-5xl px-4 pb-28 pt-4 text-foreground sm:px-6 sm:pt-6">
    <header class="sticky top-0 z-10 -mx-4 mb-5 flex items-center justify-between gap-3 border-b border-divider bg-canvas/95 px-4 py-3 backdrop-blur sm:-mx-6 sm:px-6">
        <div class="flex min-w-0 items-center gap-3"><a href="/plugins/howzzy/games_index" class="blocks-button blocks-button-secondary blocks-button-sm shrink-0" aria-label="Back to my sessions"><i class="fas fa-chevron-left" aria-hidden="true"></i></a><h1 class="truncate text-lg font-semibold sm:text-xl">{{ game.name }}</h1></div>
        <span id="gameStatusLabel" 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>
    </header>

    <section class="mb-5 flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-5" aria-label="Live game status">
        <div><span class="block text-xs font-semibold uppercase tracking-wide text-muted">Last called</span><strong id="currentNumber" class="mt-1 block text-4xl font-extrabold leading-none text-brand" aria-live="polite" aria-atomic="true">--</strong></div>
        <div class="text-right"><p id="statsLabel" class="text-sm text-muted" aria-live="polite">Numbers called: 0/90</p><p class="mt-2 text-xs font-medium text-success">Auto-daub active <span aria-hidden="true">🤖</span></p></div>
    </section>

    <section aria-labelledby="ticket-heading" class="mb-6 overflow-hidden rounded-2xl border border-divider bg-surface p-3 shadow-sm sm:p-5">
        <h2 id="ticket-heading" class="sr-only">Your play sheet</h2>
        <div class="overflow-auto rounded-xl bg-canvas p-2 sm:p-3"><canvas id="ticketCanvas" class="mx-auto block h-auto max-w-full"></canvas></div>
    </section>

    <section aria-labelledby="prizes-heading" class="rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:p-6">
        <h2 id="prizes-heading" class="text-xl font-semibold">Prizes</h2>
        <p class="mt-1 text-sm text-muted">Claim a prize when your ticket completes its pattern. The host will review valid claims.</p>
        <p id="claimFeedback" class="mt-3 rounded-lg border border-divider bg-canvas px-3 py-2 text-sm text-muted" role="status" aria-live="polite" hidden></p>
        <div id="prizeList" class="mt-4 grid gap-3 sm:grid-cols-2"></div>
    </section>
</main>

<div id="ticket-data"
     data-game-id="{{ game.id | default(value=0) }}"
     data-ticket-number="{{ ticket.ticket_number | default(value=0) }}"
     data-initial-called="{{ called_numbers | default(value=[]) | json_encode }}"
     data-ticket-rows="{{ rows | default(value=[]) | json_encode }}"
     data-template="{{ template | default(value="null") | json_encode }}"
     data-prizes="{{ prizes | default(value=[]) | json_encode }}"
     data-claims="{{ claims | default(value=[]) | json_encode }}">
</div>

<div class="fixed inset-x-0 bottom-0 z-20 border-t border-divider bg-surface/95 px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-3 backdrop-blur sm:px-6">
    <button type="button" class="blocks-button blocks-button-primary mx-auto w-full max-w-lg" id="claimBtn">Claim a prize</button>
</div>

<dialog id="claimModal" class="w-full max-w-xl rounded-2xl border border-divider bg-surface p-0 text-foreground shadow-xl backdrop:bg-black/50" aria-labelledby="claimModalTitle">
    <div class="p-4 sm:p-6"><header class="flex items-start justify-between gap-3"><div><h2 id="claimModalTitle" class="text-xl font-semibold">Claim a prize</h2><p class="mt-1 text-sm text-muted">Choose the pattern you completed.</p></div><button type="button" id="closeClaimModal" class="blocks-button blocks-button-secondary blocks-button-sm">Close</button></header><div id="claimModalFeedback" class="mt-3 text-sm text-muted" role="status" aria-live="polite"></div><div id="prizeModalList" class="mt-4 grid max-h-[60vh] gap-3 overflow-y-auto"></div></div>
</dialog>
{% endblock %}

{% block scripts %}
<script src="/plugins/howzzy/assets/js/ticket-renderer.js"></script>
<script src="/plugins/howzzy/assets/js/howzzy-live.js"></script>
<script src="/plugins/howzzy/assets/js/game-ticket.js"></script>
{% endblock %}