{% extends "base.html" %}
{% load static %}

{% block title %}Resultados de Alcaldías por Actas{% endblock %}

{% block content %}
<div class="container my-4">
    <h2 class="mb-2">Resultados de Alcaldías por Actas</h2>
    <!-- Leyenda de Movimientos y sus Colores -->
    <div class="text-muted" style="font-size: 0.9em; margin-left: 15px;">
        <strong>Movimientos y sus Colores:</strong>
        <ul class="list-inline mb-2">
            <li class="list-inline-item" style="margin-right: 10px;">
                <span style="background-color: #ff5733; display:inline-block; width:20px; height:20px; margin-right: 5px;"></span>
                <small>Movimiento 1: JUNTOS POR EL CAMBIO</small>
            </li>
            <li class="list-inline-item" style="margin-right: 10px;">
                <span style="background-color: #33c1ff; display:inline-block; width:20px; height:20px; margin-right: 5px;"></span>
                <small>Movimiento 3: VAMOS HONDURAS</small>
            </li>
            <li class="list-inline-item" style="margin-right: 10px;">
                <span style="background-color: #75ff33; display:inline-block; width:20px; height:20px; margin-right: 5px;"></span>
                <small>Movimiento 4: TODOS POR HONDURAS</small>
            </li>
        </ul>
    </div>

    <div class="row">
        <!-- Gráfico de Barras (Municipios) -->
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-header">Gráfico de Barras (Municipios)</div>
                <div class="card-body">
                    <canvas id="barChart" width="400" height="350"></canvas>
                </div>
            </div>
        </div>
        <!-- Gráfico de Pastel (Movimientos) -->
        <div class="col-md-6 mb-3">
            <div class="card">
                <div class="card-header">Gráfico de Pastel (Movimientos)</div>
                <div class="card-body">
                    <canvas id="pieChart" width="400" height="350"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<!-- Incluye jQuery y Chart.js -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
// ==========================
// 1) Función AJAX_REQUEST
// ==========================
function AJAX_REQUEST(url, method, data, onSuccess, onError) {
    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(response) {
            if (response.success === false) {
                if (onError) onError(response.error);
                else alert("Operación Fallida: " + (response.error || ""));
                return;
            }
            onSuccess(response);
        },
        error: function(xhr, status, error) {
            if (onError) onError(error);
            else alert("Error en la petición: " + error);
        }
    });
}

// ==========================
// 2) Diccionario de colores
// ==========================
const movementColors = {
    1: "#ff5733", // Color para Movimiento 1: JUNTOS POR EL CAMBIO
    3: "#33c1ff", // Color para Movimiento 3: VAMOS HONDURAS
    4: "#75ff33"  // Color para Movimiento 4: TODOS POR HONDURAS
};

// Función para obtener el color según el movimiento
function getColorForMovement(movementId) {
    return movementColors[movementId] || "#7B7D7D"; // Gris por defecto
}

// ==========================
// 3) Cargar datos y dibujar los gráficos
// ==========================
function loadAlcaldiasData() {
    AJAX_REQUEST(
        "{% url 'api_alcaldias_data' %}",
        "GET",
        {},
        function(response) {
            console.log("Respuesta del servidor:", response);
            let data = response.alcaldias || [];
            if (data.length === 0) {
                alert("No se encontraron datos");
                return;
            }

            // GRÁFICO DE BARRAS (Municipios)
            let sortedAsc = [...data].sort((a, b) => a.centros_ganados - b.centros_ganados);
            const barLabels = sortedAsc.map(item => item.municipio);
            const barValues = sortedAsc.map(item => item.centros_ganados);
            const barColors = sortedAsc.map(item => getColorForMovement(item.movement_id));
            const candidateNames = sortedAsc.map(item => item.candidate_name);

            if (window.myBarChart) {
                window.myBarChart.destroy();
            }
            const barCtx = document.getElementById("barChart").getContext("2d");
            window.myBarChart = new Chart(barCtx, {
                type: "bar",
                data: {
                    labels: barLabels,
                    datasets: [{
                        label: "Actas Ganadas",
                        data: barValues,
                        backgroundColor: barColors,
                        borderColor: barColors,
                        borderWidth: 1,
                        candidateNames: candidateNames
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: { beginAtZero: true }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: "top"
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    const idx = context.dataIndex;
                                    const candidato = context.dataset.candidateNames[idx];
                                    const val = context.dataset.data[idx];
                                    return candidato + " - " + val + " actas";
                                }
                            }
                        }
                    }
                }
            });

            // GRÁFICO DE PASTEL (Movimientos)
            let movementMap = {};
            data.forEach(item => {
                if (!movementMap[item.movement_id]) {
                    movementMap[item.movement_id] = {
                        movement_id: item.movement_id,
                        movement_name: item.movement,
                        total_actas: 0
                    };
                }
                movementMap[item.movement_id].total_actas += item.centros_ganados;
            });

            let movementArray = Object.values(movementMap);
            movementArray.sort((a, b) => b.total_actas - a.total_actas);

            const pieLabels = movementArray.map(m => m.movement_name);
            const pieValues = movementArray.map(m => m.total_actas);
            const pieColors = movementArray.map(m => getColorForMovement(m.movement_id));

            if (window.myPieChart) {
                window.myPieChart.destroy();
            }
            const pieCtx = document.getElementById("pieChart").getContext("2d");
            window.myPieChart = new Chart(pieCtx, {
                type: "pie",
                data: {
                    labels: pieLabels,
                    datasets: [{
                        data: pieValues,
                        backgroundColor: pieColors,
                        borderColor: pieColors,
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    rotation: Math.PI,
                    plugins: {
                        legend: {
                            display: true,
                            position: "top"
                        },
                        tooltip: {
                            callbacks: {
                                label: function(context) {
                                    let label = context.label || "";
                                    let value = context.parsed || 0;
                                    return label + ": " + value + " actas";
                                }
                            }
                        }
                    }
                }
            });
        },
        function(error) {
            console.error("Error al cargar datos de alcaldías:", error);
        }
    );
}

document.addEventListener("DOMContentLoaded", loadAlcaldiasData);
</script>
{% endblock %}