/* global React */
// Nuevo / Editar Usuario (HU.4.1) — pantalla interna, formulario único validado.
// Mismo patrón que "Nueva institución".

const { useState: useStateNU, useMemo: useMemoNU, useEffect: useEffectNU } = React;

const ROLES_CATALOG = [
  { id: 'superadmin',  label: 'Súper Administrador',  desc: 'Acceso total: gestiona usuarios, instituciones y configuración global.' },
  { id: 'admin',       label: 'Administrador',        desc: 'Registra recomendaciones, asigna instituciones, revisa y aprueba avances.' },
  { id: 'institucion', label: 'Enlace Institucional', desc: 'Carga avances y evidencias de los compromisos de su institución.' },
  { id: 'cancilleria', label: 'Cancillería · MRE',    desc: 'Solo lectura del tablero país e informes consolidados.' },
];

const ROLE_PILL_CLS = {
  superadmin: 'role-super',
  admin: 'role-admin',
  institucion: 'role-inst',
  cancilleria: 'role-canc',
};

// ---------------- Validación ----------------
function validateUser(form, items, editingId) {
  const e = {};
  const otras = (items || []).filter((it) => !editingId || it.id !== editingId);

  if (!form.rol) e.rol = 'Selecciona un rol.';

  const nombre = (form.nombre || '').trim();
  if (!nombre) e.nombre = 'Ingresa el nombre.';
  else if (nombre.length < 2) e.nombre = 'Mínimo 2 caracteres.';

  const apellido = (form.apellido || '').trim();
  if (!apellido) e.apellido = 'Ingresa el apellido.';
  else if (apellido.length < 2) e.apellido = 'Mínimo 2 caracteres.';

  if (form.rol === 'institucion' && !form.institucionId) {
    e.institucionId = 'Selecciona la institución del usuario.';
  } else if (form.rol === 'institucion' && form.institucionId) {
    const inst = (window.cgrData ? window.cgrData.instituciones() : []).find(i => i.id === form.institucionId);
    if (inst && inst.estado === 'desactivado') {
      e.institucionId = 'Esa institución está desactivada. Elige una institución activa.';
    }
  }

  const tel = (form.telefono || '').trim();
  if (tel && !/^[+0-9()\s-]{6,20}$/.test(tel)) {
    e.telefono = 'Ingresa un teléfono válido.';
  }

  const email = (form.email || '').trim();
  if (!email) {
    e.email = 'Ingresa el correo institucional.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(email)) {
    e.email = 'Ingresa un correo válido, ej. nombre@institucion.gob';
  } else if (otras.some((it) => (it.email || '').trim().toLowerCase() === email.toLowerCase())) {
    e.email = 'Ya existe un usuario con este correo. Usa otro diferente.';
  }

  return e;
}

function splitNombre(full) {
  const p = (full || '').trim().split(/\s+/);
  return { nombre: p[0] || '', apellido: p.slice(1).join(' ') };
}

