/* global React */
// Alertas del sistema — centro de control del administrador.
// Bandeja (lista única con filtros + acciones) + Configuración de reglas.

const { useState: useStateAl, useMemo: useMemoAl } = React;

const SEV_META = {
  dark:   { grupo: 'vencidas',  label: 'Vencida' },
  danger: { grupo: 'urgentes',  label: 'Urgente' },
  warn:   { grupo: 'proximas',  label: 'Recordatorio' },
  info:   { grupo: 'proximas',  label: 'Aviso' },
  muted:  { grupo: 'sistema',   label: 'Sistema' },
};
const SEV_RANK = { dark: 0, danger: 1, warn: 2, info: 3, muted: 4 };
const TIPO_META = {
  vencimiento: { icon: 'Clock',         label: 'Vencimiento' },
  sin_avance:  { icon: 'AlertTriangle', label: 'Sin avance' },
  devolucion:  { icon: 'AlertCircle',   label: 'Devolución' },
  sistema:     { icon: 'Settings',      label: 'Sistema' },
};
function codeLabel(c) { return c === 'sin' ? '—' : c === 'devol' ? '↩' : c; }

function AlertasScreen({ roleId, user, onOpenDetalle }) {
  const I = window.Icons;
  const all = window.getAlertas ? (window.getAlertas(roleId) || []) : (window.ALERTAS_ADMIN || []);
  const org = (user && user.org) || 'Contraloría General de la República';
  const esAdmin = roleId !== 'institucion';

  const [tab, setTab] = useStateAl('bandeja');
  const [readMap, setReadMap] = window.usePersistentState('alertas_read_' + roleId, () => { const m = {}; all.forEach(a => { m[a.id] = a.read; }); return m; });
  const [sel, setSel] = useStateAl({});
  const [q, setQ] = useStateAl('');
  const [sev, setSev] = useStateAl('todas');
  const [tipo, setTipo] = useStateAl('todos');
  const [inst, setInst] = useStateAl('todas');
  const [soloNoLeidas, setSolo] = useStateAl(false);
  const [orden, setOrden] = useStateAl('urgencia');
  const [cfg, setCfg] = window.usePersistentState('alertas_cfg', () => (window.ALERTAS_CONFIG || []).reduce((m, h) => { m[h.code] = h.enabled; return m; }, {}));
  const [pol, setPol] = window.usePersistentState('alertas_pol', { escala: true, copiaAdmin: true, resumen: true });

  const grupoDe = (a) => (SEV_META[a.severity] || SEV_META.info).grupo;
  const isRead = (a) => !!readMap[a.id];

  const counts = useMemoAl(() => {
    const c = { todas: all.length, noLeidas: 0, vencidas: 0, urgentes: 0, proximas: 0, sistema: 0 };
    all.forEach(a => {
      if (!readMap[a.id]) c.noLeidas++;
      const g = grupoDe(a); if (c[g] != null) c[g]++;
    });
    return c;
  }, [all, readMap]);

  const instituciones = useMemoAl(() => {
    const s = []; all.forEach(a => { if (a.institucion && s.indexOf(a.institucion) === -1) s.push(a.institucion); });
    return s.sort();
  }, [all]);

  const filtered = useMemoAl(() => {
    let list = all.filter(a => {
      if (sev !== 'todas' && grupoDe(a) !== sev) return false;
      if (tipo !== 'todos' && a.tipo !== tipo) return false;
      if (inst !== 'todas' && a.institucion !== inst) return false;
      if (soloNoLeidas && readMap[a.id]) return false;
      if (q.trim()) {
        const t = (a.recomendacion + ' ' + a.institucion + ' ' + a.compromisoId).toLowerCase();
        if (t.indexOf(q.trim().toLowerCase()) === -1) return false;
      }
      return true;
    });
    if (orden === 'urgencia') list = [...list].sort((a, b) => (SEV_RANK[a.severity] - SEV_RANK[b.severity]));
    return list;
  }, [all, sev, tipo, inst, soloNoLeidas, q, orden, readMap]);

  const selIds = Object.keys(sel).filter(k => sel[k]);
  const toggleSel = (id) => setSel(s => ({ ...s, [id]: !s[id] }));
  const clearSel = () => setSel({});
  const selectAllVisible = () => { const s = {}; filtered.forEach(a => { s[a.id] = true; }); setSel(s); };
  const toggleRead = (id) => setReadMap(m => ({ ...m, [id]: !m[id] }));
  const markRead = (ids) => setReadMap(m => { const n = { ...m }; ids.forEach(id => { n[id] = true; }); return n; });
  const markAllRead = () => markRead(all.map(a => a.id));

  const limpiarFiltros = () => { setQ(''); setSev('todas'); setTipo('todos'); setInst('todas'); setSolo(false); };

  return (
    <div data-screen-label="03 Alertas del sistema">
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">{org}</div>
          <h1 className="page-head__title">Alertas del sistema</h1>
          <p className="page-head__sub">
            Centro de control de las notificaciones automáticas sobre los plazos de carga de avances.
            Filtra, prioriza y gestiona todas las alertas desde un solo lugar; cada una enlaza al
            compromiso correspondiente.
          </p>
        </div>
        <div className="page-head__actions">
          <button type="button" className="btn btn--ghost" onClick={markAllRead}><I.Eye size={14} /> Marcar todas como leídas</button>
        </div>
      </div>

      {/* Pestañas */}
      <div className="alx-tabs" role="tablist">
        <button type="button" className={`alx-tab${tab === 'bandeja' ? ' is-active' : ''}`} onClick={() => setTab('bandeja')}>
          <I.Bell size={14} /> Bandeja {counts.noLeidas > 0 && <span className="alx-tab__badge">{counts.noLeidas}</span>}
        </button>
        {esAdmin && (
          <button type="button" className={`alx-tab${tab === 'config' ? ' is-active' : ''}`} onClick={() => setTab('config')}>
            <I.Settings size={14} /> Configuración
          </button>
        )}
      </div>

      {tab === 'bandeja' ? (
        <>
          {/* KPIs */}
          <div className="alx-kpis">
            <div className="alx-kpi"><div className="alx-kpi__top"><I.Inbox size={14} /> Sin leer</div><div className="alx-kpi__num">{counts.noLeidas}</div><div className="alx-kpi__sub">de {counts.todas} activas</div></div>
            <div className="alx-kpi is-dark"><div className="alx-kpi__top"><I.AlertTriangle size={14} /> Vencidas</div><div className="alx-kpi__num">{counts.vencidas}</div><div className="alx-kpi__sub">sin avance · escalamiento</div></div>
            <div className="alx-kpi is-danger"><div className="alx-kpi__top"><I.AlertCircle size={14} /> Urgentes</div><div className="alx-kpi__num">{counts.urgentes}</div><div className="alx-kpi__sub">vencen en ≤ 24 h</div></div>
            <div className="alx-kpi is-warn"><div className="alx-kpi__top"><I.Clock size={14} /> Próximas</div><div className="alx-kpi__num">{counts.proximas}</div><div className="alx-kpi__sub">recordatorios y avisos</div></div>
          </div>

          {/* Filtros */}
          <div className="alx-toolbar">
            <div className="alx-search">
              <I.Search size={14} />
              <input type="text" value={q} placeholder="Buscar por recomendación, institución o ID…" onChange={e => setQ(e.target.value)} />
              {q && <button type="button" className="alx-search__clear" aria-label="Limpiar" onClick={() => setQ('')}><I.XCircle size={14} /></button>}
            </div>
            <div className="alx-seg">
              {[
                { v: 'todas', l: 'Todas', n: counts.todas },
                { v: 'vencidas', l: 'Vencidas', n: counts.vencidas },
                { v: 'urgentes', l: 'Urgentes', n: counts.urgentes },
                { v: 'proximas', l: 'Próximas', n: counts.proximas },
                { v: 'sistema', l: 'Sistema', n: counts.sistema },
              ].map(s => (
                <button type="button" key={s.v} className={sev === s.v ? 'is-on' : ''} onClick={() => setSev(s.v)}>{s.l} <span>{s.n}</span></button>
              ))}
            </div>
            <select className="alx-select" value={tipo} onChange={e => setTipo(e.target.value)}>
              <option value="todos">Todos los tipos</option>
              <option value="vencimiento">Vencimiento</option>
              <option value="sin_avance">Sin avance</option>
              <option value="devolucion">Devolución</option>
              <option value="sistema">Sistema</option>
            </select>
            <select className="alx-select" value={inst} onChange={e => setInst(e.target.value)}>
              <option value="todas">Todas las instituciones</option>
              {instituciones.map(i => <option key={i} value={i}>{i}</option>)}
            </select>
            <label className="alx-check"><input type="checkbox" checked={soloNoLeidas} onChange={e => setSolo(e.target.checked)} /> Sin leer</label>
            <select className="alx-select" value={orden} onChange={e => setOrden(e.target.value)}>
              <option value="urgencia">Orden: urgencia</option>
              <option value="recientes">Orden: recientes</option>
            </select>
          </div>

          {/* Barra de selección */}
          {selIds.length > 0 ? (
            <div className="alx-bulk">
              <span><strong>{selIds.length}</strong> seleccionada{selIds.length === 1 ? '' : 's'}</span>
              <div className="alx-bulk__actions">
                <button type="button" className="btn btn--ghost btn--sm" onClick={() => { markRead(selIds); clearSel(); }}><I.Eye size={13} /> Marcar como leídas</button>
                <button type="button" className="btn btn--ghost btn--sm"><I.Send size={13} /> Reenviar</button>
                <button type="button" className="btn btn--ghost btn--sm" onClick={clearSel}>Cancelar</button>
              </div>
            </div>
          ) : (
            <div className="alx-listbar">
              <label className="alx-check"><input type="checkbox" checked={filtered.length > 0 && selIds.length === filtered.length} onChange={e => e.target.checked ? selectAllVisible() : clearSel()} /> Seleccionar todo</label>
              <span className="alx-listbar__count">{filtered.length} de {counts.todas} alertas</span>
              {(q || sev !== 'todas' || tipo !== 'todos' || inst !== 'todas' || soloNoLeidas) && (
                <button type="button" className="alx-listbar__clear" onClick={limpiarFiltros}><I.XCircle size={12} /> Limpiar filtros</button>
              )}
            </div>
          )}

          {/* Lista */}
          {filtered.length === 0 ? (
            <div className="empty">
              <I.Bell size={28} />
              <h4>No hay alertas con estos filtros</h4>
              <p>Ajusta la búsqueda o limpia los filtros para ver el conjunto completo.</p>
            </div>
          ) : (
            <ul className="alx-list">
              {filtered.map(a => (
                <AlxItem key={a.id} a={a} read={isRead(a)} selected={!!sel[a.id]}
                  onToggleSel={() => toggleSel(a.id)} onToggleRead={() => toggleRead(a.id)}
                  onOpen={onOpenDetalle} esAdmin={esAdmin} />
              ))}
            </ul>
          )}
        </>
      ) : (
        <ConfigAlertas cfg={cfg} setCfg={setCfg} pol={pol} setPol={setPol} />
      )}
    </div>
  );
}

