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

<h1>Abuse</h1>
<p class="page-subtitle">
    Customers whose coin-slot tap-without-coin behavior triggered the
    Anti-Abuse Throttle. Tune the threshold + lock duration + decay window in
    <a href="/customization">Customization</a>.
</p>

{% 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 %}

<div class="page-actions">
    <button type="button" class="btn-primary" id="open-manual-lock">+ Manual Lock</button>
</div>

{# ============================================================ #}
{# Currently locked                                              #}
{# ============================================================ #}
<section>
    <h2>Currently Locked
        <span style="font-size: 13px; font-weight: 500; color: var(--muted);">
            ({{ locked|length }})
        </span>
    </h2>
    <div class="card">
        {% if locked %}
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Identifier</th>
                            <th class="col-hide-mobile">Fails</th>
                            <th class="col-hide-mobile">Lock #</th>
                            <th>Unlocks in</th>
                            <th class="col-hide-mobile">Last attempt</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for r in locked %}
                        <tr>
                            <td><code style="font-size: 12px;">{{ r.key }}</code></td>
                            <td class="col-hide-mobile">{{ r.fail_count }}</td>
                            <td class="col-hide-mobile"
                                title="How many times this identifier has been locked in their current streak. Each lock doubles the duration up to the configured ceiling.">
                                {% if r.consecutive_locks and r.consecutive_locks > 1 %}
                                    <span style="color: var(--warn-text); font-weight: 600;">{{ r.consecutive_locks }}×</span>
                                {% else %}
                                    {{ r.consecutive_locks or 1 }}
                                {% endif %}
                            </td>
                            <td>
                                <span class="abuse-countdown" data-deadline="{{ r.locked_until_unix }}">
                                    {{ (r.seconds_remaining // 60 + (1 if r.seconds_remaining % 60 else 0)) }} min
                                </span>
                            </td>
                            <td class="col-hide-mobile">{{ r.last_attempt_at | localtime }}</td>
                            <td>
                                <form method="POST" action="/abuse/unlock" style="display: inline;"
                                      onsubmit="return confirm('Unlock {{ r.key }}? They will be able to use the coin slot immediately.');">
                                    <input type="hidden" name="key" value="{{ r.key }}">
                                    <button type="submit" class="btn-sm-danger">Unlock</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="card-desc" style="margin: 0;">No customers currently locked.</p>
        {% endif %}
    </div>
</section>

{# ============================================================ #}
{# Active counters (not yet locked)                              #}
{# ============================================================ #}
<section>
    <h2>Active Counters
        <span style="font-size: 13px; font-weight: 500; color: var(--muted);">
            ({{ counters|length }})
        </span>
    </h2>
    <div class="card">
        <p class="card-desc">
            Customers who have made empty Insert Coin / Extend attempts but haven't
            hit the lockout threshold yet. Counter naturally decays — reset manually
            here only if you're sure they shouldn't be on the list.
        </p>
        {% if counters %}
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Identifier</th>
                            <th>Fails</th>
                            <th class="col-hide-mobile">Last attempt</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for r in counters %}
                        <tr>
                            <td><code style="font-size: 12px;">{{ r.key }}</code></td>
                            <td>{{ r.fail_count }}</td>
                            <td class="col-hide-mobile">{{ r.last_attempt_at | localtime }}</td>
                            <td>
                                <form method="POST" action="/abuse/reset" style="display: inline;"
                                      onsubmit="return confirm('Reset counter for {{ r.key }}?');">
                                    <input type="hidden" name="key" value="{{ r.key }}">
                                    <button type="submit" class="btn-sm">Reset</button>
                                </form>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="card-desc" style="margin: 0;">No active fail counters.</p>
        {% endif %}
    </div>
</section>

{# ============================================================ #}
{# History                                                        #}
{# ============================================================ #}
<section>
    <h2>History
        <span style="font-size: 13px; font-weight: 500; color: var(--muted);">
            ({{ log_total }})
        </span>
    </h2>
    <div class="card">
        <p class="card-desc">
            Append-only log of lockout-related events: auto-locks (threshold hit),
            manual locks (you), and unlocks (you). Lock expirations don't appear —
            those are implicit (lock duration is known at lock time).
        </p>
        {% if log_rows %}
            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>When</th>
                            <th>Identifier</th>
                            <th>Event</th>
                            <th class="col-hide-mobile">Actor</th>
                            <th class="col-hide-mobile">Details</th>
                        </tr>
                    </thead>
                    <tbody>
                    {% for r in log_rows %}
                        <tr>
                            <td>{{ r.ts_unix | localtime }}</td>
                            <td><code style="font-size: 12px;">{{ r.key }}</code></td>
                            <td>
                                {% if r.event == 'locked' %}
                                    <span class="badge badge-revoked">Auto-Locked</span>
                                {% elif r.event == 'manual_lock' %}
                                    <span class="badge badge-paused">Manual Lock</span>
                                {% elif r.event == 'unlocked' %}
                                    <span class="badge badge-active">Unlocked</span>
                                {% else %}
                                    <code>{{ r.event }}</code>
                                {% endif %}
                            </td>
                            <td class="col-hide-mobile">{{ r.actor }}</td>
                            <td class="col-hide-mobile">
                                {% if r.fail_count is not none %}fails={{ r.fail_count }}{% endif %}
                                {% if r.locked_until_unix %}
                                    {% if r.fail_count is not none %} · {% endif %}
                                    until {{ r.locked_until_unix | localtime }}
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>

            {% if log_total > log_page_size %}
                <div class="pager">
                    {% if log_offset > 0 %}
                        <a href="/abuse?offset={{ [log_offset - log_page_size, 0]|max }}" class="btn-secondary">‹ Newer</a>
                    {% else %}
                        <span class="btn-secondary disabled">‹ Newer</span>
                    {% endif %}
                    <span class="pager-status">
                        {{ log_offset + 1 }}–{{ [log_offset + log_page_size, log_total]|min }}
                        of {{ log_total }}
                    </span>
                    {% if log_offset + log_page_size < log_total %}
                        <a href="/abuse?offset={{ log_offset + log_page_size }}" class="btn-secondary">Older ›</a>
                    {% else %}
                        <span class="btn-secondary disabled">Older ›</span>
                    {% endif %}
                </div>
            {% endif %}
        {% else %}
            <p class="card-desc" style="margin: 0;">No abuse events recorded yet.</p>
        {% endif %}
    </div>
</section>

{# ============================================================ #}
{# Manual Lock modal                                             #}
{# ============================================================ #}
<div class="modal-backdrop" id="manual-lock-modal" hidden>
    <div class="modal-card">
        <div class="modal-header">
            <h3>Manual Lock</h3>
            <button type="button" class="modal-close" data-close="manual-lock-modal" aria-label="Close">×</button>
        </div>
        <form method="POST" action="/abuse/manual-lock" class="edit-form">
            <label for="identifier">Identifier</label>
            <input type="text" id="identifier" name="identifier"
                   placeholder="aa:bb:cc:dd:ee:ff or 10.0.10.157"
                   pattern="^([0-9a-fA-F]{2}(:[0-9a-fA-F]{2}){5}|\d{1,3}(\.\d{1,3}){3})$"
                   required>
            <p class="form-hint">MAC address (preferred — survives DHCP renewal) or LAN IPv4.</p>

            <label for="lock_minutes" style="margin-top: 14px;">Lock Duration (minutes)</label>
            <input type="number" id="lock_minutes" name="lock_minutes"
                   min="1" max="1440" value="60" required>
            <p class="form-hint">1–1440 (max 24 h).</p>

            <div class="form-actions">
                <button type="button" class="btn-secondary" data-close="manual-lock-modal">Cancel</button>
                <button type="submit" class="btn-primary">Apply Lock</button>
            </div>
        </form>
    </div>
</div>

<script>
    (function () {
        const open = document.getElementById('open-manual-lock');
        const modal = document.getElementById('manual-lock-modal');
        if (!open || !modal) return;
        function show()  { modal.hidden = false; document.getElementById('identifier').focus(); }
        function hide()  { modal.hidden = true; }
        open.addEventListener('click', show);
        modal.addEventListener('click', (e) => {
            if (e.target === modal) hide();
            if (e.target.dataset && e.target.dataset.close === 'manual-lock-modal') hide();
        });
        // Auto-open on validation error so the operator's context is restored.
        {% if error_msg and (request.query_params.get('error') in ['bad_identifier', 'bad_duration', 'no_target']) %}
            show();
        {% endif %}
    })();

    // Live-tick the "Unlocks in" countdowns so the operator sees them
    // shrink toward 0 without needing to refresh.
    (function () {
        const cells = document.querySelectorAll('.abuse-countdown');
        if (!cells.length) return;
        function update() {
            const now = Math.floor(Date.now() / 1000);
            cells.forEach(c => {
                const deadline = parseInt(c.dataset.deadline, 10) || 0;
                const left = deadline - now;
                if (left <= 0) { c.textContent = 'expired'; return; }
                const m = Math.floor(left / 60), s = left % 60;
                c.textContent = m > 0 ? `${m}m ${s}s` : `${s}s`;
            });
        }
        update();
        setInterval(update, 1000);
    })();
</script>

{% endblock %}