/* global React */
// Compromisos: listado + filtros avanzados + acciones (Admin / Súper Admin CGR)
// HU.1.1, HU.1.2, HU.1.3, HU.1.4, HU.5.3 — mismo patrón de diseño que Instituciones.

const { useState: useStateC, useMemo: useMemoC } = React;

// ---------------- Helpers para alta de recomendación ----------------
const MESES_ABBR_C = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'];
function fmtFechaISO_C(iso) {
  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso || '');
  if (!m) return iso || 'Sin plazo';
  return parseInt(m[3], 10) + ' ' + MESES_ABBR_C[parseInt(m[2], 10) - 1] + ' ' + m[1];
}
function diasHastaISO_C(iso) {
  const d = new Date((iso || '') + 'T00:00:00');
  if (isNaN(d.getTime())) return 999;
  const hoy = new Date(); hoy.setHours(0, 0, 0, 0);
  return Math.round((d - hoy) / 86400000);
}
const ESTADO_LABEL_C = { ok: 'Cumplido', partial: 'Parcial', bad: 'No cumplido', pending: 'Pendiente', overdue: 'Vencido sin avance' };

// ---------------- KPI tira ----------------
function CompKpi({ icon, label, num, sub, tone }) {
  const I = window.Icons;
  return (
    <div className={`compkpi${tone ? ' is-' + tone : ''}`}>
      <div className="compkpi__icon">{React.createElement(I[icon], { size: 15 })}</div>
      <div className="compkpi__body">
        <div className="compkpi__num">{num}</div>
        <div className="compkpi__label">{label}</div>
        {sub && <div className="compkpi__sub">{sub}</div>}
      </div>
    </div>
  );
}

// ---------------- Fila de la tabla ----------------
function CompRow({ c, onOpen }) {
  const I = window.Icons;
  const dCls = c.d < 0 ? 'is-overdue' : c.d <= 3 ? 'is-soon' : c.d <= 7 ? 'is-warnish' : '';
  return (
    <tr onClick={() => onOpen(c.id)}>
      <td>
        <div className="cell-id">
          <strong className="mono">{c.id}</strong>
          {c.idIntl && <small className="mono">{c.idIntl}</small>}
        </div>
      </td>
      <td className="cell-title-wrap">
        <div className="cell-title">{c.text}</div>
      </td>
      <td>
        <span className={`mech-tag mech-tag--${c.mecanismo.toLowerCase()}`}>{c.mecanismo}</span>
      </td>
      <td>
        <div className="cell-eje">{c.eje}</div>
        <div className="cell-sub">{c.tipo} · {c.prioridad}</div>
      </td>
      <td>
        <div className="cell-inst-stack">
          {c.instituciones.slice(0, 2).map(i => <span key={i} className="inst-chip">{i}</span>)}
          {c.instituciones.length > 2 && <span className="inst-chip is-more">+{c.instituciones.length - 2}</span>}
        </div>
      </td>
      <td className="mono">
        {c.plazo}
        <div className={`cell-sub ${dCls}`}>
          {c.d < 0 ? `D+${Math.abs(c.d)} (vencido)` : c.d === 0 ? 'Vence hoy' : `D-${c.d}`}
        </div>
      </td>
      <td><window.StatusPill estado={c.estado} /></td>
    </tr>
  );
}

