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

{% block heading %}{{ team.name }}{% endblock heading %}
{% block subheading %}
    <span class="flex flex-row gap-2 items-center">
        <span>{{ team.short_name }}</span>
        <span>&middot;</span>
        <span class="badge-sm badge badge-outline">{% lucide "bookmark" size=14 %} {{ team.pk }}</span>
    </span>
{% endblock subheading %}

{% block actions %}
    {% if is_club_admin %}
        <a class="btn btn-outline gap-2" href="{% url 'management:team_update' team.pk %}">{% lucide "pencil" size=16 %} {% trans "Edit" %}</a>
    {% endif %}
{% endblock actions %}

{% block panel %}
    <form method="get" class="mb-4">
        <div class="flex flex-row items-center gap-2">
            <select name="season" class="select select-bordered">
                {% for season in seasons %}
                    <option value="{{ season.pk }}" {% if season.pk == selected_season.pk %}selected{% endif %}>{% trans "Season" %} {{ season.start_date|date:"Y" }} - {{ season.end_date|date:"Y" }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-outline gap-2" type="submit">{% lucide "filter" size=16 %} {% trans "View" %}</button>
        </div>
    </form>

    {% if not selected_season %}
        <div class="alert alert-warning mb-6">
            {% lucide "calendar-x" size=20 %}
            <span>{% trans "This club has no seasons yet, so there's no roster or staff to show." %}</span>
        </div>
    {% else %}
        {% if can_manage %}
            {% if team_photo %}
                {% trans "Replace photo" as photo_modal_title %}
            {% else %}
                {% trans "Upload photo" as photo_modal_title %}
            {% endif %}
            {% url 'management:team_photo_set' team.pk selected_season.pk as team_photo_set_url %}
            {% include "controlpanel/_modal_form.html" with modal_id="team_photo_modal" title=photo_modal_title form=team_photo_form action_url=team_photo_set_url submit_label="Save" submit_icon="save" %}

            {% if team_photo %}
                {% trans "Remove team photo?" as remove_photo_body %}
                {% trans "Remove photo" as remove_photo_title %}
                {% url 'management:team_photo_delete' team.pk selected_season.pk as team_photo_delete_url %}
                {% include "controlpanel/_confirm_modal.html" with modal_id="team_photo_delete_modal" title=remove_photo_title body=remove_photo_body action_url=team_photo_delete_url submit_label="Remove" submit_icon="trash-2" %}
            {% endif %}
        {% endif %}

        <div class="mb-4 grid gap-4 lg:grid-cols-3">
            <div class="card bg-base-100 shadow border-l-4 {% if attendance_rate is None %}border-info{% elif attendance_rate < 30 %}border-error{% elif attendance_rate < 65 %}border-warning{% else %}border-success{% endif %}">
                <div class="card-body p-4">
                    <div class="flex items-center gap-2 text-sm opacity-70 mb-3">{% lucide "user-check" size=16 %} {% trans "Attendance rate" %}</div>
                    <div class="text-4xl font-bold tabular-nums font-mono">
                        {% if attendance_rate is None %}
                            {% trans "N/A" %}
                        {% else %}
                            {{ attendance_rate }}%
                        {% endif %}
                    </div>
                    <div class="text-xs opacity-60">
                        {% if attendance_rate is None %}
                            {% trans "No past events this season" %}
                        {% else %}
                            <progress class="progress w-full {% if attendance_rate < 30 %}progress-error{% elif attendance_rate < 65 %}progress-warning{% else %}progress-success{% endif %}" value="{{ attendance_rate }}" max="100"></progress>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="card bg-base-100 shadow">
                <div class="card-body">
                    <h2 class="card-title text-base">{% lucide "trending-up" size=18 %} {% trans "Top attenders" %}</h2>
                    <ul class="divide-y divide-base-200">
                        {% for entry in top_attenders %}
                            <li class="flex items-center justify-between py-2">
                                <span class="text-sm">{{ entry.member }}</span>
                                <span class="font-semibold tabular-nums font-mono">{{ entry.rate }}%</span>
                            </li>
                        {% empty %}
                            <li class="py-2 text-center text-sm opacity-60">{% trans "Not enough data yet." %}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <div class="card bg-base-100 shadow">
                <div class="card-body">
                    <h2 class="card-title text-base">{% lucide "trending-down" size=18 %} {% trans "Needs attention" %}</h2>
                    <ul class="divide-y divide-base-200">
                        {% for entry in bottom_attenders %}
                            <li class="flex items-center justify-between py-2">
                                <span class="text-sm">{{ entry.member }}</span>
                                <span class="font-semibold tabular-nums font-mono">{{ entry.rate }}%</span>
                            </li>
                        {% empty %}
                            <li class="py-2 text-center text-sm opacity-60">{% trans "Not enough data yet." %}</li>
                        {% endfor %}
                    </ul>
                </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 "alert-triangle" size=18 %} {% trans "Missed the last 2 practices" %}</h2>
                    <ul class="divide-y divide-base-200">
                        {% for member in missed_practices %}
                            <li class="py-2 text-sm">{{ member }}</li>
                        {% empty %}
                            <li class="py-2 text-center text-sm opacity-60">{% trans "No one -- or not enough practice history yet." %}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>

            <div class="card bg-base-100 shadow">
                <div class="card-body">
                    <h2 class="card-title text-base">{% lucide "user-x" size=18 %} {% trans "No-shows" %}</h2>
                    <!-- <p class="text-sm opacity-70">{% trans "Said they'd attend, but were checked in as absent." %}</p> -->
                    <div class="overflow-x-auto">
                        <table class="table">
                            <tbody>
                                {% for entry in no_shows %}
                                    <tr>
                                        <td>{{ entry.member }}</td>
                                        <td class="opacity-70">{{ entry.event.title }}</td>
                                        <td class="whitespace-nowrap text-right opacity-60">{{ entry.event.start|date:"j M" }}</td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan="3" class="text-center opacity-60">{% trans "None recorded." %}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </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">{% trans "Roster" %}</h2>
                    {% if can_manage %}
                        <button class="btn btn-outline btn-sm gap-2" type="button" onclick="document.getElementById('add_player_modal').showModal()">{% lucide "user-plus" size=14 %} {% trans "Add player" %}</button>
                    {% endif %}
                </div>
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>{% trans "Member" %}</th>
                                <th>{% trans "Position" %}</th>
                                <th>{% trans "Jersey #" %}</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for membership in roster %}
                                <tr>
                                    <td>{{ membership.member }}</td>
                                    <td>{{ membership.position }}</td>
                                    <td>{{ membership.jersey_number|default:"—" }}</td>
                                    <td>
                                        {% if membership.is_captain %}<span class="badge badge-neutral badge-sm">{% trans "Captain" %}</span>{% endif %}
                                        {% if membership.is_alternate_captain %}<span class="badge badge-neutral badge-sm">{% trans "Alternate captain" %}</span>{% endif %}
                                    </td>
                                    <td class="text-right">
                                        {% if can_manage %}
                                            <div class="flex justify-end gap-1">
                                                <button class="btn btn-outline btn-sm" type="button" onclick="document.getElementById('{{ membership.pk|dom_id:"edit_player_modal" }}').showModal()" aria-label="{% trans 'Edit' %}">{% lucide "pencil" size=14 %} {% trans "Edit" %}</button>
                                                <button class="btn btn-sm btn-outline btn-error" type="button" onclick="document.getElementById('{{ membership.pk|dom_id:"remove_player_modal" }}').showModal()" aria-label="{% trans 'Remove' %}">{% lucide "user-minus" size=14 %} {% trans "Remove" %}</button>
                                            </div>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center opacity-60">{% trans "No one on the roster for this season yet." %}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card bg-base-100 shadow mt-4">
            <div class="card-body">
                <div class="flex items-center justify-between">
                    <h2 class="card-title text-base">{% trans "Staff" %}</h2>
                    {% if can_manage %}
                        <button class="btn btn-outline btn-sm gap-2" type="button" onclick="document.getElementById('add_staff_modal').showModal()">{% lucide "user-plus" size=14 %} {% trans "Assign staff" %}</button>
                    {% endif %}
                </div>
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>{% trans "Member" %}</th>
                                <th>{% trans "Position" %}</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for assignment in staff %}
                                <tr>
                                    <td>{{ assignment.member }}</td>
                                    <td>{{ assignment.position }}</td>
                                    <td class="text-right">
                                        {% if can_manage %}
                                            <div class="flex justify-end gap-1">
                                                <button class="btn btn-outline btn-sm" type="button" onclick="document.getElementById('{{ assignment.pk|dom_id:"edit_staff_modal" }}').showModal()" aria-label="{% trans 'Edit' %}">{% lucide "pencil" size=14 %} {% trans "Edit" %}</button>
                                                <button class="btn btn-sm btn-outline btn-error" type="button" onclick="document.getElementById('{{ assignment.pk|dom_id:"remove_staff_modal" }}').showModal()" aria-label="{% trans 'Remove' %}">{% lucide "user-minus" size=14 %} {% trans "Remove" %}</button>
                                            </div>
                                        {% endif %}
                                    </td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="3" class="text-center opacity-60">{% trans "No staff assigned for this season yet." %}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="card bg-base-100 shadow mt-4">
            <div class="card-body">
                <div class="flex items-center justify-between">
                    <h2 class="card-title text-base">{% trans "Team photo" %}</h2>
                    {% if can_manage %}
                    <div class="flex gap-2">
                        {% trans "Upload photo" as upload_photo_label %}
                        {% trans "Replace photo" as replace_photo_label %}
                        <button class="btn btn-outline btn-sm gap-2" type="button" onclick="document.getElementById('team_photo_modal').showModal()">
                            {% if team_photo %}
                            {% lucide "pencil" size=14 %} {{ replace_photo_label }}
                            {% else %}
                            {% lucide "upload" size=14 %} {{ upload_photo_label }}
                            {% endif %}
                        </button>
                        {% if team_photo %}
                        <button class="btn btn-outline btn-error btn-sm gap-2" type="button" onclick="document.getElementById('team_photo_delete_modal').showModal()">{% lucide "trash-2" size=14 %} {% trans "Remove" %}</button>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>

                {% if team_photo %}
                <img class="mt-2 w-full max-w-md rounded-lg object-cover" src="{{ team_photo.image.url }}" alt="{{ team }}">
                {% else %}
                <p class="text-sm opacity-60">{% trans "No photo uploaded for this season yet." %}</p>
                {% endif %}
            </div>
        </div>

        {% if can_manage %}
            {% trans "Add player" as add_player_label %}
            {% url 'management:team_roster_add' team.pk selected_season.pk as add_player_url %}
            {% include "controlpanel/_modal_form.html" with modal_id="add_player_modal" title=add_player_label form=roster_form action_url=add_player_url submit_label=add_player_label submit_icon="user-plus" %}

            {% trans "Assign staff" as add_staff_label %}
            {% url 'management:team_staff_add' team.pk selected_season.pk as add_staff_url %}
            {% include "controlpanel/_modal_form.html" with modal_id="add_staff_modal" title=add_staff_label form=staff_form action_url=add_staff_url submit_label=add_staff_label submit_icon="user-plus" %}

            {% trans "Edit player" as edit_player_label %}
            {% trans "Save" as save_label %}
            {% for membership in roster %}
                {% url 'management:team_roster_update' team.pk membership.pk as edit_player_url %}
                {% include "controlpanel/_modal_form.html" with modal_id=membership.pk|dom_id:"edit_player_modal" title=edit_player_label form=membership.edit_form action_url=edit_player_url submit_label=save_label submit_icon="save" %}

                {% blocktrans asvar remove_player_body with member=membership.member %}Remove {{ member }} from the roster?{% endblocktrans %}
                {% trans "Remove player" as remove_player_title %}
                {% trans "Remove" as remove_label %}
                {% url 'management:team_roster_remove' team.pk membership.pk as remove_player_url %}
                {% include "controlpanel/_confirm_modal.html" with modal_id=membership.pk|dom_id:"remove_player_modal" title=remove_player_title body=remove_player_body action_url=remove_player_url submit_label=remove_label submit_icon="user-minus" %}
            {% endfor %}

            {% trans "Edit staff assignment" as edit_staff_label %}
            {% for assignment in staff %}
                {% url 'management:team_staff_update' team.pk assignment.pk as edit_staff_url %}
                {% include "controlpanel/_modal_form.html" with modal_id=assignment.pk|dom_id:"edit_staff_modal" title=edit_staff_label form=assignment.edit_form action_url=edit_staff_url submit_label=save_label submit_icon="save" %}

                {% blocktrans asvar remove_staff_body with member=assignment.member %}Remove {{ member }} from staff?{% endblocktrans %}
                {% trans "Remove staff" as remove_staff_title %}
                {% url 'management:team_staff_remove' team.pk assignment.pk as remove_staff_url %}
                {% include "controlpanel/_confirm_modal.html" with modal_id=assignment.pk|dom_id:"remove_staff_modal" title=remove_staff_title body=remove_staff_body action_url=remove_staff_url submit_label=remove_label submit_icon="user-minus" %}
            {% endfor %}
        {% endif %}
    {% endif %}
{% endblock panel %}

{% block extra_body %}
    <script src="{% static 'js/searchable-select.js' %}"></script>
{% endblock extra_body %}