{% extends "dashboard/base_dashboard.html" %}
{% load static %}

{% block title %}Dashboard Analytics — Dra. Mariela{% endblock %}
{% block panel_title %}Dashboard Analytics{% endblock %}

{% block extra_css %}
<style>
    .kpi-card { transition: all 0.3s ease; }
    .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(232,51,106,0.08); }
    .kpi-border-rosa { border-left: 4px solid #E8336A; }
    .kpi-border-dorado { border-left: 4px solid #D4AF37; }
    .kpi-border-green { border-left: 4px solid #10B981; }
    .kpi-border-blue { border-left: 4px solid #3B82F6; }
    .badge-pendiente { background: #FEF3C7; color: #D97706; }
    .badge-confirmada { background: #DBEAFE; color: #2563EB; }
    .badge-completada { background: #D1FAE5; color: #059669; }
    .badge-cancelada { background: #FEE2E2; color: #DC2626; }
    .badge-no_asistio { background: #F3F4F6; color: #6B7280; }
    .progress-bar { transition: width 0.6s ease; }
    .chart-container { position: relative; width: 100%; }
    .loading-overlay {
        position: absolute; inset: 0; background: rgba(255,255,255,0.8);
        display: flex; align-items: center; justify-content: center;
        z-index: 10; border-radius: 0.75rem;
    }
    .spinner {
        width: 32px; height: 32px; border: 3px solid #FDE8F0;
        border-top-color: #E8336A; border-radius: 50%;
        animation: spin 0.7s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
</style>
{% endblock %}

{% block panel_content %}

<!-- ══════ FILTRO DE FECHAS ══════ -->
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-6">
    <form id="filterForm" class="flex flex-col sm:flex-row items-start sm:items-end gap-3">
        <div class="flex-1 min-w-0">
            <label class="block text-xs font-medium text-gray-500 mb-1">De</label>
            <input type="date" id="fecha_inicio" name="fecha_inicio"
                   class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-rosa/30 focus:border-rosa outline-none transition">
        </div>
        <div class="flex-1 min-w-0">
            <label class="block text-xs font-medium text-gray-500 mb-1">Até</label>
            <input type="date" id="fecha_fin" name="fecha_fin"
                   class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-rosa/30 focus:border-rosa outline-none transition">
        </div>
        <button type="submit" class="px-5 py-2 bg-rosa text-white font-semibold rounded-lg text-sm hover:bg-rosa/90 transition shadow-sm flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"/></svg>
            Filtrar
        </button>
        <a id="btnExportExcel" href="#" class="px-5 py-2 bg-green-600 text-white font-semibold rounded-lg text-sm hover:bg-green-700 transition shadow-sm flex items-center gap-2">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
            Exportar Excel
        </a>
    </form>
</div>

<!-- ══════ KPIs ══════ -->
<div id="kpiSection" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 mb-8 relative">
    <div id="kpiLoading" class="loading-overlay hidden"><div class="spinner"></div></div>

    <!-- KPI 1: Citas Hoy -->
    <div class="kpi-card kpi-border-rosa bg-white rounded-xl p-5 border border-gray-100 shadow-sm">
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Consultas Hoje</p>
                <p id="kpi-citas-hoy" class="text-3xl font-bold text-dark mt-1">—</p>
                <div id="kpi-citas-diff" class="flex items-center gap-1 mt-2 text-xs font-semibold"></div>
            </div>
            <div class="w-11 h-11 bg-rosa/10 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-rosa" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
        </div>
    </div>

    <!-- KPI 2: Ingresos del Mes -->
    <div class="kpi-card kpi-border-green bg-white rounded-xl p-5 border border-gray-100 shadow-sm">
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Receitas do Mês</p>
                <p id="kpi-ingresos" class="text-3xl font-bold text-dark mt-1">—</p>
                <div id="kpi-ingresos-var" class="flex items-center gap-1 mt-2 text-xs font-semibold"></div>
            </div>
            <div class="w-11 h-11 bg-green-50 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
        </div>
    </div>

    <!-- KPI 3: Pacientes Nuevos -->
    <div class="kpi-card kpi-border-blue bg-white rounded-xl p-5 border border-gray-100 shadow-sm">
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Novos Pacientes</p>
                <p id="kpi-pacientes" class="text-3xl font-bold text-dark mt-1">—</p>
                <div id="kpi-pacientes-diff" class="flex items-center gap-1 mt-2 text-xs font-semibold"></div>
            </div>
            <div class="w-11 h-11 bg-blue-50 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg>
            </div>
        </div>
    </div>

    <!-- KPI 4: Rating Promedio -->
    <div class="kpi-card kpi-border-dorado bg-white rounded-xl p-5 border border-gray-100 shadow-sm">
        <div class="flex items-start justify-between">
            <div>
                <p class="text-xs font-medium text-gray-400 uppercase tracking-wider">Rating Médio</p>
                <p id="kpi-rating" class="text-3xl font-bold text-dark mt-1">—</p>
                <p id="kpi-rating-total" class="text-xs text-gray-400 mt-2"></p>
            </div>
            <div class="w-11 h-11 bg-dorado/10 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="w-5 h-5 text-dorado" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
            </div>
        </div>
    </div>
</div>

<!-- ══════ GRÁFICAS ══════ -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">

    <!-- Gráfica 1: Ingresos por semana (LINE - ocupa 2 cols en lg) -->
    <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 shadow-sm p-5 relative chart-container">
        <div id="chartIngresosLoading" class="loading-overlay hidden"><div class="spinner"></div></div>
        <h3 class="font-poppins font-semibold text-dark text-base mb-4">
            <span class="inline-block w-3 h-3 bg-rosa rounded-full mr-2"></span>
            Receitas por Semana (Kz)
        </h3>
        <div style="height: 280px;">
            <canvas id="chartIngresos"></canvas>
        </div>
    </div>

    <!-- Gráfica 2: Distribución por servicio (DONUT) -->
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 relative chart-container">
        <div id="chartServiciosLoading" class="loading-overlay hidden"><div class="spinner"></div></div>
        <h3 class="font-poppins font-semibold text-dark text-base mb-4">
            <span class="inline-block w-3 h-3 bg-dorado rounded-full mr-2"></span>
            Distribuição por Serviço
        </h3>
        <div style="height: 280px;">
            <canvas id="chartServicios"></canvas>
        </div>
    </div>

    <!-- Gráfica 3: Citas por estado (BARRAS HORIZONTALES) -->
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-5 relative chart-container">
        <div id="chartEstadosLoading" class="loading-overlay hidden"><div class="spinner"></div></div>
        <h3 class="font-poppins font-semibold text-dark text-base mb-4">
            <span class="inline-block w-3 h-3 bg-rosa rounded-full mr-2"></span>
            Consultas por Estado
        </h3>
        <div style="height: 280px;">
            <canvas id="chartEstados"></canvas>
        </div>
    </div>
</div>

<!-- ══════ TABLAS ══════ -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">

    <!-- Últimas 10 Citas (2/3 width) -->
    <div class="lg:col-span-2 bg-white rounded-xl border border-gray-100 shadow-sm overflow-hidden relative">
        <div id="tableCitasLoading" class="loading-overlay hidden"><div class="spinner"></div></div>
        <div class="px-5 py-4 border-b border-gray-100">
            <h3 class="font-poppins font-semibold text-dark text-base">Últimas 10 Consultas</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-[#FDE8F0] text-rosa text-xs uppercase tracking-wider">
                        <th class="px-4 py-3 text-left font-semibold">Paciente</th>
                        <th class="px-4 py-3 text-left font-semibold">Serviço</th>
                        <th class="px-4 py-3 text-left font-semibold">Data/Hora</th>
                        <th class="px-4 py-3 text-center font-semibold">Estado</th>
                        <th class="px-4 py-3 text-center font-semibold">Ações</th>
                    </tr>
                </thead>
                <tbody id="tableCitasBody" class="divide-y divide-gray-50">
                    <tr><td colspan="5" class="px-4 py-8 text-center text-gray-400">A carregar...</td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Top 5 Servicios (1/3 width) -->
    <div class="bg-white rounded-xl border border-gray-100 shadow-sm relative">
        <div id="tableServiciosLoading" class="loading-overlay hidden"><div class="spinner"></div></div>
        <div class="px-5 py-4 border-b border-gray-100">
            <h3 class="font-poppins font-semibold text-dark text-base">Top 5 Serviços</h3>
        </div>
        <div class="p-5 space-y-4" id="topServiciosBody">
            <p class="text-gray-400 text-sm text-center py-8">A carregar...</p>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.6/dist/chart.umd.min.js"></script>
<script>
(function() {
    'use strict';

    // ── Config ──
    const ROSA = '#E8336A';
    const ROSA_LIGHT = '#FDE8F0';
    const DORADO = '#D4AF37';
    const DORADO_LIGHT = '#F5ECD7';
    const PALETTE = [ROSA, DORADO, '#3B82F6', '#10B981', '#8B5CF6', '#F59E0B', '#EC4899', '#06B6D4'];
    const ESTADO_COLORS = {
        'Pendente': '#F59E0B',
        'Confirmada': '#3B82F6',
        'Concluída': '#10B981',
        'Cancelada': '#EF4444',
        'Não Compareceu': '#9CA3AF',
    };
    const API_URL = '{% url "dashboard:analytics_api" %}';
    const CITA_ACTION_URL_TPL = '{% url "dashboard:cambiar_estado_cita" cita_id="00000000-0000-0000-0000-000000000000" %}';
    const EXPORT_URL = '{% url "dashboard:exportar_excel" %}';
    const CSRF_TOKEN = '{{ csrf_token }}';

    // ── Elements ──
    const $fiInp = document.getElementById('fecha_inicio');
    const $ffInp = document.getElementById('fecha_fin');
    const $form = document.getElementById('filterForm');
    const $exportBtn = document.getElementById('btnExportExcel');

    // Set defaults (1st of month → last day of month)
    const today = new Date();
    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
    const lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0);
    $fiInp.value = firstDay.toISOString().slice(0, 10);
    $ffInp.value = lastDay.toISOString().slice(0, 10);

    // ── Charts instances ──
    let chartIngresos = null;
    let chartServicios = null;
    let chartEstados = null;

    // ── Format Kz ──
    function fmtKz(val) {
        return new Intl.NumberFormat('pt-AO', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(val) + ' Kz';
    }

    // ── Diff badge HTML ──
    function diffBadge(diff, suffix = 'vs ontem') {
        if (diff > 0) {
            return `<span class="text-green-600 flex items-center gap-0.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>
                +${diff} ${suffix}</span>`;
        } else if (diff < 0) {
            return `<span class="text-red-500 flex items-center gap-0.5">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
                ${diff} ${suffix}</span>`;
        }
        return `<span class="text-gray-400">= ${suffix}</span>`;
    }

    function pctBadge(pct, suffix = 'vs mês anterior') {
        const sign = pct >= 0 ? '+' : '';
        const color = pct >= 0 ? 'text-green-600' : 'text-red-500';
        const arrow = pct >= 0
            ? '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"/></svg>'
            : '<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>';
        return `<span class="${color} flex items-center gap-0.5">${arrow} ${sign}${pct}% ${suffix}</span>`;
    }

    // ── Loading helpers ──
    function showLoading() {
        document.querySelectorAll('.loading-overlay').forEach(el => el.classList.remove('hidden'));
    }
    function hideLoading() {
        document.querySelectorAll('.loading-overlay').forEach(el => el.classList.add('hidden'));
    }

    // ── Estado badge ──
    function estadoBadge(estado) {
        const cls = 'badge-' + estado;
        const labels = {pendiente:'Pendente', confirmada:'Confirmada', completada:'Concluída', cancelada:'Cancelada', no_asistio:'Não Compareceu'};
        return `<span class="px-2.5 py-1 rounded-lg text-xs font-semibold ${cls}">${labels[estado] || estado}</span>`;
    }

    // ── Action buttons ──
    function actionButtons(cita) {
        let html = '';
        if (cita.puede_confirmar) {
            html += `<button onclick="cambiarEstado('${cita.id}', 'confirmada')" class="px-2 py-1 bg-blue-50 text-blue-600 rounded-md text-xs font-medium hover:bg-blue-100 transition" title="Confirmar">✓</button>`;
        }
        if (cita.puede_cancelar) {
            html += `<button onclick="cambiarEstado('${cita.id}', 'cancelada')" class="px-2 py-1 bg-red-50 text-red-500 rounded-md text-xs font-medium hover:bg-red-100 transition ml-1" title="Cancelar">✗</button>`;
        }
        if (!html) html = '<span class="text-gray-300 text-xs">—</span>';
        return html;
    }

    // ── Update KPIs ──
    function updateKPIs(kpis) {
        document.getElementById('kpi-citas-hoy').textContent = kpis.citas_hoy;
        document.getElementById('kpi-citas-diff').innerHTML = diffBadge(kpis.citas_diff, 'vs ontem');

        document.getElementById('kpi-ingresos').textContent = fmtKz(kpis.ingresos_mes);
        document.getElementById('kpi-ingresos-var').innerHTML = pctBadge(kpis.ingresos_var, 'vs mês anterior');

        document.getElementById('kpi-pacientes').textContent = kpis.pacientes_nuevos;
        document.getElementById('kpi-pacientes-diff').innerHTML = diffBadge(kpis.pacientes_diff, 'vs mês anterior');

        document.getElementById('kpi-rating').innerHTML = kpis.rating_promedio.toFixed(1) + ' <span class="text-dorado text-xl">★</span>';
        document.getElementById('kpi-rating-total').textContent = kpis.rating_total + ' avaliações';
    }

    // ── Update Charts ──
    function updateCharts(charts) {
        // Chart 1: Ingresos por semana (línea con area)
        const ctxIng = document.getElementById('chartIngresos').getContext('2d');
        if (chartIngresos) chartIngresos.destroy();
        chartIngresos = new Chart(ctxIng, {
            type: 'line',
            data: {
                labels: charts.ingresos.labels,
                datasets: [{
                    label: 'Receitas (Kz)',
                    data: charts.ingresos.data,
                    borderColor: ROSA,
                    backgroundColor: ROSA_LIGHT + '80',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 2,
                    pointBackgroundColor: ROSA,
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2,
                    pointRadius: 4,
                    pointHoverRadius: 6,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) { return fmtKz(ctx.parsed.y); }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(v) { return fmtKz(v); },
                            font: { size: 11 },
                        },
                        grid: { color: '#F3F4F6' },
                    },
                    x: {
                        ticks: { font: { size: 11 } },
                        grid: { display: false },
                    },
                },
            },
        });

        // Chart 2: Distribución por servicio (donut)
        const ctxSvc = document.getElementById('chartServicios').getContext('2d');
        if (chartServicios) chartServicios.destroy();
        const svcColors = charts.servicios.labels.map((_, i) => PALETTE[i % PALETTE.length]);
        chartServicios = new Chart(ctxSvc, {
            type: 'doughnut',
            data: {
                labels: charts.servicios.labels,
                datasets: [{
                    data: charts.servicios.data,
                    backgroundColor: svcColors,
                    borderWidth: 2,
                    borderColor: '#fff',
                    hoverOffset: 8,
                }],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '60%',
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: { padding: 12, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } },
                    },
                },
            },
        });

        // Chart 3: Citas por estado (barras horizontales)
        const ctxEst = document.getElementById('chartEstados').getContext('2d');
        if (chartEstados) chartEstados.destroy();
        const estColors = charts.estados.labels.map(l => ESTADO_COLORS[l] || '#9CA3AF');
        chartEstados = new Chart(ctxEst, {
            type: 'bar',
            data: {
                labels: charts.estados.labels,
                datasets: [{
                    label: 'Consultas',
                    data: charts.estados.data,
                    backgroundColor: estColors,
                    borderRadius: 6,
                    borderSkipped: false,
                    barThickness: 24,
                }],
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                },
                scales: {
                    x: {
                        beginAtZero: true,
                        ticks: { stepSize: 1, font: { size: 11 } },
                        grid: { color: '#F3F4F6' },
                    },
                    y: {
                        ticks: { font: { size: 11, weight: 'bold' } },
                        grid: { display: false },
                    },
                },
            },
        });
    }

    // ── Update Tables ──
    function updateTables(tables) {
        // Últimas 10 citas
        const tbody = document.getElementById('tableCitasBody');
        if (!tables.ultimas_citas.length) {
            tbody.innerHTML = '<tr><td colspan="5" class="px-4 py-8 text-center text-gray-400">Sem consultas no período</td></tr>';
        } else {
            tbody.innerHTML = tables.ultimas_citas.map((c, i) => `
                <tr class="${i % 2 === 0 ? '' : 'bg-gray-50/50'} hover:bg-rosa/5 transition" id="cita-row-${c.id}">
                    <td class="px-4 py-3 text-dark font-medium">${c.paciente}</td>
                    <td class="px-4 py-3 text-gray-600">${c.servicio}</td>
                    <td class="px-4 py-3 text-gray-500">${c.fecha_hora}</td>
                    <td class="px-4 py-3 text-center" id="cita-estado-${c.id}">${estadoBadge(c.estado)}</td>
                    <td class="px-4 py-3 text-center" id="cita-actions-${c.id}">${actionButtons(c)}</td>
                </tr>
            `).join('');
        }

        // Top 5 servicios
        const container = document.getElementById('topServiciosBody');
        if (!tables.top_servicios.length) {
            container.innerHTML = '<p class="text-gray-400 text-sm text-center py-8">Sem dados</p>';
        } else {
            container.innerHTML = tables.top_servicios.map((s, i) => `
                <div>
                    <div class="flex items-center justify-between mb-1.5">
                        <span class="text-sm font-medium text-dark">${i+1}. ${s.nombre}</span>
                        <span class="text-sm font-bold text-rosa">${s.total}</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2.5">
                        <div class="progress-bar h-2.5 rounded-full" style="width: ${s.porcentaje}%; background: linear-gradient(90deg, ${ROSA}, ${DORADO});"></div>
                    </div>
                </div>
            `).join('');
        }
    }

    // ── FETCH DATA ──
    function fetchData() {
        showLoading();
        const fi = $fiInp.value;
        const ff = $ffInp.value;
        const url = `${API_URL}?fecha_inicio=${fi}&fecha_fin=${ff}`;

        fetch(url, {
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            credentials: 'same-origin',
        })
        .then(resp => {
            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
            return resp.json();
        })
        .then(data => {
            updateKPIs(data.kpis);
            updateCharts(data.charts);
            updateTables(data.tables);

            // Update export link
            $exportBtn.href = `${EXPORT_URL}?fecha_inicio=${fi}&fecha_fin=${ff}`;
        })
        .catch(err => {
            console.error('Dashboard fetch error:', err);
        })
        .finally(() => {
            hideLoading();
        });
    }

    // ── Cambiar estado cita (acción rápida) ──
    window.cambiarEstado = function(citaId, nuevoEstado) {
        const label = nuevoEstado === 'confirmada' ? 'confirmar' : 'cancelar';
        if (!confirm(`Tem a certeza que deseja ${label} esta consulta?`)) return;

        const url = CITA_ACTION_URL_TPL.replace('00000000-0000-0000-0000-000000000000', citaId);
        const formData = new FormData();
        formData.append('estado', nuevoEstado);

        fetch(url, {
            method: 'POST',
            headers: {
                'X-CSRFToken': CSRF_TOKEN,
                'X-Requested-With': 'XMLHttpRequest',
            },
            credentials: 'same-origin',
            body: formData,
        })
        .then(resp => resp.json())
        .then(data => {
            if (data.ok) {
                // Refresh everything to keep data consistent
                fetchData();
            } else {
                alert(data.error || 'Erro ao alterar estado');
            }
        })
        .catch(err => {
            console.error('Error:', err);
            alert('Erro de conexão');
        });
    };

    // ── Events ──
    $form.addEventListener('submit', function(e) {
        e.preventDefault();
        fetchData();
    });

    // ── Initial load ──
    fetchData();

})();
</script>
{% endblock %}