@extends('layouts.goberdata')

@section('title', 'Mapa territorial')
@section('page_title', 'Mapa territorial')
@section('page_sub', 'Concentración de escaneos y prioridad electoral')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
<style>
    #mapa {
        height: 520px;
        width: 100%;
        min-height: 520px;
        border-radius: var(--r-lg);
        overflow: hidden;
        border: 1px solid var(--line-soft);
        background: var(--ink-3);
        position: relative;
        z-index: 1;
    }
    #mapa .leaflet-container { width: 100% !important; height: 520px !important; }
    #mapa .leaflet-pane img,
    #mapa .leaflet-tile-container img { max-width: none !important; max-height: none !important; }
    #mapa img.leaflet-tile { width: 256px !important; height: 256px !important; }
    #mapa canvas { max-width: none !important; max-height: none !important; }
    .terr-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 14px;
        align-items: start;
    }
    @media (max-width: 1000px) {
        .terr-layout { grid-template-columns: 1fr; }
    }
    .comuna-btn {
        width: 100%;
        text-align: left;
        padding: 10px 14px;
        border: 0;
        border-bottom: 1px solid var(--line-soft);
        background: transparent;
        color: inherit;
        display: flex;
        gap: 11px;
        align-items: center;
        cursor: pointer;
    }
    .comuna-btn:hover { background: var(--ink-3); }
</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.heat@0.2.0/dist/leaflet-heat.js"></script>
@endpush

