/* global React */
// Instituciones (HU.4.3) — Catálogo de instituciones reportantes

const { useState: useStateIn } = React;

function InstitucionesScreen({ user, onOpenNueva }) {
  const I = window.Icons;
  const insts = window.INSTITUCIONES_CATALOG;
  const [q, setQ] = useStateIn('');
  const [tipoFilter, setTipoFilter] = useStateIn('Todos');

  const filtered = insts.filter(i => {
    if (q && !`${i.nombre} ${i.sigla} ${i.contacto}`.toLowerCase().includes(q.toLowerCase())) return false;
    if (tipoFilter !== 'Todos' && i.tipo !== tipoFilter) return false;
    return true;
  });

  const activas = insts.filter(i => i.estado === 'activo').length;
  const sinUsuarios = insts.filter(i => i.usuarios === 0).length;

  return (
    <div data-screen-label="08 Instituciones">
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">{user.org}</div>
          <h1 className="page-head__title">Instituciones</h1>
          <p className="page-head__sub">
            Catálogo de instituciones reportantes habilitadas en la plataforma. Las instituciones
            desactivadas pierden acceso pero conservan su historial completo.
          </p>
        </div>
        <div className="page-head__actions">
          <button type="button" className="btn btn--ghost">
            <I.Download size={14} /> Exportar catálogo
          </button>
          <button type="button" className="btn btn--primary" onClick={onOpenNueva}>
            <I.Building2 size={14} /> Nueva institución
          </button>
        </div>
      </div>

      <div className="compkpi-row" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="compkpi">
          <div className="compkpi__icon"><I.Building2 size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{insts.length}</div>
            <div className="compkpi__label">Instituciones en catálogo</div>
            <div className="compkpi__sub">{activas} activas</div>
          </div>
        </div>
        <div className="compkpi is-ok">
          <div className="compkpi__icon"><I.CheckCircle2 size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{insts.reduce((a, b) => a + b.usuarios, 0)}</div>
            <div className="compkpi__label">Usuarios distribuidos</div>
            <div className="compkpi__sub">En instituciones reportantes</div>
          </div>
        </div>
        <div className="compkpi is-warn">
          <div className="compkpi__icon"><I.AlertCircle size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{sinUsuarios}</div>
            <div className="compkpi__label">Sin usuarios activos</div>
            <div className="compkpi__sub">No reciben notificaciones</div>
          </div>
        </div>
        <div className="compkpi">
          <div className="compkpi__icon"><I.ListChecks size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{insts.reduce((a, b) => a + b.compromisos, 0)}</div>
            <div className="compkpi__label">Compromisos asignados</div>
            <div className="compkpi__sub">A través de todas las instituciones</div>
          </div>
        </div>
      </div>

      <div className="comp-search">
        <I.Search size={16} />
        <input type="text" placeholder="Buscar por nombre, sigla o contacto…" value={q} onChange={e => setQ(e.target.value)} />
      </div>

      <div className="chips">
        {['Todos', 'Ministerio', 'Secretaría Ejecutiva', 'Órgano de Control', 'Órgano Extra-Poder', 'Subsecretaría', 'Dirección', 'Unidad Especializada', 'Poder del Estado'].map(t => (
          <button key={t} type="button"
            className={`chip${tipoFilter === t ? ' is-active' : ''}`}
            onClick={() => setTipoFilter(t)}>
            {t}
          </button>
        ))}
      </div>

      <div className="inst-grid">
        {filtered.map(i => (
          <article key={i.id} className={`inst-card${i.estado !== 'activo' ? ' is-' + i.estado : ''}`}>
            <div className="inst-card__top">
              <div className="inst-card__avatar">{i.sigla.slice(0, 4)}</div>
              <div className="inst-card__id">
                <strong>{i.nombre}</strong>
                <small>{i.tipo}</small>
              </div>
              <span className={`status ${i.estado === 'activo' ? 'is-ok' : i.estado === 'pendiente' ? 'is-warn' : 'is-dark'}`}>
                {i.estado === 'activo' ? 'Activa' : i.estado === 'pendiente' ? 'Pendiente' : 'Desactivada'}
              </span>
            </div>

            <div className="inst-card__contact">
              <I.MessageSquare size={11} /> {i.contacto}
            </div>

            <div className="inst-card__stats">
              <div className="inst-stat">
                <I.ListChecks size={13} />
                <div><strong>{i.compromisos}</strong><small>compromisos</small></div>
              </div>
              <div className="inst-stat">
                <I.Users size={13} />
                <div><strong>{i.usuarios}</strong><small>usuario{i.usuarios === 1 ? '' : 's'}</small></div>
              </div>
              <div className="inst-stat">
                <I.Clock size={13} />
                <div><strong>{i.ultimo}</strong><small>último acceso</small></div>
              </div>
            </div>

            <div className="inst-card__actions">
              <button type="button" className="btn btn--secondary btn--sm">
                <I.Eye size={13} /> Ver detalle
              </button>
              <button type="button" className="btn btn--ghost btn--sm">
                <I.Users size={13} /> Usuarios
              </button>
            </div>
          </article>
        ))}
      </div>

      {filtered.length === 0 && (
        <div className="empty">
          <I.Building2 size={28} />
          <h4>Sin resultados</h4>
          <p>Intenta con otros criterios de búsqueda.</p>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { InstitucionesScreen });