@extends('layouts.goberdata')

@section('title', 'Panel general')
@section('page_title', 'Panel general')
@section('page_sub', 'Tu trabajo de campo esta semana')

@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="volDashRoot"><div class="empty" style="padding:40px">Cargando…</div></div>
@endsection

@push('scripts')
<script>
(function () {
    const ALIASES = @json(config('goberdata_menu.aliases', []));
    let DATA = null;
    let userName = 'Paola Rincón';

    function esc(s) {
        return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
    }
    function resolveUser() {
        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();
        const role = ALIASES[raw] || raw;
        if (role && role !== 'voluntario') {
            location.replace('{{ url('/dashboard') }}');
            return;
        }
        if ((user.email || '').includes('voluntario') || !user.name) userName = 'Paola Rincón';
        else userName = user.name;
    }
    function mias() {
        return (DATA.tareas || []).filter(t => t.asignado_a === userName);
    }
    function comuna(id) {
        return (DATA.comunas || []).find(c => c.id === id)?.nombre || '—';
    }
    function render() {
        const tasks = mias();
        const pending = tasks.filter(t => t.estado === 'pending');
        const progress = tasks.filter(t => t.estado === 'in_progress');
        const done = tasks.filter(t => t.estado === 'completed');
        const hours = done.reduce((s, t) => s + (t.horas_real || 0), 0);
        const types = {};
        tasks.forEach(t => {
            const label = (DATA.tarea_tipos || {})[t.tipo] || t.tipo;
            types[label] = (types[label] || 0) + 1;
        });

        document.getElementById('volDashRoot').innerHTML = `
        <div class="alert a-ok"><i class="fas fa-check"></i><div>
            <div class="alert-t">Hola, ${esc(userName.split(' ')[0])}</div>
            <div class="alert-d">${pending.length + progress.length} tareas abiertas · ${done.length} cerradas · datos demo del HTML</div>
        </div></div>
        <div class="grid g4" style="margin-bottom:14px">
            <div class="kpi" style="--accent:var(--cian)"><div class="kpi-l">Mis tareas</div><div class="kpi-v">${tasks.length}</div><div class="kpi-sub">Asignadas</div></div>
            <div class="kpi" style="--accent:var(--ok)"><div class="kpi-l">Completadas</div><div class="kpi-v">${done.length}</div><div class="kpi-sub">Cierre de campo</div></div>
            <div class="kpi" style="--accent:var(--amber)"><div class="kpi-l">Pendientes</div><div class="kpi-v">${pending.length}</div><div class="kpi-sub">Por iniciar</div></div>
            <div class="kpi" style="--accent:var(--violet)"><div class="kpi-l">Horas</div><div class="kpi-v">${hours}</div><div class="kpi-sub">Reportadas</div></div>
        </div>
        <div class="grid g2" style="margin-bottom:14px">
            <div class="card"><div class="card-h"><div><div class="card-t">Distribución</div><div class="card-s">Por tipo</div></div></div>
                <div class="card-b"><div style="height:220px"><canvas id="chartTypes"></canvas></div></div></div>
            <div class="card"><div class="card-h"><div><div class="card-t">Estado</div><div class="card-s">Resumen</div></div>
                <div class="right"><a class="btn btn-primary btn-sm" href="{{ url('/tasks') }}">Ver mis tareas</a></div></div>
                <div class="card-b"><div style="height:220px"><canvas id="chartStatus"></canvas></div></div></div>
        </div>
        <div class="card">
            <div class="card-h"><div><div class="card-t">Lo que sigue</div><div class="card-s">Próximas asignaciones</div></div></div>
            <div class="card-b" style="padding:0">
                ${[...pending, ...progress].slice(0, 8).map(t => `
                    <div style="padding:12px 16px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;gap:12px">
                        <div><div style="font-weight:600;font-size:13px">${esc(t.titulo)}</div>
                            <div style="font-size:11px;color:var(--muted-2);margin-top:3px">${esc(t.lugar)} · ${esc(comuna(t.comuna_id))} · vence ${esc(t.vence)}</div></div>
                        <span class="pill ${t.estado === 'in_progress' ? 'p-info' : 'p-mute'}">${esc((DATA.tarea_estados || {})[t.estado] || t.estado)}</span>
                    </div>`).join('') || '<div class="empty">Sin tareas abiertas</div>'}
            </div>
        </div>`;

        if (window.Chart) {
            new Chart(document.getElementById('chartTypes'), {
                type: 'doughnut',
                data: { labels: Object.keys(types), datasets: [{ data: Object.values(types), backgroundColor: ['#00D4E6','#37D399','#FFB020','#A77BFF','#FF3D77','#8B9AA8'] }] },
                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { labels: { color: '#8B9AA8' } } } }
            });
            new Chart(document.getElementById('chartStatus'), {
                type: 'bar',
                data: { labels: ['Por hacer', 'En curso', 'Hechas'], datasets: [{ data: [pending.length, progress.length, done.length], backgroundColor: ['#8B9AA8','#00D4E6','#37D399'] }] },
                options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } },
                    scales: { x: { ticks: { color: '#8B9AA8' }, grid: { color: '#1B242D' } }, y: { ticks: { color: '#8B9AA8' }, grid: { color: '#1B242D' } } } }
            });
        }
    }
    resolveUser();
    fetch('{{ url('/js/demo-campaign.json') }}').then(r => r.json()).then(d => { DATA = d; render(); })
        .catch(e => { document.getElementById('volDashRoot').innerHTML = `<div class="alert a-bad"><div class="alert-t">${esc(e.message)}</div></div>`; });
})();
</script>
@endpush