{% extends "base.html" %}
{% block content %}

<h1>Vouchers</h1>
<p class="page-subtitle">
    Browse vouchers by status, revoke active sessions, or issue custom
    vouchers for staff, comped access, or recorded cash sales.
</p>

<div class="page-actions">
    <button type="button" class="btn-primary" onclick="openCustomModal()">+ Issue Custom Voucher</button>
</div>

{% if flash_msg %}
    <div class="flash flash-good">
        <div>
            {{ flash_msg }}
            {% if flash_code %}
                <div style="margin-top: 10px;">
                    <strong>Code:</strong>
                    <code style="font-size: 18px; font-family: ui-monospace, monospace; background: rgba(255,255,255,0.7); padding: 4px 12px; border-radius: 6px; letter-spacing: 0.08em; color: var(--text); user-select: all; font-weight: 600;">{{ flash_code }}</code>
                    <span style="color: var(--muted); font-size: 12px; margin-left: 8px;">tap to select</span>
                </div>
            {% endif %}
        </div>
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}
{% if error_msg %}
    <div class="flash flash-error">
        {{ error_msg }}
        <button class="flash-close" aria-label="Close">×</button>
    </div>
{% endif %}

<section>
    <h2>Search</h2>
    <form method="GET" action="/vouchers" class="search-form">
        <input type="hidden" name="status" value="{{ status_filter }}">
        <input type="search" name="q" value="{{ search }}" maxlength="32"
               placeholder="Code prefix (e.g. AB23) or MAC contains (e.g. aa:bb)"
               autocomplete="off" class="search-input">
        <button type="submit" class="btn-primary">Search</button>
        {% if search %}
            <a href="/vouchers?status={{ status_filter }}" class="btn-secondary">Clear</a>
        {% endif %}
    </form>
</section>

<section>
    <h2>Filter by Status</h2>
    <div class="chip-row">
        {% set chips = [('all', 'All'), ('active', 'Active'), ('paused', 'Paused'), ('pending', 'Pending'), ('expired', 'Expired'), ('revoked', 'Revoked')] %}
        {% for slug, label in chips %}
            <a href="/vouchers?status={{ slug }}{% if search %}&q={{ search }}{% endif %}"
               class="chip {% if status_filter == slug %}chip-active{% endif %}">
                {{ label }} <span class="chip-count">{{ counts[slug] }}</span>
            </a>
        {% endfor %}
    </div>
</section>

<section>
    {% if rows %}
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                        <th>Code</th>
                        <th>Status</th>
                        <th class="col-hide-mobile">Source</th>
                        <th>Minutes</th>
                        <th>Paid</th>
                        <th class="col-hide-mobile">MAC</th>
                        <th class="col-hide-mobile">Created</th>
                        <th class="actions-cell">Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for v in rows %}
                    <tr>
                        <td><code>{{ v.code }}</code></td>
                        <td><span class="badge badge-{{ v.status }}">{{ v.status }}</span></td>
                        <td class="col-hide-mobile"><span class="badge-source">{{ v.source }}</span></td>
                        <td>
                            {{ v.minutes_used }}/{{ v.minutes_total }}m
                            <div style="color: var(--muted); font-size: 11px;">valid {{ v.validity_minutes }}m</div>
                        </td>
                        <td>₱{{ v.paid_pesos }}</td>
                        <td class="col-hide-mobile">
                            {% if v.mac %}
                                <span class="code">{{ v.mac }}</span>
                            {% else %}
                                <span style="color: var(--muted-2);">—</span>
                            {% endif %}
                        </td>
                        <td class="col-hide-mobile">{{ v.created }}</td>
                        <td class="actions-cell">
                            {% if v.status in ['active', 'paused', 'pending'] %}
                                <form method="POST" action="/vouchers/{{ v.code }}/revoke"
                                      onsubmit="return confirm('Revoke voucher {{ v.code }}? This deauthorizes the MAC and cannot be undone.');">
                                    <button type="submit" class="btn-sm-danger">Revoke</button>
                                </form>
                            {% else %}
                                <span style="color: var(--muted-2); font-size: 12px;">—</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        {% if total > 0 %}
            {% set page_start = offset + 1 %}
            {% set page_end = offset + (rows|length) %}
            {% set base_qs = '?status=' ~ status_filter %}
            {% if search %}{% set base_qs = base_qs ~ '&q=' ~ search %}{% endif %}
            <nav class="pager">
                {% if offset > 0 %}
                    {% set prev_offset = [offset - page_size, 0]|max %}
                    <a href="{{ base_qs }}&offset={{ prev_offset }}" class="btn-sm">← Newer</a>
                {% else %}
                    <span class="btn-sm btn-disabled">← Newer</span>
                {% endif %}

                <span class="pager-status">
                    Showing <strong>{{ page_start }}–{{ page_end }}</strong> of <strong>{{ total }}</strong>
                </span>

                {% if page_end < total %}
                    <a href="{{ base_qs }}&offset={{ offset + page_size }}" class="btn-sm">Older →</a>
                {% else %}
                    <span class="btn-sm btn-disabled">Older →</span>
                {% endif %}
            </nav>
        {% endif %}
    {% else %}
        <div class="empty-state">
            {% if search %}
                <strong>No vouchers match "{{ search }}"{% if status_filter != 'all' %} in {{ status_filter }}{% endif %}.</strong><br>
                Try a different code prefix or MAC fragment.
            {% elif status_filter == 'all' %}
                <strong>No vouchers yet.</strong><br>
                They'll appear here as customers drop coins.
            {% else %}
                <strong>No {{ status_filter }} vouchers right now.</strong>
            {% endif %}
        </div>
    {% endif %}