// ---------------- Item de alerta ----------------
function AlxItem({ a, read, selected, onToggleSel, onToggleRead, onOpen, esAdmin }) {
  const I = window.Icons;
  const tm = TIPO_META[a.tipo] || { icon: 'Bell', label: 'Notificación' };
  const ICON = I[tm.icon];
  return (
    <li className={`alx-item alx-item--${a.severity}${read ? ' is-read' : ''}${selected ? ' is-selected' : ''}`}>
      <label className="alx-item__sel"><input type="checkbox" checked={selected} onChange={onToggleSel} aria-label="Seleccionar alerta" /></label>
      <span className={`al-code al-code--${a.severity}`}>{codeLabel(a.code)}</span>
      <div className="alx-item__body">
        <div className="alx-item__top">
          <span className={`alx-tipo alx-tipo--${a.tipo}`}><ICON size={11} /> {tm.label}</span>
          <span className={`mech-tag mech-tag--${(a.mecanismo || '').toLowerCase()}`}>{a.mecanismo}</span>
          <span className="alx-item__id mono">{a.compromisoId}</span>
          <span className="alx-item__inst"><I.Building2 size={11} /> {a.institucion}</span>
          {!read && <span className="alx-item__dot" title="Sin leer"></span>}
          <span className="alx-item__time">{a.sentAt}</span>
        </div>
        <button type="button" className="alx-item__title" onClick={() => onOpen && onOpen(a.compromisoId)}>{a.recomendacion}</button>
        <div className="alx-item__msg">{a.msg}</div>
        <div className="alx-item__foot">
          <span className="alx-item__plazo"><I.Calendar size={11} /> Plazo <strong className="mono">{a.plazo}</strong></span>
          <div className="alx-item__actions">
            <button type="button" className="alx-act" onClick={() => onOpen && onOpen(a.compromisoId)}>Ver compromiso <I.ArrowRight size={12} /></button>
            {esAdmin && a.tipo === 'vencimiento' && <button type="button" className="alx-act"><I.Send size={12} /> Reenviar</button>}
            <button type="button" className="alx-act alx-act--muted" onClick={onToggleRead}>{read ? 'Marcar no leída' : 'Marcar leída'}</button>
          </div>
        </div>
      </div>
    </li>
  );
}