@section('content')
<div id="terrRoot">
    <div class="empty" style="padding:40px">Cargando mapa territorial…</div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const MAPTILER_KEY = '';
    const TILES = {
        carto_dark: {
            nombre: 'CARTO Oscuro',
            url: () => 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
            attr: '&copy; OpenStreetMap &copy; CARTO',
            oscuro: true, max: 19,
        },
        osm: {
            nombre: 'OpenStreetMap',
            url: () => 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            attr: '&copy; OpenStreetMap',
            oscuro: false, max: 19,
        },
        maptiler_dark: {
            nombre: 'MapTiler Oscuro',
            url: (k) => `https://api.maptiler.com/maps/streets-v2-dark/{z}/{x}/{y}.png?key=${k}`,
            attr: '&copy; MapTiler &copy; OpenStreetMap',
            oscuro: true, key: true, max: 20,
        },
    };

    let DATA = null;
    let map = null;
    let mapMode = 'heat';
    let tileProv = 'carto_dark';
    const charts = {};

    function esc(s) {
        return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }
    function fmtN(n) { return Number(n || 0).toLocaleString('es-CO'); }
    function fmtPct(n, d = 1) { return (Number(n) || 0).toFixed(d) + '%'; }
    function scansComuna(id) {
        const m = DATA.scans_por_comuna || {};
        return Number(m[id] || m[String(id)] || 0);
    }
    function totalScans() { return Number(DATA.total_scans || 0); }
    function comunasConScans() {
        return (DATA.comunas || []).map(c => ({ ...c, sc: scansComuna(c.id) }));
    }

    function shellHTML() {
        const cs = comunasConScans().sort((a, b) => b.sc - a.sc);
        const max = Math.max(1, ...cs.map(c => c.sc));
        const ciudad = DATA.meta?.ciudad?.nombre || 'Bucaramanga';

        return `
        <div class="toolbar">
            <div class="tabs" style="margin:0;border:none">
                <button type="button" class="tab ${mapMode === 'heat' ? 'on' : ''}" data-mode="heat">Mapa de calor</button>
                <button type="button" class="tab ${mapMode === 'comuna' ? 'on' : ''}" data-mode="comuna">Por comuna</button>
                <button type="button" class="tab ${mapMode === 'prio' ? 'on' : ''}" data-mode="prio">Prioridad electoral</button>
            </div>
            <div style="margin-left:auto;display:flex;gap:8px;align-items:center">
                <select class="sel" id="tileSel" title="Proveedor del mapa base">
                    ${Object.entries(TILES).map(([k, t]) =>
                        `<option value="${k}" ${tileProv === k ? 'selected' : ''}>${esc(t.nombre)}${t.key && !MAPTILER_KEY ? ' — falta key' : ''}</option>`
                    ).join('')}
                </select>
                <button type="button" class="btn btn-ghost btn-sm" id="btnExport"><i class="fas fa-download"></i> Exportar</button>
            </div>
        </div>

        <div class="terr-layout">
            <div>
                <div id="mapa"></div>
                <div class="legend">
                    ${mapMode === 'prio'
                        ? `<span><i style="background:var(--magenta)"></i>Prioridad alta</span>
                           <span><i style="background:var(--amber)"></i>Media</span>
                           <span><i style="background:var(--lime)"></i>Baja</span>
                           <span style="margin-left:auto;color:var(--muted-2)">Prioridad = abstención histórica + baja penetración</span>`
                        : `<span><i style="background:#00D4E6"></i>Escaneos QR</span>
                           <span style="margin-left:auto;color:var(--muted-2)">${fmtN(totalScans())} escaneos · ${esc(ciudad)} · ubicación aproximada por comuna</span>`}
                </div>
            </div>

            <div class="card" style="align-self:start">
                <div class="card-h"><div><div class="card-t">Comunas</div><div class="card-s">Ordenadas por escaneos</div></div></div>
                <div style="max-height:498px;overflow-y:auto">
                    ${cs.map(c => `
                        <button type="button" class="comuna-btn" data-zoom="${c.id}">
                            <div style="flex:1;min-width:0">
                                <div style="font-size:12.5px;font-weight:600">${esc(c.nombre)}</div>
                                <div class="bar" style="margin-top:5px"><i style="width:${(c.sc / max) * 100}%"></i></div>
                            </div>
                            <div class="num" style="font-size:12.5px;color:var(--cian);flex:0 0 auto">${fmtN(c.sc)}</div>
                        </button>`).join('')}
                </div>
            </div>
        </div>

        <div class="grid g3" style="margin-top:14px">
            <div class="card">
                <div class="card-h"><div class="card-t">Penetración vs abstención</div></div>
                <div class="card-b"><div style="height:238px"><canvas id="chDisp"></canvas></div></div>
            </div>
            <div class="card">
                <div class="card-h"><div class="card-t">Escaneos por estrato</div></div>
                <div class="card-b"><div style="height:238px"><canvas id="chEstrato"></canvas></div></div>
            </div>
            <div class="card">
                <div class="card-h"><div class="card-t">Dispositivos</div></div>
                <div class="card-b"><div style="height:238px"><canvas id="chDisp2"></canvas></div></div>
            </div>
        </div>`;
    }

    function destroyMap() {
        if (map) {
            try { map.remove(); } catch (_) {}
            map = null;
        }
        document.body.classList.remove('mapa-claro', 'mapa-plano');
    }

    function ponerTiles() {
        const t = TILES[tileProv] || TILES.carto_dark;
        if (t.key && !MAPTILER_KEY) {
            tileProv = 'carto_dark';
            return ponerTiles();
        }
        const capa = L.tileLayer(typeof t.url === 'function' ? t.url(MAPTILER_KEY) : t.url, {
            attribution: t.attr,
            maxZoom: t.max,
            crossOrigin: true,
        });
        let fallos = 0;
        capa.on('tileerror', () => {
            if (++fallos === 4 && tileProv !== 'osm') {
                map.removeLayer(capa);
                tileProv = 'osm';
                const osm = TILES.osm;
                L.tileLayer(osm.url(), { attribution: osm.attr, maxZoom: osm.max }).addTo(map);
                document.body.classList.toggle('mapa-claro', true);
            }
        });
        capa.addTo(map);
        document.body.classList.toggle('mapa-claro', !t.oscuro);
        return capa;
    }

    function initMapa() {
        destroyMap();
        const box = document.getElementById('mapa');
        if (!box) return;
        if (typeof L === 'undefined') {
            box.innerHTML = `<div class="empty" style="height:100%;display:grid;place-content:center">
                <div class="empty-t">No se pudo cargar el mapa</div>
                <div style="font-size:12px;max-width:44ch">Esta demo necesita conexión a internet para la cartografía.</div></div>`;
            return;
        }

        const c = DATA.meta?.ciudad || { lat: 7.1193, lng: -73.1227 };
        map = L.map(box, { zoomControl: true, attributionControl: true }).setView([c.lat, c.lng], 13);
        ponerTiles();

        const cs = comunasConScans();
        const max = Math.max(1, ...cs.map(x => x.sc));
        const claro = !(TILES[tileProv] || TILES.carto_dark).oscuro;

        if (mapMode === 'heat' && typeof L.heatLayer === 'function') {
            const raw = DATA.heat || [];
            const step = raw.length > 900 ? 3 : 1;
            const heatPts = [];
            for (let i = 0; i < raw.length; i += step) {
                heatPts.push([raw[i].lat, raw[i].lng, 0.45]);
            }
            if (heatPts.length) {
                L.heatLayer(heatPts, {
                    radius: 22, blur: 26, maxZoom: 16,
                    minOpacity: claro ? 0.38 : 0.25,
                    max: 2.2,
                    gradient: claro
                        ? { 0.2: '#0369A1', 0.45: '#0596A6', 0.7: '#EA8C00', 1: '#D91E5B' }
                        : { 0.2: '#0596A6', 0.45: '#00D4E6', 0.7: '#FFB020', 1: '#FF3D77' },
                }).addTo(map);
            }
        }

        cs.forEach(x => {
            const pen = x.censo ? x.sc / x.censo * 100 : 0;
            const prio = Math.min(100, (x.abst_hist / 50 * 60) + (100 - pen * 12));
            let col = '#00D4E6';
            let r = 8 + (x.sc / max) * 26;
            if (mapMode === 'prio') {
                col = prio > 70 ? '#FF3D77' : prio > 45 ? '#FFB020' : '#7BE04B';
                r = 12 + prio / 100 * 20;
            }
            if (mapMode === 'heat') r = 6;

            L.circleMarker([x.lat, x.lng], {
                radius: r,
                color: claro ? '#0B1014' : col,
                weight: claro ? 2.5 : 2,
                fillColor: col,
                fillOpacity: mapMode === 'heat' ? (claro ? 0.5 : 0.25) : (claro ? 0.62 : 0.38),
            }).addTo(map).bindPopup(`
                <b style="font-size:13px">${esc(x.nombre)}</b><br>
                <span style="color:#8B9AA8">Censo:</span> ${fmtN(x.censo)}<br>
                <span style="color:#8B9AA8">Escaneos:</span> <b style="color:#00D4E6">${fmtN(x.sc)}</b><br>
                <span style="color:#8B9AA8">Penetración:</span> ${fmtPct(pen, 2)}<br>
                <span style="color:#8B9AA8">Abstención hist.:</span> ${fmtPct(x.abst_hist)}<br>
                <span style="color:#8B9AA8">Estrato prom.:</span> ${x.estrato}
            `);
        });

        setTimeout(() => map && map.invalidateSize(true), 50);
        setTimeout(() => map && map.invalidateSize(true), 250);
        setTimeout(() => map && map.invalidateSize(true), 600);
        if (window._terrResizeObs) window._terrResizeObs.disconnect();
        if (typeof ResizeObserver !== 'undefined') {
            window._terrResizeObs = new ResizeObserver(() => map && map.invalidateSize(true));
            window._terrResizeObs.observe(box);
        }
    }

    function renderCharts() {
        if (typeof Chart === 'undefined') return;
        Object.values(charts).forEach(c => c && c.destroy());

        const cs = comunasConScans();
        const chBase = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { labels: { color: '#8B9AA8', font: { size: 11 }, boxWidth: 10 } },
                tooltip: { backgroundColor: '#131A21', titleColor: '#E8EDF2', bodyColor: '#8B9AA8', borderColor: '#243040', borderWidth: 1 }
            },
            scales: {
                x: { ticks: { color: '#7a8494', font: { size: 10 } }, grid: { color: 'rgba(255,255,255,.04)' }, title: { display: true, text: 'Abstención histórica %', color: '#61707E', font: { size: 10 } } },
                y: { ticks: { color: '#7a8494', font: { size: 10 } }, grid: { color: 'rgba(255,255,255,.06)' }, title: { display: true, text: 'Penetración QR %', color: '#61707E', font: { size: 10 } } }
            }
        };

        const el1 = document.getElementById('chDisp');
        if (el1) {
            charts.disp = new Chart(el1, {
                type: 'scatter',
                data: {
                    datasets: [{
                        label: 'Comunas',
                        data: cs.map(x => ({ x: x.abst_hist, y: x.censo ? x.sc / x.censo * 100 : 0, n: x.nombre })),
                        backgroundColor: '#00D4E6',
                        pointRadius: 6,
                        pointHoverRadius: 9,
                    }]
                },
                options: {
                    ...chBase,
                    plugins: {
                        ...chBase.plugins,
                        legend: { display: false },
                        tooltip: {
                            ...chBase.plugins.tooltip,
                            callbacks: { label: (c) => `${c.raw.n}: ${c.raw.y.toFixed(2)}% penetración, ${c.raw.x}% abstención` }
                        }
                    }
                }
            });
        }

        const buckets = { '1-2': 0, '2-3': 0, '3-4': 0, '4+': 0 };
        cs.forEach(x => {
            const e = x.estrato;
            if (e < 2) buckets['1-2'] += x.sc;
            else if (e < 3) buckets['2-3'] += x.sc;
            else if (e < 4) buckets['3-4'] += x.sc;
            else buckets['4+'] += x.sc;
        });
        const el2 = document.getElementById('chEstrato');
        if (el2) {
            charts.estrato = new Chart(el2, {
                type: 'doughnut',
                data: {
                    labels: Object.keys(buckets),
                    datasets: [{
                        data: Object.values(buckets),
                        backgroundColor: ['#FF3D77', '#FFB020', '#00D4E6', '#7BE04B'],
                        borderColor: '#131A21',
                        borderWidth: 2,
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false, cutout: '62%',
                    plugins: {
                        legend: { position: 'bottom', labels: { color: '#8B9AA8', font: { size: 11 }, boxWidth: 10, padding: 12 } }
                    }
                }
            });
        }

        const disp = DATA.scans_disp || {};
        const labels = Object.keys(disp);
        const values = Object.values(disp).map(v => Number(v) || 0);
        const el3 = document.getElementById('chDisp2');
        if (el3) {
            charts.disp2 = new Chart(el3, {
                type: 'doughnut',
                data: {
                    labels: labels.length ? labels : ['Móvil', 'Tablet', 'Escritorio'],
                    datasets: [{
                        data: values.length ? values : [9200, 2100, 3174],
                        backgroundColor: ['#7BE04B', '#00D4E6', '#61707E'],
                        borderColor: '#131A21',
                        borderWidth: 2,
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false, cutout: '62%',
                    plugins: {
                        legend: { position: 'bottom', labels: { color: '#8B9AA8', font: { size: 11 }, boxWidth: 10, padding: 12 } }
                    }
                }
            });
        }
    }

    function exportCSV() {
        const rows = [['Comuna', 'Censo', 'Escaneos', 'Penetracion %', 'Abstencion hist %', 'Estrato']];
        comunasConScans().forEach(r => {
            rows.push([
                r.nombre, r.censo, r.sc,
                (r.censo ? r.sc / r.censo * 100 : 0).toFixed(2),
                r.abst_hist, r.estrato
            ]);
        });
        const csv = rows.map(r => r.map(c => `"${String(c ?? '').replace(/"/g, '""')}"`).join(',')).join('\n');
        const a = document.createElement('a');
        a.href = URL.createObjectURL(new Blob([csv], { type: 'text/csv;charset=utf-8' }));
        a.download = 'territorio.csv';
        a.click();
    }

    function bind() {
        document.querySelectorAll('[data-mode]').forEach(btn => {
            btn.addEventListener('click', () => {
                mapMode = btn.dataset.mode;
                render(false);
            });
        });
        const sel = document.getElementById('tileSel');
        if (sel) sel.onchange = () => {
            tileProv = sel.value;
            if ((TILES[tileProv] || {}).key && !MAPTILER_KEY) tileProv = 'carto_dark';
            render(false);
        };
        document.querySelectorAll('[data-zoom]').forEach(btn => {
            btn.addEventListener('click', () => {
                const id = +btn.dataset.zoom;
                const c = (DATA.comunas || []).find(x => x.id === id);
                if (map && c) map.setView([c.lat, c.lng], 15, { animate: true });
            });
        });
        const exp = document.getElementById('btnExport');
        if (exp) exp.onclick = exportCSV;
    }

    function render(full = true) {
        const y = window.scrollY;
        document.getElementById('terrRoot').innerHTML = shellHTML();
        bind();
        initMapa();
        renderCharts();
        if (!full) window.scrollTo(0, y);
    }

    async function boot() {
        const res = await fetch('{{ url('/js/demo-campaign.json') }}');
        DATA = await res.json();
        render(true);
    }

    boot().catch(err => {
        document.getElementById('terrRoot').innerHTML = `<div class="alert a-bad"><div>
            <div class="alert-t">No se pudo cargar el mapa territorial</div>
            <div class="alert-d">${esc(err.message || err)}</div></div></div>`;
    });
})();
</script>
@endpush