/* global React */
// Usuarios (HU.4.1) — Gestión de cuentas y roles
// Mismo patrón de diseño que Instituciones.

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

// ---------------- Filtros avanzados ----------------
const ADV_DEFAULT_US = {
  rol: 'todos',          // todos | superadmin | admin | institucion | cancilleria | lector
  institucion: [],       // array de instituciones seleccionadas (multi-select)
  estado: 'todos',       // todos | activo | pendiente | desactivado
  orden: 'az',           // az | za
};

const ADV_GROUPS_US = [
  {
    key: 'rol',
    label: 'Rol',
    icon: 'Users',
    options: [
      { v: 'todos',        l: 'Todos' },
      { v: 'superadmin',   l: 'Súper Admin' },
      { v: 'admin',        l: 'Admin' },
      { v: 'institucion',  l: 'Enlace Institucional' },
      { v: 'cancilleria',  l: 'Cancillería' },
    ],
  },
  {
    key: 'institucion',
    label: 'Institución',
    icon: 'Building2',
    type: 'select',
    options: [],
  },
  {
    key: 'estado',
    label: 'Estado',
    icon: 'CheckCircle2',
    options: [
      { v: 'todos',        l: 'Todos' },
      { v: 'activo',       l: 'Activos' },
      { v: 'pendiente',    l: 'Pendientes' },
      { v: 'desactivado',  l: 'Desactivados' },
    ],
  },
  {
    key: 'orden',
    label: 'Ordenar por nombre',
    icon: 'ListChecks',
    options: [
      { v: 'az', l: 'A → Z' },
      { v: 'za', l: 'Z → A' },
    ],
  },
];

// Ícono encendido/apagado (toggle)
function PowerGlyphUs({ size = 13 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2v10" />
      <path d="M18.4 6.6a9 9 0 1 1-12.77.04" />
    </svg>
  );
}

