@extends('layouts.goberdata')

@section('title', 'Tareas')
@section('page_title', 'Tareas')
@section('page_sub', 'Asignación y seguimiento del trabajo de campo')

@section('content')
<div id="tasksRoot">
    <div class="empty" style="padding:40px">Cargando tablero de tareas…</div>
</div>
<div id="toastWrap" class="toast-wrap"></div>
<div id="modalHost"></div>
@endsection

@push('scripts')
<script>
(function () {
    const HOY = '2026-07-23';
    const T_COLS = ['pending', 'in_progress', 'completed'];
    const T_COLOR = { low: 'var(--muted-2)', medium: 'var(--cian)', high: 'var(--amber)', urgent: 'var(--magenta)' };
    const ALIASES = @json(config('goberdata_menu.aliases', []));

    let DATA = null;
    let vista = 'kanban';
    let filtro = { equipo: 'all', tipo: 'all', prioridad: 'all', soloMias: false };
    let dragId = null;
    let role = 'territorial';
    let userName = '';

    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) { return (Math.round(n * 10) / 10).toFixed(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 fechaCorta(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]}`;
    }
    function initials(name) {
        return String(name || '').split(/\s+/).map(x => x[0]).filter(Boolean).slice(0, 2).join('').toUpperCase();
    }
    function comuna(id) {
        return (DATA.comunas || []).find(c => c.id === id) || { nombre: '—' };
    }
    function vencida(t) {
        return t.vence < HOY && (t.estado === 'pending' || t.estado === 'in_progress');
    }
    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(), 2800);
    }
    function resolveRole() {
        let user = {};
        try { user = JSON.parse(localStorage.getItem('user') || '{}'); } catch (_) {}
        userName = user.name || user.nombre || '';
        const roles = user.roles || (user.role ? [user.role] : []);
        let raw = (roles[0] || user.role || '').toLowerCase();
        role = ALIASES[raw] || raw || 'territorial';
        // Match demo names to assignee when email users differ
        if (!userName && role === 'territorial') userName = 'Laura Sepúlveda';
        if (!userName && role === 'voluntario') userName = 'Paola Rincón';
        return role;
    }
    function esVoluntario() { return role === 'voluntario'; }

    function tareasFiltradas() {
        return (DATA.tareas || []).filter(t => {
            if (t.estado === 'cancelled') return false;
            if (filtro.soloMias && t.asignado_a !== userName) return false;
            if (filtro.equipo !== 'all' && t.equipo !== filtro.equipo) return false;
            if (filtro.tipo !== 'all' && t.tipo !== filtro.tipo) return false;
            if (filtro.prioridad !== 'all' && t.prioridad !== filtro.prioridad) return false;
            return true;
        });
    }
    function misTareas() {
        return (DATA.tareas || []).filter(t => t.asignado_a === userName);
    }

    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 tarjetaTarea(t) {
        const v = vencida(t);
        const b = t.brigada_id ? (DATA.brigadas || []).find(x => x.id === t.brigada_id) : null;
        return `<article class="kan-card ${v ? 'late' : ''}" draggable="true"
            data-id="${t.id}" ondragstart="GDTasks.kanStart(event,${t.id})" ondragend="GDTasks.kanEnd(event)"
            onclick="GDTasks.verTarea(${t.id})" tabindex="0">
            <div class="kan-top">
                <span class="prio" style="background:${T_COLOR[t.prioridad] || 'var(--muted-2)'}"></span>
                <span class="kan-tipo">${esc((DATA.tarea_tipos || {})[t.tipo] || t.tipo)}</span>
                ${v ? `<span class="pill p-bad" style="margin-left:auto">Atrasada</span>` : ''}
            </div>
            <div class="kan-t">${esc(t.titulo)}</div>
            <div class="kan-meta">
                <span><i class="fas fa-map-marker-alt"></i> ${esc(comuna(t.comuna_id).nombre)}</span>
                <span class="num" style="color:${v ? 'var(--bad)' : 'var(--muted-2)'}">${fechaCorta(t.vence)}</span>
            </div>
            ${b ? `<div class="kan-brig">${esc(b.nombre)}</div>` : ''}
            <div class="kan-foot">
                <span class="mini-av">${esc(initials(t.asignado_a))}</span>
                <span class="kan-who">${esc(t.asignado_a)}</span>
                <span class="num kan-h2">${t.horas_est}h</span>
            </div>
        </article>`;
    }

    function kanbanHTML() {
        const ts = tareasFiltradas();
        return `<div class="kan">${T_COLS.map(col => {
            const items = ts.filter(t => t.estado === col).sort((a, b) => String(a.vence).localeCompare(String(b.vence)));
            const color = col === 'pending' ? 'var(--muted-2)' : col === 'in_progress' ? 'var(--cian)' : 'var(--ok)';
            return `<div class="kan-col" data-col="${col}"
                ondragover="GDTasks.kanOver(event)" ondragleave="GDTasks.kanLeave(event)" ondrop="GDTasks.kanDrop(event,'${col}')">
                <div class="kan-h">
                    <span class="kan-dot" style="background:${color}"></span>
                    <span>${esc((DATA.tarea_estados || {})[col] || col)}</span>
                    <span class="kan-n">${items.length}</span>
                </div>
                <div class="kan-body">
                    ${items.length ? items.map(tarjetaTarea).join('') : `<div class="kan-empty">Arrastra una tarea aquí</div>`}
                </div>
            </div>`;
        }).join('')}</div>`;
    }

    function listaHTML() {
        const ts = tareasFiltradas().sort((a, b) => {
            if (vencida(a) !== vencida(b)) return vencida(a) ? -1 : 1;
            return String(a.vence).localeCompare(String(b.vence));
        });
        return `<div class="card">
            <div class="card-h"><div><div class="card-t">Tareas</div>
                <div class="card-s">${ts.length} visibles con los filtros actuales</div></div></div>
            <div class="tbl-wrap" style="max-height:620px;overflow-y:auto">
                <table class="tbl"><thead><tr>
                    <th style="width:34px"></th><th>Tarea</th><th>Tipo</th><th>Responsable</th>
                    <th>Comuna</th><th>Vence</th><th class="t-right">Horas</th><th>Prioridad</th><th>Estado</th>
                </tr></thead>
                <tbody>${ts.map(t => {
                    const v = vencida(t);
                    return `<tr style="cursor:pointer" onclick="GDTasks.verTarea(${t.id})">
                        <td class="t-center" onclick="event.stopPropagation()">
                            <input type="checkbox" ${t.estado === 'completed' ? 'checked' : ''} style="accent-color:var(--ok)"
                                onchange="GDTasks.mover(${t.id}, this.checked?'completed':'pending')">
                        </td>
                        <td><b style="${t.estado === 'completed' ? 'color:var(--muted-2);text-decoration:line-through' : ''}">${esc(t.titulo)}</b>
                            <div style="font-size:10.5px;color:var(--muted-2)">${esc(t.lugar)}</div></td>
                        <td><span class="pill p-mute">${esc((DATA.tarea_tipos || {})[t.tipo] || t.tipo)}</span></td>
                        <td style="font-size:12px">${esc(t.asignado_a)}</td>
                        <td style="font-size:11.5px">${esc(comuna(t.comuna_id).nombre)}</td>
                        <td class="num" style="font-size:11.5px;color:${v ? 'var(--bad)' : 'var(--muted)'}">${fecha(t.vence)}${v ? ' ⚠' : ''}</td>
                        <td class="t-right num">${t.horas_real ?? t.horas_est}h</td>
                        <td><span class="pill" style="background:${T_COLOR[t.prioridad]}22;color:${T_COLOR[t.prioridad]}">${esc((DATA.tarea_prios || {})[t.prioridad] || t.prioridad)}</span></td>
                        <td><span class="pill ${t.estado === 'completed' ? 'p-ok' : t.estado === 'in_progress' ? 'p-info' : 'p-mute'}">${esc((DATA.tarea_estados || {})[t.estado] || t.estado)}</span></td>
                    </tr>`;
                }).join('') || '<tr><td colspan="9" class="empty">Ninguna tarea coincide con los filtros</td></tr>'}
                </tbody></table>
            </div></div>`;
    }

    function brigadasHTML() {
        return `<div class="grid g2">${(DATA.brigadas || []).map(b => {
            const p = b.meta ? (b.avance / b.meta * 100) : 0;
            const tareasB = (DATA.tareas || []).filter(t => t.brigada_id === b.id);
            const cerradas = tareasB.filter(t => t.estado === 'completed').length;
            const barColor = p > 70 ? 'var(--ok)' : p > 40 ? 'var(--cian)' : 'var(--amber)';
            return `<div class="card">
                <div class="card-h"><div style="flex:1">
                    <div class="card-t">${esc(b.nombre)}</div>
                    <div class="card-s">${esc(b.descripcion || '')}</div></div>
                    <span class="pill" style="background:${T_COLOR[b.prioridad]}22;color:${T_COLOR[b.prioridad]}">${esc((DATA.tarea_prios || {})[b.prioridad] || b.prioridad)}</span>
                </div>
                <div class="card-b">
                    <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px">
                        <span class="eyebrow">Avance</span>
                        <span class="num" style="font-size:15px;color:${barColor}">${fmtN(b.avance)} <span style="color:var(--muted-2);font-size:11px">/ ${fmtN(b.meta)}</span></span>
                    </div>
                    <div class="bar" style="height:7px"><i style="width:${Math.min(100, p)}%;background:${barColor}"></i></div>
                    <div class="grid g3" style="margin-top:14px;gap:9px">
                        <div><div class="eyebrow">Equipo</div><div style="font-size:12px;font-weight:600;margin-top:2px">${esc(b.equipo)}</div></div>
                        <div><div class="eyebrow">Integrantes</div><div class="num" style="font-size:13px;margin-top:2px">${b.integrantes}</div></div>
                        <div><div class="eyebrow">Cierra</div><div class="num" style="font-size:12px;margin-top:2px">${fecha(b.vence)}</div></div>
                    </div>
                    ${tareasB.length ? `<div style="margin-top:13px;padding-top:11px;border-top:1px solid var(--line-soft);font-size:11.5px;color:var(--muted)">${cerradas} de ${tareasB.length} tareas asociadas cerradas</div>` : ''}
                </div>
            </div>`;
        }).join('')}</div>`;
    }

    function boardHTML() {
        const ts = (DATA.tareas || []).filter(t => t.estado !== 'cancelled');
        const venc = ts.filter(vencida);
        const hechas = ts.filter(t => t.estado === 'completed');
        const curso = ts.filter(t => t.estado === 'in_progress');
        const horasEst = ts.reduce((a, t) => a + (t.horas_est || 0), 0);
        const zonas = [...new Set(venc.map(t => comuna(t.comuna_id).nombre))].slice(0, 3).join(', ');

        return `
        ${venc.length ? `<div class="alert a-warn"><i class="fas fa-clock"></i><div>
            <div class="alert-t">${venc.length} tareas pasadas de fecha sin cerrar</div>
            <div class="alert-d">Concentradas en ${esc(zonas)}. Revísalas con el coordinador territorial antes de asignar trabajo nuevo.</div>
        </div></div>` : ''}

        <div class="grid g4" style="margin-bottom:14px">
            ${kpi('Tareas abiertas', fmtN(ts.length - hechas.length), `${curso.length} en curso ahora`, 'var(--cian)')}
            ${kpi('Cerradas', fmtN(hechas.length), `${fmtPct(hechas.length / Math.max(1, ts.length) * 100)} del total asignado`, 'var(--lime)')}
            ${kpi('Pasadas de fecha', fmtN(venc.length), venc.length ? 'Requieren reasignación' : 'Todo al día', venc.length ? 'var(--bad)' : 'var(--ok)')}
            ${kpi('Horas planeadas', fmtN(Math.round(horasEst)), `Promedio ${(horasEst / Math.max(1, ts.length)).toFixed(1)} h por tarea`, 'var(--violet)')}
        </div>

        <div class="tabs">
            <button class="tab ${vista === 'kanban' ? 'on' : ''}" data-v="kanban">Tablero</button>
            <button class="tab ${vista === 'lista' ? 'on' : ''}" data-v="lista">Lista</button>
            <button class="tab ${vista === 'brigadas' ? 'on' : ''}" data-v="brigadas">Brigadas</button>
        </div>

        <div class="toolbar">
            <button class="btn btn-primary btn-sm" type="button" onclick="GDTasks.nuevaTarea()"><i class="fas fa-plus"></i> Crear tarea</button>
            <select class="sel" id="fEquipo">
                <option value="all">Todos los equipos</option>
                ${(DATA.equipos || []).map(e => `<option value="${esc(e)}" ${filtro.equipo === e ? 'selected' : ''}>${esc(e)}</option>`).join('')}
            </select>
            <select class="sel" id="fTipo">
                <option value="all">Todo tipo de tarea</option>
                ${Object.entries(DATA.tarea_tipos || {}).map(([k, v]) => `<option value="${k}" ${filtro.tipo === k ? 'selected' : ''}>${esc(v)}</option>`).join('')}
            </select>
            <select class="sel" id="fPrio">
                <option value="all">Toda prioridad</option>
                ${Object.entries(DATA.tarea_prios || {}).map(([k, v]) => `<option value="${k}" ${filtro.prioridad === k ? 'selected' : ''}>${esc(v)}</option>`).join('')}
            </select>
            <label class="chk" style="align-items:center;margin-left:4px">
                <input type="checkbox" id="fMias" ${filtro.soloMias ? 'checked' : ''}>
                <span style="font-size:12px">Solo las mías</span>
            </label>
            <button class="btn btn-ghost btn-sm" style="margin-left:auto" type="button" onclick="GDTasks.exportCSV()"><i class="fas fa-download"></i> CSV</button>
        </div>

        ${vista === 'kanban' ? kanbanHTML() : vista === 'lista' ? listaHTML() : brigadasHTML()}`;
    }

    function misHTML() {
        const mias = misTareas();
        const abiertas = mias.filter(t => t.estado !== 'completed' && t.estado !== 'cancelled')
            .sort((a, b) => String(a.vence).localeCompare(String(b.vence)));
        const hechas = mias.filter(t => t.estado === 'completed');
        const venc = abiertas.filter(vencida);
        const horas = hechas.reduce((a, t) => a + (t.horas_real || 0), 0);
        const first = (userName || 'Voluntario').split(' ')[0];

        return `
        <div class="alert ${venc.length ? 'a-warn' : 'a-ok'}"><i class="fas fa-${venc.length ? 'clock' : 'check'}"></i><div>
            <div class="alert-t">${venc.length ? `Tienes ${venc.length} tarea${venc.length > 1 ? 's' : ''} pasada${venc.length > 1 ? 's' : ''} de fecha` : `Vas al día, ${esc(first)}`}</div>
            <div class="alert-d">${abiertas.length} abierta${abiertas.length !== 1 ? 's' : ''} · ${hechas.length} cerrada${hechas.length !== 1 ? 's' : ''} · ${fmtN(horas)} horas registradas</div>
        </div></div>

        <div class="grid g3" style="margin-bottom:14px">
            ${kpi('Por hacer', fmtN(abiertas.length), venc.length ? `${venc.length} atrasada${venc.length > 1 ? 's' : ''}` : 'Todo dentro de fecha', venc.length ? 'var(--amber)' : 'var(--cian)')}
            ${kpi('Cerradas', fmtN(hechas.length), 'Gracias por el trabajo', 'var(--lime)')}
            ${kpi('Horas registradas', fmtN(horas), 'Suman al total del equipo', 'var(--violet)')}
        </div>

        <div class="card" style="margin-bottom:14px">
            <div class="card-h"><div><div class="card-t">Lo que sigue</div>
                <div class="card-s">Ordenado por fecha de vencimiento</div></div></div>
            <div class="card-b" style="padding:0">
                ${abiertas.length ? abiertas.map(t => {
                    const v = vencida(t);
                    return `<div style="display:flex;gap:13px;padding:14px 16px;border-bottom:1px solid var(--line-soft);align-items:flex-start">
                        <button type="button" onclick="GDTasks.mover(${t.id},'completed')" title="Marcar como hecha"
                            style="width:22px;height:22px;flex:0 0 22px;border:1.6px solid var(--line);border-radius:50%;margin-top:1px;background:transparent;color:var(--ok);cursor:pointer">
                            <i class="fas fa-check" style="font-size:10px"></i></button>
                        <div style="flex:1;min-width:0">
                            <div style="font-size:13.5px;font-weight:600;line-height:1.35;cursor:pointer" onclick="GDTasks.verTarea(${t.id})">${esc(t.titulo)}</div>
                            <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:5px;font-size:11.5px;color:var(--muted-2)">
                                <span><i class="fas fa-map-marker-alt"></i> ${esc(t.lugar)}, ${esc(comuna(t.comuna_id).nombre)}</span>
                                <span class="num" style="color:${v ? 'var(--bad)' : 'var(--muted-2)'}"><i class="fas fa-clock"></i> ${v ? 'Venció el ' : 'Vence el '}${fecha(t.vence)}</span>
                                <span>${t.horas_est}h estimadas</span>
                            </div>
                            <div style="margin-top:7px;font-size:11px;color:var(--muted-2)">Te la asignó ${esc(t.asignado_por)}</div>
                        </div>
                        <div style="display:flex;flex-direction:column;gap:5px;align-items:flex-end">
                            <span class="pill" style="background:${T_COLOR[t.prioridad]}22;color:${T_COLOR[t.prioridad]}">${esc((DATA.tarea_prios || {})[t.prioridad] || t.prioridad)}</span>
                            ${t.estado === 'in_progress' ? '<span class="pill p-info">En curso</span>' : ''}
                        </div>
                    </div>`;
                }).join('') : `<div class="empty"><div class="empty-t">No tienes tareas pendientes</div>
                    <div style="font-size:12px">Tu coordinador te asignará trabajo nuevo pronto.</div></div>`}
            </div>
        </div>

        ${hechas.length ? `<div class="card">
            <div class="card-h"><div><div class="card-t">Ya cerradas</div>
                <div class="card-s">Historial de tu trabajo</div></div></div>
            <div class="card-b" style="padding:0">
                ${hechas.map(t => `<div style="display:flex;gap:13px;padding:11px 16px;border-bottom:1px solid var(--line-soft);align-items:center">
                    <span style="color:var(--ok)"><i class="fas fa-check"></i></span>
                    <div style="flex:1;min-width:0">
                        <div style="font-size:12.5px;color:var(--muted);text-decoration:line-through">${esc(t.titulo)}</div>
                        <div style="font-size:10.5px;color:var(--muted-2);margin-top:2px">${esc(comuna(t.comuna_id).nombre)} · cerrada el ${fecha(t.completada || t.vence)}</div>
                    </div>
                    <span class="num" style="font-size:11.5px;color:var(--muted-2)">${t.horas_real || t.horas_est}h</span>
                </div>`).join('')}
            </div></div>` : ''}`;
    }

    function bindBoardControls() {
        document.querySelectorAll('.tab[data-v]').forEach(btn => {
            btn.addEventListener('click', () => { vista = btn.dataset.v; render(); });
        });
        const eq = document.getElementById('fEquipo');
        const tp = document.getElementById('fTipo');
        const pr = document.getElementById('fPrio');
        const mi = document.getElementById('fMias');
        if (eq) eq.onchange = () => { filtro.equipo = eq.value; render(); };
        if (tp) tp.onchange = () => { filtro.tipo = tp.value; render(); };
        if (pr) pr.onchange = () => { filtro.prioridad = pr.value; render(); };
        if (mi) mi.onchange = () => { filtro.soloMias = mi.checked; render(); };
    }

    function render() {
        const root = document.getElementById('tasksRoot');
        if (esVoluntario()) {
            document.getElementById('gdPageTitle') && (document.getElementById('gdPageTitle').textContent = 'Mis tareas');
            document.getElementById('gdPageSub') && (document.getElementById('gdPageSub').textContent = 'Lo que tienes asignado esta semana');
            root.innerHTML = misHTML();
        } else {
            document.getElementById('gdPageTitle') && (document.getElementById('gdPageTitle').textContent = 'Tareas');
            document.getElementById('gdPageSub') && (document.getElementById('gdPageSub').textContent = 'Asignación y seguimiento del trabajo de campo');
            root.innerHTML = boardHTML();
            bindBoardControls();
        }
    }

    function cerrarModal() {
        document.getElementById('modalHost').innerHTML = '';
    }
    function modal(title, body, footer) {
        document.getElementById('modalHost').innerHTML = `
            <div class="modal-bg on" onclick="if(event.target===this)GDTasks.cerrarModal()">
                <div class="modal" role="dialog">
                    <div class="modal-h"><div class="card-t" style="flex:1">${title}</div>
                        <button type="button" class="btn btn-ghost btn-sm" onclick="GDTasks.cerrarModal()">✕</button></div>
                    <div class="modal-b">${body}</div>
                    <div class="modal-f">${footer || ''}</div>
                </div>
            </div>`;
    }

    function mover(id, col) {
        const t = (DATA.tareas || []).find(x => x.id === id);
        if (!t || t.estado === col) return;
        const antes = (DATA.tarea_estados || {})[t.estado] || t.estado;
        t.estado = col;
        if (col === 'completed') {
            t.completada = HOY;
            if (!t.horas_real) t.horas_real = t.horas_est;
        } else {
            t.completada = null;
        }
        cerrarModal();
        render();
        toast(`<b>${esc(t.titulo.slice(0, 38))}${t.titulo.length > 38 ? '…' : ''}</b><br>
            <span style="color:var(--muted-2);font-size:11px">${esc(antes)} → ${esc((DATA.tarea_estados || {})[col] || col)}</span>`);
    }

    function verTarea(id) {
        const t = (DATA.tareas || []).find(x => x.id === id);
        if (!t) return;
        const v = vencida(t);
        const b = t.brigada_id ? (DATA.brigadas || []).find(x => x.id === t.brigada_id) : null;
        const puede = ['candidato', 'gerente', 'territorial', 'voluntario'].includes(role);
        modal(esc(t.titulo), `
            <div style="display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px">
                <span class="pill" style="background:${T_COLOR[t.prioridad]}22;color:${T_COLOR[t.prioridad]}">${esc((DATA.tarea_prios || {})[t.prioridad] || t.prioridad)}</span>
                <span class="pill p-mute">${esc((DATA.tarea_tipos || {})[t.tipo] || t.tipo)}</span>
                <span class="pill ${t.estado === 'completed' ? 'p-ok' : t.estado === 'in_progress' ? 'p-info' : 'p-mute'}">${esc((DATA.tarea_estados || {})[t.estado] || t.estado)}</span>
                ${v ? '<span class="pill p-bad">Pasada de fecha</span>' : ''}
            </div>
            <div class="grid g2" style="gap:14px">
                <div><div class="eyebrow">Responsable</div><div style="font-weight:600;margin-top:3px">${esc(t.asignado_a)}</div>
                    <div style="font-size:11px;color:var(--muted-2)">${esc(t.equipo)}</div></div>
                <div><div class="eyebrow">Asignada por</div><div style="font-weight:600;margin-top:3px">${esc(t.asignado_por)}</div>
                    <div style="font-size:11px;color:var(--muted-2)">el ${fecha(t.creada)}</div></div>
                <div><div class="eyebrow">Lugar</div><div style="font-weight:600;margin-top:3px">${esc(t.lugar)}</div>
                    <div style="font-size:11px;color:var(--muted-2)">${esc(comuna(t.comuna_id).nombre)}</div></div>
                <div><div class="eyebrow">Vence</div>
                    <div class="num" style="font-weight:600;margin-top:3px;color:${v ? 'var(--bad)' : 'var(--paper)'}">${fecha(t.vence)}</div></div>
                <div><div class="eyebrow">Horas estimadas</div><div class="num" style="font-weight:600;margin-top:3px">${t.horas_est}h</div></div>
                <div><div class="eyebrow">Horas registradas</div>
                    <div class="num" style="font-weight:600;margin-top:3px;color:${t.horas_real ? 'var(--cian)' : 'var(--muted-2)'}">${t.horas_real ? t.horas_real + 'h' : 'Sin registrar'}</div></div>
            </div>
            ${b ? `<div style="margin-top:16px;padding:12px;background:var(--ink-3);border-radius:4px">
                <div class="eyebrow">Parte de la brigada</div>
                <div style="font-weight:600;margin-top:3px;font-size:13px">${esc(b.nombre)}</div>
                <div class="bar" style="margin-top:8px"><i style="width:${b.meta ? Math.min(100, b.avance / b.meta * 100) : 0}%"></i></div>
            </div>` : ''}
        `, puede ? `
            ${t.estado !== 'pending' ? `<button class="btn btn-ghost" type="button" onclick="GDTasks.mover(${t.id},'pending')">Devolver a Por hacer</button>` : ''}
            ${t.estado !== 'in_progress' ? `<button class="btn btn-ghost" type="button" onclick="GDTasks.mover(${t.id},'in_progress')">Marcar en curso</button>` : ''}
            ${t.estado !== 'completed' ? `<button class="btn btn-primary" type="button" onclick="GDTasks.mover(${t.id},'completed')"><i class="fas fa-check"></i> Marcar como hecha</button>` : ''}
        ` : `<button class="btn btn-ghost" type="button" onclick="GDTasks.cerrarModal()">Cerrar</button>`);
    }

    function nuevaTarea() {
        const vols = (DATA.voluntarios || []).filter(v => v.estado === 'Activo').slice(0, 60);
        modal('Crear tarea', `
            <div class="field"><label>Qué hay que hacer</label>
                <input class="input" id="ntT" placeholder="Recorrer manzanas 1 a 6 del barrio Kennedy"></div>
            <div class="grid g2" style="gap:12px">
                <div class="field"><label>Tipo</label><select class="sel" id="ntTipo" style="width:100%">
                    ${Object.entries(DATA.tarea_tipos || {}).map(([k, v]) => `<option value="${k}">${esc(v)}</option>`).join('')}</select></div>
                <div class="field"><label>Prioridad</label><select class="sel" id="ntPrio" style="width:100%">
                    ${Object.entries(DATA.tarea_prios || {}).map(([k, v]) => `<option value="${k}" ${k === 'medium' ? 'selected' : ''}>${esc(v)}</option>`).join('')}</select></div>
            </div>
            <div class="field"><label>Responsable</label><select class="sel" id="ntQuien" style="width:100%">
                ${vols.map(v => `<option value="${v.id}">${esc(v.nombre)} — ${esc(v.equipo || '')}</option>`).join('')}</select></div>
            <div class="grid g2" style="gap:12px">
                <div class="field"><label>Comuna</label><select class="sel" id="ntCom" style="width:100%">
                    ${(DATA.comunas || []).map(c => `<option value="${c.id}">${esc(c.nombre)}</option>`).join('')}</select></div>
                <div class="field"><label>Vence el</label><input class="input" id="ntVence" type="date" value="2026-08-05"></div>
            </div>
            <div class="field"><label>Horas estimadas</label><input class="input" id="ntHoras" type="number" step="0.5" value="3"></div>
        `, `<button class="btn btn-ghost" type="button" onclick="GDTasks.cerrarModal()">Cancelar</button>
            <button class="btn btn-primary" type="button" onclick="GDTasks.guardarTarea()">Crear y asignar</button>`);
    }

    function guardarTarea() {
        const titulo = (document.getElementById('ntT')?.value || '').trim();
        if (!titulo) { toast('Escribe qué hay que hacer'); return; }
        const vid = +document.getElementById('ntQuien').value;
        const vol = (DATA.voluntarios || []).find(x => x.id === vid) || (DATA.voluntarios || [])[0];
        const id = Math.max(0, ...(DATA.tareas || []).map(t => t.id)) + 1;
        DATA.tareas.unshift({
            id, titulo,
            tipo: document.getElementById('ntTipo').value,
            prioridad: document.getElementById('ntPrio').value,
            estado: 'pending',
            asignado_a: vol?.nombre || 'Voluntario',
            asignado_a_id: vol?.id || 0,
            equipo: vol?.equipo || 'Puerta a Puerta',
            asignado_por: userName || 'Laura Sepúlveda',
            comuna_id: +document.getElementById('ntCom').value,
            lugar: comuna(+document.getElementById('ntCom').value).nombre,
            vence: document.getElementById('ntVence').value,
            horas_est: +document.getElementById('ntHoras').value || 3,
            horas_real: null, creada: HOY, brigada_id: null, completada: null, vinculo: null
        });
        cerrarModal();
        render();
        toast(`Tarea creada y asignada a <b>${esc(vol?.nombre || '')}</b>`);
    }

    function exportCSV() {
        const rows = [['ID', 'Tarea', 'Tipo', 'Estado', 'Prioridad', 'Responsable', 'Equipo', 'Comuna', 'Vence', 'Horas']];
        tareasFiltradas().forEach(t => {
            rows.push([t.id, t.titulo, (DATA.tarea_tipos || {})[t.tipo], (DATA.tarea_estados || {})[t.estado],
                (DATA.tarea_prios || {})[t.prioridad], t.asignado_a, t.equipo, comuna(t.comuna_id).nombre, t.vence, t.horas_est]);
        });
        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 = 'tareas-goberdata.csv';
        a.click();
    }

    window.GDTasks = {
        kanStart(e, id) { dragId = id; e.currentTarget.classList.add('dragging'); e.dataTransfer.effectAllowed = 'move'; },
        kanEnd(e) { e.currentTarget.classList.remove('dragging'); document.querySelectorAll('.kan-col').forEach(c => c.classList.remove('over')); },
        kanOver(e) { e.preventDefault(); e.currentTarget.classList.add('over'); },
        kanLeave(e) { e.currentTarget.classList.remove('over'); },
        kanDrop(e, col) { e.preventDefault(); e.currentTarget.classList.remove('over'); if (dragId != null) mover(dragId, col); dragId = null; },
        mover, verTarea, nuevaTarea, guardarTarea, exportCSV, cerrarModal, render
    };

    async function boot() {
        resolveRole();
        // Map demo assignee for known demo emails
        try {
            const user = JSON.parse(localStorage.getItem('user') || '{}');
            const email = (user.email || '').toLowerCase();
            if (email.includes('territorial')) userName = 'Laura Sepúlveda';
            if (email.includes('voluntario')) userName = 'Paola Rincón';
            if (email.includes('gerente')) userName = 'Marcela Peñaloza';
            if (email.includes('candidato')) userName = 'Camilo Restrepo Ayala';
            if (email.includes('digital')) userName = 'Andrés Quintero';
            if (email.includes('tesorero')) userName = 'Julián Ardila Gómez';
        } catch (_) {}

        const res = await fetch('{{ url('/js/demo-campaign.json') }}');
        DATA = await res.json();
        if (!DATA.tarea_prios) {
            DATA.tarea_prios = { low: 'Baja', medium: 'Media', high: 'Alta', urgent: 'Urgente' };
        }
        render();
    }
    boot().catch(err => {
        document.getElementById('tasksRoot').innerHTML = `<div class="alert a-bad"><div>
            <div class="alert-t">No se pudo cargar el tablero demo</div>
            <div class="alert-d">${esc(err.message || err)}</div></div></div>`;
    });
})();
</script>
@endpush