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

{% block heading %}{% trans "Referee management" %}{% endblock heading %}
{% block topbar_context %}<span class="text-sm text-muted">{% trans "Every upcoming home game that needs a club-arranged referee." %}</span>{% endblock topbar_context %}

{% block filter_strip %}
    <div class="flex flex-wrap items-center gap-3 border-b border-line bg-white px-7 py-3">
        <div class="flex-1"></div>
        <div class="flex items-center gap-1 rounded-full bg-steel p-1">
            <a href="{% querystring range="week" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "week" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "This week" %}</a>
            <a href="{% querystring range="two_weeks" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "two_weeks" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "+ next week" %}</a>
            <a href="{% querystring range="10" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "10" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "Next 10" %}</a>
            <a href="{% querystring range="25" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "25" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "Next 25" %}</a>
            <a href="{% querystring range="50" %}" class="rounded-full px-3 py-1.5 font-display text-xs font-bold tracking-[.08em] uppercase {% if range_choice == "50" %}bg-white text-ink{% else %}text-on-dark hover:text-white{% endif %}">{% trans "Next 50" %}</a>
        </div>
    </div>
{% endblock filter_strip %}

{% block panel %}
    <div class="flex flex-wrap gap-3.5">
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Games in view" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_total }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "In the selected range" %}</div>
        </div>
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Without a referee" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold tabular-nums {% if kpi_no_referee %}text-club{% else %}text-ink{% endif %}">{{ kpi_no_referee }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "Nobody assigned yet" %}</div>
        </div>
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Partially staffed" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold tabular-nums {% if kpi_understaffed %}text-warn{% else %}text-ink{% endif %}">{{ kpi_understaffed }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "Still short a referee" %}</div>
        </div>
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Fully staffed" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ok tabular-nums">{{ kpi_fully_staffed }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "Nothing left to do" %}</div>
        </div>
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Fees not set" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold tabular-nums {% if kpi_fees_pending %}text-warn{% else %}text-ink{% endif %}">{{ kpi_fees_pending }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "Referee fee missing" %}</div>
        </div>
    </div>

    {% comment %}
        Season workload -- separate from the "games in view" KPIs above
        (which track the upcoming range picked by the filter strip), this is
        about who's actually done the refereeing this season, all-time
        within it, not just what's still upcoming. Deliberately one compact
        row, not a tall section of its own -- the games-needing-a-referee
        list below is the actual point of this page, so this shouldn't push
        it below the fold. Fees ride along as a chart tooltip (see
        extra_body) rather than a separate list, for the same reason.
    {% endcomment %}
    <div class="flex flex-wrap gap-3.5">
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Active referees" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_active_referees }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
        </div>
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Games refereed" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_total_assignments }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
        </div>
        <div class="card min-w-0 flex-1 p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Average per referee" %}</div>
            <div class="mt-1 font-display text-[34px] leading-none font-extrabold text-ink tabular-nums">{{ kpi_avg_games_per_referee }}</div>
            <div class="mt-1 text-[13px] text-muted">{% trans "This season" %}</div>
        </div>
        <div class="card min-w-0 flex-[3] p-4">
            <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{% trans "Games refereed per referee" %}</div>
            {% if referee_stats %}
                <div class="mt-1 h-20">
                    <canvas id="referee-games-chart"></canvas>
                </div>
            {% else %}
                <p class="mt-1 text-[13px] text-muted">{% trans "No referee assignments recorded yet this season." %}</p>
            {% endif %}
        </div>
    </div>

    {% regroup games by start.date as day_groups %}
    {% for day in day_groups %}
        <div class="font-display text-xs font-bold tracking-[.12em] text-muted uppercase">{{ day.grouper|date:"l j F" }}</div>
        <div class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
            {% for game in day.list %}
                <div class="card card-body gap-2 border-l-[3px] {% if not game.referee_rows %}border-l-club{% elif not game.referees_full %}border-l-warn{% else %}border-l-transparent{% endif %}">
                    <a class="link link-hover font-semibold text-ink" href="{% url 'management:event_detail' game.pk %}">
                        {% for team in game.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% endfor %}
                        {% if game.opponent %}{% trans "vs" %} {{ game.opponent }}{% endif %}
                    </a>
                    <div class="font-mono text-xs text-muted">{{ game.start|date:"H:i" }}{% if game.location %} — {{ game.location }}{% endif %}</div>
                    <div class="flex flex-wrap gap-1">
                        {% for referee in game.referee_rows %}
                            <span class="badge badge-neutral badge-sm">{{ referee.display_name }}{% if referee.is_external %} ({% trans "ext." %}){% endif %}</span>
                        {% empty %}
                            <span class="text-xs text-muted">{% trans "No referees assigned yet." %}</span>
                        {% endfor %}
                    </div>
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <div class="flex items-center gap-1.5">
                            <span class="badge badge-sm {% if not game.referee_rows %}badge-error{% elif not game.referees_full %}badge-warning{% else %}badge-success{% endif %}">
                                {{ game.referee_rows|length }} / {{ game.max_referees }}
                            </span>
                            {% if game.fees_pending %}<span class="badge badge-warning badge-sm">{% trans "Fee not set" %}</span>{% endif %}
                        </div>
                        <div class="flex gap-1">
                            <a class="btn btn-xs btn-outline" href="{% url 'management:event_referee_form_pdf' game.pk %}">
                                {% lucide "file-down" size=12 %} {% trans "Referee form" %}
                            </a>
                            <button class="btn btn-xs btn-outline" type="button" onclick="document.getElementById('{{ game.pk|dom_id:"referee_game_modal" }}').showModal()">
                                {% lucide "flag" size=12 %} {% trans "Manage" %}
                            </button>
                        </div>
                    </div>
                </div>

                <dialog id="{{ game.pk|dom_id:"referee_game_modal" }}" class="modal">
                    <div class="modal-box w-[36rem] max-w-[91vw]">
                        <form method="dialog"><button class="btn btn-ghost btn-square btn-sm absolute top-2 right-2">{% lucide "x" size=16 %}</button></form>
                        <h3 class="font-display text-lg font-extrabold text-ink uppercase">
                            {% for team in game.teams.all %}{{ team.short_name }}{% if not forloop.last %}, {% endif %}{% endfor %}
                            {% if game.opponent %}{% trans "vs" %} {{ game.opponent }}{% endif %}
                        </h3>
                        <div class="mb-4 font-mono text-sm text-muted">{{ game.start|date:"j M Y H:i" }}</div>
                        {% include "management/_referee_assignment_panel.html" with event=game referees=game.referee_rows referee_candidates=game.referee_candidates referees_full=game.referees_full pending_signups=game.pending_signups can_manage_referees=True next_url=request.get_full_path %}
                    </div>
                    <form method="dialog" class="modal-backdrop"><button>close</button></form>
                </dialog>
            {% endfor %}
        </div>
    {% empty %}
        <div class="card">
            <div class="card-body">
                <p class="text-center text-muted">{% trans "No upcoming home games need a club-arranged referee." %}</p>
            </div>
        </div>
    {% endfor %}
{% endblock panel %}