function NuevoUsuarioForm({ onCancel, onSave, editing, items }) {
  const I = window.Icons;
  const isEdit = !!editing;

  const initForm = () => {
    if (editing) {
      const { nombre, apellido } = splitNombre(editing.nombre);
      const inst = window.cgrData.instituciones().find(i => i.nombre === editing.institucion);
      return {
        rol: editing.rol || '',
        nombre, apellido,
        documento: editing.documento || '',
        telefono: editing.telefono || '',
        institucionId: inst ? inst.id : '',
        cargo: editing.cargo || '',
        email: editing.email || '',
        esContacto: window.cgrData ? window.cgrData.esContactoPrincipal(editing) : !!editing.esContacto,
      };
    }
    return { rol: '', nombre: '', apellido: '', documento: '', telefono: '', institucionId: '', cargo: '', email: '', esContacto: false };
  };

  const [form, setForm] = useStateNU(initForm);
  const [touched, setTouched] = useStateNU({});
  const [submitAttempted, setSubmitAttempted] = useStateNU(false);

  useEffectNU(() => {
    setForm(initForm());
    setTouched({});
    setSubmitAttempted(false);
  }, [editing]);

  const errors = useMemoNU(
    () => validateUser(form, items, editing && editing.id),
    [form, items, editing]
  );
  const isValid = Object.keys(errors).length === 0;

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const blur = (k) => setTouched(t => ({ ...t, [k]: true }));
  const showErr = (k) => (touched[k] || submitAttempted) && errors[k];

  const requiereInst = form.rol === 'institucion';

  const handleSubmit = () => {
    if (!isValid) { setSubmitAttempted(true); return; }
    const rolObj = ROLES_CATALOG.find(r => r.id === form.rol);
    const inst = window.cgrData.instituciones().find(i => i.id === form.institucionId);
    const nombreCompleto = `${form.nombre.trim()} ${form.apellido.trim()}`.trim();
    const initials = ((form.nombre.trim()[0] || '') + (form.apellido.trim()[0] || '')).toUpperCase() || '··';
    const institucionLabel = requiereInst
      ? (inst ? inst.nombre : '')
      : (form.cargo.trim() || (editing ? editing.institucion : '') || 'CGR');
    onSave && onSave({
      ...(editing || {}),
      nombre: nombreCompleto,
      initials,
      email: form.email.trim(),
      rol: form.rol,
      rolLabel: rolObj ? rolObj.label : '',
      institucion: institucionLabel,
      cargo: form.cargo.trim(),
      telefono: form.telefono.trim(),
      documento: form.documento.trim(),
      esContacto: requiereInst ? form.esContacto : false,
    });
  };

  return (
    <div data-screen-label="07b Nuevo usuario" className="nip-screen">
      <div className="page-head">
        <div>
          <button type="button" className="page-head__eyebrow page-head__back" onClick={onCancel}>
            <I.ChevronLeft size={13} /> Volver a Usuarios
          </button>
          <h1 className="page-head__title">
            {isEdit ? `Editar ${editing.nombre}` : 'Nuevo usuario'}
          </h1>
          <p className="page-head__sub">
            {isEdit
              ? 'Actualiza los datos, el rol o la institución de la cuenta. Los cambios quedan registrados.'
              : 'Completa los datos para crear una cuenta de acceso. El rol define a qué módulos y datos accede.'}
          </p>
        </div>
      </div>

      <div className="nip-card nip-card--wide">
        <div className="nip-form">
          {/* Rol — tarjetas seleccionables (primero) */}
          <div className="nip-field nip-field--full">
            <label className="nip-label">Rol <span className="req">*</span></label>
            <div className="role-cards role-cards--roles">
              {ROLES_CATALOG.map(r => (
                <button
                  key={r.id}
                  type="button"
                  className={`role-card role-card--${r.id}${form.rol === r.id ? ' is-selected' : ''}`}
                  onClick={() => update('rol', r.id)}
                >
                  <div className="role-card__head">
                    <span className={`role-pill-tag ${ROLE_PILL_CLS[r.id]}`}>{r.label}</span>
                    {form.rol === r.id && (
                      <span className="role-card__check"><I.CheckCircle2 size={14} /></span>
                    )}
                  </div>
                  <p className="role-card__desc">{r.desc}</p>
                </button>
              ))}
            </div>
            {showErr('rol') && <div className="nip-error"><I.AlertCircle size={12} /> {errors.rol}</div>}
          </div>

          {/* Nombre + Apellido */}
          <div className="nip-field">
            <label className="nip-label" htmlFor="nu-nombre">Nombre <span className="req">*</span></label>
            <input
              id="nu-nombre" type="text"
              className={`nip-input${showErr('nombre') ? ' is-invalid' : ''}`}
              value={form.nombre} maxLength={60} autoComplete="off"
              placeholder="Ej. María"
              onChange={e => update('nombre', e.target.value)}
              onBlur={() => blur('nombre')}
            />
            {showErr('nombre')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.nombre}</div>
              : <div className="nip-hint">Nombre de pila de la persona.</div>}
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nu-apellido">Apellido <span className="req">*</span></label>
            <input
              id="nu-apellido" type="text"
              className={`nip-input${showErr('apellido') ? ' is-invalid' : ''}`}
              value={form.apellido} maxLength={60} autoComplete="off"
              placeholder="Ej. Acosta"
              onChange={e => update('apellido', e.target.value)}
              onBlur={() => blur('apellido')}
            />
            {showErr('apellido')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.apellido}</div>
              : <div className="nip-hint">Apellidos de la persona.</div>}
          </div>

          {/* Documento + Teléfono */}
          <div className="nip-field">
            <label className="nip-label" htmlFor="nu-doc">Documento de identidad</label>
            <input
              id="nu-doc" type="text"
              className="nip-input mono"
              value={form.documento} autoComplete="off"
              placeholder="Ej. 12.345.678"
              onChange={e => update('documento', e.target.value)}
            />
            <div className="nip-hint">Opcional. Solo visible para los administradores.</div>
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nu-tel">Teléfono</label>
            <input
              id="nu-tel" type="tel" inputMode="tel"
              className={`nip-input${showErr('telefono') ? ' is-invalid' : ''}`}
              value={form.telefono} autoComplete="off"
              placeholder="Ej. 0991 234 567"
              onChange={e => update('telefono', e.target.value)}
              onBlur={() => blur('telefono')}
            />
            {showErr('telefono')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.telefono}</div>
              : <div className="nip-hint">Opcional. Para alertas SMS si están habilitadas.</div>}
          </div>

          {/* Institución + Cargo */}
          <div className="nip-field">
            <label className="nip-label" htmlFor="nu-inst">
              Institución {requiereInst && <span className="req">*</span>}
            </label>
            <select
              id="nu-inst"
              className={`nip-select${showErr('institucionId') ? ' is-invalid' : ''}`}
              value={form.institucionId}
              onChange={e => update('institucionId', e.target.value)}
              onBlur={() => blur('institucionId')}
            >
              <option value="">{requiereInst ? 'Selecciona la institución…' : 'Sin institución (rol interno)'}</option>
              {window.cgrData.instituciones().map(i => {
                const off = i.estado === 'desactivado';
                return (
                  <option key={i.id} value={i.id} disabled={off}>
                    {i.nombre} ({i.sigla}){off ? ' — desactivada' : ''}
                  </option>
                );
              })}
            </select>
            {showErr('institucionId')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.institucionId}</div>
              : <div className="nip-hint">{requiereInst ? 'Solo verá los compromisos de esta institución.' : 'Opcional para roles internos de la CGR.'}</div>}
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nu-cargo">Cargo o función</label>
            <input
              id="nu-cargo" type="text"
              className="nip-input"
              value={form.cargo} autoComplete="off"
              placeholder="Ej. Coordinador de seguimiento"
              onChange={e => update('cargo', e.target.value)}
            />
            <div className="nip-hint">Opcional.</div>
          </div>

          {/* Contacto principal de la institución — opcional */}
          {requiereInst && form.institucionId && (
            <div className="nip-field nip-field--full">
              <label className="nip-check">
                <input type="checkbox" checked={form.esContacto} onChange={e => update('esContacto', e.target.checked)} />
                <span>Designar como contacto principal de su institución</span>
              </label>
              <div className="nip-hint">El contacto principal recibe las alertas y notificaciones de las acciones de la institución. Puedes cambiarlo más adelante.</div>
            </div>
          )}

          {/* Correo */}
          <div className="nip-field nip-field--full">
            <label className="nip-label" htmlFor="nu-email">Correo institucional <span className="req">*</span></label>
            <input
              id="nu-email" type="email" inputMode="email"
              className={`nip-input${showErr('email') ? ' is-invalid' : ''}`}
              value={form.email} autoComplete="off"
              placeholder="Ej. nombre.apellido@institucion.gob"
              onChange={e => update('email', e.target.value)}
              onBlur={() => blur('email')}
            />
            {showErr('email')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.email}</div>
              : <div className="nip-hint">Será el identificador único y la dirección de invitación.</div>}
          </div>
        </div>

        <footer className="nip-foot">
          <div className="nip-foot__note">
            <span className="req">*</span> Campos obligatorios
          </div>
          <div className="nip-foot__actions">
            <button type="button" className="btn btn--ghost" onClick={onCancel}>Cancelar</button>
            <button
              type="button"
              className="btn btn--primary"
              disabled={!isValid}
              aria-disabled={!isValid}
              onClick={handleSubmit}
            >
              <I.CheckCircle2 size={14} />
              {isEdit ? ' Guardar cambios' : ' Crear usuario'}
            </button>
          </div>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { NuevoUsuarioForm });