{% extends "nginx_analyzer/base.html" %}
{% load static tz %}


{# Titre de page si ton base template gère ce bloc #}
{% block title %}Endpoint Profiler{% endblock %}

{# CSS minimal, encapsulé pour ne pas polluer le reste du site #}
{% block extra_head %}
<style>
    .ep-wrapper {
        padding: 1.5rem;
    }
    .ep-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .ep-title {
        font-size: 1.4rem;
        font-weight: 600;
    }
    .ep-subtitle {
        color: #6b7280;
        font-size: 0.9rem;
    }
    .ep-filters {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin: .5rem 0 1rem;
    }
    .ep-filters label {
        font-size: 0.85rem;
        color: #6b7280;
    }
    .ep-filters input,
    .ep-filters select {
        margin-left: .25rem;
        padding: .25rem .45rem;
        border-radius: 4px;
        border: 1px solid #d1d5db;
        font-size: 0.85rem;
    }
    .ep-table {
        border-collapse: collapse;
        width: 100%;
        font-size: 0.85rem;
    }
    .ep-table th,
    .ep-table td {
        padding: .4rem .5rem;
        border-bottom: 1px solid #e5e7eb;
        text-align: left;
        white-space: nowrap;
    }
    .ep-table th {
        background: #f3f4f6;
        font-weight: 600;
        cursor: pointer;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .ep-table tbody tr:nth-child(even) {
        background: #f9fafb;
    }
    .ep-table tbody tr:hover {
        background: #e5f2ff;
    }
    .ep-col-path {
        max-width: 380px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ep-slow {
        font-weight: 600;
    }
    .ep-slow.bad {
        color: #b91c1c;
    }
    .ep-slow.medium {
        color: #b45309;
    }
    .ep-slow.good {
        color: #059669;
    }
    .ep-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1.4rem;
        padding: 0 .35rem;
        font-size: .75rem;
        border-radius: 999px;
        background: #e5e7eb;
        color: #374151;
    }
    .ep-legend {
        margin-top: .75rem;
        font-size: .75rem;
        color: #6b7280;
    }
</style>
{% endblock extra_head %}

{% block content %}
<div class="ep-wrapper">
    <div class="ep-header">
        <div>
            <div class="ep-title">Profiling des endpoints HTTP</div>
            <div class="ep-subtitle">
                Statistiques calculées à partir des logs Nginx
                {% if generated_at %}(générées le {{ generated_at }}){% endif %}
            </div>
        </div>
        <div>
            <span class="ep-badge">{{ endpoints|length }} endpoints</span>
        </div>
    </div>

    <div class="ep-filters">
        <label>
            Méthode :
            <select id="ep-method">
                <option value="">(toutes)</option>
                <option>GET</option>
                <option>POST</option>
                <option>PUT</option>
                <option>PATCH</option>
                <option>DELETE</option>
            </select>
        </label>

        <label>
            Filtre chemin :
            <input type="text" id="ep-path" placeholder="/api/..." />
        </label>

        <label>
            Min. requêtes :
            <input type="number" id="ep-min-count" value="5" min="1" style="width:4rem;">
        </label>

        <label>
            Tri :
            <select id="ep-sort">
                <option value="p95-desc">p95 décroissant</option>
                <option value="p99-desc">p99 décroissant</option>
                <option value="avg-desc">moyenne décroissante</option>
                <option value="max-desc">max décroissant</option>
                <option value="count-desc">volume décroissant</option>
                <option value="error_rate-desc">erreurs décroissant</option>
            </select>
        </label>

        {% if runs %}
        <label>
            Run :
            <select id="ep-run-select">
                {% for r in runs %}
                <option value="{{ r.id }}" {% if current_run and r.id == current_run.id %}selected{% endif %}>
                #{{ r.id }} – {{ r.created_at|date:"Y-m-d H:i" }} ({{ r.total_endpoints }} ep)
                </option>
                {% endfor %}
            </select>
        </label>
        {% endif %}

        <button type="button" id="ep-reset-btn">Réinitialiser filtres</button>
        <a href="?refresh=1" id="ep-refresh-btn">Rafraîchir les stats</a>


    </div>




    <div style="overflow-x:auto; max-height: 70vh;">
        <table class="ep-table" id="ep-table">
            <thead>
                <tr>
                    <th>Method</th>
                    <th>Path</th>
                    <th>Count</th>
                    <th>p95 (s)</th>
                    <th>p99 (s)</th>
                    <th>Avg (s)</th>
                    <th>Max (s)</th>
                    <th>Err %</th>
                </tr>
            </thead>
            <tbody>
                {# contenu rempli en JS pour garder les filtres/tri dynamiques #}
            </tbody>
        </table>
    </div>

    <div class="ep-legend">
        p95/p99 = percentiles de temps de réponse sur la période de logs analysée.  
        Conseil : regarder les endpoints avec p95 &gt; 0.5–1 s et un volume important.
    </div>
</div>

{# On passe le tableau Python -> JS proprement #}
{{ endpoints|json_script:"ep-data" }}

<script>
    (function() {
        const rawData = JSON.parse(document.getElementById("ep-data").textContent || "[]");
        let data = rawData.slice();

        const tbody   = document.querySelector("#ep-table tbody");
        const methodF = document.getElementById("ep-method");
        const pathF   = document.getElementById("ep-path");
        const minCntF = document.getElementById("ep-min-count");
        const sortF   = document.getElementById("ep-sort");

        function classifySlow(p95) {
            if (p95 == null) return "";
            if (p95 >= 2)   return "bad";
            if (p95 >= 0.5) return "medium";
            return "good";
        }

        function render() {
            const method = methodF.value;
            const pathFilter = (pathF.value || "").toLowerCase();
            const minCount = parseInt(minCntF.value || "1", 10) || 1;
            const [key, dir] = (sortF.value || "p95-desc").split("-");

            let rows = data.filter(row => {
                if (method && row.method !== method) return false;
                if (row.count < minCount) return false;
                if (pathFilter && !row.path.toLowerCase().includes(pathFilter)) return false;
                return true;
            });

            rows.sort((a, b) => {
                let va = a[key], vb = b[key];
                if (va === undefined) va = 0;
                if (vb === undefined) vb = 0;
                if (va < vb) return dir === "asc" ? -1 : 1;
                if (va > vb) return dir === "asc" ? 1 : -1;
                return 0;
            });

            tbody.innerHTML = "";
            for (const row of rows) {
                const tr = document.createElement("tr");
                const slowClass = classifySlow(row.p95);
                tr.innerHTML = `
                <td>${row.method}</td>
                <td class="ep-col-path" title="${row.path}">${row.path}</td>
                <td>${row.count}</td>
                <td class="ep-slow ${slowClass}">${row.p95 != null ? row.p95.toFixed(3) : "-"}</td>
                <td>${row.p99 != null ? row.p99.toFixed(3) : "-"}</td>
                <td>${row.avg != null ? row.avg.toFixed(3) : "-"}</td>
                <td>${row.max != null ? row.max.toFixed(3) : "-"}</td>
                <td>${row.error_rate != null ? row.error_rate.toFixed(2) : "-"}</td>
                `;
                tbody.appendChild(tr);
            }
        }

        methodF.addEventListener("change", render);
        pathF.addEventListener("input", render);
        minCntF.addEventListener("input", render);
        sortF.addEventListener("change", render);

        render();
    })();


    const runSelect = document.getElementById("ep-run-select");
    const resetBtn  = document.getElementById("ep-reset-btn");

    if (runSelect) {
        runSelect.addEventListener("change", () => {
            const runId = runSelect.value;
            const url = new URL(window.location.href);
            url.searchParams.set("run", runId);
            url.searchParams.delete("refresh");
            window.location.href = url.toString();
        });
    }

    if (resetBtn) {
        resetBtn.addEventListener("click", () => {
            methodF.value = "";
            pathF.value = "";
            minCntF.value = "5";
            sortF.value = "p95-desc";
            render();
        });
    }



</script>
{% endblock content %}