// ---------------- Configuración ----------------
function ConfigAlertas({ cfg, setCfg, pol, setPol }) {
  const I = window.Icons;
  const hitos = window.ALERTAS_CONFIG || [];
  const sevDe = (code) => code === 'D-7' ? 'info' : code === 'D-3' ? 'warn' : (code === 'D-1' || code === 'D') ? 'danger' : 'dark';
  return (
    <>
      <div className="section">
        <div className="section__label">Hitos de recordatorio</div>
        <p className="section__hint section__hint--tight">Definí qué avisos dispara el sistema sobre el plazo interno de cada acción y por qué canales.</p>
        <div className="al-config">
          {hitos.map(h => {
            const on = !!cfg[h.code];
            return (
              <div className={`al-cfg${on ? ' is-on' : ''}`} key={h.code}>
                <span className={`al-code al-code--${sevDe(h.code)}`}>{h.code}</span>
                <div className="al-cfg__txt"><strong>{h.label}</strong><small>{h.desc}</small></div>
                <div className="al-cfg__ch"><span className="al-ch"><I.Mail size={12} /> Correo</span><span className="al-ch"><I.Bell size={12} /> Plataforma</span></div>
                <button type="button" role="switch" aria-checked={on} aria-label={`Activar ${h.label}`} className={`al-switch${on ? ' is-on' : ''}`} onClick={() => setCfg(c => ({ ...c, [h.code]: !c[h.code] }))}><span className="al-switch__knob" /></button>
              </div>
            );
          })}
        </div>
      </div>

      <div className="section">
        <div className="section__label">Escalamiento y resumen</div>
        <p className="section__hint section__hint--tight">Reglas globales de qué pasa cuando una alerta no se atiende y cómo se mantiene informado al administrador.</p>
        <div className="alx-pol">
          <PolRow on={pol.escala} onToggle={() => setPol(p => ({ ...p, escala: !p.escala }))}
            icon="AlertTriangle" title="Escalar al punto focal si pasa D+1 sin avance"
            desc="Si el plazo vence sin carga, se notifica al contacto principal de la institución." />
          <PolRow on={pol.copiaAdmin} onToggle={() => setPol(p => ({ ...p, copiaAdmin: !p.copiaAdmin }))}
            icon="Shield" title="Copiar al administrador en alertas críticas"
            desc="Las alertas D-1, D y vencidas también llegan a la CGR." />
          <PolRow on={pol.resumen} onToggle={() => setPol(p => ({ ...p, resumen: !p.resumen }))}
            icon="Inbox" title="Resumen diario de alertas al administrador"
            desc="Un correo cada mañana con lo pendiente y lo vencido del día." />
        </div>
      </div>
    </>
  );
}

function PolRow({ on, onToggle, icon, title, desc }) {
  const I = window.Icons;
  const ICON = I[icon] || I.Bell;
  return (
    <div className={`alx-polrow${on ? ' is-on' : ''}`}>
      <span className="alx-polrow__ic"><ICON size={15} /></span>
      <div className="alx-polrow__txt"><strong>{title}</strong><small>{desc}</small></div>
      <button type="button" role="switch" aria-checked={on} aria-label={title} className={`al-switch${on ? ' is-on' : ''}`} onClick={onToggle}><span className="al-switch__knob" /></button>
    </div>
  );
}

Object.assign(window, { AlertasScreen });