{% block extra_body %}
    {% trans "Games" as games_label %}
    {{ charts|json_script:"referee-chart-data" }}
    <script src="{% static 'js/chart.js' %}"></script>
    <script>
        (() => {
            const data = JSON.parse(document.getElementById("referee-chart-data").textContent);
            // Same pattern as management/home.html's own charts -- Chart.js paints to a
            // canvas, so it needs the club accent resolved, not the CSS variable itself.
            const clubColor = getComputedStyle(document.documentElement).getPropertyValue("--color-club").trim() || "#E4002B";
            const ink = "#3A4658";
            const grid = "#EEF0F3";

            const gamesCanvas = document.getElementById("referee-games-chart");
            if (gamesCanvas && data.referee_games.labels.length) {
                new Chart(gamesCanvas, {
                    type: "bar",
                    data: {
                        labels: data.referee_games.labels,
                        datasets: [{label: "{{ games_label|escapejs }}", data: data.referee_games.games, backgroundColor: clubColor}],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        indexAxis: "y",
                        plugins: {
                            legend: {display: false},
                            tooltip: {
                                callbacks: {
                                    label: (context) => {
                                        const fee = data.referee_games.fees[context.dataIndex];
                                        const label = `{{ games_label|escapejs }}: ${context.parsed.x}`;
                                        return fee ? `${label} — €${fee.toFixed(2)}` : label;
                                    },
                                },
                            },
                        },
                        scales: {
                            x: {beginAtZero: true, ticks: {color: ink, precision: 0}, grid: {color: grid}},
                            y: {ticks: {color: ink, font: {size: 11}}, grid: {display: false}},
                        },
                    },
                });
            }
        })();
    </script>
{% endblock extra_body %}