</section>

<div id="custom-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="custom-modal-title" hidden>
    <div class="modal-backdrop" onclick="closeCustomModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="custom-modal-title" class="modal-title">Issue Custom Voucher</h2>
            <button type="button" class="modal-close" onclick="closeCustomModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc">
                Generates an 8-character voucher code with the given price, minutes, and
                validity, marked <code>source = custom</code>. Set price to <code>₱0</code>
                for comped/staff/testing access; any value greater than 0 counts toward
                sales totals.
            </p>
            <form id="custom-form" method="POST" action="/vouchers/custom" class="edit-form">
                <div class="form-grid">
                    <div>
                        <label>Price (₱)</label>
                        <input type="number" name="paid_pesos" min="0" placeholder="0 = free / comp" value="0" required>
                    </div>
                </div>

                <div class="dhm-group">
                    <label class="dhm-label">Time</label>
                    <div class="dhm-row">
                        <div class="dhm-cell">
                            <label>Days</label>
                            <input type="number" min="0" value="0" data-dhm="time-d" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Hours</label>
                            <input type="number" min="0" max="23" value="0" data-dhm="time-h" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Minutes</label>
                            <input type="number" min="0" max="59" value="0" data-dhm="time-m" inputmode="numeric">
                        </div>
                    </div>
                    <div class="dhm-hint">= <span class="dhm-total" data-dhm-total="time">0</span> minutes total</div>
                    <input type="hidden" name="minutes" value="0">
                </div>

                <div class="dhm-group">
                    <label class="dhm-label">Validity</label>
                    <div class="dhm-row">
                        <div class="dhm-cell">
                            <label>Days</label>
                            <input type="number" min="0" value="0" data-dhm="val-d" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Hours</label>
                            <input type="number" min="0" max="23" value="0" data-dhm="val-h" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Minutes</label>
                            <input type="number" min="0" max="59" value="0" data-dhm="val-m" inputmode="numeric">
                        </div>
                    </div>
                    <div class="dhm-hint">= <span class="dhm-total" data-dhm-total="val">0</span> minutes (0 = same as Time)</div>
                    <input type="hidden" name="validity_minutes" value="0">
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-primary">Issue Voucher</button>
                    <button type="button" class="btn-secondary" onclick="closeCustomModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
(function() {
    const modal = document.getElementById('custom-modal');
    const form = document.getElementById('custom-form');

    function clampInt(input) {
        let v = parseInt(input.value, 10);
        if (isNaN(v) || v < 0) v = 0;
        const max = input.max !== '' ? parseInt(input.max, 10) : null;
        if (max !== null && v > max) v = max;
        // Don't rewrite while the user is mid-edit unless it's clearly out of range;
        // browsers already clamp on blur for number inputs.
        return v;
    }

    function recompute(prefix, hiddenName) {
        const d = clampInt(form.querySelector(`[data-dhm="${prefix}-d"]`));
        const h = clampInt(form.querySelector(`[data-dhm="${prefix}-h"]`));
        const m = clampInt(form.querySelector(`[data-dhm="${prefix}-m"]`));
        const total = d * 1440 + h * 60 + m;
        form.querySelector(`[data-dhm-total="${prefix}"]`).textContent = total;
        form.querySelector(`input[name="${hiddenName}"]`).value = total;
        return total;
    }

    form.querySelectorAll('[data-dhm]').forEach(input => {
        input.addEventListener('input', () => {
            const prefix = input.getAttribute('data-dhm').split('-')[0];  // 'time' or 'val'
            recompute(prefix, prefix === 'time' ? 'minutes' : 'validity_minutes');
        });
    });

    // Block submit if Time totals zero — backend would reject anyway, but we
    // catch it client-side so the operator gets immediate feedback without
    // losing entries to the redirect.
    form.addEventListener('submit', e => {
        const total = recompute('time', 'minutes');
        recompute('val', 'validity_minutes');
        if (total <= 0) {
            e.preventDefault();
            const dInput = form.querySelector('[data-dhm="time-d"]');
            dInput.setCustomValidity('Enter a Time greater than 0d 0h 0m.');
            dInput.reportValidity();
            dInput.addEventListener('input', () => dInput.setCustomValidity(''), { once: true });
        }
    });

    window.openCustomModal = function() {
        modal.hidden = false;
        document.body.style.overflow = 'hidden';
        const first = form.querySelector('input[name=paid_pesos]');
        if (first) setTimeout(() => { first.focus(); first.select(); }, 50);
    };
    window.closeCustomModal = function() {
        modal.hidden = true;
        document.body.style.overflow = '';
    };
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !modal.hidden) closeCustomModal();
    });
    {% if custom_form_error %}
        document.addEventListener('DOMContentLoaded', openCustomModal);
    {% endif %}
})();
</script>

{% endblock %}