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

<h1>Customization</h1>
<p class="page-subtitle">
    What your customers see on the captive portal. Changes apply on the next page load.
</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>Reusable settings profile</h2>
    <div class="card">
        <p class="card-desc">
            Save your colors, text, and logo as a file, then load it on another vendo to skip the setup. (Per-vendo speed limits + anti-abuse settings aren't included.)
        </p>
        <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px;">
            <a href="/customization/export" style="display: inline-block; text-decoration: none; padding: 10px 16px; background: var(--primary); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 600;">⬇ Download settings file</a>
            <form method="POST" action="/customization/import" enctype="multipart/form-data" style="display: inline-flex; gap: 8px; align-items: center; margin: 0;"
                  onsubmit="return confirm('Load this profile? It replaces the current colors, text, and logo on this vendo.');">
                <input type="file" name="profile" accept=".json,application/json" required style="font-size: 13px;">
                <button type="submit" class="btn-secondary">⬆ Load file</button>
            </form>
        </div>
        <p class="form-hint" style="margin-top: 8px;">Loading a file applies it to this vendo right away (colors, text, business name, and logo).</p>
    </div>
</section>

<section>
    <h2>Customer Portal Settings</h2>
    <div class="card">
        <p class="card-desc">
            Your logo, shown full-width across the top of the portal (no image → the wordmark + your business name).
            <strong style="color: var(--primary);">Recommended: a wide 1000 × 200px image.</strong>
            PNG or JPG, up to <strong>{{ max_banner_kb }} KB</strong>.
        </p>

        {# Active banner — preview + delete #}
        {% if banner_active %}
            <div id="banner-active" 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;">
                    <button type="button" class="btn-sm-danger" onclick="removeBanner()">Remove Banner</button>
                </div>
            </div>
            <div id="banner-remove-note" style="display: none; margin: 12px 0; color: #ef4444; font-size: 13px; font-weight: 600;">
                Banner will be removed when you Save Settings.
            </div>
        {% else %}
            <p style="color: var(--muted); font-size: 13px; margin: 12px 0;">
                No banner set — customers see the Vendora wordmark.
            </p>
        {% endif %}

        {# Pending banner — chosen but not yet live; applies on Save Settings #}
        <div id="banner-pending" style="margin: 12px 0;{% if not banner_staged %} display: none;{% endif %}">
            <strong style="color: var(--primary); font-size: 13px;">Pending — applies when you Save Settings</strong>
            <img id="banner-thumb" alt="Pending banner"
                 src="{% if banner_staged %}/customization/banner/staging{% endif %}"
                 style="display: block; max-width: 100%; max-height: 120px; margin-top: 8px;
                        border-radius: 8px; background: var(--surface-2); padding: 6px;">
        </div>

        <div 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_active %}Replace logo / banner{% else %}Add a logo / banner{% endif %}
            </label>
            <input type="file" id="banner-file" accept=".png,.jpg,.jpeg,image/png,image/jpeg"
                   onchange="chooseBanner(this)"
                   style="display: block; margin-bottom: 4px; font-size: 14px;">
            <p class="form-hint">
                <strong>Best size: 1000 × 200px (wide).</strong> PNG or JPG, up to {{ max_banner_kb }} KB. Previews here and in <strong>Preview</strong>; goes live when you click <strong>Save Settings</strong>.
            </p>
        </div>
    </div>

    <div class="card">
        <p class="card-desc">
            Colors, text, and the coin countdown. Hit <strong>Preview</strong> to see it live before saving.
        </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 style="grid-column: 1 / -1;">
                    <label>Portal theme colors</label>
                    <div style="display: flex; gap: 8px; margin: 6px 0 12px; flex-wrap: wrap;">
                        <button type="button" onclick="applyThemePreset('dark')" style="padding: 7px 14px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #334155; cursor: pointer;">🌙 Dark (default)</button>
                        <button type="button" onclick="applyThemePreset('light')" style="padding: 7px 14px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #334155; cursor: pointer;">☀️ Light</button>
                    </div>
                    <div style="display: flex; gap: 18px; flex-wrap: wrap;">
                        <div>
                            <span style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px;">Background</span>
                            <div class="cpick" data-name="portal_bg_color">
                                <button type="button" class="cpick-sw" aria-label="Pick background color"></button>
                                <input type="text" name="portal_bg_color" value="{{ settings.portal_bg_color.value }}" class="cpick-hex" maxlength="7" spellcheck="false" autocomplete="off">
                            </div>
                        </div>
                        <div>
                            <span style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px;">Card surface</span>
                            <div class="cpick" data-name="portal_card_color">
                                <button type="button" class="cpick-sw" aria-label="Pick card color"></button>
                                <input type="text" name="portal_card_color" value="{{ settings.portal_card_color.value }}" class="cpick-hex" maxlength="7" spellcheck="false" autocomplete="off">
                            </div>
                        </div>
                        <div>
                            <span style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px;">Accent</span>
                            <div class="cpick" data-name="portal_theme_color">
                                <button type="button" class="cpick-sw" aria-label="Pick accent color"></button>
                                <input type="text" name="portal_theme_color" value="{{ settings.portal_theme_color.value }}" class="cpick-hex" maxlength="7" spellcheck="false" autocomplete="off">
                            </div>
                        </div>
                        <div>
                            <span style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px;">Text</span>
                            <div class="cpick" data-name="portal_text_color">
                                <button type="button" class="cpick-sw" aria-label="Pick text color"></button>
                                <input type="text" name="portal_text_color" value="{{ settings.portal_text_color.value }}" class="cpick-hex" maxlength="7" spellcheck="false" autocomplete="off">
                            </div>
                        </div>
                        <div>
                            <span style="display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px;">Card border</span>
                            <div class="cpick" data-name="portal_card_border_color">
                                <button type="button" class="cpick-sw" aria-label="Pick card border color"></button>
                                <input type="text" name="portal_card_border_color" value="{{ settings.portal_card_border_color.value }}" class="cpick-hex" maxlength="7" spellcheck="false" autocomplete="off">
                            </div>
                        </div>
                    </div>
                    <p class="form-hint" style="margin-top: 8px;">Background, card, card border, accent (buttons/headings/links), and text. Presets are a starting point — adjust any color. Prices, success, and error colors stay fixed for clarity.</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_business_name.label }}</label>
                    <input type="text" name="portal_business_name"
                           maxlength="40"
                           value="{{ settings.portal_business_name.value }}"
                           placeholder="{{ settings.portal_business_name.default }}">
                    <p class="form-hint" style="margin-top: 4px;">Max 40 chars — the title customers see (replaces "Vendora WiFi"). The banner above acts as your logo; the footer always shows "Powered by Vendora WiFi · version".</p>
                </div>
                <div style="grid-column: 1 / -1;">
                    <label>{{ settings.portal_insert_coin_label.label }}</label>
                    <input type="text" name="portal_insert_coin_label"
                           maxlength="20"
                           value="{{ settings.portal_insert_coin_label.value }}"
                           placeholder="{{ settings.portal_insert_coin_label.default }}">
                    <p class="form-hint" style="margin-top: 4px;">Max 20 chars — the coin button label on the login page (a 🪙 icon is added automatically). Default: "Insert Coin".</p>
                </div>
            </div>
            <input type="hidden" name="section" value="portal">
            <input type="hidden" name="banner_remove" id="banner-remove-flag" value="">
            <div class="form-actions">
                <button type="button" onclick="openPreview()" style="margin-right: 8px; padding: 9px 16px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #334155; cursor: pointer; font-size: 14px;">🔍 Preview</button>
                <button type="submit" class="btn-primary">Save Settings</button>
            </div>
        </form>
    </div>
