{% extends 'base/layout.html' %}
{% load i18n %}
{% load static %}
{% load proxbox_tags %}

{% block head %}
    <script>
        window.proxboxConfig = {
            fastapiEndpoint: "{{ fastapi_url|default:''|escapejs }}",
            websocketEndpoint: "{{ fastapi_websocket_url|default:''|escapejs }}"
        };
    </script>
    {% if active_proxbox_job %}
        {% include "netbox_proxbox/inc/job_log_assets.html" %}
    {% endif %}
    {% comment %}Dashboard hydration is inlined (issue #355) so logos, status badges,
       and cluster cards render even when ``manage.py collectstatic`` was
       not run after installing/upgrading the plugin.{% endcomment %}
    <script>{% inline_static_script 'netbox_proxbox/js/home_inline.js' %}</script>
    {% if quick_schedule_form %}
        <link rel="stylesheet" href="{% static 'netbox_proxbox/css/quick_schedule_home.css' %}">
        {{ quick_schedule_form.media }}
    {% endif %}
    <script>
    (function () {
        "use strict";

        function getCsrfToken() {
            const name = "csrftoken";
            const cookies = document.cookie.split(";");
            for (const c of cookies) {
                const [k, v] = c.trim().split("=");
                if (k === name) return decodeURIComponent(v);
            }
            return "";
        }

        document.addEventListener("DOMContentLoaded", function () {
            const modalEl = document.getElementById("proxbox-quick-edit-modal");
            if (!modalEl) return;

            const bsModal = new Modal(modalEl);
            const modalBody = document.getElementById("proxbox-quick-edit-body");
            const modalTitle = modalEl.querySelector(".modal-title");

            const spinner = '<div class="text-center p-4"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading…</span></div></div>';

            function attachFormHandler(form) {
                form.addEventListener("submit", function (e) {
                    e.preventDefault();
                    const submitBtn = form.querySelector('[type="submit"]');
                    if (submitBtn) { submitBtn.disabled = true; }

                    fetch(form.action, {
                        method: "POST",
                        headers: {
                            "X-CSRFToken": getCsrfToken(),
                            "X-Requested-With": "XMLHttpRequest",
                        },
                        body: new FormData(form),
                    })
                    .then(function (r) {
                        if (r.ok) {
                            r.json().then(function () {
                                bsModal.hide();
                                location.reload();
                            });
                        } else {
                            r.text().then(function (html) {
                                modalBody.innerHTML = html;
                                const newForm = modalBody.querySelector("form");
                                if (newForm) attachFormHandler(newForm);
                            });
                        }
                    })
                    .catch(function () {
                        if (submitBtn) { submitBtn.disabled = false; }
                    });
                });
            }

            document.querySelectorAll("[data-proxbox-quick-edit-url]").forEach(function (btn) {
                btn.addEventListener("click", function () {
                    const url = btn.dataset.proxboxQuickEditUrl;
                    modalBody.innerHTML = spinner;
                    if (modalTitle) {
                        const cardHeader = btn.closest(".card");
                        const headerText = cardHeader ? cardHeader.querySelector(".card-header") : null;
                        modalTitle.textContent = headerText
                            ? "Edit " + headerText.textContent.trim()
                            : "Edit Endpoint";
                    }
                    bsModal.show();

                    fetch(url, {
                        headers: { "X-Requested-With": "XMLHttpRequest" },
                    })
                    .then(function (r) {
                        if (!r.ok) throw new Error("HTTP " + r.status);
                        return r.text();
                    })
                    .then(function (html) {
                        modalBody.innerHTML = html;
                        const form = modalBody.querySelector("form");
                        if (form) attachFormHandler(form);
                    })
                    .catch(function (err) {
                        modalBody.innerHTML = '<div class="alert alert-danger">Failed to load the edit form. ' + err.message + "</div>";
                    });
                });
            });
        });
    }());
    </script>
{% endblock %}

{% block content %}
    {% include "netbox_proxbox/home/quick_schedule_banner.html" %}
    {% if active_proxbox_job %}
        {% include "netbox_proxbox/home/job_live_summary.html" with job=active_proxbox_job %}
    {% endif %}

    <div class="row mb-3">
        <div id="sync-progress-container" class="d-none sticky-top pt-2 mb-3" style="z-index: 1030;">
            <div class="col-12">
                <div class="card border-primary shadow-sm">
                    <div class="card-body py-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <strong id="sync-progress-label">Sync in progress</strong>
                            <span id="sync-progress-state" class="text-muted small">Working...</span>
                        </div>
                        <div class="progress mt-2" role="progressbar" aria-label="Sync progress indicator" aria-valuemin="0" aria-valuemax="100">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div align="center" id="full-update-error-message"></div>

        <div style="margin-bottom: 15px;" class="container noprint">
            {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
                {% for object in fastapi_endpoint_list %}
                    <div class="row mb-2">
                        <div class="col-12 text-center">
                            {% if object.use_websocket %}
                                {% if object.server_side_websocket %}
                                    <p>Using Polling (Server-Only)</p>
                                {% else %}
                                    <p>Using WebSocket (Client-Server)</p>
                                {% endif %}
                            {% else %}
                                <p>
                                    {% trans "Using HTTP" %}
                                    <a href="https://fastapi.tiangolo.com/advanced/stream-data/#use-cases" target="_blank" rel="noopener noreferrer">{% trans "Streaming" %}</a>
                                </p>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
                {% include "netbox_proxbox/partials/home_sync_actions_dropdown.html" %}
            {% endif %}
        </div>

        {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
            {% for object in fastapi_endpoint_list %}
                {% if object.use_websocket %}
                    {% include "netbox_proxbox/table/virtual_machines.html" %}
                    {% include "netbox_proxbox/table/devices.html" %}
                {% endif %}
            {% endfor %}
        {% endif %}

        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2" style="margin-bottom: 15px;">
            <h2 class="mb-0">Proxbox Configuration</h2>
            <div class="btn-group" role="group" aria-label="Endpoint view mode" id="proxbox-view-toggle">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="proxbox-toggle-cards" aria-pressed="false">
                    <i class="mdi mdi-card-text-outline" aria-hidden="true"></i> Cards
                </button>
                <button type="button" class="btn btn-sm btn-outline-secondary active" id="proxbox-toggle-table" aria-pressed="true">
                    <i class="mdi mdi-table" aria-hidden="true"></i> Table
                </button>
            </div>
        </div>

        <div class="col-12">
            {% include "netbox_proxbox/partials/bootstrap_status_card.html" %}
        </div>

        {# — Card view — #}
        <div id="proxbox-config-cards" style="display: none;">
            {% if netbox_endpoint_list and netbox_endpoint_list|length > 0 %}
                {% for object in netbox_endpoint_list %}
                    {% include "netbox_proxbox/home/netbox_card.html" %}
                {% endfor %}
            {% else %}
                <div class="d-flex flex-column align-items-center gap-2" style="margin-bottom: 15px;">
                    <div><h2>There is no NetBox Endpoint configured.</h2></div>
                    <p class="small text-muted text-center mb-0">
                        Quick add starts with localhost, 127.0.0.1/32, and v1 token mode. Change any value before saving.
                    </p>
                    <div class="d-flex flex-wrap justify-content-center gap-2">
                        <a href="{{ netbox_quick_add_url }}" class="btn btn-primary">Quick add NetBox Endpoint</a>
                        <a href="{% url 'plugins:netbox_proxbox:netboxendpoint_add' %}" class="btn btn-outline-secondary">Open blank form</a>
                        <a href="{% url 'plugins:netbox_proxbox:netboxendpoint_bulk_import' %}" class="btn btn-outline-primary"><i class="mdi mdi-upload" aria-hidden="true"></i> Import from CSV</a>
                    </div>
                </div>
                <hr>
            {% endif %}

            {% if fastapi_endpoint_list and fastapi_endpoint_list|length > 0 %}
                {% for object in fastapi_endpoint_list %}
                    {% include "netbox_proxbox/home/fastapi_card.html" %}
                {% endfor %}
            {% else %}
                <div class="d-flex flex-column align-items-center gap-2" style="margin-bottom: 15px;">
                    <div><h2>There is no FastAPI Endpoint configured.</h2></div>
                    <p class="small text-muted text-center mb-0">
                        Quick add starts with localhost and 127.0.0.1/32. Change the host or IP before saving.
                    </p>
                    <div class="d-flex flex-wrap justify-content-center gap-2">
                        <a href="{{ fastapi_quick_add_url }}" class="btn btn-primary">Quick add FastAPI Endpoint</a>
                        <a href="{% url 'plugins:netbox_proxbox:fastapiendpoint_add' %}" class="btn btn-outline-secondary">Open blank form</a>
                        <a href="{% url 'plugins:netbox_proxbox:fastapiendpoint_bulk_import' %}" class="btn btn-outline-primary"><i class="mdi mdi-upload" aria-hidden="true"></i> Import from CSV</a>
                    </div>
                </div>
                <hr>
            {% endif %}

            {% if proxmox_endpoint_list and proxmox_endpoint_list|length > 0 %}
                {% for object in proxmox_endpoint_list %}
                    {% if proxmox_endpoint_list|length == 1 %}
                        <div class="col">
                    {% elif proxmox_endpoint_list|length == 2 %}
                        <div class="col col-md-6">
                    {% else %}
                        <div class="col col-md-4">
                    {% endif %}
                            {% include "netbox_proxbox/home/proxmox_card.html" %}
                        </div>
                {% endfor %}
            {% else %}
                <div class="d-flex flex-column align-items-center" style="margin-bottom: 15px;">
                    <div><h2>There are no Proxmox Endpoints configured.</h2></div>
                    <div class="d-flex flex-wrap justify-content-center gap-2">
                        <a href="{% url 'plugins:netbox_proxbox:proxmoxendpoint_add' %}" class="btn btn-primary">Create new Proxmox Endpoint</a>
                        <a href="{% url 'plugins:netbox_proxbox:proxmoxendpoint_bulk_import' %}" class="btn btn-outline-primary"><i class="mdi mdi-upload" aria-hidden="true"></i> Import from CSV</a>
                    </div>
                </div>
                <hr>
            {% endif %}

            {% if companion_endpoint_groups %}
                <div class="col-12 mt-3">
                    <div class="d-flex justify-content-center flex-nowrap" style="margin-bottom: 15px;">
                        <h2>Additional Proxbox Plugin Endpoints</h2>
                    </div>
                </div>
                {% for endpoint_group in companion_endpoint_groups %}
                    {% for companion_endpoint in endpoint_group.endpoints %}
                        {% if endpoint_group.endpoints|length == 1 %}
                            <div class="col">
                        {% elif endpoint_group.endpoints|length == 2 %}
                            <div class="col col-md-6">
                        {% else %}
                            <div class="col col-md-4">
                        {% endif %}
                                {% include "netbox_proxbox/home/companion_endpoint_card.html" with endpoint_group=endpoint_group companion_endpoint=companion_endpoint %}
                            </div>
                    {% endfor %}
                {% endfor %}
            {% endif %}

            {% if pdm_endpoint_list %}
                <div class="col-12 mt-3">
                    <div class="d-flex justify-content-center flex-nowrap" style="margin-bottom: 15px;">
                        <h2>PDM Endpoints</h2>
                    </div>
                </div>
                {% for pdm_ep in pdm_endpoint_list %}
                    <div class="col col-md-6">
                        <div class="card h-100">
                            <h2 class="card-header">PDM Endpoint</h2>
                            <div class="card-body">
                                <table class="table table-hover attr-table">
                                    <tr>
                                        <th scope="row"><strong>Name</strong></th>
                                        <td><a href="{{ pdm_ep.get_absolute_url }}">{{ pdm_ep.name }}</a></td>
                                    </tr>
                                    {% if pdm_ep.domain %}
                                    <tr>
                                        <th scope="row"><strong>Domain</strong></th>
                                        <td>{{ pdm_ep.domain }}</td>
                                    </tr>
                                    {% endif %}
                                    {% if pdm_ep.ip_address %}
                                    <tr>
                                        <th scope="row"><strong>IP Address</strong></th>
                                        <td>{{ pdm_ep.ip_address }}</td>
                                    </tr>
                                    {% endif %}
                                    <tr>
                                        <th scope="row"><strong>Port</strong></th>
                                        <td>{{ pdm_ep.port }}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row"><strong>Enabled</strong></th>
                                        <td>{% if pdm_ep.enabled %}<span class="text-success">Yes</span>{% else %}<span class="text-muted">No</span>{% endif %}</td>
                                    </tr>
                                    <tr>
                                        <th scope="row"><strong>Remotes</strong></th>
                                        <td>{{ pdm_ep.remotes.count }}</td>
                                    </tr>
                                </table>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="badge text-bg-secondary">netbox_pdm</span>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% endif %}

            {% if rpc_integration %}
                <div class="col-12 mt-3">
                    <div class="d-flex justify-content-center flex-nowrap" style="margin-bottom: 15px;">
                        <h2>RPC Engine</h2>
                    </div>
                </div>
                <div class="col col-md-6">
                    <div class="card h-100">
                        <h2 class="card-header">netbox-rpc</h2>
                        <div class="card-body">
                            <table class="table table-hover attr-table">
                                <tr>
                                    <th scope="row"><strong>Integration</strong></th>
                                    <td>
                                        {% if rpc_integration.enabled %}
                                            <span class="badge text-bg-success">Enabled</span>
                                        {% else %}
                                            <span class="badge text-bg-secondary">Optional &middot; not enabled</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% if rpc_integration.settings_supported %}
                                <tr>
                                    <th scope="row"><strong>Backend</strong></th>
                                    <td>
                                        {% if rpc_integration.backend_name %}
                                            {{ rpc_integration.backend_name }}
                                        {% else %}
                                            <span class="text-muted">Not configured</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% if rpc_integration.backend_url %}
                                <tr>
                                    <th scope="row"><strong>Backend URL</strong></th>
                                    <td class="text-truncate" style="max-width: 320px;">{{ rpc_integration.backend_url }}</td>
                                </tr>
                                {% endif %}
                                {% endif %}
                            </table>
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="badge text-bg-secondary">netbox_rpc</span>
                                <a href="{{ rpc_integration.home_url }}" class="btn btn-sm btn-outline-primary">
                                    <i class="mdi mdi-cog-outline"></i>
                                    {% if rpc_integration.enabled %}Open netbox-rpc{% else %}Configure &amp; opt in{% endif %}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>{# /proxbox-config-cards #}

        {# — Table view (default) — #}
        <div id="proxbox-config-table">
            {% include "netbox_proxbox/home/endpoint_tables.html" %}
        </div>{# /proxbox-config-table #}

        <script>
        (function () {
            "use strict";
            var STORAGE_KEY = "proxbox_endpoint_view";
            var cardsEl = document.getElementById("proxbox-config-cards");
            var tableEl = document.getElementById("proxbox-config-table");
            var btnCards = document.getElementById("proxbox-toggle-cards");
            var btnTable = document.getElementById("proxbox-toggle-table");

            function showCards() {
                cardsEl.style.display = "";
                tableEl.style.display = "none";
                btnCards.classList.add("active");
                btnCards.setAttribute("aria-pressed", "true");
                btnTable.classList.remove("active");
                btnTable.setAttribute("aria-pressed", "false");
                try { localStorage.setItem(STORAGE_KEY, "cards"); } catch (e) {}
            }

            function showTable() {
                cardsEl.style.display = "none";
                tableEl.style.display = "";
                btnTable.classList.add("active");
                btnTable.setAttribute("aria-pressed", "true");
                btnCards.classList.remove("active");
                btnCards.setAttribute("aria-pressed", "false");
                try { localStorage.setItem(STORAGE_KEY, "table"); } catch (e) {}
            }

            btnCards.addEventListener("click", showCards);
            btnTable.addEventListener("click", showTable);

            try {
                if (localStorage.getItem(STORAGE_KEY) === "cards") { showCards(); }
            } catch (e) {}
        }());
        </script>
    </div>

    {# — Latest Proxbox sync jobs — #}
    <div class="row mb-3">
        <div class="col col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h2 class="card-title mb-0">{% trans "Latest Sync Jobs" %}</h2>
                    <a href="{{ sync_jobs_list_url }}" class="btn btn-sm btn-primary">
                        <i class="mdi mdi-format-list-bulleted" aria-hidden="true"></i>
                        {% trans "View all sync jobs" %}
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th scope="col">{% trans "Job" %}</th>
                                <th scope="col">{% trans "Status" %}</th>
                                <th scope="col">{% trans "Created" %}</th>
                                <th scope="col">{% trans "Started" %}</th>
                                <th scope="col">{% trans "Completed" %}</th>
                                <th scope="col">{% trans "User" %}</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for job in latest_sync_jobs %}
                                <tr>
                                    <td><a href="{{ job.get_absolute_url }}">{{ job.name }}</a></td>
                                    <td><span class="badge text-bg-{{ job.get_status_color }}">{{ job.get_status_display }}</span></td>
                                    <td>{{ job.created|date:"SHORT_DATETIME_FORMAT"|default:"—" }}</td>
                                    <td>{{ job.started|date:"SHORT_DATETIME_FORMAT"|default:"—" }}</td>
                                    <td>{{ job.completed|date:"SHORT_DATETIME_FORMAT"|default:"—" }}</td>
                                    <td>{{ job.user|default:"—" }}</td>
                                </tr>
                            {% empty %}
                                <tr>
                                    <td colspan="6" class="text-muted text-center py-3">{% trans "No sync jobs have run yet." %}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="text-center mt-4 mb-2">
        <p class="text-muted mb-0">
            Support me! If this plugin is useful to you, please consider supporting it on the
            <a href="https://github.com/sponsors/emersonfelipesp" target="_blank" rel="noopener noreferrer">Sponsors page</a>.
        </p>
    </div>
{% endblock %}

{% block footer_links %}
    {{ block.super }}
    {% include "netbox_proxbox/footer.html" %}
{% endblock %}

{% block modals %}
    {{ block.super }}
    {# Shared modal used by the quick-edit buttons on the homepage endpoint cards. #}
    <div
        class="modal fade"
        id="proxbox-quick-edit-modal"
        tabindex="-1"
        aria-labelledby="proxbox-quick-edit-modal-label"
        aria-hidden="true"
    >
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="proxbox-quick-edit-modal-label">Edit Endpoint</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="proxbox-quick-edit-body">
                    <div class="text-center p-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading…</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}