{% extends "controlpanel/base.html" %}
{% load static lucide %}

{% block heading %}{{ club.name }}{% endblock heading %}

{% block subheading %}
    <p class="text-sm opacity-70">
        {{ club.slug }}
        {% if club.is_archived %}
            <span class="badge badge-warning badge-sm ml-2">Archived</span>
        {% endif %}
    </p>
{% endblock subheading %}

{% block actions %}
    <a class="btn btn-ghost gap-2" href="{% url 'controlpanel:club_update' club.pk %}">{% lucide "pencil" size=16 %} Edit</a>
    {% if club.is_archived %}
        <form method="post" action="{% url 'controlpanel:club_restore' club.pk %}">
            {% csrf_token %}
            <button class="btn btn-success gap-2" type="submit">{% lucide "archive-restore" size=16 %} Restore</button>
        </form>
    {% else %}
        <form method="post" action="{% url 'controlpanel:club_archive' club.pk %}">
            {% csrf_token %}
            <button class="btn btn-warning gap-2" type="submit">{% lucide "archive" size=16 %} Archive</button>
        </form>
    {% endif %}
{% endblock actions %}

{% block panel %}
    {% if club.is_archived %}
        <div class="alert alert-warning mb-6">
            <span>This club is archived: its subdomain no longer resolves. Nothing has been deleted — restore it to bring it back.</span>
        </div>
    {% endif %}
    {% if attention.no_season %}
        <div class="alert alert-warning mb-6">
            {% lucide "calendar-x" size=20 %}
            <span>
                No season covers today, so this club cannot take a signup or schedule a match. Nothing errors — it is simply inert.
            </span>
        </div>
    {% endif %}

    {% comment %}
        The club's own numbers that should be zero. Teams without a manager is a defect in
        the club's setup, not a statistic: with nobody in a management position the access
        service grants no authority over that team, so nobody can pick the squad.
    {% endcomment %}
    <div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <div class="card bg-base-100 shadow {% if attention.outstanding %}border-l-4 border-error{% endif %}">
            <div class="card-body p-4">
                <div class="flex items-center gap-2 text-sm opacity-70">{% lucide "banknote" size=16 %} Outstanding</div>
                <div class="text-3xl font-bold tabular-nums">€{{ attention.outstanding|floatformat:2 }}</div>
                <div class="text-xs opacity-60">{{ attention.unpaid_members }} member{{ attention.unpaid_members|pluralize }} unpaid this season</div>
            </div>
        </div>
        <div class="card bg-base-100 shadow {% if attention.teams_without_manager %}border-l-4 border-error{% endif %}">
            <div class="card-body p-4">
                <div class="flex items-center gap-2 text-sm opacity-70">{% lucide "user-x" size=16 %} No coach</div>
                <div class="text-3xl font-bold tabular-nums">{{ attention.teams_without_manager }}</div>
                <div class="text-xs opacity-60">Teams nobody can pick a squad for</div>
            </div>
        </div>
        <div class="card bg-base-100 shadow {% if attention.unrostered %}border-l-4 border-warning{% endif %}">
            <div class="card-body p-4">
                <div class="flex items-center gap-2 text-sm opacity-70">{% lucide "user-minus" size=16 %} Unrostered</div>
                <div class="text-3xl font-bold tabular-nums">{{ attention.unrostered }}</div>
                <div class="text-xs opacity-60">Active members on no team</div>
            </div>
        </div>
        <div class="card bg-base-100 shadow {% if attention.pending_approvals %}border-l-4 border-warning{% endif %}">
            <div class="card-body p-4">
                <div class="flex items-center gap-2 text-sm opacity-70">{% lucide "clock" size=16 %} Pending</div>
                <div class="text-3xl font-bold tabular-nums">{{ attention.pending_approvals }}</div>
                <div class="text-xs opacity-60">Memberships awaiting approval</div>
            </div>
        </div>
    </div>

    <div class="mb-6 grid gap-4 lg:grid-cols-4">
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "sparkles" size=18 %} New members</h2>
                <div class="text-4xl font-bold tabular-nums">{{ attention.new_members }}</div>
                {# First season at this club — someone returning after a year away is a renewal. #}
                <p class="text-sm opacity-70">first season at this club</p>
            </div>
        </div>

        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "repeat" size=18 %} Renewal</h2>
                {% if attention.renewal_rate is None %}
                    {# No prior season to compare against: a first-season club has not failed to renew anyone. #}
                    <p class="text-sm opacity-60">No previous season to compare against yet.</p>
                {% else %}
                    <div class="text-4xl font-bold tabular-nums">{{ attention.renewal_rate }}%</div>
                    <p class="text-sm opacity-70">of last season's active members signed up again</p>
                    <progress class="progress progress-primary w-full" value="{{ attention.renewal_rate }}" max="100"></progress>
                {% endif %}
            </div>
        </div>

        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "user-check" size=18 %} Attendance</h2>
                {% if attention.attendance.turnout is None %}
                    <p class="text-sm opacity-60">No past events with responses this season.</p>
                {% else %}
                    <div class="text-4xl font-bold tabular-nums">{{ attention.attendance.turnout }}%</div>
                    <p class="text-sm opacity-70">turnout of those who answered</p>
                    <p class="mt-2 text-sm">
                        {# The leading indicator: it measures whether members use the app at all. #}
                        <span class="font-semibold {% if attention.attendance.no_response > 30 %}text-warning{% endif %}">{{ attention.attendance.no_response }}%</span>
                        <span class="opacity-70">never responded</span>
                    </p>
                {% endif %}
            </div>
        </div>

        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "hourglass" size=18 %} Unpaid, by age</h2>
                <table class="table table-sm">
                    <tbody>
                        {% for bucket in attention.aging %}
                            <tr>
                                <td class="{% if bucket.overdue and bucket.total %}font-semibold text-error{% endif %}">{{ bucket.label }}</td>
                                <td class="text-right tabular-nums">€{{ bucket.total|floatformat:2 }}</td>
                                <td class="text-right opacity-60">{{ bucket.count }} order{{ bucket.count|pluralize }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="mb-6 grid gap-4 lg:grid-cols-2">
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "user-plus" size=18 %} Signups per month</h2>
                <p class="text-sm opacity-70">New members against returning ones.</p>
                <div class="h-56">
                    <canvas id="signups-chart"></canvas>
                </div>
            </div>
        </div>
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title text-base">{% lucide "wallet" size=18 %} Fee status this season</h2>
                <div class="h-56">
                    <canvas id="fees-chart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="mb-6 grid gap-4 md:grid-cols-2">
        {% for group in groups %}
            <div class="card bg-base-100 shadow">
                <div class="card-body">
                    <h2 class="card-title text-base">{% lucide group.icon size=18 %} {{ group.title }}</h2>
                    <dl class="divide-y divide-base-200">
                        {% for label, value in group.stats %}
                            <div class="flex items-center justify-between py-2">
                                <dt class="text-sm opacity-70">{{ label }}</dt>
                                <dd class="font-semibold tabular-nums">{{ value }}</dd>
                            </div>
                        {% endfor %}
                    </dl>
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="card mb-6 bg-base-100 shadow">
        <div class="card-body">
            <div class="flex items-center justify-between">
                <h2 class="card-title text-base">{% lucide "toggle-right" size=18 %} Features</h2>
                <a class="btn btn-ghost btn-xs" href="{% url 'controlpanel:features' %}">Manage features</a>
            </div>
            <div class="overflow-x-auto">
                <table class="table">
                    <tbody>
                        {% for entry in flags %}
                            <tr>
                                <td class="font-mono font-medium">{{ entry.flag.name }}</td>
                                <td class="opacity-70">{{ entry.flag.note|default:"—" }}</td>
                                <td class="text-right">
                                    {% if entry.overridden %}
                                        {# `everyone` overrides club targeting, so a per-club toggle would be a lie. #}
                                        <span class="badge {% if entry.flag.everyone %}badge-success{% else %}badge-error{% endif %}">
                                            {% if entry.flag.everyone %}On for all clubs{% else %}Off everywhere{% endif %}
                                        </span>
                                    {% else %}
                                        <form method="post" action="{% url 'controlpanel:club_feature_toggle' club.pk entry.flag.pk %}">
                                            {% csrf_token %}
                                            <button class="btn btn-sm gap-1 {% if entry.enabled %}btn-success{% else %}btn-ghost{% endif %}" type="submit">
                                                {% if entry.enabled %}{% lucide "toggle-right" size=16 %} On{% else %}{% lucide "toggle-left" size=16 %} Off{% endif %}
                                            </button>
                                        </form>
                                    {% endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td class="text-center opacity-60">No features defined yet.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="card mb-6 bg-base-100 shadow">
        <div class="card-body">
            <div class="flex flex-wrap items-center justify-between gap-2">
                <h2 class="card-title text-base">{% lucide "receipt-euro" size=18 %} Billing</h2>
                <div class="flex flex-wrap gap-2">
                    <a class="btn btn-outline btn-sm gap-2" href="{% url 'controlpanel:club_subscribe' club.pk %}">
                        {% lucide "layers" size=14 %} {% if subscription %}Change plan{% else %}Start billing{% endif %}
                    </a>
                    {% if subscription %}
                        <a class="btn btn-primary btn-sm gap-2" href="{% url 'controlpanel:club_open_period' club.pk %}">
                            {% lucide "calendar-plus" size=14 %} {% if club.is_archived %}Reactivate{% else %}Open period{% endif %}
                        </a>
                    {% endif %}
                </div>
            </div>

            {% if not subscription %}
                <p class="text-sm opacity-70">This club is not billed for anything. Put it on a tier to start.</p>
            {% else %}
                <p class="text-sm opacity-70">
                    On <strong>{{ subscription.tier.name }}</strong>.
                    {% if subscription.auto_renew %}
                        Renews automatically 30 days before the period ends.
                    {% else %}
                        <span class="badge badge-warning badge-sm">Auto-renew off</span> — you must open each period by hand, or this club uses the platform for free.
                    {% endif %}
                    {% if subscription.auto_archive %}
                        Archived automatically when a period goes unpaid past its grace period.
                    {% else %}
                        <span class="badge badge-warning badge-sm">Auto-archive off</span> — it will never be archived for non-payment.
                    {% endif %}
                </p>

                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Period</th>
                                <th class="text-right">Billed</th>
                                <th class="text-right">Paid</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for due in dues %}
                                <tr>
                                    <td>
                                        {{ due.period_start|date:"j M Y" }} — {{ due.period_end|date:"j M Y" }}
                                        <div class="text-xs opacity-60">{{ due.tier.name }} · {{ due.invoice.number }} · grace to {{ due.grace_until|date:"j M Y" }}</div>
                                    </td>
                                    <td class="text-right tabular-nums">€{{ due.amount|floatformat:2 }}</td>
                                    <td class="text-right tabular-nums">€{{ due.amount_paid|floatformat:2 }}</td>
                                    <td>
                                        {% if due.status == "paid" %}
                                            <span class="badge badge-success gap-1">{% lucide "check" size=12 %} Paid</span>
                                        {% elif due.status == "waived" %}
                                            <span class="badge badge-ghost">Waived</span>
                                        {% elif due.grace_until < today %}
                                            <span class="badge badge-error gap-1">{% lucide "triangle-alert" size=12 %} Overdue</span>
                                        {% elif due.period_end < today %}
                                            <span class="badge badge-warning gap-1">{% lucide "hourglass" size=12 %} In grace</span>
                                        {% else %}
                                            <span class="badge badge-ghost">{{ due.get_status_display }}</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-right">
                                        {% if due.is_owing %}
                                            <a class="btn btn-primary btn-xs gap-1" href="{% url 'controlpanel:due_pay' due.pk %}">{% lucide "banknote" size=14 %} Pay</a>
                                            {% if not due.payments.all %}
                                                <form class="inline" method="post" action="{% url 'controlpanel:due_waive' due.pk %}">
                                                    {% csrf_token %}
                                                    <button class="btn btn-ghost btn-xs gap-1" type="submit">{% lucide "ban" size=14 %} Waive</button>
                                                </form>
                                            {% endif %}
                                        {% endif %}
                                        <a class="btn btn-ghost btn-xs gap-1" href="{% url 'controlpanel:due_invoice' due.pk %}">{% lucide "file-text" size=14 %} Invoice</a>
                                    </td>
                                </tr>
                                {% for payment in due.payments.all %}
                                    <tr class="text-xs opacity-70">
                                        <td colspan="2" class="pl-8">
                                            {% lucide "corner-down-right" size=12 %}
                                            {{ payment.paid_at|date:"j M Y" }} · {{ payment.get_method_display }}{% if payment.reference %} · {{ payment.reference }}{% endif %}
                                        </td>
                                        <td class="text-right tabular-nums">€{{ payment.amount|floatformat:2 }}</td>
                                        <td colspan="2"></td>
                                    </tr>
                                {% endfor %}
                            {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center opacity-60">No periods billed yet.</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>
    </div>

    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <div class="flex items-center justify-between">
                <h2 class="card-title text-base">Club admins</h2>
                <a class="btn btn-primary btn-sm gap-2" href="{% url 'controlpanel:club_admin_add' club.pk %}">{% lucide "user-plus" size=16 %} Add admin</a>
            </div>
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for role in admins %}
                            <tr>
                                <td>{{ role.member }}</td>
                                <td>{{ role.member.user.email|default:"—" }}</td>
                                <td class="text-right">
                                    <form method="post" action="{% url 'controlpanel:club_admin_remove' club.pk role.pk %}">
                                        {% csrf_token %}
                                        <button class="btn btn-ghost btn-xs gap-1 text-error" type="submit">{% lucide "trash-2" size=14 %} Remove</button>
                                    </form>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3" class="text-center opacity-60">No admins yet.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock panel %}

{% block extra_body %}
    {{ charts|json_script:"chart-data" }}
    <script src="{% static 'js/chart.js' %}"></script>
    <script>
        (() => {
            const data = JSON.parse(document.getElementById("chart-data").textContent);
            const css = (name, fallback) => getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;

            const render = () => {
                const ink = css("--color-base-content", "#333");
                const grid = "color-mix(in oklab, " + ink + " 15%, transparent)";

                // Stacked: the bar height stays "signups this month" while the split shows where
                // they came from. Side-by-side bars would answer a different question.
                const signups = new Chart(document.getElementById("signups-chart"), {
                    type: "bar",
                    data: {
                        labels: data.signups.map((point) => point.month),
                        datasets: [
                            { label: "New", data: data.signups.map((point) => point.new), backgroundColor: css("--color-primary", "#4f46e5") },
                            { label: "Returning", data: data.signups.map((point) => point.returning), backgroundColor: css("--color-accent", "#0ea5e9") },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { position: "bottom", labels: { color: ink } } },
                        scales: {
                            x: { stacked: true, ticks: { color: ink }, grid: { color: grid } },
                            y: { stacked: true, beginAtZero: true, ticks: { color: ink, precision: 0 }, grid: { color: grid } },
                        },
                    },
                });

                // Colour carries the meaning here — unpaid must read as a problem, waived must
                // not — so the slices are pinned to the semantic theme colours, in order.
                const fees = new Chart(document.getElementById("fees-chart"), {
                    type: "doughnut",
                    data: {
                        labels: data.fees.map((slice) => slice.label),
                        datasets: [
                            {
                                data: data.fees.map((slice) => slice.value),
                                backgroundColor: [css("--color-success", "#16a34a"), css("--color-warning", "#f59e0b"), css("--color-error", "#dc2626"), css("--color-neutral", "#6b7280")],
                            },
                        ],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { position: "right", labels: { color: ink } } },
                    },
                });

                return [signups, fees];
            };

            let charts = render();

            // "auto" removes data-theme entirely, so watch the attribute rather than a click.
            new MutationObserver(() => {
                charts.forEach((chart) => chart.destroy());
                charts = render();
            }).observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme"] });
        })();
    </script>
{% endblock extra_body %}