{% 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 is scoped to surfaces that are
    (or will genuinely be) this app rather than D9's aspirational App/
    Website/Email tabs: the sidebar mock is what primary_color/secondary_color
    affect today (base.html's --tenant-* custom properties); the phone mock
    is the same colours applied ahead of the mobile app being built. 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="card-title">{% lucide "eye" size=16 %} {% trans "Live preview" %}</div>
                    <p class="text-xs text-muted">{% trans "Where these colours actually show up -- updates as you edit, before you save anything." %}</p>

                    <div class="mt-2 font-display text-[11px] font-bold tracking-[.12em] text-muted uppercase">{% trans "Management app" %}</div>
                    <div class="preview-frame mt-1.5">
                        <div id="preview-sidebar" class="preview-sidebar">
                            <div class="preview-crest">{{ club.initials|default:"CL" }}</div>
                            <div class="preview-club-name">{{ club.name|default:_("Your club") }}</div>
                            <div class="preview-nav-item">{% trans "Overview" %}</div>
                            <div id="preview-nav-active" class="preview-nav-item preview-nav-active">{% trans "Members" %}</div>
                            <div class="preview-nav-item">{% trans "Calendar" %}</div>
                        </div>
                        <div class="preview-panel">
                            <div class="preview-panel-heading">{% trans "New member" %}</div>
                            <button type="button" id="preview-button" class="preview-button">{% trans "Save changes" %}</button>
                            <div class="preview-skeleton-line"></div>
                            <div class="preview-skeleton-line preview-skeleton-line-short"></div>
                        </div>
                    </div>

                    <div class="mt-4 flex items-center justify-between gap-2">
                        <div class="font-display text-[11px] font-bold tracking-[.12em] text-muted uppercase">{% trans "Mobile app" %}</div>
                        <span class="badge badge-sm badge-ghost">{% trans "Coming soon" %}</span>
                    </div>
                    <div class="mt-1.5 preview-phone">
                        <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">
                            <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="mt-3 text-xs text-dim">
                        {% trans "Never used for: status colours (paid/overdue, present/absent), table styling, or form fields -- those stay consistent for everyone regardless of club branding." %}
                    </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-sidebar").style.background = primary;
                document.getElementById("preview-sidebar").style.color = primaryContent;
                document.getElementById("preview-nav-active").style.background = secondary;
                document.getElementById("preview-nav-active").style.color = secondaryContent;
                document.getElementById("preview-button").style.background = secondary;
                document.getElementById("preview-button").style.color = secondaryContent;

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

                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();
        })();
    </script>
{% endblock extra_body %}