{% extends "allianceauth/base-bs5.html" %}
{% load humanize %}

{% block content %}
<div class="container mt-4">

    <h1 class="mb-4 text-white">CapTrack Dashboard</h1>

    <style>
        .captrack-card-header {
            background-color: #34383D;
            color: #fff;
            font-weight: 600;
            border-radius: 0.5rem 0.5rem 0 0;
            padding: 0.75rem 1rem;
        }

            .captrack-card-header .captrack-collapse-toggle {
                background: none;
                border: none;
                color: inherit;
                width: 100%;
                padding: 0;
                text-align: left;
                display: flex;
                justify-content: space-between;
                align-items: center;
                cursor: pointer;
            }

            /* Compact toggle used on the right side of the header */
            .captrack-card-header .captrack-collapse-toggle-compact {
                width: auto;
                justify-content: flex-end;
                gap: 0.5rem;
            }

            /* Chevron animation */
            .captrack-card-header .chevron {
                display: inline-block;
                transition: transform 0.2s ease;
                transform-origin: center;
            }

            .captrack-card-header .captrack-collapse-toggle[aria-expanded="true"] .chevron {
                transform: rotate(90deg);
            }

        .captrack-subline {
            font-weight: 400;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.65);
        }

        .captrack-table-dark {
            background-color: #181818;
            color: #ccc;
        }

            .captrack-table-dark thead {
                background-color: #272A2E;
                color: #fff;
            }

            .captrack-table-dark tbody tr {
                border-color: #3A3F44;
            }

                .captrack-table-dark tbody tr:nth-child(even) {
                    background-color: #1C1C1C;
                }

        .captrack-region-columns {
            column-count: 4;
            column-gap: 2rem;
        }

            .captrack-region-columns > div {
                break-inside: avoid;
                margin-bottom: 0.5rem;
                color: #fff;
            }

        .alert-badge {
            padding: 0.2rem 0.5rem;
            border-radius: 0.4rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .alert-critical {
            background: #8B0000;
            color: #fff;
        }

        .alert-high {
            background: #E67E22;
            color: #000;
        }

        .alert-medium {
            background: #F1C40F;
            color: #000;
        }

        .alert-industrial {
            background: #3498DB;
            color: #fff;
        }

        .alert-unknown {
            background: #7F8C8D;
            color: #fff;
        }

        .snoozed {
            color: #9B59B6;
            font-weight: 600;
        }

        .captrack-actions .btn {
            padding: 0.15rem 0.4rem;
            font-size: 0.75rem;
            line-height: 1.2;
        }

        .row-critical {
            box-shadow: inset 4px 0 0 #8B0000;
            background-color: rgba(139, 0, 0, 0.08) !important;
        }
    </style>

    <h3 class="text-white border-bottom pb-2 mb-3">Blacklisted Regions</h3>
    {% if blacklisted_regions %}
    <div class="captrack-region-columns">
        {% for region in blacklisted_regions %}
        <div>{{ region.name }}</div>
        {% endfor %}
    </div>
    {% else %}
    <p class="text-muted">No blacklisted regions configured.</p>
    {% endif %}

    <hr class="border-secondary">

    <h3 class="text-white border-bottom pb-2 mb-3">Capitals in Blacklisted Regions</h3>

    {% for group in groups %}
    {% if group.main %}

    <div class="card mt-4" style="background-color:#111; border:1px solid #3A3F44; border-radius:0.5rem;">

        <div class="captrack-card-header d-flex align-items-center justify-content-between gap-2">
            <button type="button"
                    class="captrack-collapse-toggle flex-grow-1"
                    data-bs-toggle="collapse"
                    data-bs-target="#captrack-collapse-{{ forloop.counter }}"
                    aria-controls="captrack-collapse-{{ forloop.counter }}"
                    aria-expanded="{% if group.max_alert_level == 'critical' %}true{% else %}false{% endif %}">

                <span class="d-flex align-items-center">
                    <img src="{{ group.main.portrait_url_128 }}"
                         class="rounded me-2"
                         width="32" height="32">

                    <span class="d-inline-block">
                        <div>{{ group.main.character_name }}</div>

                        <div class="captrack-subline d-flex flex-wrap align-items-center gap-2">
                            <span class="d-flex align-items-center">
                                {% if group.corp_logo_url %}
                                <img src="{{ group.corp_logo_url }}"
                                     class="rounded me-1"
                                     width="16" height="16">
                                {% endif %}
                                {{ group.corp_name|default:"(Unknown Corp)" }}
                            </span>

                            {% if group.alliance_name %}
                            <span class="d-flex align-items-center">
                                {% if group.alliance_logo_url %}
                                <img src="{{ group.alliance_logo_url }}"
                                     class="rounded me-1"
                                     width="16" height="16">
                                {% endif %}
                                {{ group.alliance_name }}
                            </span>
                            {% endif %}
                        </div>
                    </span>
                </span>

            </button>

            <div class="d-flex align-items-center gap-2">
                {% if group.audit_url %}
                <a href="{{ group.audit_url }}"
                   class="btn btn-outline-light btn-sm"
                   title="CorpTools Audit"
                   onclick="event.stopPropagation();">Audit</a>
                {% endif %}

                {% if group.watchlist_ids_str %}
                <form method="post" class="d-flex align-items-center gap-1 m-0">
                    {% csrf_token %}
                    <input type="hidden" name="watchlist_ids" value="{{ group.watchlist_ids_str }}">
                    <span class="captrack-subline me-1">Snooze all:</span>
                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="1h">1h</button>
                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="6h">6h</button>
                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="24h">24h</button>
                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="inf">∞</button>
                    <button class="btn btn-outline-secondary btn-sm" name="snooze_action" value="clear">Clear</button>
                </form>
                {% endif %}

                <!-- Move the badge + chevron to the far right, after Audit + Snooze controls -->
                <button type="button"
                        class="captrack-collapse-toggle captrack-collapse-toggle-compact d-flex align-items-center"
                        data-bs-toggle="collapse"
                        data-bs-target="#captrack-collapse-{{ forloop.counter }}"
                        aria-controls="captrack-collapse-{{ forloop.counter }}"
                        aria-expanded="{% if group.max_alert_level == 'critical' %}true{% else %}false{% endif %}">
                    <span class="alert-badge alert-{{ group.max_alert_level|default:'unknown' }}">
                        {{ group.max_alert_level|default:"unknown" }}
                    </span>
                    <span class="chevron text-muted">▸</span>
                </button>
            </div>
        </div>

        <div id="captrack-collapse-{{ forloop.counter }}"
             class="collapse {% if group.max_alert_level == 'critical' %}show{% endif %}">
            <div class="card-body" style="background-color:#181818; border-radius:0 0 0.5rem 0.5rem;">

                {% if group.alts %}
                <table class="table table-sm captrack-table-dark mb-0">
                    <thead>
                        <tr>
                            <th>Character</th>
                            <th>Ship</th>
                            <th>Alert</th>
                            <th>System</th>
                            <th>Structure / Station</th>
                            <th>Last Seen</th>
                            <th>Status</th>
                            <th style="min-width: 270px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for alt in group.alts %}
                        <tr class="{% if alt.alert_level == 'critical' %}row-critical{% endif %}">
                            <td>{{ alt.character_name }}</td>
                            <td>{{ alt.ship_type }}</td>
                            <td>
                                <span class="alert-badge alert-{{ alt.alert_level|default:'unknown' }}">
                                    {{ alt.alert_level|default:"unknown" }}
                                </span>
                            </td>
                            <td>{{ alt.system }}</td>
                            <td>{{ alt.structure|default:"(Unknown)" }}</td>
                            <td>{{ alt.last_seen|naturaltime|default:"—" }}</td>
                            <td>
                                {% if alt.is_snoozed %}
                                <span class="snoozed">Snoozed</span>
                                {% elif not alt.should_alert %}
                                Tracked
                                {% else %}
                                Alerting
                                {% endif %}
                            </td>
                            <td class="captrack-actions">
                                {% if alt.watchlist_id %}
                                <form method="post" class="d-inline">
                                    {% csrf_token %}
                                    <input type="hidden" name="watchlist_id" value="{{ alt.watchlist_id }}">
                                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="1h" {% if alt.is_snoozed %}disabled{% endif %}>1h</button>
                                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="6h" {% if alt.is_snoozed %}disabled{% endif %}>6h</button>
                                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="24h" {% if alt.is_snoozed %}disabled{% endif %}>24h</button>
                                    <button class="btn btn-outline-light btn-sm" name="snooze_action" value="inf" {% if alt.is_snoozed %}disabled{% endif %}>∞</button>
                                    <button class="btn btn-outline-secondary btn-sm" name="snooze_action" value="clear">Clear</button>
                                </form>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <p class="text-muted mb-0">No alt characters found.</p>
                {% endif %}

            </div>
        </div>

    </div>

    {% endif %}
    {% endfor %}

</div>
{% endblock %}

{% block scripts %}
{{ block.super }}

<script>
    (function () {
        const hasBootstrapCollapse =
            typeof window.bootstrap !== "undefined" &&
            typeof window.bootstrap.Collapse !== "undefined";

        if (hasBootstrapCollapse) return;

        document.addEventListener("click", function (evt) {
            const btn = evt.target.closest('[data-bs-toggle="collapse"]');
            if (!btn) return;

            const targetSel = btn.getAttribute("data-bs-target");
            if (!targetSel) return;

            const target = document.querySelector(targetSel);
            if (!target) return;

            evt.preventDefault();

            const isShown = target.classList.contains("show");
            target.classList.toggle("show", !isShown);
            btn.setAttribute("aria-expanded", (!isShown).toString());
        });
    })();
</script>
{% endblock %}