{% extends "securityaudit/base.html" %}
{% load securityaudit_extras %}
{% block securityaudit_content %}
<div class="card mb-3">
    <div class="card-body">
        <div class="d-flex flex-wrap justify-content-between align-items-end gap-2">
            <div class="d-flex flex-wrap gap-2">
                {% if perms.securityaudit.run_audit %}
                <button type="button" id="run-audit-modal-trigger" class="btn btn-success" style="min-height: 42px;">Run Audit</button>
                {% endif %}
                {% if perms.securityaudit.administrate %}
                <form method="post" action="{% url 'securityaudit:run_new_join_job' %}" style="display: inline; margin: 0;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-primary" style="min-height: 42px;">Check Joins</button>
                </form>
                {% endif %}
            </div>
            <form method="get" class="d-flex flex-wrap align-items-end gap-2">
                <div style="min-width: 200px;">
                    <label class="form-label" for="q">Search</label>
                    <input type="search" id="q" name="q" value="{{ q }}" class="form-control" placeholder="Name or ID" style="min-height: 42px;">
                </div>
                <button type="button" class="btn btn-outline-secondary" style="min-height: 42px;" data-bs-toggle="offcanvas" data-bs-target="#dashboard-filter-offcanvas" aria-controls="dashboard-filter-offcanvas">
                    Filters
                </button>
                <button type="submit" class="btn btn-primary" style="min-height: 42px;">Apply Filter</button>
                {% if perms.securityaudit.administrate %}
                <a class="btn btn-danger" href="{% url 'securityaudit:dashboard' %}" style="min-height: 42px;">Clear</a>
                {% endif %}

                <div class="offcanvas offcanvas-end" tabindex="-1" id="dashboard-filter-offcanvas" aria-labelledby="dashboard-filter-offcanvas-label" style="width: 360px;">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="dashboard-filter-offcanvas-label">Filters</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="vstack gap-3">
                            <div class="filter-select">
                                <label class="form-label" for="status">Status</label>
                                <select id="status" name="status" class="form-select">
                                    <option value="">All</option>
                                    {% for s in statuses %}
                                        <option value="{{ s }}" {% if status == s %}selected{% endif %}>{{ s }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="filter-select">
                                <label class="form-label" for="target_type">Target</label>
                                <select id="target_type" name="target_type" class="form-select">
                                    {% for t in target_types %}
                                        <option value="{{ t.value }}" {% if target_type == t.value %}selected{% endif %}>{{ t.label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="filter-select">
                                <label class="form-label">Risk</label>
                                <div class="dropdown">
                                    <button class="btn btn-outline-secondary dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="risk_level_toggle">
                                        {% if risk_level %}{{ risk_level|length }} selected{% else %}All{% endif %}
                                    </button>
                                    <ul class="dropdown-menu w-100" aria-labelledby="risk_level_toggle">
                                        {% for r in risk_levels %}
                                        <li>
                                            <div class="dropdown-item px-3">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="risk_level" value="{{ r }}" id="risk_{{ r }}" {% if r in risk_level %}checked{% endif %}>
                                                    <label class="form-check-label text-capitalize" for="risk_{{ r }}">{{ r }}</label>
                                                </div>
                                            </div>
                                        </li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                            <div class="filter-select">
                                <label class="form-label" for="per_page">Per page</label>
                                <select id="per_page" name="per_page" class="form-select">
                                    {% for size in per_page_choices %}
                                        <option value="{{ size }}" {% if per_page == size %}selected{% endif %}>{{ size }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="d-flex gap-2 mt-2">
                                <button type="submit" class="btn btn-primary flex-fill">Apply Filter</button>
                                {% if perms.securityaudit.administrate %}
                                <a class="btn btn-danger flex-fill" href="{% url 'securityaudit:dashboard' %}">Clear</a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .filter-select label {
        margin-bottom: 0.25rem;
    }
</style>

{% if perms.securityaudit.administrate %}
<div
    id="new-join-live-banner"
    class="alert alert-info"
    role="status"
    style="display: none;"
>
    <strong>New-join processing is active.</strong>
    <span id="new-join-live-message">
        {{ active_new_join_running_count }} running, {{ active_new_join_queued_count }} queued.
    </span>
</div>
{% endif %}

<div class="card" id="dashboard-runs-container">
    <div class="table-responsive">
        {% if perms.securityaudit.administrate %}
        <form method="post" action="{% url 'securityaudit:audit_bulk_delete' %}" id="bulk-delete-form">
            {% csrf_token %}
            <div class="p-3 border-bottom" style="display: flex; gap: 0.5rem;">
                <button type="button" id="bulk-requeue-submit" class="btn btn-sm btn-warning bulk-action-btn" style="display: none;">Re-queue Selected</button>
                <button type="submit" id="bulk-delete-submit" class="btn btn-sm btn-danger bulk-action-btn" style="display: none;" formaction="{% url 'securityaudit:audit_bulk_delete' %}" onclick="return confirm('Delete selected audits? Queued/running audits will be skipped.');">Delete Selected</button>
            </div>
        {% endif %}
        <table class="table table-striped table-hover mb-0">
            <thead>
                <tr>
                    {% if perms.securityaudit.administrate %}
                    <th style="width: 44px;"><input type="checkbox" id="select-all-audits" /></th>
                    {% endif %}
                    <th>{% url_replace 'sort' 'id' as sort_url %}<a href="{{ sort_url }}">ID{% if sort == 'id' %} ▲{% elif sort == '-id' %} ▼{% endif %}</a></th>
                    <th>Target</th>
                    <th>{% url_replace 'sort' 'status' as sort_url %}<a href="{{ sort_url }}">Status{% if sort == 'status' %} ▲{% elif sort == '-status' %} ▼{% endif %}</a></th>
                    <th>Risk</th>
                    <th>{% url_replace 'sort' 'risk_score' as sort_url %}<a href="{{ sort_url }}">Score{% if sort == 'risk_score' %} ▲{% elif sort == '-risk_score' %} ▼{% endif %}</a></th>
                    <th>{% url_replace 'sort' 'created' as sort_url %}<a href="{{ sort_url }}">Created{% if sort == 'created' %} ▲{% elif sort == '-created' %} ▼{% endif %}</a></th>
                    <th>Initiated by</th>
                    <th>Viewers</th>
                </tr>
            </thead>
            <tbody>
            {% for run in page_obj.object_list %}
                <tr>
                    {% if perms.securityaudit.administrate %}
                    <td><input type="checkbox" class="audit-row-checkbox" name="run_ids" value="{{ run.id }}" form="bulk-delete-form" /></td>
                    {% endif %}
                    <td><a href="{% url 'securityaudit:audit_detail' run.id %}">#{{ run.id }}</a></td>
                    <td>
                        {% with meta=target_meta|get:run.target.pk %}
                        {% if meta %}
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            {% if meta.portrait_url %}
                            <img src="{{ meta.portrait_url }}" alt="" width="32" height="32" class="rounded">
                            {% endif %}
                            {% if meta.memberaudit_url %}
                            <a href="{{ meta.memberaudit_url }}" target="_blank" rel="noopener noreferrer">{{ meta.display_name }}</a>
                            {% else %}
                            <span>{{ meta.display_name }}</span>
                            {% endif %}
                            <div class="small d-flex align-items-center gap-1 flex-wrap">
                                {% if meta.corp_id %}
                                <img src="{{ meta.corp_logo_url }}" alt="" width="16" height="16" class="rounded">
                                <span class="text-muted">{{ meta.corp_name }}</span>
                                {% endif %}
                                {% if meta.alliance_id %}
                                <img src="{{ meta.alliance_logo_url }}" alt="" width="16" height="16" class="rounded">
                                <span class="text-muted">{{ meta.alliance_name }}</span>
                                {% endif %}
                            </div>
                        </div>
                        {% else %}
                        {{ run.target }}
                        {% endif %}
                        {% endwith %}
                    </td>
                    <td>{{ run.get_status_display }}</td>
                    <td>{{ run.risk_level|title }}</td>
                    <td>{{ run.risk_score }}</td>
                    <td>{{ run.created_at }}</td>
                    <td>
                        {% with initiated=initiator_meta|get:run.id %}
                        <div class="d-flex align-items-center gap-2">
                            {% if initiated.portrait_url %}
                            <img src="{{ initiated.portrait_url }}" alt="" width="24" height="24" class="rounded">
                            {% endif %}
                            <span>{{ initiated.name }}</span>
                        </div>
                        {% endwith %}
                    </td>
                    <td>
                        {% with viewers=viewer_avatars|get:run.id %}
                        <div class="d-flex align-items-center gap-1 flex-wrap">
                            {% for viewer in viewers %}
                            <img src="{{ viewer.portrait_url }}" alt="{{ viewer.name }}" title="{{ viewer.name }}" width="24" height="24" class="rounded">
                            {% empty %}
                            <span class="text-muted small">—</span>
                            {% endfor %}
                        </div>
                        {% endwith %}
                    </td>
                </tr>
            {% empty %}
                <tr><td colspan="{% if perms.securityaudit.administrate %}9{% else %}8{% endif %}" class="text-center text-muted py-4">No audits match the current filters.</td></tr>
            {% endfor %}
            </tbody>
        </table>
        {% if perms.securityaudit.administrate %}
        </form>
        {% endif %}
    </div>
</div>

{% if perms.securityaudit.administrate %}
<div class="modal" id="bulkRequeueModal" tabindex="-1" aria-labelledby="bulkRequeueModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bulkRequeueModalLabel">Re-queue Selected Audits</h5>
                <button type="button" class="btn btn-danger ms-auto" data-bulk-requeue-close aria-label="Close" style="font-size: 1.25rem; line-height: 1; padding: .25rem .5rem;">&times;</button>
            </div>
            <div class="modal-body">
                <p class="mb-2">Re-queue selected audits? Queued/running audits will be skipped and results will be cleared.</p>
                <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-secondary" data-bulk-requeue-close>Cancel</button>
                    <button type="button" class="btn btn-warning" id="bulk-requeue-confirm">Re-queue Selected</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    (function () {
        function updateBulkActionButtons() {
            const buttons = document.querySelectorAll(".bulk-action-btn");
            const anyChecked = Array.from(document.querySelectorAll(".audit-row-checkbox")).some((el) => el.checked);
            buttons.forEach((btn) => {
                btn.style.display = anyChecked ? "" : "none";
            });
        }

        function bindBulkSelect() {
            const selectAll = document.getElementById("select-all-audits");
            if (!selectAll || selectAll.dataset.bound === "1") {
                return;
            }
            selectAll.dataset.bound = "1";
            selectAll.addEventListener("change", () => {
                const rowChecks = Array.from(document.querySelectorAll(".audit-row-checkbox"));
                rowChecks.forEach((el) => {
                    el.checked = selectAll.checked;
                });
                updateBulkActionButtons();
            });
        }

        const runsContainer = document.getElementById("dashboard-runs-container");
        const bulkForm = document.getElementById("bulk-delete-form");
        const bulkRequeueButton = document.getElementById("bulk-requeue-submit");
        const bulkRequeueModal = document.getElementById("bulkRequeueModal");
        const bulkRequeueCloseButtons = bulkRequeueModal ? bulkRequeueModal.querySelectorAll("[data-bulk-requeue-close]") : [];
        const bulkRequeueConfirm = document.getElementById("bulk-requeue-confirm");
        const bulkRequeueUrl = "{% url 'securityaudit:audit_bulk_requeue' %}";

        function openBulkRequeueModal() {
            if (!bulkRequeueModal) {
                return;
            }
            bulkRequeueModal.style.setProperty("display", "block", "important");
            bulkRequeueModal.classList.add("show");
            bulkRequeueModal.setAttribute("aria-hidden", "false");
        }

        function closeBulkRequeueModal() {
            if (!bulkRequeueModal) {
                return;
            }
            bulkRequeueModal.classList.remove("show");
            bulkRequeueModal.style.setProperty("display", "none", "important");
            bulkRequeueModal.setAttribute("aria-hidden", "true");
        }

        if (bulkRequeueButton) {
            bulkRequeueButton.addEventListener("click", openBulkRequeueModal);
        }
        bulkRequeueCloseButtons.forEach((btn) => btn.addEventListener("click", closeBulkRequeueModal));

        if (bulkRequeueConfirm && bulkForm) {
            bulkRequeueConfirm.addEventListener("click", () => {
                bulkForm.setAttribute("action", bulkRequeueUrl);
                bulkForm.requestSubmit();
            });
        }

        if (runsContainer) {
            runsContainer.addEventListener("change", (e) => {
                if (e.target.matches(".audit-row-checkbox")) {
                    updateBulkActionButtons();
                }
            });
        }

        document.addEventListener("keydown", function (e) {
            if (e.key === "Escape" && bulkRequeueModal && bulkRequeueModal.classList.contains("show")) {
                closeBulkRequeueModal();
            }
        });

        bindBulkSelect();
        updateBulkActionButtons();
        window.securityauditBindBulkSelect = bindBulkSelect;
        window.securityauditUpdateBulkDeleteButton = updateBulkActionButtons;
    })();
</script>
{% endif %}

{% if perms.securityaudit.administrate %}
<script>
    (function () {
        const liveStatusUrl = "{% url 'securityaudit:dashboard_live_status' %}";
        const bannerEl = document.getElementById("new-join-live-banner");
        const messageEl = document.getElementById("new-join-live-message");
        const runsContainer = document.getElementById("dashboard-runs-container");
        const paginationContainer = document.getElementById("dashboard-pagination-container");
        if (!bannerEl || !messageEl) {
            return;
        }

        let previousActiveCount = Number("{{ active_new_join_jobs_count|default:0 }}") || 0;
        let refreshInFlight = false;

        function refreshRunsInPlace() {
            if (!runsContainer || refreshInFlight) {
                return;
            }
            refreshInFlight = true;
            fetch(window.location.href, {headers: {"X-Requested-With": "XMLHttpRequest"}})
                .then((response) => response.ok ? response.text() : null)
                .then((html) => {
                    if (!html) {
                        return;
                    }
                    const doc = new DOMParser().parseFromString(html, "text/html");
                    const nextRunsContainer = doc.getElementById("dashboard-runs-container");
                    const nextPaginationContainer = doc.getElementById("dashboard-pagination-container");
                    if (nextRunsContainer && runsContainer) {
                        runsContainer.innerHTML = nextRunsContainer.innerHTML;
                        if (typeof window.securityauditBindBulkSelect === "function") {
                            window.securityauditBindBulkSelect();
                        }
                        if (typeof window.securityauditUpdateBulkDeleteButton === "function") {
                            window.securityauditUpdateBulkDeleteButton();
                        }
                    }
                    if (paginationContainer && nextPaginationContainer) {
                        paginationContainer.innerHTML = nextPaginationContainer.innerHTML;
                    }
                })
                .catch(() => {})
                .finally(() => {
                    refreshInFlight = false;
                });
        }

        function applyStatus(data) {
            const activeCount = Number(data.active_count || 0);
            if (activeCount > 0) {
                const runningCount = Number(data.running_count || 0);
                const queuedCount = Number(data.queued_count || 0);
                messageEl.textContent = `${runningCount} running, ${queuedCount} queued.`;
                bannerEl.style.display = "";
            } else {
                messageEl.textContent = "";
                bannerEl.style.display = "none";
            }

            if (activeCount > 0) {
                refreshRunsInPlace();
            } else if (previousActiveCount > 0 && activeCount === 0) {
                refreshRunsInPlace();
            }

            previousActiveCount = activeCount;
        }

        function poll() {
            fetch(liveStatusUrl, {headers: {"X-Requested-With": "XMLHttpRequest"}})
                .then((response) => response.ok ? response.json() : null)
                .then((data) => {
                    if (!data) {
                        return;
                    }
                    applyStatus(data);
                })
                .catch(() => {});
        }

        poll();
        setInterval(poll, 5000);
    })();
</script>
{% endif %}

<div id="dashboard-pagination-container">
{% if page_obj.has_other_pages %}
<nav class="mt-3" aria-label="Security audit pagination">
    <ul class="pagination">
        <li class="page-item {% if not page_obj.has_previous %}disabled{% endif %}">
            <a class="page-link" href="?page={% if page_obj.has_previous %}{{ page_obj.previous_page_number }}{% else %}1{% endif %}&q={{ q|urlencode }}&status={{ status }}{% for r in risk_level %}&risk_level={{ r }}{% endfor %}&per_page={{ per_page }}">Previous</a>
        </li>
        <li class="page-item disabled">
            <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
        </li>
        <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
            <a class="page-link" href="?page={% if page_obj.has_next %}{{ page_obj.next_page_number }}{% else %}{{ page_obj.paginator.num_pages }}{% endif %}&q={{ q|urlencode }}&status={{ status }}{% for r in risk_level %}&risk_level={{ r }}{% endfor %}&per_page={{ per_page }}">Next</a>
        </li>
    </ul>
</nav>
{% endif %}
</div>

{% if perms.securityaudit.run_audit %}
<div class="modal" id="runAuditModal" tabindex="-1" aria-labelledby="runAuditModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header position-relative">
                <h5 class="modal-title" id="runAuditModalLabel">Run Security Audit</h5>
                <button type="button" class="btn btn-danger" data-close aria-label="Close" style="font-size: 1.25rem; line-height: 1; padding: .25rem .5rem; position: absolute; top: .5rem; right: .5rem;">&times;</button>
            </div>
            <div class="modal-body">
                {% include "securityaudit/run_audit_form.html" %}
            </div>
        </div>
    </div>
</div>
{% endif %}

<script>
    (function () {
        const trigger = document.getElementById("run-audit-modal-trigger");
        const modalEl = document.getElementById("runAuditModal");
        const closeBtn = modalEl ? modalEl.querySelector("[data-close]") : null;

        function openModal() {
            if (!modalEl) return;
            console.log("Opening run audit modal", modalEl);
            modalEl.style.setProperty("display", "block", "important");
            modalEl.classList.add("show");
            modalEl.setAttribute("aria-hidden", "false");
        }

        function closeModal() {
            if (!modalEl) return;
            modalEl.classList.remove("show");
            modalEl.style.setProperty("display", "none", "important");
            modalEl.setAttribute("aria-hidden", "true");
        }

        if (trigger) {
            trigger.addEventListener("click", openModal);
        }
        if (closeBtn) {
            closeBtn.addEventListener("click", closeModal);
        }
        document.addEventListener("keydown", function (e) {
            if (e.key === "Escape" && modalEl && modalEl.classList.contains("show")) {
                closeModal();
            }
        });
    })();
</script>
<script>
    (function () {
        document.querySelectorAll("#dashboard-filter-offcanvas .dropdown-menu .form-check-input").forEach(function (input) {
            input.addEventListener("click", function (event) {
                event.stopPropagation();
            });
        });
    })();
</script>
{% endblock %}