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

<h1>GPIO Hardware Tools</h1>
<p class="page-subtitle">
    Helpers for finding pin assignments on a new board. Each briefly stops the coin service — not for business hours.
</p>

<div class="page-actions">
    <a href="/system" class="btn-secondary">← Back to System</a>
</div>

{% if flash_msg %}
    <div class="flash flash-good">
        {{ flash_msg }}
        <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 %}

{% if not license_active %}
    {# License gate banner — tools are diagnostic and only available on
       licensed devices to prevent stolen/cloned-device reverse-engineering.
       Forms still render normally; the server-side handlers re-check
       vlic.portal_status() and refuse with the same license_inactive
       error message if the operator clicks anyway. Same pattern as
       /vouchers/custom (visible but server-gated).

       NB: `.flash` in base.html is `display: flex`, so every child element
       and unwrapped text node becomes a separate flex item. Wrap the body
       in a single inner <div> so the whole sentence renders as one flex
       child (with `flex: 1` per the existing `.flash > div:first-child`
       rule), not a row of 6 mini-columns. #}
    <div class="flash flash-error" style="margin-bottom: 18px;">
        <div>
            <strong>GPIO Hardware Tools are disabled.</strong>
            These tools require an active license. Activate this device at
            <a href="https://vendorawifi.com" target="_blank" rel="noopener" style="color: inherit; text-decoration: underline;">vendorawifi.com</a>
            before using them, then check the <a href="/license" style="color: inherit; text-decoration: underline;">License</a>
            page for activation status.
        </div>
    </div>
{% endif %}

<section>
    <h2>GPIO Tester</h2>
    <div class="card">
        <p class="card-desc">
            Drive a GPIO line HIGH or LOW for a few seconds to find which pin is
            wired to a signal — watch the relay or LED for a response.
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            <strong>Heads up:</strong> briefly stops the coin service (interrupts any
            paying session). Auto-releases when the timer ends.
        </p>

        <form method="POST" action="/system/gpio-test" class="edit-form"
              onsubmit="return confirm('This stops vendora-coin for a moment and drives the line. Continue?');">
            <div class="form-grid">
                <div>
                    <label>GPIO line</label>
                    <select name="line" required>
                        {% for line, label in data.gpio.tester_options %}
                        <option value="{{ line }}"
                            {% if line == 10 %}selected{% endif %}>
                            {{ label }}
                        </option>
                        {% endfor %}
                    </select>
                    <p class="form-hint">Only Port A pins routed to the 40-pin header.</p>
                </div>
                <div>
                    <label>Hold duration (seconds)</label>
                    <input type="number" name="duration_secs" min="1" max="10" value="5" required>
                    <p class="form-hint">1–10 s.</p>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" name="value" value="1" class="btn-primary">▲ Pulse HIGH</button>
                <button type="submit" name="value" value="0" class="btn-secondary">▼ Pulse LOW</button>
            </div>
        </form>
    </div>
</section>

<section>
    <h2>GPIO Pin Looper</h2>
    <div class="card">
        <p class="card-desc">
            Sweeps every header pin HIGH then LOW (~1 min 45 s total). The pin shown
            when the relay clicks is your slot-power pin.
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            <strong>Heads up:</strong> stops the coin service while running. Safe under normal wiring.
        </p>

        <div id="looper-idle">
            <form method="POST" action="/system/gpio-looper/start" class="edit-form"
                  onsubmit="return confirm('Start pin looper? Stops vendora-coin for ~2 minutes.');">
                <div class="form-actions">
                    <button type="submit" class="btn-primary">▶ Start Sweep</button>
                </div>
            </form>
        </div>

        <div id="looper-active" hidden>
            <div style="background: var(--surface-2); border-radius: var(--radius); padding: 18px; margin-bottom: 14px;">
                <div style="font-size: 13px; color: var(--muted); margin-bottom: 6px;">
                    Currently driving
                </div>
                <div id="looper-current-label" style="font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 10px;">
                    —
                </div>
                <div style="display: flex; gap: 16px; align-items: baseline;">
                    <div>
                        <span style="font-size: 12px; color: var(--muted);">Phase:</span>
                        <span id="looper-phase" style="font-weight: 700; margin-left: 4px;">—</span>
                    </div>
                    <div>
                        <span style="font-size: 12px; color: var(--muted);">Phase time:</span>
                        <span id="looper-phase-remaining" style="font-family: ui-monospace, Menlo, monospace; margin-left: 4px;">—</span>
                    </div>
                    <div>
                        <span style="font-size: 12px; color: var(--muted);">Total elapsed:</span>
                        <span id="looper-elapsed-total" style="font-family: ui-monospace, Menlo, monospace; margin-left: 4px;">—</span>
                    </div>
                </div>
            </div>
            <form method="POST" action="/system/gpio-looper/stop" class="edit-form">
                <div class="form-actions">
                    <button type="submit" class="btn-sm-danger">■ Stop Sweep</button>
                </div>
            </form>
        </div>

        <div id="looper-result" hidden style="background: var(--good-light); color: var(--good-text); padding: 12px 14px; border-radius: 8px; margin-top: 12px;">
            <strong>Sweep finished.</strong>
            <span id="looper-result-detail"></span>
        </div>
    </div>
</section>

<section>
    <h2>Pulse Pin Finder</h2>
    <div class="card">
        <p class="card-desc">
            Listens on every header pin at once. Start it, drop one coin, and the
            pin that fires is your pulse pin.
        </p>
        <p class="card-desc" style="font-size:12px; color:var(--muted);">
            <strong>Heads up:</strong> stops the coin service while running. Pins
            reserved by the kernel are skipped (listed below).
        </p>

        <div id="finder-idle">
            <form method="POST" action="/system/pulse-finder/start" class="edit-form"
                  onsubmit="return confirm('Start pulse finder? Stops vendora-coin while it listens.');">
                <div class="form-actions">
                    <button type="submit" class="btn-primary">▶ Start Listening</button>
                </div>
            </form>
        </div>

        <div id="finder-active" hidden>
            <div style="background: var(--surface-2); border-radius: var(--radius); padding: 18px; margin-bottom: 14px;">
                <div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px;">
                    <div>
                        <span style="font-size: 13px; color: var(--muted);">Listening — drop a coin to identify the pulse pin</span>
                    </div>
                    <div style="font-family: ui-monospace, Menlo, monospace; font-size: 13px;">
                        Elapsed: <span id="finder-elapsed">0s</span>
                    </div>
                </div>

                <div style="font-size: 13px; color: var(--muted); margin-bottom: 4px;">
                    Edges detected
                    <span id="finder-event-count" style="font-weight: 700; color: var(--text);">(0)</span>
                </div>
                <div id="finder-events" style="background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; min-height: 60px; max-height: 240px; overflow-y: auto;">
                    <div style="color: var(--muted); font-size: 13px;" id="finder-events-empty">
                        Waiting for the first edge…
                    </div>
                </div>

                <div id="finder-skipped-block" hidden style="margin-top: 12px; font-size: 12px; color: var(--muted);">
                    <strong>Skipped:</strong>
                    <span id="finder-skipped"></span>
                    (kernel claimed these lines — usually reserved peripherals)
                </div>
            </div>
            <form method="POST" action="/system/pulse-finder/stop" class="edit-form">
                <div class="form-actions">
                    <button type="submit" class="btn-sm-danger">■ Stop Listening</button>
                </div>
            </form>
        </div>
    </div>
</section>

<script>
(function () {
    const idleBox     = document.getElementById('finder-idle');
    const activeBox   = document.getElementById('finder-active');
    const elapsedEl   = document.getElementById('finder-elapsed');
    const countEl     = document.getElementById('finder-event-count');
    const eventsEl    = document.getElementById('finder-events');
    const emptyEl     = document.getElementById('finder-events-empty');
    const skippedBlock= document.getElementById('finder-skipped-block');
    const skippedEl   = document.getElementById('finder-skipped');

    function fmtSecs(s) {
        if (!s && s !== 0) return '0s';
        const m = Math.floor(s / 60), r = s % 60;
        return m > 0 ? `${m}m ${r}s` : `${r}s`;
    }
    function tsLocal(t) {
        const d = new Date(t * 1000);
        return d.toLocaleTimeString();
    }

    let renderedCount = 0;
    let renderedSkippedKey = '';

    async function poll() {
        try {
            const r = await fetch('/api/system/pulse-finder-state');
            if (!r.ok) return;
            const s = await r.json();
            idleBox.hidden  = s.active;
            activeBox.hidden = !s.active;
            if (s.active) {
                elapsedEl.textContent = fmtSecs(s.elapsed_total);
                // Append new events incrementally — don't redraw the whole list.
                const events = s.events || [];
                if (events.length > renderedCount) {
                    if (renderedCount === 0) emptyEl.remove();
                    for (let i = renderedCount; i < events.length; i++) {
                        const ev = events[i];
                        const row = document.createElement('div');
                        row.style.padding = '4px 0';
                        row.style.fontFamily = 'ui-monospace, Menlo, monospace';
                        row.style.fontSize = '13px';
                        row.innerHTML =
                            `<span style="color: var(--muted);">${tsLocal(ev.ts_unix)}</span> ` +
                            `<strong style="color: var(--primary);">${ev.label}</strong>`;
                        eventsEl.appendChild(row);
                    }
                    renderedCount = events.length;
                    eventsEl.scrollTop = eventsEl.scrollHeight;
                }
                countEl.textContent = `(${events.length})`;
                // Render skipped pins (only when the list changes).
                const skipped = s.skipped || [];
                const key = skipped.map(x => x.line).join(',');
                if (key !== renderedSkippedKey) {
                    if (skipped.length > 0) {
                        skippedBlock.hidden = false;
                        skippedEl.textContent = skipped.map(x =>
                            `PA${x.line}`).join(', ');
                    } else {
                        skippedBlock.hidden = true;
                    }
                    renderedSkippedKey = key;
                }
            } else {
                // Reset render trackers so next start gets a clean slate.
                renderedCount = 0;
                renderedSkippedKey = '';
            }
        } catch (e) { /* network blip, try again */ }
    }
    poll();
    setInterval(poll, 1000);
})();
</script>

<script>
(function () {
    const idleBox     = document.getElementById('looper-idle');
    const activeBox   = document.getElementById('looper-active');
    const resultBox   = document.getElementById('looper-result');
    const labelEl     = document.getElementById('looper-current-label');
    const phaseEl     = document.getElementById('looper-phase');
    const phaseRemEl  = document.getElementById('looper-phase-remaining');
    const elapsedEl   = document.getElementById('looper-elapsed-total');
    const resultDet   = document.getElementById('looper-result-detail');

    function fmtSecs(s) {
        if (!s && s !== 0) return '—';
        const m = Math.floor(s / 60), r = s % 60;
        return m > 0 ? `${m}m ${r}s` : `${r}s`;
    }

    let lastWasActive = false;
    async function poll() {
        try {
            const r = await fetch('/api/system/gpio-looper-state');
            if (!r.ok) return;
            const s = await r.json();
            if (s.active) {
                lastWasActive = true;
                idleBox.hidden = true;
                activeBox.hidden = false;
                resultBox.hidden = true;
                labelEl.textContent  = s.current_label || '—';
                phaseEl.textContent  = s.current_phase || '—';
                phaseRemEl.textContent = fmtSecs(s.phase_remaining);
                elapsedEl.textContent  = fmtSecs(s.elapsed_total);
            } else {
                idleBox.hidden = false;
                activeBox.hidden = true;
                // First poll after a completed/stopped sweep — show result banner.
                if (lastWasActive) {
                    resultBox.hidden = false;
                    resultDet.textContent = s.completed
                        ? ' Swept all PA pins. If the relay clicked at any point, note the pin label and set it in GPIO Pin Map above.'
                        : ' Stopped early. Note the last pin shown if the relay clicked just before you hit stop.';
                    lastWasActive = false;
                }
            }
        } catch (e) {
            // network blip — try again next tick
        }
    }
    poll();
    setInterval(poll, 1000);
})();
</script>

{% endblock %}