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

<h1>Vouchers</h1>
<p class="page-subtitle">
    Browse vouchers, revoke sessions, or issue custom ones.
</p>

<div class="page-actions">
    <button type="button" class="btn-primary" onclick="openCustomModal()">+ Issue Custom Voucher</button>
    <button type="button" class="btn-primary" onclick="openBatchModal()">+ Generate Batch</button>
    <a class="btn-secondary" href="/vouchers/print?{% if status_filter and status_filter != 'all' %}status={{ status_filter }}&amp;{% endif %}q={{ search|urlencode }}" target="_blank" rel="noopener">🖨 Print list</a>
    <a class="btn-secondary" href="/vouchers/print?{% if status_filter and status_filter != 'all' %}status={{ status_filter }}&amp;{% endif %}q={{ search|urlencode }}&amp;format=thermal" target="_blank" rel="noopener">🖨 Print 80mm</a>
</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>
                            {# ADR-0020: ESP-centralized rows show the issuing VLAN. #}
                            {% if v.source == 'esp' and v.source_vlan %}
                                <span class="badge-source" style="background:var(--surface-2); color:var(--muted); margin-left:4px; font-size:10px;">V{{ v.source_vlan }}</span>
                            {% endif %}
                        </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'] %}
                                <div style="display:flex; gap:6px; align-items:center; flex-wrap:wrap;">
                                    <a class="btn-sm" href="/vouchers/print?codes={{ v.code }}&amp;format=thermal&amp;price={{ v.paid_pesos }}" target="_blank" rel="noopener">🖨 Print</a>
                                    <button type="button" class="btn-sm" onclick="openExtendModal('{{ v.code }}')">+ Time</button>
                                    <form method="POST" action="/vouchers/{{ v.code }}/revoke" style="margin:0;"
                                          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>
                                </div>
                            {% 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">
                Issues a voucher with a set price, time, and validity. Price <code>₱0</code> = free/staff; any price above 0 counts toward sales.
            </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>
                        <label>Code (optional)</label>
                        <input type="text" name="code" maxlength="8" minlength="8"
                               pattern="[A-Za-z0-9]{8}" title="Exactly 8 letters or numbers"
                               placeholder="blank = auto" autocomplete="off"
                               autocapitalize="characters" spellcheck="false"
                               style="text-transform:uppercase; font-family:ui-monospace,monospace; letter-spacing:0.05em;">
                    </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 (usage window, from first connect)</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 once connected, pauses included (0 = same as Time)</div>
                    <input type="hidden" name="validity_minutes" value="0">
                </div>

                <div class="dhm-group">
                    <label class="dhm-label">Shelf life (must connect within, from now)</label>
                    <div class="dhm-row">
                        <div class="dhm-cell">
                            <label>Days</label>
                            <input type="number" min="0" value="7" data-dhm="shelf-d" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Hours</label>
                            <input type="number" min="0" max="23" value="0" data-dhm="shelf-h" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Minutes</label>
                            <input type="number" min="0" max="59" value="0" data-dhm="shelf-m" inputmode="numeric">
                        </div>
                    </div>
                    <div class="dhm-hint">= <span class="dhm-total" data-dhm-total="shelf">0</span> minutes to first connect before it expires unused (0 = default 7 days)</div>
                    <input type="hidden" name="shelf_life_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;
    }

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

    // 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');
        recompute('shelf', 'shelf_life_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() {
        recompute('time', 'minutes');
        recompute('val', 'validity_minutes');
        recompute('shelf', 'shelf_life_minutes');
        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>

<div id="extend-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="extend-modal-title" hidden>
    <div class="modal-backdrop" onclick="closeExtendModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="extend-modal-title" class="modal-title">Add Time to Voucher</h2>
            <button type="button" class="modal-close" onclick="closeExtendModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc">
                Adds time to <code id="extend-code">—</code>. Price <code>₱0</code> = free; any price above 0 counts toward sales.
            </p>
            <form id="extend-form" method="POST" action="/vouchers/extend" 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">Add time</label>
                    <div class="dhm-row">
                        <div class="dhm-cell">
                            <label>Days</label>
                            <input type="number" min="0" value="0" data-edhm="d" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Hours</label>
                            <input type="number" min="0" max="23" value="0" data-edhm="h" inputmode="numeric">
                        </div>
                        <div class="dhm-cell">
                            <label>Minutes</label>
                            <input type="number" min="0" max="59" value="0" data-edhm="m" inputmode="numeric">
                        </div>
                    </div>
                    <div class="dhm-hint">= <span data-edhm-total>0</span> minutes added (validity extends to match)</div>
                    <input type="hidden" name="minutes" value="0">
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-primary">Add Time</button>
                    <button type="button" class="btn-secondary" onclick="closeExtendModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="batch-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="batch-modal-title" hidden>
    <div class="modal-backdrop" onclick="closeBatchModal()"></div>
    <div class="modal-dialog">
        <header class="modal-header">
            <h2 id="batch-modal-title" class="modal-title">Generate Voucher Batch</h2>
            <button type="button" class="modal-close" onclick="closeBatchModal()" aria-label="Close">&times;</button>
        </header>
        <div class="modal-body">
            <p class="card-desc">
                Generates many unused vouchers at once, then opens a printable sheet. These are
                <strong>inventory</strong> — no sale is recorded; the price is just a printed label.
                <strong>Shelf life</strong> counts from now (the connect-by window — give a generous
                one for stock you'll sell over time); <strong>validity</strong> starts at first connect.
            </p>
            <form id="batch-form" method="POST" action="/vouchers/batch" class="edit-form">
                <div class="form-grid">
                    <div>
                        <label>How many (1–100)</label>
                        <input type="number" name="quantity" min="1" max="100" value="10" required>
                    </div>
                    <div>
                        <label>Price label (₱, optional)</label>
                        <input type="number" name="face_value_pesos" min="0" value="0" placeholder="0 = no price printed">
                    </div>
                </div>

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

                <div class="dhm-group">
                    <label class="dhm-label">Validity (usage window, from first connect)</label>
                    <div class="dhm-row">
                        <div class="dhm-cell"><label>Days</label><input type="number" min="0" value="1" data-bdhm="val-d" inputmode="numeric"></div>
                        <div class="dhm-cell"><label>Hours</label><input type="number" min="0" max="23" value="0" data-bdhm="val-h" inputmode="numeric"></div>
                        <div class="dhm-cell"><label>Minutes</label><input type="number" min="0" max="59" value="0" data-bdhm="val-m" inputmode="numeric"></div>
                    </div>
                    <div class="dhm-hint">= <span class="dhm-total" data-bdhm-total="val">0</span> minutes once connected, pauses included (0 = same as Time)</div>
                    <input type="hidden" name="validity_minutes" value="0">
                </div>

                <div class="dhm-group">
                    <label class="dhm-label">Shelf life (must connect within, from generation)</label>
                    <div class="dhm-row">
                        <div class="dhm-cell"><label>Days</label><input type="number" min="0" value="30" data-bdhm="shelf-d" inputmode="numeric"></div>
                        <div class="dhm-cell"><label>Hours</label><input type="number" min="0" max="23" value="0" data-bdhm="shelf-h" inputmode="numeric"></div>
                        <div class="dhm-cell"><label>Minutes</label><input type="number" min="0" max="59" value="0" data-bdhm="shelf-m" inputmode="numeric"></div>
                    </div>
                    <div class="dhm-hint">= <span class="dhm-total" data-bdhm-total="shelf">0</span> minutes to first connect before it expires unused (0 = default 30 days)</div>
                    <input type="hidden" name="shelf_life_minutes" value="0">
                </div>

                <div class="form-actions">
                    <button type="submit" class="btn-primary">Generate &amp; Print</button>
                    <button type="button" class="btn-secondary" onclick="closeBatchModal()">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>

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

    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;
        return v;
    }
    function recompute() {
        const d = clampInt(form.querySelector('[data-edhm="d"]'));
        const h = clampInt(form.querySelector('[data-edhm="h"]'));
        const m = clampInt(form.querySelector('[data-edhm="m"]'));
        const total = d * 1440 + h * 60 + m;
        form.querySelector('[data-edhm-total]').textContent = total;
        form.querySelector('input[name="minutes"]').value = total;
        return total;
    }
    form.querySelectorAll('[data-edhm]').forEach(i => i.addEventListener('input', recompute));
    form.addEventListener('submit', e => {
        if (recompute() <= 0) {
            e.preventDefault();
            const d = form.querySelector('[data-edhm="d"]');
            d.setCustomValidity('Enter a time greater than 0d 0h 0m.');
            d.reportValidity();
            d.addEventListener('input', () => d.setCustomValidity(''), { once: true });
        }
    });

    window.openExtendModal = function(code) {
        form.action = '/vouchers/' + encodeURIComponent(code) + '/extend';
        codeLabel.textContent = code;
        form.querySelectorAll('[data-edhm]').forEach(i => { i.value = '0'; });
        form.querySelector('input[name=paid_pesos]').value = '0';
        recompute();
        modal.hidden = false;
        document.body.style.overflow = 'hidden';
        const d = form.querySelector('[data-edhm="d"]');
        if (d) setTimeout(() => { d.focus(); d.select(); }, 50);
    };
    window.closeExtendModal = function() {
        modal.hidden = true;
        document.body.style.overflow = '';
    };
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !modal.hidden) closeExtendModal();
    });
})();
</script>

