@extends('layouts.goberdata')

@section('title', 'Códigos QR')
@section('page_title', 'Códigos QR')
@section('page_sub', 'Afiches georeferenciados y mapa de escaneos')

@push('styles')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="">
<style>
    #qrMap {
        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;
    }
    #qrMap .leaflet-container {
        width: 100% !important;
        height: 520px !important;
    }
    #qrMap .leaflet-pane img,
    #qrMap .leaflet-tile-container img {
        max-width: none !important;
        max-height: none !important;
    }
    #qrMap img.leaflet-tile {
        width: 256px !important;
        height: 256px !important;
    }
    #qrMap canvas {
        max-width: none !important;
        max-height: none !important;
    }
    .qr-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
        margin-top: 14px;
    }
    .qr-card {
        background: var(--ink-2);
        border: 1px solid var(--line-soft);
        border-radius: var(--r-lg);
        padding: 14px;
    }
    .qr-box {
        width: 76px; height: 76px;
        background: #fff;
        border-radius: 6px;
        display: grid;
        place-items: center;
        flex: 0 0 76px;
        overflow: hidden;
    }
    .qr-box svg { width: 70px; height: 70px; display: block; }
    .comuna-dot {
        background: var(--cian);
        border: 2px solid #0B1014;
        border-radius: 50%;
        opacity: .9;
    }
</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="qrRoot">
    <div class="empty" style="padding:40px">Cargando mapa de escaneos…</div>
</div>
<div id="toastWrap" class="toast-wrap"></div>
@endsection

