// Componentes y utilidades compartidas del panel
const S = window.GuacaStore;

function StatusPill({ id, short }) {
  const s = S.STATUS[id];
  return <span className="pill" style={{ color: s.color, background: s.bg }}>{short && s.short ? s.short : s.label}</span>;
}

function initials(name) { return (name || '?').split(' ').filter(Boolean).slice(0, 2).map(w => w[0]).join('').toUpperCase(); }
function Avatar({ uid, size, blue }) {
  const n = S.userName(uid);
  return <span className={'ga-av' + (size === 'sm' ? ' sm' : '') + (blue ? ' blue' : '')} title={n}>{initials(n)}</span>;
}
function Assignee({ uid }) {
  if (!uid) return <span className="ga-unassigned">Sin asignar</span>;
  return <span className="ga-assignee"><Avatar uid={uid} size="sm" blue /> {S.userName(uid)}</span>;
}

const MONTHS = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
const PROVS = ['San José', 'Alajuela', 'Cartago', 'Heredia', 'Guanacaste', 'Puntarenas', 'Limón'];

function computeStats(reqs) {
  const by = Object.fromEntries(S.STATUSES.map(s => [s.id, 0]));
  reqs.forEach(r => by[r.status]++);
  const resolved = reqs.filter(r => r.resolvedAt);
  const avgDays = resolved.length ? resolved.reduce((a, r) => a + (new Date(r.resolvedAt) - new Date(r.createdAt)), 0) / resolved.length / 864e5 : 0;
  const year = 2026;
  const months = MONTHS.map((m, i) => {
    const inM = reqs.filter(r => { const d = new Date(r.createdAt); return d.getFullYear() === year && d.getMonth() === i; });
    const resM = resolved.filter(r => { const d = new Date(r.resolvedAt); return d.getFullYear() === year && d.getMonth() === i; });
    return {
      m, i, total: inM.length,
      by: Object.fromEntries(S.STATUSES.map(s => [s.id, inM.filter(r => r.status === s.id).length])),
      avg: resM.length ? resM.reduce((a, r) => a + (new Date(r.resolvedAt) - new Date(r.createdAt)), 0) / resM.length / 864e5 : null,
    };
  });
  const lastMonth = Math.max(0, ...reqs.map(r => new Date(r.createdAt).getMonth()));
  const prov = PROVS.map(p => ({ p, n: reqs.filter(r => r.negocio.provincia === p).length })).sort((a, b) => b.n - a.n);
  return { total: reqs.length, by, avgDays, months: months.slice(0, lastMonth + 1), prov, resolved: resolved.length };
}

// ---------- Exportación ----------
const EXPORT_COLS = [
  ['Número de solicitud', r => r.id],
  ['Fecha de ingreso', r => new Date(r.createdAt).toLocaleString('es-CR')],
  ['Estado', r => S.STATUS[r.status].label],
  ['Responsable', r => `${r.responsable.firstName} ${r.responsable.lastName}`],
  ['Identificación responsable', r => r.responsable.idNumber],
  ['Correo responsable', r => r.responsable.email],
  ['Teléfono responsable', r => `${r.responsable.phoneCode} ${r.responsable.phone}`],
  ['Negocio', r => r.negocio.name],
  ['Tipo identificación negocio', r => ID_TYPES[r.negocio.idType]],
  ['Identificación negocio', r => r.negocio.idNumber],
  ['Teléfono negocio', r => `${r.negocio.phoneCode} ${r.negocio.phone}`],
  ['Correo facturación', r => r.negocio.email],
  ['Provincia', r => r.negocio.provincia],
  ['Cantón', r => r.negocio.canton],
  ['Distrito', r => r.negocio.distrito],
  ['Dirección', r => r.negocio.direccion],
  ['Asignado a', r => r.assignee ? S.userName(r.assignee) : ''],
  ['Última actualización', r => new Date(r.updatedAt).toLocaleString('es-CR')],
  ['Datos de demostración', r => r.demo ? 'Sí' : 'No'],
];
function download(name, mime, content) {
  const blob = new Blob([content], { type: mime });
  const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name;
  document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 500);
}
function exportCSV(rows) {
  const esc = v => { const s = String(v ?? ''); return /[",;\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s; };
  const csv = '\uFEFF' + [EXPORT_COLS.map(c => c[0]), ...rows.map(r => EXPORT_COLS.map(c => c[1](r)))].map(l => l.map(esc).join(',')).join('\r\n');
  download(`solicitudes-guaca-${new Date().toISOString().slice(0, 10)}.csv`, 'text/csv;charset=utf-8', csv);
}
function exportExcel(rows) {
  const x = s => String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  const row = cells => '<Row>' + cells.map(c => `<Cell><Data ss:Type="String">${x(c)}</Data></Cell>`).join('') + '</Row>';
  const xml = `<?xml version="1.0" encoding="UTF-8"?><?mso-application progid="Excel.Sheet"?>
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
<Styles><Style ss:ID="h"><Font ss:Bold="1" ss:Color="#FFFFFF"/><Interior ss:Color="#2245B3" ss:Pattern="Solid"/></Style></Styles>
<Worksheet ss:Name="Solicitudes"><Table>
<Row>${EXPORT_COLS.map(c => `<Cell ss:StyleID="h"><Data ss:Type="String">${x(c[0])}</Data></Cell>`).join('')}</Row>
${rows.map(r => row(EXPORT_COLS.map(c => c[1](r)))).join('\n')}
</Table></Worksheet></Workbook>`;
  download(`solicitudes-guaca-${new Date().toISOString().slice(0, 10)}.xls`, 'application/vnd.ms-excel', xml);
}

function ExportMenu({ rows, user, toast }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef();
  React.useEffect(() => { const c = e => ref.current && !ref.current.contains(e.target) && setOpen(false); document.addEventListener('mousedown', c); return () => document.removeEventListener('mousedown', c); }, []);
  if (!S.can(user, 'export')) return <button className="btn btn-ghost btn-sm" disabled title="Tu rol no permite exportar"><Icon name="lock" size={16} /> Exportar</button>;
  const go = (fmt) => { (fmt === 'CSV' ? exportCSV : exportExcel)(rows); S.logExport(user, fmt, rows.length); setOpen(false); toast(`Se exportaron ${rows.length} solicitudes (${fmt}).`); };
  return (
    <div className="ga-menu-w" ref={ref}>
      <button className="btn btn-ghost btn-sm" onClick={() => setOpen(!open)}><Icon name="download" size={16} /> Exportar <Icon name="chevronDown" size={14} /></button>
      {open && <div className="ga-menu">
        <button onClick={() => go('Excel')}><Icon name="grid" size={18} /><span>Excel (.xls)<small>{rows.length} filas con los filtros actuales</small></span></button>
        <button onClick={() => go('CSV')}><Icon name="file" size={18} /><span>CSV (.csv)<small>Compatible con cualquier sistema</small></span></button>
      </div>}
    </div>
  );
}

function Toggle({ checked, onChange, disabled, label }) {
  return <label className="ga-switch" title={label}><input type="checkbox" checked={checked} disabled={disabled} onChange={e => onChange(e.target.checked)} aria-label={label} /><span /></label>;
}

Object.assign(window, { StatusPill, Avatar, Assignee, initials, computeStats, MONTHS, PROVS, ExportMenu, Toggle, exportCSV, exportExcel });