{% extends 'orbit/base.html' %}
{% load static %}

{% block title %}Stats Dashboard - Django Orbit{% endblock %}

{% block extra_head %}
<!-- ApexCharts -->
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.44.0/dist/apexcharts.min.js"></script>
{% endblock %}

{% block body %}
<div class="min-h-screen bg-orbit-bg-primary" x-data="statsPage()">
    <!-- Header -->
    <header class="h-14 border-b border-orbit-border bg-orbit-bg-secondary/50 backdrop-blur sticky top-0 z-20 flex items-center justify-between px-6">
        <div class="flex items-center gap-4">
            <a href="{{ dashboard_url }}" class="flex items-center gap-2 text-orbit-text-muted hover:text-orbit-text-primary transition-colors">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                <span>Back to Dashboard</span>
            </a>
            <div class="h-4 w-px bg-orbit-border"></div>
            <h1 class="text-lg font-semibold text-orbit-text-primary flex items-center gap-2">
                <i data-lucide="bar-chart-2" class="w-5 h-5 text-orbit-accent-cyan"></i>
                Performance Analytics
            </h1>
        </div>

        <!-- Time Range Selector -->
        <div class="flex items-center gap-1 bg-orbit-bg-tertiary rounded-lg p-1">
            {% for range in time_ranges %}
            <a href="?range={{ range }}"
               class="px-3 py-1.5 rounded-md text-sm font-medium transition-all
                      {% if range == time_range %}bg-orbit-accent-cyan text-orbit-bg-primary{% else %}text-orbit-text-secondary hover:text-orbit-text-primary{% endif %}">
                {{ range }}
            </a>
            {% endfor %}
        </div>
    </header>

    <main class="p-6 max-w-7xl mx-auto">
        {% if error %}
        <div class="orbit-card border-rose-500/30 p-4 mb-6">
            <p class="text-rose-400">Error loading stats: {{ error }}</p>
        </div>
        {% endif %}

        <!-- Headline KPIs (rendered immediately) -->
        <section class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <!-- Apdex Score -->
            <div class="orbit-card p-5">
                <div class="flex items-center justify-between mb-3">
                    <span class="orbit-section-title cursor-help"
                          title="Apdex: share of requests that were satisfying or tolerable (0–1). ≥0.94 excellent, ≥0.85 good, ≥0.70 fair.">Apdex Score</span>
                    <div class="w-8 h-8 rounded-lg {% if summary.apdex >= 0.94 %}bg-emerald-500/10{% elif summary.apdex >= 0.85 %}bg-cyan-500/10{% elif summary.apdex >= 0.70 %}bg-amber-500/10{% else %}bg-rose-500/10{% endif %} flex items-center justify-center">
                        <i data-lucide="activity" class="w-4 h-4 {% if summary.apdex >= 0.94 %}text-emerald-400{% elif summary.apdex >= 0.85 %}text-cyan-400{% elif summary.apdex >= 0.70 %}text-amber-400{% else %}text-rose-400{% endif %}"></i>
                    </div>
                </div>
                <div class="text-3xl font-bold {% if summary.apdex >= 0.94 %}text-emerald-400{% elif summary.apdex >= 0.85 %}text-cyan-400{% elif summary.apdex >= 0.70 %}text-amber-400{% else %}text-rose-400{% endif %}">
                    {{ summary.apdex }}
                </div>
                <div class="text-xs text-orbit-text-muted mt-1">
                    {% if summary.apdex >= 0.94 %}Excellent{% elif summary.apdex >= 0.85 %}Good{% elif summary.apdex >= 0.70 %}Fair{% else %}Poor{% endif %}
                </div>
            </div>

            <!-- Avg Response Time -->
            <div class="orbit-card p-5">
                <div class="flex items-center justify-between mb-3">
                    <span class="orbit-section-title">Avg Response</span>
                    <div class="w-8 h-8 rounded-lg bg-cyan-500/10 flex items-center justify-center">
                        <i data-lucide="clock" class="w-4 h-4 text-cyan-400"></i>
                    </div>
                </div>
                <div class="text-3xl font-bold text-orbit-text-primary">
                    {{ summary.avg_response_time }}<span class="text-lg text-orbit-text-muted">ms</span>
                </div>
                <div class="text-xs text-orbit-text-muted mt-1">
                    P95: <span class="text-cyan-400">{{ percentiles.p95 }}ms</span>
                </div>
            </div>

            <!-- Error Rate -->
            <div class="orbit-card p-5">
                <div class="flex items-center justify-between mb-3">
                    <span class="orbit-section-title">Error Rate</span>
                    <div class="w-8 h-8 rounded-lg {% if summary.error_rate > 5 %}bg-rose-500/10{% elif summary.error_rate > 1 %}bg-amber-500/10{% else %}bg-emerald-500/10{% endif %} flex items-center justify-center">
                        <i data-lucide="alert-circle" class="w-4 h-4 {% if summary.error_rate > 5 %}text-rose-400{% elif summary.error_rate > 1 %}text-amber-400{% else %}text-emerald-400{% endif %}"></i>
                    </div>
                </div>
                <div class="text-3xl font-bold {% if summary.error_rate > 5 %}text-rose-400{% elif summary.error_rate > 1 %}text-amber-400{% else %}text-emerald-400{% endif %}">
                    {{ summary.error_rate }}<span class="text-lg text-orbit-text-muted">%</span>
                </div>
                <div class="text-xs text-orbit-text-muted mt-1">
                    <span class="text-rose-400">{{ summary.error_count }}</span> exceptions
                </div>
            </div>

            <!-- Throughput -->
            <div class="orbit-card p-5">
                <div class="flex items-center justify-between mb-3">
                    <span class="orbit-section-title">Throughput</span>
                    <div class="w-8 h-8 rounded-lg bg-violet-500/10 flex items-center justify-center">
                        <i data-lucide="trending-up" class="w-4 h-4 text-violet-400"></i>
                    </div>
                </div>
                <div class="text-3xl font-bold text-violet-400">
                    {{ summary.throughput }}<span class="text-lg text-orbit-text-muted">{{ summary.throughput_unit }}</span>
                </div>
                <div class="text-xs text-orbit-text-muted mt-1">
                    {{ summary.total_requests }} total requests
                </div>
            </div>
        </section>

        <!-- Latency Percentiles (rendered immediately) -->
        <section class="orbit-card p-5 mb-8">
            <h2 class="text-sm font-medium text-orbit-text-primary mb-4 flex items-center gap-2">
                <i data-lucide="gauge" class="w-4 h-4 text-orbit-accent-cyan"></i>
                Response Time Percentiles
            </h2>
            <div class="grid grid-cols-4 gap-4">
                <div class="text-center p-4 bg-orbit-bg-primary/50 rounded-lg">
                    <div class="text-2xl font-bold text-emerald-400">{{ percentiles.p50 }}<span class="text-sm text-orbit-text-muted">ms</span></div>
                    <div class="text-xs text-orbit-text-muted mt-1">P50 (Median)</div>
                </div>
                <div class="text-center p-4 bg-orbit-bg-primary/50 rounded-lg">
                    <div class="text-2xl font-bold text-cyan-400">{{ percentiles.p75 }}<span class="text-sm text-orbit-text-muted">ms</span></div>
                    <div class="text-xs text-orbit-text-muted mt-1">P75</div>
                </div>
                <div class="text-center p-4 bg-orbit-bg-primary/50 rounded-lg">
                    <div class="text-2xl font-bold text-amber-400">{{ percentiles.p95 }}<span class="text-sm text-orbit-text-muted">ms</span></div>
                    <div class="text-xs text-orbit-text-muted mt-1">P95</div>
                </div>
                <div class="text-center p-4 bg-orbit-bg-primary/50 rounded-lg">
                    <div class="text-2xl font-bold text-rose-400">{{ percentiles.p99 }}<span class="text-sm text-orbit-text-muted">ms</span></div>
                    <div class="text-xs text-orbit-text-muted mt-1">P99 (Tail)</div>
                </div>
            </div>
        </section>

        <!-- Trends (lazy) -->
        <section class="mb-8"
                 hx-get="{% url 'orbit:stats_section' 'trends' %}?range={{ time_range }}"
                 hx-trigger="load" hx-swap="innerHTML">
            {% include 'orbit/partials/stats_skeleton.html' with height='h-64' %}
        </section>

        <!-- Database & Cache (lazy, independent) -->
        <section class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <div hx-get="{% url 'orbit:stats_section' 'database' %}?range={{ time_range }}"
                 hx-trigger="load" hx-swap="innerHTML">
                {% include 'orbit/partials/stats_skeleton.html' with height='h-48' %}
            </div>
            <div hx-get="{% url 'orbit:stats_section' 'cache' %}?range={{ time_range }}"
                 hx-trigger="load" hx-swap="innerHTML">
                {% include 'orbit/partials/stats_skeleton.html' with height='h-48' %}
            </div>
        </section>

        <!-- Jobs & Security (lazy, independent) -->
        <section class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <div hx-get="{% url 'orbit:stats_section' 'jobs' %}?range={{ time_range }}"
                 hx-trigger="load" hx-swap="innerHTML">
                {% include 'orbit/partials/stats_skeleton.html' with height='h-40' %}
            </div>
            <div hx-get="{% url 'orbit:stats_section' 'security' %}?range={{ time_range }}"
                 hx-trigger="load" hx-swap="innerHTML">
                {% include 'orbit/partials/stats_skeleton.html' with height='h-40' %}
            </div>
        </section>
    </main>

    <!-- Slide-over Detail Panel -->
    <div x-cloak x-show="detailOpen"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50"
         @keydown.escape.window="detailOpen = false"
         @click.self="detailOpen = false">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
        <div x-show="detailOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
             class="absolute right-0 top-0 h-full w-full max-w-2xl bg-orbit-bg-secondary border-l border-orbit-border shadow-xl overflow-hidden flex flex-col">
            <div class="flex items-center justify-between p-4 border-b border-orbit-border bg-orbit-bg-primary/50">
                <h2 class="text-lg font-semibold text-orbit-text-primary flex items-center gap-2">
                    <i data-lucide="eye" class="w-5 h-5 text-orbit-accent-cyan"></i>
                    Entry Details
                </h2>
                <button @click="detailOpen = false" title="Close (Esc)" class="p-2 rounded-lg hover:bg-orbit-bg-tertiary transition-colors">
                    <i data-lucide="x" class="w-5 h-5 text-orbit-text-muted"></i>
                </button>
            </div>
            <div id="stats-detail-content" class="flex-1 overflow-y-auto p-4">
                <div x-show="detailLoading" class="flex items-center justify-center h-32">
                    <div class="animate-spin rounded-full h-8 w-8 border-2 border-orbit-accent-cyan border-t-transparent"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Shared ApexCharts defaults for lazily-loaded chart sections (see DESIGN.md).
window.ORBIT_CHART_DEFAULTS = {
    chart: { background: 'transparent', toolbar: { show: false }, zoom: { enabled: false }, fontFamily: 'inherit' },
    theme: { mode: 'dark' },
    grid: { borderColor: 'rgba(255,255,255,0.05)', strokeDashArray: 4 },
    tooltip: { theme: 'dark', style: { fontSize: '12px' } },
};

// Alpine.js component for the stats page
function statsPage() {
    return {
        detailOpen: false,
        detailLoading: false,

        async openDetail(entryId) {
            this.detailLoading = true;
            this.detailOpen = true;
            const base = `{% url 'orbit:detail' entry_id='00000000-0000-0000-0000-000000000000' %}`;
            try {
                const response = await fetch(base.replace('00000000-0000-0000-0000-000000000000', entryId));
                document.getElementById('stats-detail-content').innerHTML = await response.text();
                if (typeof lucide !== 'undefined') lucide.createIcons();
            } catch (error) {
                document.getElementById('stats-detail-content').innerHTML =
                    `<div class="p-4 bg-rose-500/10 rounded-lg text-rose-400">Error loading entry details: ${error.message}</div>`;
            } finally {
                this.detailLoading = false;
            }
        }
    };
}
</script>
{% endblock %}