@push('scripts')
<script>
(function () {
    let DATA = null;
    let map = null;
    let heatLayer = null;
    let mapMode = 'heat';
    let comunaFilter = 'all';
    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 fecha(d) {
        if (!d) return '—';
        const [y, m, day] = String(d).split('-');
        const meses = ['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];
        return `${parseInt(day, 10)} ${meses[parseInt(m, 10) - 1]} ${y}`;
    }
    function fechaCorta(d) {
        if (!d) return '';
        const [, m, day] = String(d).split('-');
        const meses = ['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];
        return `${parseInt(day, 10)} ${meses[parseInt(m, 10) - 1]}`;
    }
    function kpi(label, value, sub, accent) {
        return `<div class="kpi" style="--accent:${accent}">
            <div class="kpi-l">${esc(label)}</div>
            <div class="kpi-v">${value}</div>
            ${sub ? `<div class="kpi-sub">${sub}</div>` : ''}
        </div>`;
    }
    function comuna(id) {
        return (DATA.comunas || []).find(c => c.id == id) || { nombre: '—', lat: 7.12, lng: -73.12, censo: 1, abst_hist: 0, estrato: 0 };
    }
    function scansComuna(id) {
        const mapSc = DATA.scans_por_comuna || {};
        return Number(mapSc[id] || mapSc[String(id)] || 0);
    }
    function totalScans() { return Number(DATA.total_scans || 0); }

    // Minimal QR-looking SVG for demo cards (not a real encoder)
    function qrSVG(code, size) {
        const n = 21;
        const cell = size / n;
        let seed = 0;
        for (let i = 0; i < String(code).length; i++) seed = (seed * 31 + code.charCodeAt(i)) >>> 0;
        const bits = [];
        for (let y = 0; y < n; y++) {
            for (let x = 0; x < n; x++) {
                const finder = (x < 7 && y < 7) || (x > n - 8 && y < 7) || (x < 7 && y > n - 8);
                const edge = x === 0 || y === 0 || x === n - 1 || y === n - 1;
                let on = false;
                if (finder) {
                    on = x === 0 || y === 0 || x === 6 || y === 6 || x === n - 1 || y === n - 1
                        || (x >= 2 && x <= 4 && y >= 2 && y <= 4)
                        || (x >= n - 5 && x <= n - 3 && y >= 2 && y <= 4)
                        || (x >= 2 && x <= 4 && y >= n - 5 && y <= n - 3);
                    if ((x < 7 && y < 7) || (x > n - 8 && y < 7) || (x < 7 && y > n - 8)) {
                        const lx = x > n - 8 ? x - (n - 7) : x;
                        const ly = y > n - 8 ? y - (n - 7) : y;
                        on = lx === 0 || ly === 0 || lx === 6 || ly === 6 || (lx >= 2 && lx <= 4 && ly >= 2 && ly <= 4);
                    }
                } else if (!edge) {
                    seed = (seed * 1664525 + 1013904223) >>> 0;
                    on = (seed & 3) !== 0;
                }
                if (on) bits.push(`<rect x="${x * cell}" y="${y * cell}" width="${cell}" height="${cell}" fill="#0B1014"/>`);
            }
        }
        return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
            <rect width="${size}" height="${size}" fill="#fff"/>${bits.join('')}</svg>`;
    }

    function toast(html) {
        const wrap = document.getElementById('toastWrap');
        const el = document.createElement('div');
        el.className = 'toast';
        el.innerHTML = html;
        wrap.appendChild(el);
        setTimeout(() => el.remove(), 2600);
    }

    function qrCampaigns() {
        return (DATA.qr_campanas || []).map(q => {
            const same = (DATA.qr_campanas || []).filter(x => x.comuna_id === q.comuna_id).length || 1;
            const scans = Math.round(scansComuna(q.comuna_id) / same);
            return { ...q, scans };
        });
    }

    function shellHTML() {
        const qcs = qrCampaigns();
        const totalPiezas = qcs.reduce((a, q) => a + (q.piezas || 0), 0);
        const nuevos = Number(DATA.scans_nuevos || 0);
        const ciudad = DATA.meta?.ciudad || { nombre: 'Bucaramanga', lat: 7.1193, lng: -73.1227 };

        return `
        <div class="grid g4" style="margin-bottom:14px">
            ${kpi('Piezas impresas', fmtN(totalPiezas), `${qcs.length} campañas de material`, 'var(--cian)')}
            ${kpi('Escaneos totales', fmtN(totalScans()), 'Últimos 90 días · demo Bucaramanga', 'var(--violet)')}
            ${kpi('Tasa de escaneo', fmtPct(totalPiezas ? totalScans() / totalPiezas * 100 : 0, 1), 'Escaneos por pieza impresa', 'var(--lime)')}
            ${kpi('Dispositivos nuevos', fmtPct(totalScans() ? nuevos / totalScans() * 100 : 0), 'Alcance real, sin repetidos', 'var(--amber)')}
        </div>

        <div class="card" style="margin-bottom:14px">
            <div class="card-h">
                <div>
                    <div class="card-t">Mapa de escaneos · ${esc(ciudad.nombre)}</div>
                    <div class="card-s">Calor de actividad + puntos por comuna</div>
                </div>
                <div class="right" style="display:flex;gap:8px;flex-wrap:wrap">
                    <button type="button" class="btn btn-ghost btn-sm ${mapMode === 'heat' ? 'btn-primary' : ''}" data-mode="heat">Mapa de calor</button>
                    <button type="button" class="btn btn-ghost btn-sm ${mapMode === 'comuna' ? 'btn-primary' : ''}" data-mode="comuna">Por comuna</button>
                    <button type="button" class="btn btn-ghost btn-sm ${mapMode === 'prio' ? 'btn-primary' : ''}" data-mode="prio">Prioridad</button>
                </div>
            </div>
            <div class="card-b" style="padding:0">
                <div id="qrMap"></div>
            </div>
            <div style="padding:12px 16px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--muted-2)">
                Zonas calientes = más escaneos. Los círculos son comunas: clic para ver censo, penetración y abstención.
            </div>
        </div>

        <div class="grid g2" style="margin-bottom:14px">
            <div class="card">
                <div class="card-h"><div><div class="card-t">Escaneos por día</div><div class="card-s">Últimos 30 días</div></div></div>
                <div class="card-b"><div style="height:220px"><canvas id="chScansQr"></canvas></div></div>
            </div>
            <div class="card">
                <div class="card-h"><div><div class="card-t">Top comunas</div><div class="card-s">Por volumen de escaneos</div></div></div>
                <div class="tbl-wrap"><table class="tbl">
                    <thead><tr><th>Comuna</th><th class="t-right">Escaneos</th><th class="t-right">Penetración</th></tr></thead>
                    <tbody>
                    ${(DATA.comunas || []).map(c => ({ ...c, sc: scansComuna(c.id) }))
                        .sort((a, b) => b.sc - a.sc).slice(0, 8)
                        .map(c => `<tr style="cursor:pointer" onclick="GDQR.zoomComuna(${c.id})">
                            <td><b>${esc(c.nombre)}</b></td>
                            <td class="t-right num" style="color:var(--cian)">${fmtN(c.sc)}</td>
                            <td class="t-right num">${fmtPct(c.censo ? c.sc / c.censo * 100 : 0, 2)}</td>
                        </tr>`).join('')}
                    </tbody>
                </table></div>
            </div>
        </div>

        <div class="toolbar">
            <div class="card-t" style="font-size:15px">Campañas de material</div>
            <select class="sel" id="fComuna" style="margin-left:auto">
                <option value="all">Todas las comunas</option>
                ${(DATA.comunas || []).map(c => `<option value="${c.id}" ${comunaFilter == c.id ? 'selected' : ''}>${esc(c.nombre)}</option>`).join('')}
            </select>
        </div>

        <div class="qr-grid">
            ${qcs.filter(q => comunaFilter === 'all' || q.comuna_id == comunaFilter).map(q => `
                <div class="qr-card">
                    <div style="display:flex;gap:12px;align-items:flex-start">
                        <div class="qr-box">${qrSVG(q.codigo, 76)}</div>
                        <div style="min-width:0;flex:1">
                            <div style="font-size:13px;font-weight:700;line-height:1.25">${esc(q.nombre)}</div>
                            <div class="eyebrow" style="margin-top:3px">${esc(q.codigo)}</div>
                            <div style="margin-top:7px"><span class="pill p-info">${esc(q.tipo)}</span></div>
                        </div>
                    </div>
                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line-soft)">
                        <div><div class="eyebrow">Piezas</div><div class="num" style="font-size:15px">${fmtN(q.piezas)}</div></div>
                        <div><div class="eyebrow">Escaneos</div><div class="num" style="font-size:15px;color:var(--cian)">${fmtN(q.scans)}</div></div>
                    </div>
                    <div style="margin-top:10px;font-size:11px;color:var(--muted-2)">${esc(comuna(q.comuna_id).nombre)} · desde ${fecha(q.creado)}</div>
                    <div style="display:flex;gap:6px;margin-top:11px">
                        <button class="btn btn-ghost btn-sm" style="flex:1" type="button" onclick="GDQR.zoomComuna(${q.comuna_id})">Ver en mapa</button>
                        <button class="btn btn-ghost btn-sm" style="flex:1" type="button" onclick="GDQR.toastCode('${esc(q.codigo)}')">Código</button>
                    </div>
                </div>`).join('') || '<div class="empty">Sin campañas QR</div>'}
        </div>`;
    }

    function destroyMap() {
        if (map) {
            map.remove();
            map = null;
            heatLayer = null;
        }
    }

    function initMap() {
        destroyMap();
        const el = document.getElementById('qrMap');
        if (!el || typeof L === 'undefined') return;

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

        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
            attribution: '&copy; OpenStreetMap &copy; CARTO',
            subdomains: 'abcd',
            maxZoom: 19,
        }).addTo(map);

        const cs = (DATA.comunas || []).map(x => ({ ...x, sc: scansComuna(x.id) }));
        const max = Math.max(1, ...cs.map(x => x.sc));

        if (mapMode === 'heat' && typeof L.heatLayer === 'function') {
            const raw = DATA.heat || [];
            // Muestrear para no saturar el canvas (el HTML demo se ve limpio con densidad media)
            const step = raw.length > 900 ? 3 : 1;
            let heatPts = [];
            for (let i = 0; i < raw.length; i += step) {
                const p = raw[i];
                heatPts.push([p.lat, p.lng, 0.35]);
            }
            if (!heatPts.length) {
                heatPts = cs.flatMap(c => {
                    const n = Math.min(40, Math.max(6, Math.round(c.sc / 80)));
                    const out = [];
                    for (let i = 0; i < n; i++) {
                        out.push([
                            c.lat + (Math.random() - 0.5) * 0.018,
                            c.lng + (Math.random() - 0.5) * 0.018,
                            0.3 + Math.random() * 0.25
                        ]);
                    }
                    return out;
                });
            }
            heatLayer = L.heatLayer(heatPts, {
                radius: 16, blur: 20, maxZoom: 18, minOpacity: 0.18, max: 2.5,
                gradient: { 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: col,
                weight: 2,
                fillColor: col,
                fillOpacity: mapMode === 'heat' ? 0.25 : 0.45,
            }).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)}
            `);
        });

        setTimeout(() => { if (map) { map.invalidateSize(true); map.setView([ciudad.lat, ciudad.lng], 13); } }, 50);
        setTimeout(() => map && map.invalidateSize(true), 250);
        setTimeout(() => map && map.invalidateSize(true), 600);
        if (window._qrMapResizeObs) window._qrMapResizeObs.disconnect();
        if (typeof ResizeObserver !== 'undefined') {
            window._qrMapResizeObs = new ResizeObserver(() => {
                if (map) map.invalidateSize(true);
            });
            window._qrMapResizeObs.observe(el);
        }
        window.addEventListener('resize', () => map && map.invalidateSize(true));
    }

    function renderCharts() {
        const serie = (DATA.serie_scans || []).slice(-30);
        const el = document.getElementById('chScansQr');
        if (!el || typeof Chart === 'undefined') return;
        if (charts.scans) charts.scans.destroy();
        charts.scans = new Chart(el, {
            type: 'bar',
            data: {
                labels: serie.map(r => fechaCorta(r.fecha || r.day)),
                datasets: [{
                    label: 'Escaneos',
                    data: serie.map(r => r.total || r.scans || r.n || 0),
                    backgroundColor: 'rgba(0,212,230,.55)',
                    borderRadius: 3,
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                plugins: { legend: { display: false } },
                scales: {
                    x: { ticks: { color: '#7a8494', maxRotation: 0, autoSkip: true, maxTicksLimit: 8 }, grid: { color: 'rgba(255,255,255,.04)' } },
                    y: { ticks: { color: '#7a8494' }, grid: { color: 'rgba(255,255,255,.06)' } }
                }
            }
        });
    }

    function bind() {
        document.querySelectorAll('[data-mode]').forEach(btn => {
            btn.addEventListener('click', () => {
                mapMode = btn.dataset.mode;
                render(false);
            });
        });
        const sel = document.getElementById('fComuna');
        if (sel) sel.onchange = () => { comunaFilter = sel.value; render(false); };
    }

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

    window.GDQR = {
        zoomComuna(id) {
            const c = comuna(id);
            if (map && c.lat) map.setView([c.lat, c.lng], 15, { animate: true });
            toast(`Comuna <b>${esc(c.nombre)}</b>`);
        },
        toastCode(code) { toast(`Código <b>${esc(code)}</b>`); }
    };

    async function boot() {
        if (typeof L === 'undefined') {
            document.getElementById('qrRoot').innerHTML = `<div class="alert a-bad"><div class="alert-t">Leaflet no cargó</div>
                <div class="alert-d">Revisa la conexión a unpkg.com e intenta recargar.</div></div>`;
            return;
        }
        const res = await fetch('{{ url('/js/demo-campaign.json') }}');
        DATA = await res.json();
        render(true);

        // Optional: enrich with API stats if available
        try {
            const token = localStorage.getItem('auth_token');
            if (!token) return;
            const r = await fetch('/api/qr-campaigns/dashboard', {
                headers: { 'Authorization': `Bearer ${token}`, 'Accept': 'application/json' }
            });
            if (!r.ok) return;
            const api = await r.json();
            if ((api.total_scans || 0) > 0) {
                // Keep demo map geography; show API totals in console for real campaigns
                console.info('QR API stats (campaña real):', api);
            }
        } catch (_) {}
    }

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