<script>
(function() {
    const modal = document.getElementById('batch-modal');
    const form = document.getElementById('batch-form');
    if (!modal || !form) return;
    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;
        return v;
    }
    function sync(group) {
        const d = clampInt(form.querySelector('[data-bdhm="' + group + '-d"]'));
        const h = clampInt(form.querySelector('[data-bdhm="' + group + '-h"]'));
        const m = clampInt(form.querySelector('[data-bdhm="' + group + '-m"]'));
        const total = d * 1440 + h * 60 + m;
        form.querySelector('[data-bdhm-total="' + group + '"]').textContent = total;
        return total;
    }
    function recompute() {
        const t = sync('time'), val = sync('val'), shelf = sync('shelf');
        form.querySelector('input[name="minutes"]').value = t;
        form.querySelector('input[name="validity_minutes"]').value = val;
        form.querySelector('input[name="shelf_life_minutes"]').value = shelf;
        return t;
    }
    form.querySelectorAll('[data-bdhm]').forEach(i => i.addEventListener('input', recompute));
    form.addEventListener('submit', e => {
        if (recompute() <= 0) {
            e.preventDefault();
            const d = form.querySelector('[data-bdhm="time-d"]');
            d.setCustomValidity('Enter a time greater than 0d 0h 0m.');
            d.reportValidity();
            d.addEventListener('input', () => d.setCustomValidity(''), { once: true });
        }
    });
    window.openBatchModal = function() {
        recompute();
        modal.hidden = false;
        document.body.style.overflow = 'hidden';
        const q = form.querySelector('input[name="quantity"]');
        if (q) setTimeout(() => { q.focus(); q.select(); }, 50);
    };
    window.closeBatchModal = function() {
        modal.hidden = true;
        document.body.style.overflow = '';
    };
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && !modal.hidden) closeBatchModal();
    });
    {% if batch_form_error %}openBatchModal();{% endif %}
})();
</script>

{% endblock %}