@extends('layouts.goberdata')

@section('title', 'Panel general')
@section('page_title', 'Panel general')
@section('page_sub', 'Estado de la campaña en tiempo real')

@push('styles')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
@endpush

@section('content')
<div id="dashRoot">
    <div class="empty" style="padding:40px">Cargando panel demo…</div>
</div>
@endsection

@push('scripts')
<script>
(function () {
    const ALIASES = @json(config('goberdata_menu.aliases', []));
    const CH_BASE = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { labels: { color: '#9aa4b2', boxWidth: 10, font: { size: 11 } } } },
        scales: {
            x: { ticks: { color: '#7a8494', font: { size: 10 } }, grid: { color: 'rgba(255,255,255,.04)' } },
            y: { ticks: { color: '#7a8494', font: { size: 10 } }, grid: { color: 'rgba(255,255,255,.06)' } }
        }
    };
    let DATA = null;
    let role = 'candidato';
    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 fmtCopShort(n) {
        n = Number(n) || 0;
        if (n >= 1e9) return '$' + (n / 1e9).toFixed(2) + ' mil M';
        if (n >= 1e6) return '$' + (n / 1e6).toFixed(1) + ' M';
        return '$' + fmtN(n);
    }
    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 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 resolveRole() {
        let user = {};
        try { user = JSON.parse(localStorage.getItem('user') || '{}'); } catch (_) {}
        const roles = user.roles || (user.role ? [user.role] : []);
        let raw = (roles[0] || user.role || '').toLowerCase();
        role = ALIASES[raw] || raw || 'candidato';
        if ((user.email || '').includes('voluntario') || role === 'voluntario') {
            location.replace('{{ url('/volunteer/dashboard') }}');
            return 'voluntario';
        }
        return role;
    }
    function kpi(label, value, delta, sub, accent) {
        const d = delta != null ? `<span style="color:var(--ok);font-size:11px;margin-left:6px">▲ ${delta}%</span>` : '';
        return `<div class="kpi" style="--accent:${accent}">
            <div class="kpi-l">${esc(label)}</div>
            <div class="kpi-v">${value}${d}</div>
            ${sub ? `<div class="kpi-sub">${sub}</div>` : ''}
        </div>`;
    }
    function principal() {
        return (DATA.candidatos || []).find(c => c.principal) || (DATA.candidatos || [])[0] || { intencion: 0 };
    }
    function totalScans() { return DATA.total_scans || 0; }
    function scansComuna(id) {
        const map = DATA.scans_por_comuna || {};
        if (Array.isArray(map)) {
            const row = map.find(x => x.comuna_id === id || x.id === id);
            return row ? (row.scans || row.total || row.sc || 0) : 0;
        }
        return Number(map[id] || map[String(id)] || 0);
    }
    function volActivos() {
        return (DATA.voluntarios || []).filter(v => v.estado === 'Activo').length || 128;
    }
    function horasTotales() {
        return Math.round((DATA.tareas || []).reduce((a, t) => a + (t.horas_real || 0), 0));
    }
    function totalRecaudado() {
        // Approximate from demo meta if donations not in extract
        return Math.round((DATA.meta?.tope_campana || 1850000000) * 0.62);
    }

    function roleHint() {
        const hints = {
            territorial: 'Vista operativa: prioriza territorio, tareas de campo y día de elección.',
            digital: 'Vista de comunicación: redes, WhatsApp, correo y análisis IA.',
            tesorero: 'Vista financiera: donaciones, tope legal y cumplimiento.',
            auditor: 'Vista de control: habeas data, auditoría y reportes.',
            gerente: 'Vista de gestión: operación completa de la campaña.',
            candidato: 'Vista estratégica: intención de voto, territorio y narrativa.',
            superadmin: 'Vista plataforma: todas las ciudades y módulos SaaS.',
        };
        return hints[role] || hints.candidato;
    }

    function renderShell() {
        const p = principal();
        const rec = totalRecaudado();
        const tope = DATA.meta?.tope_campana || 1850000000;
        const pct = rec / tope * 100;
        const at = (DATA.tareas || []).filter(t => t.vence < '2026-07-23' && (t.estado === 'pending' || t.estado === 'in_progress'));
        const comunas = (DATA.comunas || []).map(c => ({ ...c, sc: scansComuna(c.id) })).sort((a, b) => b.sc - a.sc);
        const showFinance = !['territorial', 'digital', 'voluntario'].includes(role);
        const showIA = !['tesorero', 'auditor'].includes(role);

        return `
        <div class="alert a-info" style="margin-bottom:14px"><i class="fas fa-user-check"></i><div>
            <div class="alert-t">Rol activo: ${esc(role)}</div>
            <div class="alert-d">${esc(roleHint())} Datos demo de Bucaramanga · AlcaldIA.</div>
        </div></div>

        ${at.length > 25 ? `<div class="alert a-warn"><i class="fas fa-clock"></i><div>
            <div class="alert-t">${at.length} tareas pasadas de fecha</div>
            <div class="alert-d">El trabajo de campo se está acumulando. Revísalo en el tablero antes de asignar más.</div>
            <a class="btn btn-ghost btn-sm" style="margin-top:9px" href="{{ url('/tasks') }}">Abrir tablero</a>
        </div></div>` : ''}

        <div class="grid g4" style="margin-bottom:14px">
            ${kpi('Intención de voto', fmtPct(p.intencion || 34.2), 2.4, 'Primer lugar · +3.6 pts sobre el segundo', 'var(--cian)')}
            ${kpi('Escaneos QR', fmtN(totalScans()), 18.2, `${fmtPct((DATA.scans_nuevos || 0) / Math.max(1, totalScans()) * 100)} de dispositivos nuevos`, 'var(--violet)')}
            ${showFinance
                ? kpi('Recaudado', fmtCopShort(rec), 12.7, `${fmtPct(pct)} del tope legal permitido`, 'var(--lime)')
                : kpi('Tareas abiertas', fmtN((DATA.tareas || []).filter(t => t.estado !== 'completed' && t.estado !== 'cancelled').length), null, 'Tablero de campo', 'var(--lime)')}
            ${kpi('Equipo activo', fmtN(volActivos()), 6.1, `${fmtN(horasTotales())} horas acumuladas`, 'var(--amber)')}
        </div>

        <div class="grid g2" style="margin-bottom:14px">
            <div class="card">
                <div class="card-h"><div><div class="card-t">Intención de voto</div>
                    <div class="card-s">Encuesta interna semanal · ${(DATA.serie_intencion || []).length} mediciones</div></div></div>
                <div class="card-b"><div style="height:262px"><canvas id="chIntencion"></canvas></div></div>
            </div>
            <div class="card">
                <div class="card-h"><div><div class="card-t">Escaneos por día</div>
                    <div class="card-s">Actividad de piezas impresas</div></div></div>
                <div class="card-b"><div style="height:262px"><canvas id="chScans"></canvas></div></div>
            </div>
        </div>

        <div class="grid" style="grid-template-columns:1.5fr 1fr;margin-bottom:14px;gap:14px">
            <div class="card">
                <div class="card-h"><div><div class="card-t">Comunas por escaneos</div>
                    <div class="card-s">Dónde la campaña está calando</div></div>
                    <div class="right"><a class="btn btn-ghost btn-sm" href="{{ url('/admin/electoral-map/dashboard') }}"><i class="fas fa-map"></i> Ver mapa</a></div></div>
                <div class="tbl-wrap"><table class="tbl">
                    <thead><tr><th>Comuna</th><th class="t-right">Censo</th><th class="t-right">Escaneos</th>
                        <th class="t-right">Penetración</th><th class="t-right">Abstención hist.</th><th style="width:120px">Prioridad</th></tr></thead>
                    <tbody>${comunas.slice(0, 8).map(c => {
                        const pen = c.censo ? c.sc / c.censo * 100 : 0;
                        const prio = Math.min(100, (c.abst_hist / 50 * 60) + (100 - pen * 12));
                        return `<tr><td><b>${esc(c.nombre)}</b></td>
                            <td class="t-right num">${fmtN(c.censo)}</td>
                            <td class="t-right num" style="color:var(--cian)">${fmtN(c.sc)}</td>
                            <td class="t-right num">${fmtPct(pen, 2)}</td>
                            <td class="t-right num">${fmtPct(c.abst_hist)}</td>
                            <td><div class="bar"><i style="width:${prio.toFixed(0)}%;background:${prio > 70 ? 'var(--magenta)' : prio > 45 ? 'var(--amber)' : 'var(--lime)'}"></i></div></td></tr>`;
                    }).join('')}</tbody>
                </table></div>
            </div>
            <div class="card">
                <div class="card-h"><div><div class="card-t">Horario de escaneo</div>
                    <div class="card-s">Cuándo mira la gente los afiches</div></div></div>
                <div class="card-b"><div style="height:222px"><canvas id="chHoras"></canvas></div></div>
            </div>
        </div>

        <div class="grid g2">
            ${showIA ? `<div class="card">
                <div class="card-h"><div><div class="card-t">Temas que mueven la conversación</div>
                    <div class="card-s">Análisis IA sobre comentarios en canales propios</div></div>
                    <div class="right"><a class="btn btn-ghost btn-sm" href="{{ url('/admin/content-ai/dashboard') }}">Ver detalle</a></div></div>
                <div class="card-b">
                    ${(DATA.temas_ciudadanos || []).slice(0, 6).map(t => {
                        const s = t.sent, col = s < -0.4 ? 'var(--bad)' : s < 0 ? 'var(--amber)' : 'var(--ok)';
                        const tend = t.tend === 'subiendo' ? '▲' : t.tend === 'bajando' ? '▼' : '■';
                        return `<div style="display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line-soft)">
                            <div style="flex:1;min-width:0"><div style="font-size:13px;font-weight:600">${esc(t.tema)}</div>
                                <div class="bar" style="margin-top:5px"><i style="width:${Math.min(100, (t.menciones || 0) / 39)}%;background:${col}"></i></div></div>
                            <div style="text-align:right;flex:0 0 auto">
                                <div class="num" style="font-size:13px">${fmtN(t.menciones)}</div>
                                <div style="font-size:10.5px;color:${col}">${tend} ${esc(t.tend || '')}</div></div>
                        </div>`;
                    }).join('') || '<div class="empty">Sin temas</div>'}
                </div>
            </div>` : `<div class="card"><div class="card-h"><div class="card-t">Accesos de control</div></div>
                <div class="card-b" class="grid g2">
                    <a class="btn btn-ghost" href="{{ url('/admin/donations/dashboard') }}">Donaciones</a>
                    <a class="btn btn-ghost" href="{{ url('/admin/permissions') }}">Habeas Data</a>
                    <a class="btn btn-ghost" href="{{ url('/superadmin/reports') }}">Reportes</a>
                </div></div>`}
            <div class="card">
                <div class="card-h"><div><div class="card-t">Próximos eventos</div>
                    <div class="card-s">Agenda de los siguientes 30 días</div></div>
                    <div class="right"><a class="btn btn-ghost btn-sm" href="{{ url('/admin/events/dashboard') }}"><i class="fas fa-calendar"></i> Agenda</a></div></div>
                <div class="tbl-wrap"><table class="tbl">
                    <thead><tr><th>Evento</th><th>Comuna</th><th class="t-right">Inscritos</th><th class="t-right">Cupo</th></tr></thead>
                    <tbody>${(DATA.eventos || []).filter(e => e.estado === 'Programado').slice(0, 7).map(e => {
                        const com = (DATA.comunas || []).find(c => c.id === e.comuna_id);
                        return `<tr>
                            <td><b>${esc(e.nombre)}</b><div style="font-size:10.5px;color:var(--muted-2)">${fecha(e.fecha)}</div></td>
                            <td>${esc(com?.nombre || '—')}</td>
                            <td class="t-right num">${fmtN(e.inscritos)}</td>
                            <td class="t-right num" style="color:var(--muted-2)">${fmtN(e.cupo)}</td></tr>`;
                    }).join('') || '<tr><td colspan="4" class="empty">Sin eventos programados</td></tr>'}
                    </tbody>
                </table></div>
            </div>
        </div>`;
    }

    function mkChart(id, cfg) {
        const el = document.getElementById(id);
        if (!el || typeof Chart === 'undefined') return;
        if (charts[id]) charts[id].destroy();
        charts[id] = new Chart(el, cfg);
    }

    function chartsDashboard() {
        const s = DATA.serie_intencion || [];
        const cands = DATA.candidatos || [];
        mkChart('chIntencion', {
            type: 'line',
            data: {
                labels: s.map(r => fechaCorta(r.fecha)),
                datasets: cands.map(c => ({
                    label: (c.nombre || '').split(' ').slice(0, 2).join(' '),
                    data: s.map(r => r['c' + c.id]),
                    borderColor: c.color || '#00d4e6',
                    backgroundColor: (c.color || '#00d4e6') + '18',
                    borderWidth: c.principal ? 2.6 : 1.5,
                    tension: .35,
                    pointRadius: 0,
                    fill: !!c.principal,
                }))
            },
            options: { ...CH_BASE, scales: { ...CH_BASE.scales, y: { ...CH_BASE.scales.y, ticks: { ...CH_BASE.scales.y.ticks, callback: v => v + '%' } } } }
        });

        const serie = (DATA.serie_scans || []).slice(-30);
        mkChart('chScans', {
            type: 'bar',
            data: {
                labels: serie.map(r => fechaCorta(r.fecha || r.day || r.d)),
                datasets: [{
                    label: 'Escaneos',
                    data: serie.map(r => r.scans || r.total || r.n || 0),
                    backgroundColor: 'rgba(0,212,230,.55)',
                    borderRadius: 3,
                }]
            },
            options: { ...CH_BASE, plugins: { ...CH_BASE.plugins, legend: { display: false } } }
        });

        const horas = DATA.scans_por_hora || [];
        mkChart('chHoras', {
            type: 'line',
            data: {
                labels: horas.map((_, i) => String(i).padStart(2, '0') + 'h'),
                datasets: [{
                    label: 'Escaneos',
                    data: horas.map(h => typeof h === 'number' ? h : (h.scans || h.n || 0)),
                    borderColor: '#a78bfa',
                    backgroundColor: 'rgba(167,139,250,.15)',
                    fill: true, tension: .35, pointRadius: 0,
                }]
            },
            options: { ...CH_BASE, plugins: { ...CH_BASE.plugins, legend: { display: false } } }
        });
    }

    async function boot() {
        resolveRole();
        if (role === 'voluntario') return;
        const res = await fetch('{{ url('/js/demo-campaign.json') }}');
        DATA = await res.json();
        // Normalize scans_por_comuna shapes
        if (Array.isArray(DATA.scans_por_comuna) && DATA.scans_por_comuna.length && DATA.scans_por_comuna[0].comuna_id == null) {
            // maybe {1: n} object converted — leave as is
        }
        document.getElementById('dashRoot').innerHTML = renderShell();
        requestAnimationFrame(chartsDashboard);
    }
    boot().catch(err => {
        document.getElementById('dashRoot').innerHTML = `<div class="alert a-bad"><div>
            <div class="alert-t">No se pudo cargar el panel demo</div>
            <div class="alert-d">${esc(err.message || err)}</div></div></div>`;
    });
})();
</script>
@endpush