{% extends "management/base.html" %}
{% load i18n lucide ui %}

{% comment %}
    A club's own self-service identity/branding editor -- see
    management/forms.py's ClubSettingsForm for exactly which fields are
    editable here versus platform-staff-only (slug, seasons). D9 "Club
    identity & branding" in the design handoff is the reference, followed
    closely for the Colours card (merged swatch+hex row, side-by-side
    contrast-check boxes) and the Logo card (dashed drop zone) -- markup
    pulled straight from the design canvas (RosterChief Platform.dc.html),
    not the prose summary. The live preview has two tabs rather than D9's
    three: App and Website are merged into one (they were always shown
    together anyway, and the mobile app isn't built yet -- the phone mock
    is the same colours applied ahead of it existing); Email is real and
    functional, a generic sample shaped like the actual branded emails this
    app sends (club/templates/club/email/*.html, members/.../claim_approved.html),
    not a preview of any one specific message. The colour math (content
    colour, contrast ratio) mirrors Club._content_color_for exactly, so
    what's shown is the real number the server computes on save, not an
    approximation.
{% endcomment %}

{% block panel_title %}{% trans "Club identity" %}{% endblock panel_title %}
{% block heading %}{% trans "Club identity" %}{% endblock heading %}

{% block actions %}
    <button class="btn btn-primary gap-2" type="submit" form="club-settings-form">{% lucide "save" size=16 %} {% trans "Save changes" %}</button>
{% endblock actions %}

{% block panel %}
    <div class="grid grid-cols-1 gap-5 xl:grid-cols-[1.2fr_1fr]">
        <form id="club-settings-form" method="post" enctype="multipart/form-data" class="flex flex-col gap-5">
            {% csrf_token %}

            {% for error in form.non_field_errors %}
                <div class="alert alert-error">
                    {% lucide "circle-x" size=18 %}
                    <span>{{ error }}</span>
                </div>
            {% endfor %}

            <div class="card">
                <div class="card-body">
                    <div class="card-title">{% lucide "building-2" size=16 %} {% trans "Club" %}</div>
                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        {% form_field form.name %}
                        {% form_field form.legal_name %}
                        {% form_field form.contact_email %}
                        {% form_field form.website %}
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="flex items-center justify-between gap-2">
                        <div class="card-title">{% lucide "palette" size=16 %} {% trans "Colours" %}</div>
                        <span class="font-mono text-xs text-dim">{% trans "Accents only" %}</span>
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <div class="mb-1.5 font-display text-[11px] font-bold tracking-[.12em] text-muted uppercase">{{ form.primary_color.label|capfirst }}</div>
                            <label class="club-color-row">
                                <input type="color" id="primary_color_swatch" class="club-color-swatch" value="{{ form.primary_color.value|default:"#0b1220" }}" aria-label="{% trans "Pick the primary colour" %}">
                                <input type="text" name="{{ form.primary_color.html_name }}" id="{{ form.primary_color.id_for_label }}" value="{{ form.primary_color.value|default:"" }}" placeholder="#0b1220" class="club-color-hex-input">
                            </label>
                            {% if form.primary_color.errors %}<p class="mt-1 text-xs text-club-dark">{{ form.primary_color.errors|join:" " }}</p>{% endif %}
                        </div>
                        <div>
                            <div class="mb-1.5 font-display text-[11px] font-bold tracking-[.12em] text-muted uppercase">{{ form.secondary_color.label|capfirst }}</div>
                            <label class="club-color-row">
                                <input type="color" id="secondary_color_swatch" class="club-color-swatch" value="{{ form.secondary_color.value|default:"#e4002b" }}" aria-label="{% trans "Pick the secondary colour" %}">
                                <input type="text" name="{{ form.secondary_color.html_name }}" id="{{ form.secondary_color.id_for_label }}" value="{{ form.secondary_color.value|default:"" }}" placeholder="#e4002b" class="club-color-hex-input">
                            </label>
                            {% if form.secondary_color.errors %}<p class="mt-1 text-xs text-club-dark">{{ form.secondary_color.errors|join:" " }}</p>{% endif %}
                        </div>
                    </div>

                    <div class="mt-4">
                        <div class="mb-2 font-display text-[11px] font-bold tracking-[.12em] text-muted uppercase">{% trans "Contrast check" %}</div>
                        <div class="flex gap-2">
                            <div id="contrast-box-primary" class="club-contrast-box">
                                <span id="contrast-label-primary"></span>
                                <span id="contrast-ratio-primary" class="font-mono"></span>
                            </div>
                            <div id="contrast-box-secondary" class="club-contrast-box">
                                <span id="contrast-label-secondary"></span>
                                <span id="contrast-ratio-secondary" class="font-mono"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="card-title">{% lucide "image" size=16 %} {% trans "Logo" %}</div>
                    <div class="flex items-end gap-4">
                        <div>
                            <div class="mb-1.5 font-display text-[11px] font-bold tracking-[.12em] text-muted uppercase">{% trans "Crest" %}</div>
                            <div class="club-logo-dropzone">
                                {% if club.logo %}
                                    <img class="h-full w-full object-contain p-1.5" src="{{ club.logo.url }}" alt="">
                                {% else %}
                                    <span class="font-display text-sm font-extrabold text-muted">{{ club.initials }}</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="flex-1">{% form_field form.logo %}</div>
                    </div>
                </div>
            </div>
        </form>

        <div class="xl:sticky xl:top-4 xl:self-start">
            <div class="card">
                <div class="card-body">
                    <div class="flex items-center justify-between gap-2">
                        <div class="card-title">{% lucide "eye" size=16 %} {% trans "Live preview" %}</div>
                        <div class="flex overflow-hidden rounded-md border border-line">
                            <button type="button" class="preview-tab preview-tab-active" data-preview-tab="app">{% trans "App & Website" %}</button>
                            <button type="button" class="preview-tab" data-preview-tab="email">{% trans "Email" %}</button>
                        </div>
                    </div>

                    <div class="mt-3">
                        <div id="preview-panel-app" class="flex flex-wrap items-start gap-4" data-preview-panel="app">
                            <div class="preview-phone-lg">
                                <div id="preview-phone-header" class="preview-phone-header">
                                    <div class="preview-phone-header-row">
                                        <span class="preview-crest preview-crest-sm">{{ club.initials|default:"CL" }}</span>
                                        <span class="preview-phone-name">{{ club.name|default:_("Your club") }}</span>
                                    </div>
                                    <div class="preview-phone-roles">
                                        <span class="preview-phone-role preview-phone-role-active">{% trans "Member" %}</span>
                                        <span class="preview-phone-role">{% trans "Coach" %}</span>
                                    </div>
                                </div>
                                <div class="preview-phone-body">
                                    {# A notice, not a call to action -- primary (chrome), not secondary (accent), so it doesn't visually compete with an actual button. #}
                                    <div id="preview-phone-card" class="preview-phone-card">
                                        <div class="preview-phone-eyebrow">{% trans "Next up" %}</div>
                                        <div class="preview-phone-title">{% trans "U16 vs Leuven" %}</div>
                                        <div class="preview-phone-bar"></div>
                                    </div>
                                    <div class="preview-phone-skeleton-card">
                                        <div class="preview-skeleton-line"></div>
                                        <div class="preview-skeleton-line preview-skeleton-line-short"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="flex min-w-0 flex-1 flex-col gap-3">
                                <div class="preview-website">
                                    <div id="preview-website-header" class="preview-website-header">
                                        <span class="preview-crest preview-crest-sm">{{ club.initials|default:"CL" }}</span>
                                        <span class="preview-website-name">{{ club.name|default:_("Your club") }}</span>
                                        <span class="preview-website-nav">{% trans "Teams · Club" %}</span>
                                        <span id="preview-website-join" class="preview-website-join">{% trans "Join" %}</span>
                                    </div>
                                    <div class="preview-website-hero">
                                        <div class="preview-website-headline">{% trans "#Fear the Sharks" %}</div>
                                        <div class="preview-skeleton-line"></div>
                                        <div class="preview-skeleton-line preview-skeleton-line-short"></div>
                                    </div>
                                </div>

                                <div class="rounded-lg border border-line p-3">
                                    <div class="mb-2 font-display text-[11px] font-bold tracking-[.12em] text-muted uppercase">{% trans "Where the brand shows up" %}</div>
                                    <ul class="flex flex-col gap-1.5 text-[13px] text-slate">
                                        <li class="flex items-center gap-2"><span id="preview-dot-1" class="preview-brand-dot"></span>{% trans "Sidebar, active nav item, primary buttons" %}</li>
                                        <li class="flex items-center gap-2"><span id="preview-dot-2" class="preview-brand-dot"></span>{% trans "Public site header and join button" %}</li>
                                        <li class="flex items-center gap-2"><span id="preview-dot-3" class="preview-brand-dot"></span>{% trans "Mobile app header and highlights" %}</li>
                                        <li class="flex items-center gap-2"><span id="preview-dot-4" class="preview-brand-dot"></span>{% trans "Transactional email crest and buttons" %}</li>
                                        <li class="flex items-center gap-2"><span class="preview-brand-dot preview-brand-dot-neutral"></span>{% trans "Never: status colours, tables, form fields" %}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div id="preview-panel-email" class="preview-email hidden" data-preview-panel="email">
                            <div class="preview-email-header">
                                <span id="preview-email-crest" class="preview-crest preview-crest-sm preview-email-crest">{{ club.initials|default:"CL" }}</span>
                                <span class="preview-email-name">{{ club.name|default:_("Your club") }}</span>
                            </div>
                            <div class="preview-email-body">
                                <div class="preview-skeleton-line"></div>
                                <div class="preview-skeleton-line preview-skeleton-line-short"></div>
                                <span id="preview-email-button" class="preview-email-button">{% trans "View details" %}</span>
                                <div class="preview-skeleton-line preview-skeleton-line-short"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock panel %}

{% block extra_body %}
    <script>
        (() => {
            // Mirrors club.models.Club._content_color_for exactly (WCAG relative
            // luminance, 0.179 threshold) -- the ratio/checkmark shown here is the
            // real number the server computes on save, not an approximation.
            const relativeLuminance = (hex) => {
                const channel = (value) => {
                    const fraction = value / 255;
                    return fraction <= 0.04045 ? fraction / 12.92 : ((fraction + 0.055) / 1.055) ** 2.4;
                };
                const r = channel(parseInt(hex.slice(1, 3), 16));
                const g = channel(parseInt(hex.slice(3, 5), 16));
                const b = channel(parseInt(hex.slice(5, 7), 16));
                return 0.2126 * r + 0.7152 * g + 0.0722 * b;
            };
            const contentColorFor = (hex) => (relativeLuminance(hex) > 0.179 ? "#000000" : "#ffffff");
            const contrastRatio = (hexA, hexB) => {
                const [lighter, darker] = [relativeLuminance(hexA), relativeLuminance(hexB)].sort((a, b) => b - a);
                return (lighter + 0.05) / (darker + 0.05);
            };
            const isHex = (value) => /^#[0-9a-fA-F]{6}$/.test(value);

            const primaryText = document.getElementById("id_primary_color");
            const secondaryText = document.getElementById("id_secondary_color");
            const primarySwatch = document.getElementById("primary_color_swatch");
            const secondarySwatch = document.getElementById("secondary_color_swatch");
            if (!primaryText || !secondaryText) return;

            const CONTENT_LABEL = { "#000000": "{% trans 'Black' %}", "#ffffff": "{% trans 'White' %}" };

            const setContrastBox = (boxId, labelId, ratioId, hex, contentHex, onLabel) => {
                const ratio = contrastRatio(hex, contentHex);
                document.getElementById(labelId).textContent = `${CONTENT_LABEL[contentHex]} ${onLabel}`;
                document.getElementById(ratioId).textContent = `${ratio.toFixed(1)} ${ratio >= 4.5 ? "✓" : "⚠"}`;
                const box = document.getElementById(boxId);
                box.style.background = hex;
                box.style.color = contentHex;
            };

            const updatePreview = () => {
                const primary = isHex(primaryText.value) ? primaryText.value : "#0b1220";
                const secondary = isHex(secondaryText.value) ? secondaryText.value : "#e4002b";
                const primaryContent = contentColorFor(primary);
                const secondaryContent = contentColorFor(secondary);

                document.getElementById("preview-phone-header").style.background = primary;
                document.getElementById("preview-phone-header").style.color = primaryContent;
                // A notice, not a call to action -- primary (chrome), not secondary
                // (accent), so it doesn't compete for attention with an actual button.
                document.getElementById("preview-phone-card").style.background = primary;
                document.getElementById("preview-phone-card").style.color = primaryContent;

                document.getElementById("preview-website-header").style.background = primary;
                document.getElementById("preview-website-header").style.color = primaryContent;
                document.getElementById("preview-website-join").style.background = secondary;
                document.getElementById("preview-website-join").style.color = secondaryContent;

                // Matches the real branded emails (club/templates/club/email/*.html):
                // a plain white header with a secondary-coloured crest badge, and a
                // primary-coloured button in the body -- same split as _button.html's
                // own bg=primary convention, not the phone/website mocks' solid bar.
                document.getElementById("preview-email-crest").style.background = secondary;
                document.getElementById("preview-email-crest").style.color = secondaryContent;
                document.getElementById("preview-email-button").style.background = primary;
                document.getElementById("preview-email-button").style.color = primaryContent;

                ["preview-dot-1", "preview-dot-2", "preview-dot-3", "preview-dot-4"].forEach((id) => {
                    document.getElementById(id).style.background = secondary;
                });

                setContrastBox("contrast-box-primary", "contrast-label-primary", "contrast-ratio-primary", primary, primaryContent, "{% trans 'on primary' %}");
                setContrastBox("contrast-box-secondary", "contrast-label-secondary", "contrast-ratio-secondary", secondary, secondaryContent, "{% trans 'on secondary' %}");

                if (primarySwatch && isHex(primary)) primarySwatch.value = primary;
                if (secondarySwatch && isHex(secondary)) secondarySwatch.value = secondary;
            };

            primaryText.addEventListener("input", updatePreview);
            secondaryText.addEventListener("input", updatePreview);
            if (primarySwatch) {
                primarySwatch.addEventListener("input", () => {
                    primaryText.value = primarySwatch.value;
                    updatePreview();
                });
            }
            if (secondarySwatch) {
                secondarySwatch.addEventListener("input", () => {
                    secondaryText.value = secondarySwatch.value;
                    updatePreview();
                });
            }

            updatePreview();

            // Live preview tabs -- toggles which .preview-panel is visible, App &
            // Website vs Email. Both panels stay in the DOM (and colour-bound) the
            // whole time; only which one is hidden changes.
            document.querySelectorAll("[data-preview-tab]").forEach((tab) => {
                tab.addEventListener("click", () => {
                    document.querySelectorAll("[data-preview-tab]").forEach((other) => other.classList.toggle("preview-tab-active", other === tab));
                    document.querySelectorAll("[data-preview-panel]").forEach((panel) => panel.classList.toggle("hidden", panel.dataset.previewPanel !== tab.dataset.previewTab));
                });
            });
        })();
    </script>
{% endblock extra_body %}