/* global React */
// Compromisos: listado + filtros + acciones (Admin / Súper Admin CGR)
// HU.1.1, HU.1.2, HU.1.3, HU.1.4, HU.5.3 (buscador y filtros)

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

// ---------------- 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>
  );
}

// ---------------- Chips de filtros rápidos ----------------
function ChipsRow({ items, value, onChange }) {
  return (
    <div className="chips">
      {items.map(it => (
        <button
          key={it.value}
          type="button"
          className={`chip${value === it.value ? ' is-active' : ''}${it.tone ? ' chip--' + it.tone : ''}`}
          onClick={() => onChange(it.value)}
        >
          {it.label}
          {it.count != null && <span className="chip__count">{it.count}</span>}
        </button>
      ))}
    </div>
  );
}

// ---------------- Selector (popup mock) ----------------
function FilterDropdown({ icon, label, value, options, onChange }) {
  const I = window.Icons;
  const [open, setOpen] = useStateC(false);
  return (
    <div className={`fdrop${open ? ' is-open' : ''}`}>
      <button type="button" className="fdrop__trigger" onClick={() => setOpen(o => !o)}>
        {icon && <span className="fdrop__icon">{React.createElement(I[icon], { size: 13 })}</span>}
        <span className="fdrop__label">{label}:</span>
        <strong>{value}</strong>
        <I.ChevronDown size={13} />
      </button>
      {open && (
        <>
          <div className="fdrop__scrim" onClick={() => setOpen(false)}></div>
          <div className="fdrop__menu">
            {options.map(o => (
              <button
                key={o}
                type="button"
                className={`fdrop__opt${value === o ? ' is-active' : ''}`}
                onClick={() => { onChange(o); setOpen(false); }}
              >
                {o}
                {value === o && <I.CheckCircle2 size={13} />}
              </button>
            ))}
          </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>
          <small className="mono">{c.idIntl}</small>
        </div>
      </td>
      <td className="cell-title-wrap">
        <div className="cell-title">{c.text}</div>
        <div className="cell-meta">
          <span><I.Building2 size={11} /> {c.instituciones.length} inst.</span>
          {c.vinc > 0 && <span><I.Link2 size={11} /> {c.vinc} vinc.</span>}
          <span><I.Upload size={11} /> {c.avances} avances</span>
        </div>
      </td>
      <td>
        <span className={`mech-tag mech-tag--${c.mecanismo.toLowerCase()}`}>{c.mecanismo}</span>
        <div className="cell-sub">{c.ronda}</div>
      </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>
      <td onClick={e => e.stopPropagation()}>
        <button type="button" className="row-cta row-cta--menu" title="Más acciones">
          <I.ChevronsUpDown size={13} />
        </button>
      </td>
    </tr>
  );
}

// ---------------- Pantalla principal ----------------
function CompromisosScreen({ onOpenDetalle, onOpenNueva }) {
  const I = window.Icons;
  const all = window.COMPROMISOS_FULL;

  const [q, setQ] = useStateC('');
  const [mech, setMech] = useStateC('Todos');
  const [estado, setEstado] = useStateC('Todos');
  const [inst, setInst] = useStateC('Todas las 47');
  const [eje, setEje] = useStateC('Todos los ejes');
  const [ronda, setRonda] = useStateC('Todas');

  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 (eje !== 'Todos los ejes' && c.eje !== eje) return false;
      return true;
    });
  }, [all, q, mech, estado, inst, eje, ronda]);

  // KPIs derivados (simulando totales del sistema 527)
  const total = 527;
  const cumplidos = 184;
  const parciales = 248;
  const noCump = 78;
  const vencidos = 17;

  return (
    <div data-screen-label="02 Compromisos">
      {/* Header */}
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">CGR · Dirección de Análisis de Datos</div>
          <h1 className="page-head__title">Compromisos</h1>
          <p className="page-head__sub">
            Inventario consolidado de recomendaciones internacionales. Registra, clasifica, asigna y
            vincula compromisos de los tres mecanismos.
          </p>
        </div>
        <div className="page-head__actions">
          <button type="button" className="btn btn--ghost">
            <I.Download size={14} /> Exportar
          </button>
          <button type="button" className="btn btn--secondary">
            <I.Filter size={14} /> Filtros avanzados
          </button>
          <button type="button" className="btn btn--primary" onClick={onOpenNueva}>
            <I.Plus size={14} /> Nueva recomendación
          </button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="compkpi-row">
        <CompKpi icon="ListChecks"    label="Total registrados"        num={total} sub="118 MES · 156 UNC · 253 OCDE" />
        <CompKpi icon="CheckCircle2"  label="Cumplidos"                num={cumplidos} sub="34.9%" tone="ok" />
        <CompKpi icon="AlertCircle"   label="Parcialmente cumplidos"   num={parciales} sub="47.1% — zona gris" tone="warn" />
        <CompKpi icon="XCircle"       label="No cumplidos"             num={noCump} sub="14.8%" tone="danger" />
        <CompKpi icon="AlertTriangle" label="Vencidos sin avance"      num={vencidos} sub="Requieren atención" tone="dark" />
      </div>

      {/* Search */}
      <div className="comp-search">
        <I.Search size={16} />
        <input
          type="text"
          placeholder="Buscar por ID interno, ID internacional, texto de la recomendación, institución…"
          value={q}
          onChange={e => setQ(e.target.value)}
        />
        {q && <button type="button" className="comp-search__clear" onClick={() => setQ('')}>Limpiar</button>}
        <kbd>⌘ K</kbd>
      </div>

      {/* Chips: mecanismo */}
      <ChipsRow
        value={mech}
        onChange={setMech}
        items={[
          { value: 'Todos',   label: 'Todos los mecanismos', count: 527 },
          { value: 'MESICIC', label: 'MESICIC',  count: 118, tone: 'mesicic' },
          { value: 'UNCAC',   label: 'UNCAC',    count: 156, tone: 'uncac' },
          { value: 'OCDE',    label: 'OCDE',     count: 253, tone: 'ocde' },
        ]}
      />

      {/* Chips: estado */}
      <ChipsRow
        value={estado}
        onChange={setEstado}
        items={[
          { value: 'Todos',        label: 'Todos los estados', count: 527 },
          { value: 'Cumplidos',    label: '● Cumplidos',       count: 184 },
          { value: 'Parciales',    label: '● Parciales',       count: 248 },
          { value: 'No cumplidos', label: '● No cumplidos',    count: 78 },
          { value: 'Vencidos sin avance', label: '⚠ Vencidos sin avance', count: 17 },
        ]}
      />

      {/* Filtros secundarios */}
      <div className="filters">
        <FilterDropdown icon="Building2" label="Institución" value={inst} onChange={setInst}
          options={['Todas las 47', 'SENAC', 'Ministerio de Hacienda', 'Ministerio Público', 'Min. del Interior', 'Min. de Justicia', 'SEPRELAD', 'Poder Judicial', 'Contraloría General']} />
        <FilterDropdown icon="Sparkles" label="Eje temático" value={eje} onChange={setEje}
          options={['Todos los ejes', ...window.EJES_TEMATICOS]} />
        <FilterDropdown icon="Calendar" label="Ronda" value={ronda} onChange={setRonda}
          options={['Todas', 'MES Ronda V', 'MES Ronda IV', 'UNCAC Cap. II', 'UNCAC Cap. III', 'UNCAC Cap. IV', 'UNCAC Cap. V', 'OCDE Phase 2']} />
        <FilterDropdown icon="ListChecks" label="Tipo" value="Todos" onChange={()=>{}}
          options={['Todos', 'Normativa', 'Administrativa', 'Operativa']} />
        <div className="filters__spacer"></div>
        <button type="button" className="filter-clear" onClick={() => {
          setQ(''); setMech('Todos'); setEstado('Todos'); setInst('Todas las 47');
          setEje('Todos los ejes'); setRonda('Todas');
        }}>
          Limpiar filtros
        </button>
      </div>

      {/* Resultados / Tabla */}
      <div className="card table-card">
        <div className="card__head">
          <div>
            <h3>Resultados · vista detallada</h3>
            <div className="meta">Mostrando {filtered.length} de 527 · ordenados por proximidad de vencimiento</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button type="button" className="btn btn--ghost btn--sm">
              <I.Eye size={13} /> Columnas
            </button>
            <button type="button" className="btn btn--ghost btn--sm">
              <I.ChevronsUpDown size={13} /> Ordenar
            </button>
          </div>
        </div>
        <div className="table-wrap">
          <table className="data-table data-table--comp">
            <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>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(c => <CompRow key={c.id} c={c} onOpen={onOpenDetalle} />)}
            </tbody>
          </table>
          {filtered.length === 0 && (
            <div className="empty">
              <I.Search size={28} />
              <h4>Sin resultados con los filtros aplicados</h4>
              <p>Intenta con otras palabras clave o limpia los filtros.</p>
            </div>
          )}
        </div>
        <div className="table-foot">
          <span className="meta">Página 1 de 44 · 12 por página</span>
          <div className="pager">
            <button type="button" className="pager__btn" disabled>‹</button>
            <button type="button" className="pager__btn is-active">1</button>
            <button type="button" className="pager__btn">2</button>
            <button type="button" className="pager__btn">3</button>
            <span className="pager__sep">…</span>
            <button type="button" className="pager__btn">44</button>
            <button type="button" className="pager__btn">›</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CompromisosScreen });