function UsuariosScreen({ roleId, user, onOpenNuevo }) {
  const I = window.Icons;
  const [items, setItems] = window.usePersistentState('usuarios', () => window.USUARIOS.slice());
  const [q, setQ] = useStateUs('');
  const [adv, setAdv] = useStateUs(ADV_DEFAULT_US);
  const [advOpen, setAdvOpen] = useStateUs(false);
  const [toggling, setToggling] = useStateUs(null);
  const [deleting, setDeleting] = useStateUs(null);

  // Vista de formulario (crear / editar)
  const [view, setView] = useStateUs('list'); // 'list' | 'form'
  const [editing, setEditing] = useStateUs(null);

  const openCreate = () => { setEditing(null); setView('form'); };
  const openEdit = (u) => { setEditing(u); setView('form'); };
  const backToList = () => { setView('list'); setEditing(null); };

  const handleSaveUser = (data) => {
    const wantsContacto = !!data.esContacto;
    const clean = { ...data };
    delete clean.esContacto; // el contacto principal vive en institucion.contacto
    let savedUser;
    if (editing) {
      savedUser = { ...editing, ...clean };
      delete savedUser.esContacto;
      setItems(list => list.map(it => it.id === editing.id ? savedUser : it));
    } else {
      const id = `u-${Date.now().toString(36)}`;
      savedUser = { id, ultimo: 'Nunca', estado: 'pendiente', ...clean };
      setItems(list => [savedUser, ...list]);
    }
    // Sincroniza el contacto principal de la institución (solo enlaces institucionales)
    if (window.cgrData && window.cgrData.ajustarContacto && savedUser.rol === 'institucion') {
      window.cgrData.ajustarContacto(savedUser.institucion, savedUser.nombre, savedUser.email, wantsContacto);
      if (editing && editing.institucion && editing.institucion !== savedUser.institucion) {
        window.cgrData.ajustarContacto(editing.institucion, savedUser.nombre, savedUser.email, false);
      }
    }
    backToList();
  };

  const advCount = (adv.institucion.length ? 1 : 0) + (adv.rol !== 'todos' ? 1 : 0) + (adv.estado !== 'todos' ? 1 : 0) + (adv.orden !== 'az' ? 1 : 0);

  // Lista de instituciones (para el dropdown del filtro)
  const instituciones = useMemoUs(() => {
    const set = new Set(items.map(u => u.institucion).filter(Boolean));
    return Array.from(set).sort((a, b) => a.localeCompare(b, 'es', { sensitivity: 'base' }));
  }, [items]);

  const filtered = useMemoUs(() => {
    const list = items.filter(u => {
      if (q && !`${u.nombre} ${u.email} ${u.institucion}`.toLowerCase().includes(q.toLowerCase())) return false;
      if (adv.rol !== 'todos' && u.rol !== adv.rol) return false;
      if (adv.institucion.length && adv.institucion.indexOf(u.institucion) === -1) return false;
      if (adv.estado !== 'todos' && window.cgrData.estadoUsuario(u) !== adv.estado) return false;
      return true;
    });
    list.sort((a, b) => a.nombre.localeCompare(b.nombre, 'es', { sensitivity: 'base' }));
    if (adv.orden === 'za') list.reverse();
    return list;
  }, [items, q, adv]);

  const setAdvKey = (k, v) => setAdv(prev => ({ ...prev, [k]: v }));
  const setAdvInst = (arr) => setAdv(prev => ({ ...prev, institucion: arr }));
  const freshAdvUs = () => ({ rol: 'todos', institucion: [], estado: 'todos', orden: 'az' });
  const resetAdv = () => setAdv(freshAdvUs());
  const clearAll = () => { setQ(''); setAdv(freshAdvUs()); };

  const handleToggleConfirm = () => {
    if (!toggling) return;
    const next = toggling.estado === 'desactivado' ? 'activo' : 'desactivado';
    setItems(list => list.map(it => it.id === toggling.id ? { ...it, estado: next } : it));
    setToggling(null);
  };

  const handleDeleteConfirm = () => {
    if (!deleting) return;
    setItems(list => list.filter(it => it.id !== deleting.id));
    setDeleting(null);
  };

  const activeAdv = [];
  if (adv.institucion.length) activeAdv.push({ key: 'institucion', group: 'Institución', label: adv.institucion.length === 1 ? adv.institucion[0] : `${adv.institucion.length} instituciones`, reset: () => setAdvInst([]) });
  ['rol', 'estado', 'orden'].forEach(k => {
    if (adv[k] !== ADV_DEFAULT_US[k]) {
      const group = ADV_GROUPS_US.find(g => g.key === k);
      const opt = group.options.find(o => o.v === adv[k]);
      activeAdv.push({ key: k, group: group.label, label: opt ? opt.l : adv[k], reset: () => setAdvKey(k, ADV_DEFAULT_US[k]) });
    }
  });

  // Vista de formulario (crear / editar) — ocupa la misma área que el listado
  if (view === 'form') {
    return (
      <window.NuevoUsuarioForm
        editing={editing}
        items={items}
        onCancel={backToList}
        onSave={handleSaveUser}
      />
    );
  }

  return (
    <div data-screen-label="07 Usuarios">
      <div className="page-head">
        <div>
          <div className="page-head__eyebrow">Gestión de accesos</div>
          <h1 className="page-head__title">Usuarios</h1>
          <p className="page-head__sub">
            Administra las cuentas y roles de los funcionarios de la CGR y de las instituciones reportantes.
            Crea, edita o desactiva accesos; el historial de cada cuenta se conserva.
          </p>
        </div>
        <div className="page-head__actions">
          <button
            type="button"
            className="btn btn--ghost"
            onClick={() => window.cgrStore.exportRows(filtered, [
              { key: 'nombre', label: 'Nombre' },
              { key: 'email', label: 'Correo' },
              { key: 'rolLabel', label: 'Rol' },
              { key: 'institucion', label: 'Institución' },
              { key: 'estado', label: 'Estado', format: v => v === 'activo' ? 'Activo' : v === 'pendiente' ? 'Pendiente' : 'Desactivado' },
            ], 'usuarios_CGR', 'Usuarios')}
          >
            <I.Download size={14} /> Exportar
          </button>
          <button type="button" className="btn btn--primary" onClick={openCreate}>
            <I.PlusCircle size={14} /> Nuevo usuario
          </button>
        </div>
      </div>

      {/* Buscador + filtros avanzados */}
      <div className="inst-filters-bar">
        <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>
        <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>Encuentra una cuenta más rápido: filtra por rol, institución o estado y ordena la lista alfabéticamente. 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">
            {ADV_GROUPS_US.map(g => {
              const Icon = I[g.icon] || I.Filter;
              return (
                <div className="adv-group" key={g.key}>
                  <div className="adv-group__head">
                    <Icon size={13} />
                    <span>{g.label}</span>
                  </div>
                  {g.type === 'select' ? (
                    <window.MultiSelect
                      options={instituciones}
                      selected={adv.institucion}
                      onChange={setAdvInst}
                      allLabel="Todas las instituciones"
                    />
                  ) : (
                    <div className="adv-group__chips">
                      {g.options.map(o => (
                        <button
                          key={o.v}
                          type="button"
                          className={`adv-chip${adv[g.key] === o.v ? ' is-active' : ''}`}
                          onClick={() => setAdvKey(g.key, o.v)}
                        >
                          {o.l}
                        </button>
                      ))}
                    </div>
                  )}
                </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>
          {activeAdv.map(a => (
            <button
              key={a.key}
              type="button"
              className="adv-active__chip"
              onClick={() => setAdvKey(a.key, ADV_DEFAULT_US[a.key])}
              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.Users size={28} />
          <h4>Sin resultados</h4>
          <p>
            No hay usuarios que coincidan con la combinación actual de filtros.
            {(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--roomy">
                <thead>
                  <tr>
                    <th>Usuario</th>
                    <th>Rol</th>
                    <th>Institución</th>
                    <th>Estado</th>
                    <th className="data-table__actions-h">Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map(u => {
                    const estadoEf = window.cgrData.estadoUsuario(u);
                    const instApagada = !window.cgrData.instActiva(u.institucion);
                    const esContacto = window.cgrData.esContactoPrincipal(u);
                    const isActive = estadoEf !== 'desactivado';
                    return (
                      <tr key={u.id} className={estadoEf === 'desactivado' ? 'is-disabled' : ''}>
                        <td>
                          <div className="user-cell">
                            <div className={`user-cell__avatar user-cell__avatar--${u.rol}`}>{u.initials}</div>
                            <div className="user-cell__main">
                              <strong className="user-cell__name">{u.nombre}</strong>
                              <span className="user-cell__mail">{u.email}</span>
                            </div>
                          </div>
                        </td>
                        <td><RolePillTag rol={u.rol} label={u.rolLabel} /></td>
                        <td className="user-cell__inst">{u.institucion}</td>
                        <td>
                          <span className={`status ${estadoEf === 'activo' ? 'is-ok' : estadoEf === 'pendiente' ? 'is-warn' : 'is-dark'}`}>
                            {estadoEf === 'activo' ? 'Activo' : estadoEf === 'pendiente' ? 'Pendiente' : 'Desactivado'}
                          </span>
                          {instApagada && u.estado !== 'desactivado' && (
                            <small style={{ display: 'block', color: 'var(--cgr-text-muted, #8a93a6)', fontSize: 11, marginTop: 2 }}>
                              institución desactivada
                            </small>
                          )}
                        </td>
                        <td>
                          <div className="data-table__actions">
                            <button
                              type="button"
                              className="icon-btn"
                              aria-label={`Editar ${u.nombre}`}
                              title="Editar"
                              onClick={() => openEdit(u)}
                            >
                              <I.Edit size={14} />
                            </button>
                            {esContacto ? (
                              <span
                                className="icon-btn"
                                title="Contacto principal de su institución: no se puede desactivar ni eliminar"
                                aria-label="Contacto principal protegido"
                                style={{ cursor: 'default', opacity: 0.55 }}
                              >
                                <I.Shield size={14} />
                              </span>
                            ) : (
                              <>
                                {!instApagada && (
                                  <button
                                    type="button"
                                    className={`icon-btn${u.estado === 'desactivado' ? ' icon-btn--ok' : ''}`}
                                    aria-label={`${isActive ? 'Desactivar' : 'Activar'} ${u.nombre}`}
                                    title={isActive ? 'Desactivar' : 'Activar'}
                                    onClick={() => setToggling(u)}
                                  >
                                    <PowerGlyphUs />
                                  </button>
                                )}
                                <button
                                  type="button"
                                  className="icon-btn icon-btn--danger"
                                  aria-label={`Eliminar ${u.nombre}`}
                                  title="Eliminar"
                                  onClick={() => setDeleting(u)}
                                >
                                  <I.Trash2 size={14} />
                                </button>
                              </>
                            )}
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>

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

      {toggling && (
        <ToggleUsuarioDialog
          usuario={toggling}
          onCancel={() => setToggling(null)}
          onConfirm={handleToggleConfirm}
        />
      )}

      {deleting && (
        <DeleteUsuarioDialog
          usuario={deleting}
          onCancel={() => setDeleting(null)}
          onConfirm={handleDeleteConfirm}
        />
      )}
    </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>;
}

// ---------------- Activar / Desactivar usuario ----------------
function ToggleUsuarioDialog({ usuario, onCancel, onConfirm }) {
  const I = window.Icons;
  const isActive = usuario.estado !== 'desactivado';
  return (
    <div className="confirm__overlay" role="dialog" aria-modal="true" onMouseDown={onCancel}>
      <div className="confirm" onMouseDown={e => e.stopPropagation()}>
        <div className={`confirm__icon ${isActive ? 'is-warn' : 'is-ok'}`}>
          {isActive ? <I.AlertCircle size={22} /> : <I.CheckCircle2 size={22} />}
        </div>
        <h3 className="confirm__title">
          {isActive ? `¿Desactivar a “${usuario.nombre}”?` : `¿Activar a “${usuario.nombre}”?`}
        </h3>
        <p className="confirm__sub">
          {isActive ? (
            <><strong>{usuario.nombre}</strong> perderá el acceso a la plataforma de inmediato, pero se
            conserva todo el historial de sus acciones. Podrás reactivarlo cuando lo necesites.</>
          ) : (
            <><strong>{usuario.nombre}</strong> recuperará el acceso a la plataforma con su rol actual.</>
          )}
        </p>
        <div className="confirm__actions">
          <button type="button" className="btn btn--ghost" onClick={onCancel}>Cancelar</button>
          <button type="button" className="btn btn--primary" onClick={onConfirm}>
            <PowerGlyphUs size={14} /> {isActive ? 'Desactivar usuario' : 'Activar usuario'}
          </button>
        </div>
      </div>
    </div>
  );
}

// ---------------- Eliminar usuario ----------------
function DeleteUsuarioDialog({ usuario, onCancel, onConfirm }) {
  const I = window.Icons;
  return (
    <div className="confirm__overlay" role="dialog" aria-modal="true" onMouseDown={onCancel}>
      <div className="confirm" onMouseDown={e => e.stopPropagation()}>
        <div className="confirm__icon is-danger">
          <I.Trash2 size={22} />
        </div>
        <h3 className="confirm__title">¿Eliminar a “{usuario.nombre}”?</h3>
        <p className="confirm__sub">
          Se eliminará la cuenta de <strong>{usuario.nombre}</strong> de forma permanente.
          Esta acción no se puede deshacer. Si solo quieres suspender el acceso temporalmente,
          usa <strong>Desactivar</strong> en su lugar.
        </p>
        <div className="confirm__actions">
          <button type="button" className="btn btn--ghost" onClick={onCancel}>Cancelar</button>
          <button type="button" className="btn btn--danger" onClick={onConfirm}>
            <I.Trash2 size={14} /> Eliminar usuario
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { UsuariosScreen });