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

<h1>Customization</h1>
<p class="page-subtitle">
    Tunables that shape what your customers see on the captive portal —
    branding, timing, copy, and theme color. Changes apply on the next
    portal page load (or next coin-slot session for the countdown).
</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 %}

<section>
    <h2>Branding — Banner</h2>
    <div class="card">
        <p class="card-desc">
            Optional banner image shown above the Vendora wordmark on the
            customer portal. When unset, the portal falls back to the Vendora
            logo. PNG or JPG, up to <strong>{{ max_banner_kb }} KB</strong>;
            display caps at ~90 px tall.
        </p>

        {# Staged banner — preview + confirm/cancel #}
        {% if banner_staged %}
            <div style="background: var(--surface-2); border: 1px dashed var(--primary);
                        border-radius: var(--radius); padding: 16px; margin: 12px 0;">
                <div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px;">
                    <strong style="color: var(--primary);">Staged — not yet live</strong>
                    <span style="font-size: 12px; color: var(--muted);">{{ banner_staged_ext|upper }}</span>
                </div>
                <img src="/customization/banner/staging" alt="Staged banner"
                     style="max-width: 100%; max-height: 120px; display: block;
                            border-radius: 8px; background: var(--surface); padding: 6px;">
                <div class="form-actions" style="margin-top: 12px;">
                    <form method="POST" action="/customization/banner/confirm" style="display: inline;"
                          onsubmit="return confirm('Apply this banner to the customer portal? It replaces the current one immediately.');">
                        <button type="submit" class="btn-primary">✓ Confirm &amp; Apply</button>
                    </form>
                    <form method="POST" action="/customization/banner/cancel" style="display: inline;">
                        <button type="submit" class="btn-secondary">Cancel</button>
                    </form>
                </div>
            </div>
        {% endif %}

        {# Active banner — preview + delete #}
        {% if banner_active %}
            <div style="margin: 12px 0;">
                <div style="display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px;">
                    <strong>Currently live</strong>
                    <span style="font-size: 12px; color: var(--muted);">{{ banner_active_ext|upper }}</span>
                </div>
                <img src="/customization/banner/active" alt="Active banner"
                     style="max-width: 100%; max-height: 120px; display: block;
                            border-radius: 8px; background: var(--surface-2); padding: 6px;">
                <div class="form-actions" style="margin-top: 10px;">
                    <form method="POST" action="/customization/banner/delete" style="display: inline;"
                          onsubmit="return confirm('Remove the active banner? The portal will fall back to the Vendora logo.');">
                        <button type="submit" class="btn-sm-danger">Remove Banner</button>
                    </form>
                </div>
            </div>
        {% else %}
            {% if not banner_staged %}
                <p style="color: var(--muted); font-size: 13px; margin: 12px 0;">
                    No banner set — customers see the Vendora wordmark.
                </p>
            {% endif %}
        {% endif %}

        <form method="POST" action="/customization/banner/upload" enctype="multipart/form-data"
              class="edit-form" style="margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);">
            <label style="display: block; margin-bottom: 8px; font-size: 13px; font-weight: 500;">
                {% if banner_staged or banner_active %}Replace banner{% else %}Upload banner{% endif %}
            </label>
            <input type="file" name="banner" accept=".png,.jpg,.jpeg,image/png,image/jpeg" required
                   style="display: block; margin-bottom: 12px; font-size: 14px;">
            <button type="submit" class="btn-primary">↑ Upload (stage for preview)</button>
            <p class="form-hint">
                Upload here stages the banner for preview. Confirm with the
                <strong>Confirm &amp; Apply</strong> button above; until then the
                live banner is unchanged.
            </p>
        </form>
    </div>
</section>

<section>
    <h2>Customer Portal Settings</h2>
    <div class="card">
        <p class="card-desc">
            These fields render on the customer-facing captive portal. All
            changes save together — partial save isn't allowed, so a typo in
            one field doesn't half-apply the rest.
        </p>

        <form method="POST" action="/customization/portal-settings" class="edit-form">
            <div class="form-grid">
                <div>
                    <label>{{ settings.portal_coin_countdown_secs.label }}</label>
                    <input type="number" name="portal_coin_countdown_secs"
                           min="10" max="300"
                           value="{{ settings.portal_coin_countdown_secs.value }}"
                           required>
                    <p class="form-hint" style="margin-top: 4px;">10–300 seconds. Default: {{ settings.portal_coin_countdown_secs.default }}.</p>
                </div>
                <div>
                    <label>{{ settings.portal_theme_color.label }}</label>
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <input type="color" name="portal_theme_color"
                               value="{{ settings.portal_theme_color.value }}"
                               style="width: 60px; height: 40px; padding: 2px; cursor: pointer;">
                        <code style="font-size: 13px; color: var(--muted);">{{ settings.portal_theme_color.value }}</code>
                    </div>
                    <p class="form-hint" style="margin-top: 4px;">Affects h1, section headings, focus rings. Default: {{ settings.portal_theme_color.default }}.</p>
                </div>
                <div style="grid-column: 1 / -1;">
                    <label>{{ settings.portal_welcome_message.label }}</label>
                    <input type="text" name="portal_welcome_message"
                           maxlength="120"
                           value="{{ settings.portal_welcome_message.value }}"
                           placeholder="{{ settings.portal_welcome_message.default }}">
                    <p class="form-hint" style="margin-top: 4px;">Max 120 chars. Shows under the wordmark / banner.</p>
                </div>
                <div style="grid-column: 1 / -1;">
                    <label>{{ settings.portal_footer_text.label }}</label>
                    <input type="text" name="portal_footer_text"
                           maxlength="80"
                           value="{{ settings.portal_footer_text.value }}"
                           placeholder="{{ settings.portal_footer_text.default }}">
                    <p class="form-hint" style="margin-top: 4px;">Max 80 chars. Shows at the bottom of every portal page.</p>
                </div>
                <div style="grid-column: 1 / -1;">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                        <input type="checkbox" name="portal_mac_auto_reconnect"
                               {% if settings.portal_mac_auto_reconnect.value %}checked{% endif %}
                               style="width: 18px; height: 18px; cursor: pointer; flex-shrink: 0;">
                        <span>{{ settings.portal_mac_auto_reconnect.label }}</span>
                    </label>
                    <p class="form-hint" style="margin-top: 4px;">
                        When ON: a customer who taps Pause and revisits the portal from the same device
                        is silently reconnected — no voucher re-entry — as long as their voucher still
                        has time and validity. When OFF: every visit forces the voucher form. Default: ON.
                    </p>
                </div>

                <div style="grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 6px;">
                    <h3 style="font-size: 15px; margin-bottom: 4px;">Bandwidth Management</h3>
                    <p class="form-hint" style="margin-bottom: 14px;">
                        Per-customer caps prevent one device from hogging the WAN. Total caps prevent
                        a fully-loaded vendo from saturating the modem. Pick Kbps or Mbps per field —
                        the form auto-displays the cleanest unit on reload. Changes apply within ~2 seconds
                        to active sessions (portal SIGHUP rebuilds the HTB tree).
                    </p>
                </div>
                {% macro bw_field(key, label, hint) %}
                    {% set d = bw_display[key] %}
                    <div>
                        <label>{{ label }}</label>
                        <div style="display: flex; gap: 8px; align-items: stretch;">
                            <input type="number" name="{{ key|replace('_kbps','') }}_value"
                                   min="1" step="1"
                                   value="{{ d.value }}"
                                   style="flex: 1 1 auto; min-width: 0;"
                                   required>
                            <select name="{{ key|replace('_kbps','') }}_unit"
                                    style="flex: 0 0 auto; width: 90px;">
                                <option value="kbps" {% if d.unit == 'kbps' %}selected{% endif %}>Kbps</option>
                                <option value="mbps" {% if d.unit == 'mbps' %}selected{% endif %}>Mbps</option>
                            </select>
                        </div>
                        <p class="form-hint" style="margin-top: 4px;">{{ hint }}</p>
                    </div>
                {% endmacro %}
                {{ bw_field(
                    "portal_bandwidth_per_client_down_kbps",
                    "Per-client download cap",
                    "Max download speed per customer. Default 5 Mbps."
                ) }}
                {{ bw_field(
                    "portal_bandwidth_per_client_up_kbps",
                    "Per-client upload cap",
                    "Max upload speed per customer. Default 2 Mbps."
                ) }}
                {{ bw_field(
                    "portal_bandwidth_total_wan_down_kbps",
                    "Total WAN download cap",
                    "Shared by all customers + SBC. Set to your modem's plan rate. Default 50 Mbps."
                ) }}
                {{ bw_field(
                    "portal_bandwidth_total_wan_up_kbps",
                    "Total WAN upload cap",
                    "Shared by all customers + SBC. Set to your modem's upload plan rate. Default 20 Mbps."
                ) }}

                <div style="grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 6px;">
                    <h3 style="font-size: 15px; margin-bottom: 4px;">Anti-Abuse Throttle</h3>
                    <p class="form-hint" style="margin-bottom: 14px;">
                        Punishes customers who keep tapping Insert Coin (or Extend) without
                        actually dropping a coin — that wastes relay actuations and blocks legitimate
                        customers via the Coinslot-in-use lockout. Counter resets the moment any
                        coin is dropped, OR when the next attempt is more than the decay window
                        after the previous one (so an occasional misclick doesn't pile up).
                    </p>
                </div>
                <div>
                    <label>{{ settings.portal_abuse_max_no_coin_attempts.label }}</label>
                    <input type="number" name="portal_abuse_max_no_coin_attempts"
                           min="1" max="100"
                           value="{{ settings.portal_abuse_max_no_coin_attempts.value }}"
                           required>
                    <p class="form-hint" style="margin-top: 4px;">1–100 empty tries. Default: {{ settings.portal_abuse_max_no_coin_attempts.default }}.</p>
                </div>
                <div>
                    <label>{{ settings.portal_abuse_lock_duration_minutes.label }}</label>
                    <input type="number" name="portal_abuse_lock_duration_minutes"
                           min="1" max="1440"
                           value="{{ settings.portal_abuse_lock_duration_minutes.value }}"
                           required>
                    <p class="form-hint" style="margin-top: 4px;">1–1440 minutes (max 24 h). Default: {{ settings.portal_abuse_lock_duration_minutes.default }} minutes.</p>
                </div>
                <div>
                    <label>{{ settings.portal_abuse_decay_window_minutes.label }}</label>
                    <input type="number" name="portal_abuse_decay_window_minutes"
                           min="1" max="1440"
                           value="{{ settings.portal_abuse_decay_window_minutes.value }}"
                           required>
                    <p class="form-hint" style="margin-top: 4px;">If the next empty attempt is more than this many minutes after the previous one, the counter starts over at 1. Default: {{ settings.portal_abuse_decay_window_minutes.default }} minutes.</p>
                </div>
                <div>
                    <label>{{ settings.portal_abuse_lock_max_minutes.label }}</label>
                    <input type="number" name="portal_abuse_lock_max_minutes"
                           min="1" max="1440"
                           value="{{ settings.portal_abuse_lock_max_minutes.value }}"
                           required>
                    <p class="form-hint" style="margin-top: 4px;">
                        Each new lock in a streak doubles the previous duration
                        (lock 1 = base, 2 = ×2, 3 = ×4 …) capped at this ceiling.
                        Persistent abusers eventually wait the full ceiling
                        between attempts; one-time misclickers always get just
                        the base duration. Default: {{ settings.portal_abuse_lock_max_minutes.default }} minutes.
                    </p>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-primary">Save Settings</button>
            </div>
        </form>
    </div>
</section>

{% endblock %}