</section>

<section>
    <h2>Operational Settings</h2>
    <p class="page-subtitle" style="margin-top: -8px;">Speed limits, abuse lockouts, and returning-customer behavior — separate from the portal's look. Each card saves on its own.</p>

    <div class="card">
        <h3 style="font-size: 15px; margin: 0 0 4px;">Bandwidth Management</h3>
        <p class="card-desc">Speed caps per customer and vendo-wide. Applies to active sessions within a couple seconds.</p>
        <form method="POST" action="/customization/portal-settings" class="edit-form">
            <input type="hidden" name="section" value="bandwidth">
            <div class="form-grid">
                {% 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>
            <div class="form-actions">
                <button type="submit" class="btn-primary">Save Bandwidth</button>
            </div>
        </form>
    </div>

    <div class="card">
        <h3 style="font-size: 15px; margin: 0 0 4px;">Anti-Abuse Throttle</h3>
        <p class="card-desc">Locks out customers who keep tapping Insert Coin without dropping one. Any coin resets the counter.</p>
        <form method="POST" action="/customization/portal-settings" class="edit-form">
            <input type="hidden" name="section" value="abuse">
            <div class="form-grid">
                <div>
                    <label style="line-height: 1.3; min-height: 2.6em;">{{ 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 style="line-height: 1.3; min-height: 2.6em;">{{ 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 style="line-height: 1.3; min-height: 2.6em;">{{ 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;">Empty attempts older than this don't count. Default: {{ settings.portal_abuse_decay_window_minutes.default }} minutes.</p>
                </div>
                <div>
                    <label style="line-height: 1.3; min-height: 2.6em;">{{ 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;">
                        Repeat lockouts double each time, up to this ceiling. Default: {{ settings.portal_abuse_lock_max_minutes.default }} minutes.
                    </p>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-primary">Save Anti-Abuse</button>
            </div>
        </form>
    </div>

    <div class="card">
        <h3 style="font-size: 15px; margin: 0 0 4px;">Auto Reconnect</h3>
        <p class="card-desc">Returning customers on the same device skip re-entering their voucher.</p>
        <form method="POST" action="/customization/portal-settings" class="edit-form">
            <input type="hidden" name="section" value="autoreconnect">
            <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;">Default: ON.</p>
            <div class="form-actions" style="margin-top: 14px;">
                <button type="submit" class="btn-primary">Save Auto Reconnect</button>
            </div>
        </form>
    </div>
</section>

<style>
.mock-screen { background: var(--mbg, #0a0f1c); padding: 22px 16px; min-height: 360px; color: var(--mtext, #e2e8f0); font-family: 'Figtree', system-ui, sans-serif; }
.mock-card { background: var(--mcard, #111827); border-radius: 14px; padding: 20px 16px; text-align: center; }
.mock-logo { font-size: 19px; font-weight: 700; color: var(--maccent, #38bdf8); margin-bottom: 6px; word-break: break-word; }
.mock-welcome { font-size: 13px; opacity: 0.85; margin-bottom: 16px; }
.mock-btn-coin { display: block; width: 100%; padding: 13px; border: none; border-radius: 10px; background: var(--maccent, #38bdf8); color: #04121f; font-weight: 700; font-size: 15px; cursor: default; margin-bottom: 12px; }
.mock-or { font-size: 11px; opacity: 0.55; margin: 12px 0; letter-spacing: 1px; }
.mock-input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(148,163,184,0.3); background: rgba(148,163,184,0.08); color: var(--mtext, #e2e8f0); text-align: center; margin-bottom: 10px; box-sizing: border-box; }
.mock-btn-connect { display: block; width: 100%; padding: 11px; border: 1px solid var(--maccent, #38bdf8); border-radius: 10px; background: transparent; color: var(--maccent, #38bdf8); font-weight: 600; cursor: default; }
.mock-footer { font-size: 11px; opacity: 0.5; margin-top: 18px; }
.mock-pill { display: inline-block; background: rgba(34,197,94,0.15); color: #22c55e; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.mock-timer { font-size: 30px; font-weight: 700; font-family: monospace; margin: 6px 0; }
.ptab { padding: 7px 16px; font-size: 13px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #334155; cursor: pointer; }
.ptab.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.cpick { display: inline-flex; align-items: center; gap: 6px; }
.cpick-sw { width: 38px; height: 38px; border-radius: 8px; border: 1px solid #cbd5e1; cursor: pointer; padding: 0; flex: 0 0 auto; }
.cpick-hex { width: 86px; padding: 8px 6px; font-family: monospace; font-size: 13px; text-transform: lowercase; }
.cpop { position: fixed; z-index: 3000; box-sizing: border-box; width: 300px; max-width: calc(100vw - 16px); background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 12px 38px rgba(15,23,42,0.25); padding: 16px; }
.cpop[hidden] { display: none; }
.cpop-sv { position: relative; width: 100%; height: 196px; border-radius: 8px; cursor: crosshair; touch-action: none; }
.cpop-svh { position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.45); transform: translate(-50%, -50%); pointer-events: none; }
.cpop-hue { position: relative; width: 100%; height: 22px; border-radius: 11px; margin: 16px 0 12px; cursor: pointer; touch-action: none; background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); }
.cpop-hueh { position: absolute; top: 50%; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.45); transform: translate(-50%, -50%); pointer-events: none; }
.cpop-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cpop-row label { font-size: 12px; color: #64748b; width: 36px; flex: 0 0 auto; }
.cpop-row input { flex: 1 1 auto; min-width: 0; padding: 8px; font-family: monospace; font-size: 14px; text-transform: lowercase; }
.cpop-rgb { font-family: monospace; font-size: 14px; color: #334155; }
</style>

<div id="preview-overlay" style="display: none; position: fixed; inset: 0; background: rgba(15,23,42,0.65); z-index: 2000; align-items: center; justify-content: center; padding: 20px;">
    <div style="background: #fff; border-radius: 16px; max-width: 400px; width: 100%; max-height: 92vh; overflow: auto; padding: 18px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;">
            <strong style="font-size: 15px;">Portal preview</strong>
            <button type="button" onclick="closePreview()" style="border: none; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #64748b;">&times;</button>
        </div>
        <div style="display: flex; gap: 8px; margin-bottom: 14px;">
            <button type="button" id="ptab-login" class="ptab active" onclick="switchMock('login')">Login</button>
            <button type="button" id="ptab-status" class="ptab" onclick="switchMock('status')">Status</button>
        </div>
        <div style="border-radius: 14px; overflow: hidden; border: 1px solid #e2e8f0; background: #f1f5f9;">
            <iframe id="prev-frame" title="Portal preview" style="width: 100%; height: 540px; border: 0; display: block;"></iframe>
        </div>
        <p style="font-size: 12px; color: #64748b; margin-top: 10px;">Live preview of your unsaved edits. Click <strong>Save Settings</strong> to apply.</p>
    </div>
</div>

<div id="cpop" class="cpop" hidden>
    <div class="cpop-sv" id="cpop-sv"><div class="cpop-svh" id="cpop-svh"></div></div>
    <div class="cpop-hue" id="cpop-hue"><div class="cpop-hueh" id="cpop-hueh"></div></div>
    <div class="cpop-row"><label>HEX</label><input type="text" id="cpop-hex" maxlength="7" spellcheck="false" autocomplete="off"></div>
    <div class="cpop-row"><label>RGB</label><span id="cpop-rgb" class="cpop-rgb"></span></div>
</div>

<script>
var HAS_BANNER = {{ 'true' if banner_active else 'false' }};

// ---- custom color picker: shade square + hue slider + editable hex / RGB ----
function _clamp(n, a, b) { return Math.max(a, Math.min(b, n)); }
function hexToRgb(hex) {
    var m = /^#?([0-9a-fA-F]{6})$/.exec((hex || '').trim());
    if (!m) return null;
    var n = parseInt(m[1], 16);
    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function rgbToHex(r, g, b) {
    function h(x) { return ('0' + _clamp(Math.round(x), 0, 255).toString(16)).slice(-2); }
    return '#' + h(r) + h(g) + h(b);
}
function rgbToHsv(r, g, b) {
    r /= 255; g /= 255; b /= 255;
    var mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn, h = 0;
    if (d) {
        if (mx === r) h = ((g - b) / d) % 6;
        else if (mx === g) h = (b - r) / d + 2;
        else h = (r - g) / d + 4;
        h *= 60; if (h < 0) h += 360;
    }
    return { h: h, s: mx ? d / mx : 0, v: mx };
}
function hsvToRgb(h, s, v) {
    var c = v * s, x = c * (1 - Math.abs((h / 60) % 2 - 1)), m = v - c, r = 0, g = 0, b = 0;
    if (h < 60) { r = c; g = x; } else if (h < 120) { r = x; g = c; }
    else if (h < 180) { g = c; b = x; } else if (h < 240) { g = x; b = c; }
    else if (h < 300) { r = x; b = c; } else { r = c; b = x; }
    return { r: (r + m) * 255, g: (g + m) * 255, b: (b + m) * 255 };
}
var cpop = { h: 0, s: 0, v: 0, name: null, open: false };
var _cp = {};
function cpopInit() {
    ['pop', 'sv', 'svh', 'hue', 'hueh', 'hex', 'rgb'].forEach(function (k) {
        _cp[k] = document.getElementById('cpop' + (k === 'pop' ? '' : '-' + k));
    });
    _cpBindDrag(_cp.sv, function (x, y) {
        var r = _cp.sv.getBoundingClientRect();
        cpop.s = _clamp((x - r.left) / r.width, 0, 1);
        cpop.v = _clamp(1 - (y - r.top) / r.height, 0, 1);
        cpopApply(true);
    });
    _cpBindDrag(_cp.hue, function (x) {
        var r = _cp.hue.getBoundingClientRect();
        cpop.h = _clamp((x - r.left) / r.width, 0, 1) * 360;
        cpopApply(true);
    });
    _cp.hex.addEventListener('input', function () {
        var rgb = hexToRgb(_cp.hex.value);
        if (rgb) { var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); cpop.h = hsv.h; cpop.s = hsv.s; cpop.v = hsv.v; cpopApply(false); }
    });
    document.addEventListener('pointerdown', function (e) {
        if (cpop.open && _cp.pop && !_cp.pop.contains(e.target) && !(e.target.closest && e.target.closest('.cpick-sw'))) cpopClose();
    });
}
function _cpBindDrag(el, onMove) {
    el.addEventListener('pointerdown', function (e) {
        e.preventDefault();
        try { el.setPointerCapture(e.pointerId); } catch (x) {}
        onMove(e.clientX, e.clientY);
        function mv(ev) { onMove(ev.clientX, ev.clientY); }
        function up() { el.removeEventListener('pointermove', mv); el.removeEventListener('pointerup', up); }
        el.addEventListener('pointermove', mv);
        el.addEventListener('pointerup', up);
    });
}
function cpopApply(updateHex) {
    var hue = hsvToRgb(cpop.h, 1, 1);
    _cp.sv.style.background = 'linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0)), ' + rgbToHex(hue.r, hue.g, hue.b);
    _cp.svh.style.left = (cpop.s * 100) + '%';
    _cp.svh.style.top = ((1 - cpop.v) * 100) + '%';
    _cp.hueh.style.left = (cpop.h / 360 * 100) + '%';
    _cp.hueh.style.background = 'hsl(' + cpop.h + ',100%,50%)';
    var rgb = hsvToRgb(cpop.h, cpop.s, cpop.v);
    var hex = rgbToHex(rgb.r, rgb.g, rgb.b);
    if (updateHex !== false) _cp.hex.value = hex;
    _cp.rgb.textContent = Math.round(rgb.r) + ', ' + Math.round(rgb.g) + ', ' + Math.round(rgb.b);
    if (cpop.name) setColor(cpop.name, hex);
    if (typeof renderPreview === 'function') renderPreview();
}
function cpopSetHex(hex) {
    var rgb = hexToRgb(hex); if (!rgb) return;
    var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); cpop.h = hsv.h; cpop.s = hsv.s; cpop.v = hsv.v; cpopApply(true);
}
function setColor(name, hex) {
    var inp = document.querySelector('.cpick-hex[name="' + name + '"]');
    if (inp) inp.value = hex;
    var sw = document.querySelector('.cpick[data-name="' + name + '"] .cpick-sw');
    if (sw) sw.style.background = hex;
}
function cpopOpen(name, anchor) {
    cpop.name = name;
    var inp = document.querySelector('.cpick-hex[name="' + name + '"]');
    var rgb = hexToRgb(inp ? inp.value : '#000000') || { r: 0, g: 0, b: 0 };
    var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); cpop.h = hsv.h; cpop.s = hsv.s; cpop.v = hsv.v;
    _cp.pop.hidden = false; cpop.open = true;
    var r = anchor.getBoundingClientRect(), pw = 308, ph = 380;
    var left = r.left, top = r.bottom + 6;
    if (left + pw > window.innerWidth - 8) left = window.innerWidth - pw - 8;
    if (top + ph > window.innerHeight - 8) top = r.top - ph - 6;
    _cp.pop.style.left = Math.max(8, left) + 'px';
    _cp.pop.style.top = Math.max(8, top) + 'px';
    cpopApply(true);
}
function cpopClose() { if (_cp.pop) _cp.pop.hidden = true; cpop.open = false; cpop.name = null; }
function cpickWire() {
    cpopInit();
    document.querySelectorAll('.cpick').forEach(function (cp) {
        var name = cp.getAttribute('data-name');
        var sw = cp.querySelector('.cpick-sw');
        var inp = cp.querySelector('.cpick-hex');
        if (inp) sw.style.background = inp.value;
        sw.addEventListener('click', function (e) {
            e.preventDefault();
            if (cpop.open && cpop.name === name) cpopClose(); else cpopOpen(name, cp);
        });
        if (inp) {
            inp.addEventListener('input', function () {
                var v = inp.value.trim();
                if (/^[0-9a-fA-F]{6}$/.test(v)) v = '#' + v;
                var rgb = hexToRgb(v);
                if (rgb) {
                    sw.style.background = rgbToHex(rgb.r, rgb.g, rgb.b);
                    if (cpop.open && cpop.name === name) { var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); cpop.h = hsv.h; cpop.s = hsv.s; cpop.v = hsv.v; cpopApply(false); }
                }
            });
            inp.addEventListener('blur', function () {
                var rgb = hexToRgb(inp.value);
                if (rgb) inp.value = rgbToHex(rgb.r, rgb.g, rgb.b);
            });
        }
    });
}

function applyThemePreset(name) {
    var presets = {
        dark:  { portal_bg_color: '#0a0f1c', portal_card_color: '#111827', portal_theme_color: '#38bdf8', portal_text_color: '#e2e8f0', portal_card_border_color: '#1e2d4a' },
        light: { portal_bg_color: '#f1f5f9', portal_card_color: '#ffffff', portal_theme_color: '#2563eb', portal_text_color: '#1e293b', portal_card_border_color: '#cbd5e1' }
    };
    var p = presets[name];
    if (!p) return;
    for (var key in p) {
        setColor(key, p[key]);
        if (cpop.open && cpop.name === key) cpopSetHex(p[key]);
    }
    renderPreview();
}

function pv(name) { var el = document.querySelector('[name="' + name + '"]'); return el ? el.value : ''; }

var _prevPage = 'login';
var _prevTimer = null;
function renderPreview() {
    // Debounced: rebuild the preview iframe from the current (unsaved) form values.
    if (_prevTimer) clearTimeout(_prevTimer);
    _prevTimer = setTimeout(updatePreviewFrame, 180);
}
function updatePreviewFrame() {
    var f = document.getElementById('prev-frame');
    if (!f) return;
    function e(v) { return encodeURIComponent(v == null ? '' : v); }
    var q = 'page=' + _prevPage
        + '&title=' + e(pv('portal_business_name'))
        + '&welcome=' + e(pv('portal_welcome_message'))
        + '&accent=' + e(pv('portal_theme_color'))
        + '&bg=' + e(pv('portal_bg_color'))
        + '&card=' + e(pv('portal_card_color'))
        + '&text=' + e(pv('portal_text_color'))
        + '&cardborder=' + e(pv('portal_card_border_color'))
        + '&label=' + e(pv('portal_insert_coin_label'))
        + '&countdown=' + e(pv('portal_coin_countdown_secs'))
        + '&nobanner=' + (((document.getElementById('banner-remove-flag') || {}).value === '1') ? '1' : '')
        + '&_=' + Date.now();
    f.src = '/customization/preview?' + q;
}

function switchMock(which) {
    _prevPage = (which === 'status') ? 'status' : 'login';
    document.getElementById('ptab-login').classList.toggle('active', _prevPage === 'login');
    document.getElementById('ptab-status').classList.toggle('active', _prevPage === 'status');
    updatePreviewFrame();
}

function openPreview() { updatePreviewFrame(); document.getElementById('preview-overlay').style.display = 'flex'; }
function closePreview() { document.getElementById('preview-overlay').style.display = 'none'; }

function chooseBanner(input) {
    if (!input.files || !input.files.length) return;
    var file = input.files[0];
    setBannerRemove(false);  // choosing a banner cancels a pending removal
    // Immediate client-side thumbnail.
    var rd = new FileReader();
    rd.onload = function (ev) {
        var t = document.getElementById('banner-thumb');
        if (t) t.src = ev.target.result;
        var p = document.getElementById('banner-pending');
        if (p) p.style.display = 'block';
    };
    rd.readAsDataURL(file);
    // Stage on the server so the Preview iframe shows it + Save Settings can apply it.
    var fd = new FormData();
    fd.append('banner', file);
    fetch('/customization/banner/upload', { method: 'POST', body: fd })
        .then(function (r) { return r.json(); })
        .then(function (j) {
            if (j && j.ok) { renderPreview(); }
            else { alert((j && j.error) || 'Could not stage the banner.'); }
        })
        .catch(function () { alert('Could not upload the banner.'); });
}

function setBannerRemove(on) {
    var flag = document.getElementById('banner-remove-flag');
    if (flag) flag.value = on ? '1' : '';
    var active = document.getElementById('banner-active');
    if (active) active.style.display = on ? 'none' : '';
    var note = document.getElementById('banner-remove-note');
    if (note) note.style.display = on ? 'block' : 'none';
    if (on) {
        var pending = document.getElementById('banner-pending');
        if (pending) pending.style.display = 'none';
        var fileInput = document.getElementById('banner-file');
        if (fileInput) fileInput.value = '';
    }
}
function removeBanner() { setBannerRemove(true); renderPreview(); }

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.edit-form [name^="portal_"]').forEach(function (el) {
        el.addEventListener('input', renderPreview);
    });
    cpickWire();
    renderPreview();
});
document.addEventListener('click', function (e) {
    if (e.target && e.target.id === 'preview-overlay') closePreview();
});
</script>

{% endblock %}