/* global React */
// Usuarios (HU.4.1) — Gestión de cuentas y roles
// Vista de gestión de usuarios únicamente (Instituciones tiene su propio módulo).

const { useState: useStateUs, useMemo: useMemoUs } = React;

function UsuariosScreen({ roleId, user, onOpenNuevo }) {
  const I = window.Icons;
  const usuarios = window.USUARIOS;
  const [filterRol, setFilterRol] = useStateUs('todos');
  const [q, setQ] = useStateUs('');

  const counts = useMemoUs(() => {
    const c = { todos: usuarios.length, superadmin: 0, admin: 0, institucion: 0, cancilleria: 0, lector: 0, pendientes: 0, desactivados: 0 };
    usuarios.forEach(u => {
      c[u.rol] = (c[u.rol] || 0) + 1;
      if (u.estado === 'pendiente') c.pendientes++;
      if (u.estado === 'desactivado') c.desactivados++;
    });
    return c;
  }, [usuarios]);

  const filtered = usuarios.filter(u => {
    if (filterRol !== 'todos' && u.rol !== filterRol) return false;
    if (q && !`${u.nombre} ${u.email} ${u.institucion}`.toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });

  return (
    <div data-screen-label="07 Usuarios">
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">{user.org}</div>
          <h1 className="page-head__title">Usuarios</h1>
          <p className="page-head__sub">
            Administra cuentas de acceso y asignación de roles. Cada acción queda registrada en el log de auditoría
            y los usuarios desactivados conservan su historial.
          </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.AlertCircle size={14} /> Log de auditoría
          </button>
          <button type="button" className="btn btn--primary" onClick={onOpenNuevo}>
            <I.PlusCircle size={14} /> Nuevo usuario
          </button>
        </div>
      </div>

      {/* KPIs */}
      <div className="compkpi-row" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }}>
        <div className="compkpi">
          <div className="compkpi__icon"><I.Users size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{counts.todos}</div>
            <div className="compkpi__label">Usuarios totales</div>
            <div className="compkpi__sub">{counts.todos - counts.desactivados} activos</div>
          </div>
        </div>
        <div className="compkpi is-ok">
          <div className="compkpi__icon"><I.Sparkles size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{counts.superadmin + counts.admin}</div>
            <div className="compkpi__label">CGR (super/admin)</div>
            <div className="compkpi__sub">{counts.superadmin} súper · {counts.admin} admin</div>
          </div>
        </div>
        <div className="compkpi">
          <div className="compkpi__icon"><I.Building2 size={15} /></div>
          <div className="compkpi__body">
            <div className="compkpi__num">{counts.institucion}</div>
            <div className="compkpi__label">Instituciones reportantes</div>
            <div className="compkpi__sub">Distribuidos en 47 instituciones</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">{counts.pendientes}</div>
            <div className="compkpi__label">Acceso pendiente</div>
            <div className="compkpi__sub">Aún no han ingresado</div>
          </div>
        </div>
      </div>

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

      <div className="chips">
        {[
          { v: 'todos', l: `Todos · ${counts.todos}` },
          { v: 'superadmin', l: `Súper Admin · ${counts.superadmin}` },
          { v: 'admin', l: `Admin · ${counts.admin}` },
          { v: 'institucion', l: `Institución · ${counts.institucion}` },
          { v: 'cancilleria', l: `Cancillería · ${counts.cancilleria}` },
          { v: 'lector', l: `Lector Interno · ${counts.lector}` },
        ].map(it => (
          <button key={it.v} type="button"
            className={`chip${filterRol === it.v ? ' is-active' : ''}`}
            onClick={() => setFilterRol(it.v)}>
            {it.l}
          </button>
        ))}
      </div>

      <div className="card table-card">
        <div className="table-wrap">
          <table className="data-table">
            <thead>
              <tr>
                <th>Usuario</th>
                <th>Correo</th>
                <th>Rol</th>
                <th>Institución</th>
                <th>Último acceso</th>
                <th>Estado</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(u => (
                <tr key={u.id}>
                  <td>
                    <div className="user-cell">
                      <div className={`user-cell__avatar user-cell__avatar--${u.rol}`}>{u.initials}</div>
                      <strong>{u.nombre}</strong>
                    </div>
                  </td>
                  <td className="mono" style={{ fontSize: 11.5 }}>{u.email}</td>
                  <td><RolePillTag rol={u.rol} label={u.rolLabel} /></td>
                  <td style={{ fontSize: 12.5 }}>{u.institucion}</td>
                  <td className="mono">{u.ultimo}</td>
                  <td>
                    <span className={`status ${u.estado === 'activo' ? 'is-ok' : u.estado === 'pendiente' ? 'is-warn' : 'is-dark'}`}>
                      {u.estado === 'activo' ? 'Activo' : u.estado === 'pendiente' ? 'Pendiente' : 'Desactivado'}
                    </span>
                  </td>
                  <td>
                    <button type="button" className="row-cta"><I.ChevronsUpDown size={13} /></button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        <div className="table-foot">
          <span className="meta">{filtered.length} de {usuarios.length} usuarios</span>
          <div className="pager">
            <button type="button" className="pager__btn is-active">1</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function RolePillTag({ rol, label }) {
  const cls =
    rol === 'superadmin' ? 'role-super' :
    rol === 'admin'      ? 'role-admin' :
    rol === 'institucion'? 'role-inst' :
    rol === 'cancilleria'? 'role-canc' :
    rol === 'lector'     ? 'role-lect' : 'role-default';
  return <span className={`role-pill-tag ${cls}`}>{label}</span>;
}

Object.assign(window, { UsuariosScreen });