// ---------------- Pantalla principal ----------------
function CompromisosScreen({ onOpenDetalle, onOpenNueva }) {
  const I = window.Icons;
  const [all, setAll] = window.usePersistentState('compromisos', () => window.COMPROMISOS_FULL.slice());

  const handleSaveRec = (form) => {
    const cat = window.INSTITUCIONES_CATALOG || [];
    const siglaDe = (id) => { const f = cat.find(x => x.id === id); return f ? f.sigla : id; };
    const insts = (form.instituciones || []).filter(r => r.institucionId).map(r => siglaDe(r.institucionId));
    const plazos = (form.instituciones || []).map(r => r.plazo).filter(Boolean).sort();
    const plazoISO = plazos[0] || '';
    const prefijo = (form.mecanismo || 'REC').slice(0, 3).toUpperCase();
    const rondaClean = (form.ronda || '').replace(/\s+/g, '') || 'S';
    const nuevo = {
      id: prefijo + '-' + rondaClean + '-' + String(Date.now()).slice(-4),
      idIntl: form.idIntl || '',
      mecanismo: form.mecanismo,
      ronda: form.ronda,
      eje: form.eje,
      tipo: form.tipo,
      prioridad: form.prioridad,
      instituciones: insts.length ? insts : ['—'],
      plazo: plazoISO ? fmtFechaISO_C(plazoISO) : 'Sin plazo',
      d: plazoISO ? diasHastaISO_C(plazoISO) : 999,
      estado: 'pending',
      text: form.titulo,
      textoCompleto: form.texto,
      lastUpdate: 'recién',
      avances: 0, vinc: 0,
    };
    setAll(list => [nuevo, ...list]);
    setView('list');
  };

  const [q, setQ] = useStateC('');
  const [mech, setMech] = useStateC('Todos');
  const [estado, setEstado] = useStateC('Todos');
  const [tipo, setTipo] = useStateC('Todos');
  const [inst, setInst] = useStateC('Todas');
  const [eje, setEje] = useStateC('Todos los ejes');
  const [advOpen, setAdvOpen] = useStateC(false);
  const [view, setView] = useStateC('list'); // 'list' | 'form'

  const MECH_OPTS  = [{ v: 'Todos', l: 'Todos' }, { v: 'MESICIC', l: 'MESICIC' }, { v: 'UNCAC', l: 'UNCAC' }, { v: 'OCDE', l: 'OCDE' }];
  const ESTADO_OPTS = [
    { v: 'Todos', l: 'Todos' },
    { v: 'Cumplidos', l: 'Cumplidos' },
    { v: 'Parciales', l: 'Parciales' },
    { v: 'No cumplidos', l: 'No cumplidos' },
    { v: 'Vencidos sin avance', l: 'Vencidos sin avance' },
  ];
  const TIPO_OPTS = [{ v: 'Todos', l: 'Todos' }, { v: 'Normativa', l: 'Normativa' }, { v: 'Administrativa', l: 'Administrativa' }, { v: 'Operativa', l: 'Operativa' }];
  const INST_OPTS = ['Todas', 'SENAC', 'Ministerio de Hacienda', 'Ministerio Público', 'Ministerio del Interior', 'Ministerio de Justicia', 'SEPRELAD', 'Poder Judicial', 'Contraloría General'];
  const EJE_OPTS  = ['Todos los ejes', ...window.cgrData.ejes()];

  const filtered = useMemoC(() => {
    return all.filter(c => {
      if (q && !(`${c.id} ${c.text} ${c.instituciones.join(' ')}`).toLowerCase().includes(q.toLowerCase())) return false;
      if (mech !== 'Todos' && c.mecanismo !== mech) return false;
      if (estado === 'Cumplidos' && c.estado !== 'ok') return false;
      if (estado === 'Parciales' && c.estado !== 'partial') return false;
      if (estado === 'No cumplidos' && c.estado !== 'bad') return false;
      if (estado === 'Vencidos sin avance' && c.d >= 0) return false;
      if (tipo !== 'Todos' && c.tipo !== tipo) return false;
      if (eje !== 'Todos los ejes' && c.eje !== eje) return false;
      if (inst !== 'Todas' && !c.instituciones.some(i =>
        i.toLowerCase().includes(inst.toLowerCase()) || inst.toLowerCase().includes(i.toLowerCase()))) return false;
      return true;
    });
  }, [all, q, mech, estado, tipo, inst, eje]);

  const advCount = [mech !== 'Todos', estado !== 'Todos', tipo !== 'Todos', inst !== 'Todas', eje !== 'Todos los ejes'].filter(Boolean).length;

  const resetAdv = () => { setMech('Todos'); setEstado('Todos'); setTipo('Todos'); setInst('Todas'); setEje('Todos los ejes'); };
  const clearAll = () => { setQ(''); resetAdv(); };

  const activeChips = [];
  if (mech !== 'Todos')           activeChips.push({ key: 'mech',   group: 'Mecanismo',  label: mech,   reset: () => setMech('Todos') });
  if (estado !== 'Todos')         activeChips.push({ key: 'estado', group: 'Estado',     label: estado, reset: () => setEstado('Todos') });
  if (tipo !== 'Todos')           activeChips.push({ key: 'tipo',   group: 'Tipo',       label: tipo,   reset: () => setTipo('Todos') });
  if (inst !== 'Todas')           activeChips.push({ key: 'inst',   group: 'Institución',label: inst,   reset: () => setInst('Todas') });
  if (eje !== 'Todos los ejes')   activeChips.push({ key: 'eje',    group: 'Eje',        label: eje,    reset: () => setEje('Todos los ejes') });

  // Vista de formulario (nueva recomendación) — ocupa la misma área que el listado
  if (view === 'form') {
    return (
      <window.NuevaRecomendacionForm
        onCancel={() => setView('list')}
        onSave={handleSaveRec}
      />
    );
  }

  return (
    <div data-screen-label="02 Compromisos">
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">Inventario de recomendaciones</div>
          <h1 className="page-head__title">Compromisos</h1>
          <p className="page-head__sub">
            Inventario único de las recomendaciones internacionales de Paraguay (MESICIC, UNCAC y OCDE).
            Registra, clasifica, asigna instituciones y da seguimiento al cumplimiento.
          </p>
        </div>
        <div className="page-head__actions">
          <button
            type="button"
            className="btn btn--ghost"
            onClick={() => window.cgrStore.exportRows(filtered, [
              { key: 'id', label: 'ID interno' },
              { key: 'idIntl', label: 'ID organismo' },
              { key: 'mecanismo', label: 'Mecanismo' },
              { key: 'ronda', label: 'Ronda' },
              { key: 'text', label: 'Recomendación' },
              { key: 'eje', label: 'Eje' },
              { key: 'tipo', label: 'Tipo' },
              { key: 'prioridad', label: 'Prioridad' },
              { key: 'instituciones', label: 'Instituciones', format: v => (v || []).join(', ') },
              { key: 'plazo', label: 'Vence' },
              { key: 'estado', label: 'Estado', format: v => ESTADO_LABEL_C[v] || v },
            ], 'compromisos_CGR', 'Compromisos')}
          >
            <I.Download size={14} /> Exportar
          </button>
          <button type="button" className="btn btn--primary" onClick={() => setView('form')}>
            <I.Plus size={14} /> Nueva recomendación
          </button>
        </div>
      </div>

      {/* Buscador + filtros avanzados */}
      <div className="inst-filters-bar">
        <div className="comp-search" style={{ margin: 0 }}>
          <I.Search size={16} />
          <input
            type="text"
            placeholder="Buscar por ID, texto de la recomendación o institución…"
            value={q}
            onChange={e => setQ(e.target.value)}
          />
        </div>
        <button
          type="button"
          className={`adv-toggle${advOpen ? ' is-open' : ''}${advCount ? ' has-active' : ''}`}
          onClick={() => setAdvOpen(o => !o)}
          aria-expanded={advOpen}
        >
          <I.Filter size={14} />
          <span>Filtros avanzados</span>
          {advCount > 0 && <span className="adv-toggle__badge">{advCount}</span>}
          <I.ChevronDown size={13} className="adv-toggle__chev" />
        </button>
      </div>

      {advOpen && (
        <section className="adv-panel" aria-label="Filtros avanzados">
          <header className="adv-panel__head">
            <div>
              <strong>Filtros avanzados</strong>
              <small>Filtra el inventario por mecanismo, estado de cumplimiento, tipo de medida, institución responsable o eje temático. Los cambios se aplican al instante y se combinan con el buscador.</small>
            </div>
            <button type="button" className="btn btn--ghost btn--sm" onClick={resetAdv} disabled={!advCount}>
              <I.XCircle size={13} /> Limpiar filtros
            </button>
          </header>
          <div className="adv-grid">
            <div className="adv-group">
              <div className="adv-group__head"><I.Globe size={13} /><span>Mecanismo</span></div>
              <div className="adv-group__chips">
                {MECH_OPTS.map(o => (
                  <button key={o.v} type="button" className={`adv-chip${mech === o.v ? ' is-active' : ''}`} onClick={() => setMech(o.v)}>{o.l}</button>
                ))}
              </div>
            </div>

            <div className="adv-group">
              <div className="adv-group__head"><I.CheckCircle2 size={13} /><span>Estado de cumplimiento</span></div>
              <div className="adv-group__chips">
                {ESTADO_OPTS.map(o => (
                  <button key={o.v} type="button" className={`adv-chip${estado === o.v ? ' is-active' : ''}`} onClick={() => setEstado(o.v)}>{o.l}</button>
                ))}
              </div>
            </div>

            <div className="adv-group">
              <div className="adv-group__head"><I.ListChecks size={13} /><span>Tipo de medida</span></div>
              <div className="adv-group__chips">
                {TIPO_OPTS.map(o => (
                  <button key={o.v} type="button" className={`adv-chip${tipo === o.v ? ' is-active' : ''}`} onClick={() => setTipo(o.v)}>{o.l}</button>
                ))}
              </div>
            </div>

            <div className="adv-group">
              <div className="adv-group__head"><I.Building2 size={13} /><span>Institución responsable</span></div>
              <select className="adv-select" value={inst} onChange={e => setInst(e.target.value)}>
                {INST_OPTS.map(o => <option key={o} value={o}>{o === 'Todas' ? 'Todas las instituciones' : o}</option>)}
              </select>
            </div>

            <div className="adv-group">
              <div className="adv-group__head"><I.Sparkles size={13} /><span>Eje temático</span></div>
              <select className="adv-select" value={eje} onChange={e => setEje(e.target.value)}>
                {EJE_OPTS.map(o => <option key={o} value={o}>{o}</option>)}
              </select>
            </div>
          </div>
        </section>
      )}

      {!advOpen && advCount > 0 && (
        <div className="adv-active">
          <span className="adv-active__label">
            <I.Filter size={12} /> {advCount} filtro{advCount === 1 ? '' : 's'} activo{advCount === 1 ? '' : 's'}:
          </span>
          {activeChips.map(a => (
            <button key={a.key} type="button" className="adv-active__chip" onClick={a.reset} title={`Quitar filtro de ${a.group}`}>
              <span className="adv-active__group">{a.group}:</span>
              <strong>{a.label}</strong>
              <I.XCircle size={12} />
            </button>
          ))}
          <button type="button" className="link" onClick={resetAdv}>Limpiar todo</button>
        </div>
      )}

      {filtered.length === 0 ? (
        <div className="empty">
          <I.Search size={28} />
          <h4>Sin resultados con los filtros aplicados</h4>
          <p>
            Intenta con otras palabras clave.
            {(q || advCount > 0) && (
              <>{' '}<button type="button" className="link" onClick={clearAll}>Limpiar todos los filtros</button>.</>
            )}
          </p>
        </div>
      ) : (
        <>
          <div className="card table-card" style={{ marginBottom: 0 }}>
            <div className="table-wrap">
              <table className="data-table data-table--comp data-table--roomy">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Recomendación</th>
                    <th>Mecanismo</th>
                    <th>Clasificación</th>
                    <th>Instituciones</th>
                    <th>Vence</th>
                    <th>Estado</th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map(c => <CompRow key={c.id} c={c} onOpen={onOpenDetalle} />)}
                </tbody>
              </table>
            </div>
          </div>

          <div className="table-foot">
            <span className="meta">Mostrando {filtered.length} de {all.length} recomendaciones</span>
            <div className="pager">
              <button type="button" className="pager__btn is-active">1</button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

Object.assign(window, { CompromisosScreen });