{% extends "base.html" %}
{% block breadcrumb %}Panel de Control{% endblock %}

{% block content %}
<div class="page page-dashboard">
    <h2 class="page-title">Panel de Control</h2>
    <div class="stats-grid">
        <div class="stat-card"><div class="stat-icon folders-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg></div><div class="stat-info"><span class="stat-value" id="statSites">-</span><span class="stat-label">Sitios</span></div></div>
        <div class="stat-card"><div class="stat-icon docs-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg></div><div class="stat-info"><span class="stat-value" id="statFolders">-</span><span class="stat-label">Series, Subseries y Expedientes</span></div></div>
        <div class="stat-card"><div class="stat-icon events-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div><div class="stat-info"><span class="stat-value" id="statFiles">-</span><span class="stat-label">Archivos</span></div></div>
        <div class="stat-card"><div class="stat-icon status-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><div class="stat-info"><span class="stat-value" id="statIndex">-</span><span class="stat-label">Con Index</span></div></div>
        <div class="stat-card"><div class="stat-icon size-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="12" x2="2" y2="12"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/><line x1="6" y1="16" x2="6.01" y2="16"/><line x1="10" y1="16" x2="10.01" y2="16"/></svg></div><div class="stat-info"><span class="stat-value" id="statSize">-</span><span class="stat-label">Peso Total de Archivos</span></div></div>
    </div>

    <div class="charts-section">
        <div class="charts-header">
            <h3 class="charts-title">Gráficos por Sitio</h3>
            <div class="charts-controls">
                <select id="chartTypeSelect" class="chart-select">
                    <option value="pie">Circular</option>
                    <option value="bar">Barras</option>
                    <option value="line">Lineal</option>
                    <option value="barH">Barras Horizontales</option>
                    <option value="radar">Radar</option>
                    <option value="doughnut">Dona</option>
                    <option value="polarArea">Área Polar</option>
                </select>
                <button id="btnGenerateCharts" class="btn btn-primary">Generar</button>
            </div>
        </div>
        <div class="charts-grid" id="chartsGrid">
            <div class="chart-card">
                <div class="chart-canvas-wrapper">
                    <canvas id="chartFolders"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <div class="chart-canvas-wrapper">
                    <canvas id="chartFiles"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <div class="chart-canvas-wrapper">
                    <canvas id="chartIndices"></canvas>
                </div>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
const CHART_COLORS = ["#6366F1","#EC4899","#F59E0B","#10B981","#3B82F6","#8B5CF6","#EF4444","#14B8A6","#F97316","#06B6D4","#84CC16","#D946EF"];

let chartInstances = {};

function destroyCharts() {
    Object.values(chartInstances).forEach(c => c.destroy());
    chartInstances = {};
}

function niceStep(maxVal) {
    if (maxVal <= 0) return 1;
    const magnitude = Math.pow(10, Math.floor(Math.log10(maxVal)));
    const residual = maxVal / magnitude;
    let step;
    if (residual <= 1.5) step = magnitude / 4;
    else if (residual <= 3) step = magnitude / 2;
    else if (residual <= 7) step = magnitude;
    else step = magnitude * 2;
    return Math.max(1, Math.round(step));
}

function niceMax(maxVal, step) {
    return Math.ceil(maxVal / step) * step;
}

