{% extends "base.html" %}
{% import "macros/user_cell.html" as user_cell %}

{% block content %}
{% set tz = settings.timezone %}
{% set dt_fmt = '%d %b %Y, %H:%M' %}
<main class="mx-auto w-full max-w-4xl px-4 py-6 sm:px-6 sm:py-10">
    <nav class="mb-5 flex flex-wrap items-center justify-between gap-3" aria-label="Ticket actions">
        <a href="/plugins/gate-pass/issuer" class="blocks-button blocks-button-secondary blocks-button-sm">
            <i class="fas fa-arrow-left" aria-hidden="true"></i><span>Back to Dashboard</span>
        </a>
        <a class="blocks-button blocks-button-secondary blocks-button-sm" href="/plugins/gate-pass/print/{{ pass.pass_code }}" target="_blank" rel="noopener">
            <i class="fas fa-print" aria-hidden="true"></i><span>Print Ticket</span>
        </a>
    </nav>

    <article class="overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm" id="gatePassTicket"
        data-code="{{ pass.pass_code }}"
        data-validate-url="{% if validate_url %}{{ validate_url }}{% else %}{{ request_origin }}/plugins/gate-pass/validate/{{ pass.pass_code }}{% endif %}">
        <header class="flex flex-wrap items-center justify-between gap-3 border-b border-divider bg-canvas px-5 py-4 sm:px-7">
            <h1 class="m-0 flex items-center gap-2 text-lg font-bold text-foreground"><i class="fas fa-shield-alt text-brand" aria-hidden="true"></i>Gate Pass</h1>
            <p class="m-0 rounded-full border border-divider bg-surface px-3 py-1 font-mono text-sm font-semibold text-foreground">Code: {{ pass.pass_code }}</p>
        </header>

        <div class="grid gap-6 p-5 sm:p-7 lg:grid-cols-[minmax(0,1fr)_15rem]">
            <dl class="m-0 grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="min-w-0">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-muted">{% if pass.pass_kind == "servant" %}Staff member{% else %}Guest Name{% endif %}</dt>
                    <dd class="mt-1 break-words text-base font-semibold text-foreground">
                        {{ pass.guest_name }}
                        {% if pass.pass_kind != "servant" and pass.additional_guests > 0 %}
                        <span class="text-sm font-bold text-brand">(+{{ pass.additional_guests }} guests)</span>
                        {% endif %}
                    </dd>
                </div>
                <div class="min-w-0">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-muted">Vehicle / Access Info</dt>
                    <dd class="mt-1 break-words text-sm text-foreground">{{ pass.vehicle_number | default(value="—") }}</dd>
                </div>
                <div class="min-w-0">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-muted">{% if pass.pass_kind == "servant" %}Valid period{% else %}Appointment Time{% endif %}</dt>
                    <dd class="mt-1 text-sm text-foreground">{% if pass.pass_kind == "servant" %}{{ pass.valid_from | date_in_tz(timezone=tz, format=dt_fmt) }} – {{ pass.valid_to | date_in_tz(timezone=tz, format=dt_fmt) }}{% else %}{{ pass.appointment_time | date_in_tz(timezone=tz, format=dt_fmt) }}{% endif %}</dd>
                </div>
                {% if pass.pass_kind != "servant" %}
                <div class="min-w-0">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-muted">Validity Duration</dt>
                    <dd class="mt-1 text-sm text-foreground">{{ pass.duration_hours }} hours</dd>
                </div>
                {% else %}
                <div class="min-w-0">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-muted">Pass type</dt>
                    <dd class="mt-1 text-sm text-foreground">Staff authorization (schedule enforced at gate)</dd>
                </div>
                {% endif %}
                <div class="min-w-0 sm:col-span-2">
                    <dt class="text-xs font-semibold uppercase tracking-wide text-muted">Issued By</dt>
                    <dd class="mt-1 flex flex-wrap items-center gap-3 text-sm text-foreground">
                        {{ user_cell::render(name=pass.owner_name, email=pass.owner_email, avatar=pass.owner_avatar) }}
                        <span class="capitalize text-muted">Role: {{ pass.issuer_role }}</span>
                    </dd>
                </div>
            </dl>

            <section class="flex flex-col items-center justify-center rounded-xl border border-divider bg-canvas p-4 text-center" aria-labelledby="gatePassQrTitle">
                <h2 id="gatePassQrTitle" class="mb-3 text-sm font-semibold text-foreground">Scan at gate</h2>
                <div class="flex size-52 max-w-full items-center justify-center rounded-lg border border-divider bg-white p-2" id="qrContainer" aria-busy="true">
                    <span class="text-sm text-muted" data-qr-loading>Generating QR code…</span>
                </div>
                <p class="mb-0 mt-3 text-xs text-muted">Scan to validate entry or exit</p>
            </section>
        </div>

        <footer class="border-t border-divider px-5 py-4 text-center text-sm text-muted sm:px-7">
            Valid only for the specified guests, vehicle and duration. Non-transferable.
        </footer>
    </article>

    <div class="mt-5 flex flex-col gap-3 sm:flex-row" aria-label="Share or download ticket">
        <button class="blocks-button blocks-button-primary w-full sm:flex-1" id="copyShareLink" type="button">
            <i class="fas fa-copy" aria-hidden="true"></i><span>Copy Ticket Link</span>
        </button>
        <button class="blocks-button blocks-button-secondary w-full sm:w-auto" id="downloadQRBtn" type="button">
            <i class="fas fa-download" aria-hidden="true"></i><span>Download QR SVG</span>
        </button>
    </div>

    {% if is_owner %}
    {% if computed_state == "checked_in" or computed_state == "violation" or computed_state == "acknowledged" %}
    <div class="mt-3 flex flex-col gap-3 sm:flex-row">
        {% if computed_state == "checked_in" or computed_state == "violation" %}
        <button class="blocks-button blocks-button-success w-full sm:flex-1" data-gate-pass-qr-action="acknowledge" data-id="{{ pass.id }}" type="button">
            <i class="fas fa-check" aria-hidden="true"></i><span>Acknowledge Receipt</span>
        </button>
        {% elif computed_state == "acknowledged" %}
        <button class="blocks-button blocks-button-warning w-full sm:flex-1" data-gate-pass-qr-action="checkout" data-id="{{ pass.id }}" type="button">
            <i class="fas fa-sign-out-alt" aria-hidden="true"></i><span>Checkout Guest</span>
        </button>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}
    <div class="mt-3 min-h-6 text-sm text-danger" id="gatePassActionStatus" role="status" aria-live="polite" hidden></div>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/gate-pass/assets/js/gate_pass_qr.js"></script>
{% endblock %}