function buildChartConfig(labels, values, title, chartType) {
    const total = values.reduce((a, b) => a + b, 0);
    const maxVal = Math.max(...values, 1);
    const step = niceStep(maxVal);
    const yMax = niceMax(maxVal, step);

    const data = {
        labels: labels,
        datasets: [{
            label: title,
            data: values,
            backgroundColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
            borderColor: labels.map((_, i) => CHART_COLORS[i % CHART_COLORS.length]),
            borderWidth: 1,
        }]
    };

    const baseOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            title: { display: true, text: title, font: { size: 14, weight: "bold" }, color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#e2e4ed' : '#1a1d2e'; }, padding: { bottom: 10 } },
            legend: {
                position: "bottom",
                labels: {
                    font: { size: 11 },
                    color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#c0c4d4' : '#444'; },
                    generateLabels: function(chart) {
                        const ds = chart.data.datasets[0];
                        return chart.data.labels.map((label, i) => ({
                            text: label + " (" + ds.data[i] + ", " + (total > 0 ? (ds.data[i] / total * 100).toFixed(1) : 0) + "%)",
                            fillStyle: CHART_COLORS[i % CHART_COLORS.length],
                            strokeStyle: CHART_COLORS[i % CHART_COLORS.length],
                            index: i,
                        }));
                    }
                }
            },
            tooltip: {
                callbacks: {
                    label: function(ctx) {
                        const val = ctx.raw;
                        const pct = total > 0 ? (val / total * 100).toFixed(1) : 0;
                        return ctx.label + ": " + val + " (" + pct + "%)";
                    }
                }
            },
            datalabels: {
                color: function() {
                    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
                    return isDark ? '#c0c4d4' : '#444';
                },
                font: { size: 12, weight: "bold" },
                anchor: "end",
                align: "top",
                offset: 2,
                formatter: function(value) { return value; }
            }
        }
    };

    if (chartType === "pie" || chartType === "doughnut" || chartType === "polarArea") {
        const pieOptions = JSON.parse(JSON.stringify(baseOptions));
        pieOptions.plugins.datalabels.color = "#fff";
        pieOptions.plugins.datalabels.font = { size: 13, weight: "bold" };
        pieOptions.plugins.datalabels.anchor = "center";
        pieOptions.plugins.datalabels.align = "center";
        pieOptions.plugins.datalabels.formatter = function(value, ctx) {
            const pct = total > 0 ? (value / total * 100).toFixed(1) : 0;
            return pct + "%";
        };
        return { type: chartType, data: data, options: pieOptions, plugins: [ChartDataLabels] };
    }

    if (chartType === "radar") {
        const radarOpts = JSON.parse(JSON.stringify(baseOptions));
        radarOpts.scales = { r: { beginAtZero: true, ticks: { font: { size: 11 }, stepSize: step, color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#8b8fa8' : '#666'; } }, pointLabels: { color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#c0c4d4' : '#444'; } } } };
        return { type: "radar", data: data, options: radarOpts, plugins: [ChartDataLabels] };
    }

    if (chartType === "barH") {
        const barHOpts = JSON.parse(JSON.stringify(baseOptions));
        barHOpts.indexAxis = "y";
        barHOpts.plugins.datalabels.anchor = "end";
        barHOpts.plugins.datalabels.align = "end";
        barHOpts.plugins.datalabels.offset = 4;
        barHOpts.scales = {
            x: { beginAtZero: true, max: yMax, ticks: { font: { size: 12 }, stepSize: step, color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#8b8fa8' : '#666'; } } },
            y: { ticks: { font: { size: 12 }, color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#c0c4d4' : '#444'; } } }
        };
        return { type: "bar", data: data, options: barHOpts, plugins: [ChartDataLabels] };
    }

    const cartesianOpts = JSON.parse(JSON.stringify(baseOptions));
    cartesianOpts.scales = {
        x: { beginAtZero: true, ticks: { font: { size: 12 }, color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#8b8fa8' : '#666'; } } },
        y: { beginAtZero: true, max: yMax, ticks: { font: { size: 12 }, stepSize: step, color: function() { var isDark = document.documentElement.getAttribute('data-theme') === 'dark'; return isDark ? '#8b8fa8' : '#666'; } } }
    };
    return { type: chartType, data: data, options: cartesianOpts, plugins: [ChartDataLabels] };
}

async function loadCharts(chartType) {
    try {
        const res = await fetch("/api/v1/stats/charts");
        if (!res.ok) return;
        const data = await res.json();

        destroyCharts();

        const configs = [
            { canvasId: "chartFolders", series: data.folders, title: "Total de Series, Subseries y Expedientes por Sitio" },
            { canvasId: "chartFiles", series: data.files, title: "Total de Archivos por Sitio" },
            { canvasId: "chartIndices", series: data.indices, title: "Total de Índices por Sitio" },
        ];

        configs.forEach(cfg => {
            const canvas = document.getElementById(cfg.canvasId);
            if (!canvas || !cfg.series || !cfg.series.labels || cfg.series.labels.length === 0) return;
            const ctx = canvas.getContext("2d");
            const config = buildChartConfig(cfg.series.labels, cfg.series.values, cfg.title, chartType);
            chartInstances[cfg.canvasId] = new Chart(ctx, config);
        });
    } catch (e) {
        console.error("Error loading charts:", e);
    }
}

document.addEventListener("DOMContentLoaded", () => {
    loadCharts("pie");
    document.getElementById("btnGenerateCharts")?.addEventListener("click", () => {
        const type = document.getElementById("chartTypeSelect")?.value || "pie";
        loadCharts(type);
    });
    window.addEventListener('themeChanged', () => {
        const type = document.getElementById("chartTypeSelect")?.value || "pie";
        loadCharts(type);
    });
});
</script>
{% endblock %}