/* global React */
// Nueva / Editar Institución — pantalla interna (ocupa el área de contenido)
// Formulario único con validación. HU.4.3 · Súper Admin · CGR

const { useState: useStateNI, useEffect: useEffectNI, useMemo: useMemoNI } = React;

// Tipos derivados de las instituciones colaboradoras de la CGR
const TIPOS_INST = [
  { id: 'min',   label: 'Ministerio',                 desc: 'Carteras del Poder Ejecutivo. Ej. Ministerio de Economía y Finanzas' },
  { id: 'sec',   label: 'Secretaría Nacional',        desc: 'Secretarías de Estado y nacionales. Ej. SEPRELAD, SENABICO' },
  { id: 'sub',   label: 'Subsecretaría',              desc: 'Dependiente de un ministerio. Ej. Subsecretaría de Estado de Tributación' },
  { id: 'ctrl',  label: 'Órgano de Control',          desc: 'Control externo del Estado. Ej. CGR, Auditoría General del Poder Ejecutivo' },
  { id: 'extra', label: 'Órgano Extra-Poder',         desc: 'Autonomía constitucional. Ej. Ministerio Público, Procuraduría, Justicia Electoral, Consejo de la Magistratura' },
  { id: 'pod',   label: 'Poder del Estado',           desc: 'Ej. Corte Suprema de Justicia (Poder Judicial)' },
  { id: 'dir',   label: 'Dirección Nacional',         desc: 'Ej. Dirección Nacional de Contrataciones Públicas' },
  { id: 'ente',  label: 'Ente Autónomo o Autárquico', desc: 'Entes descentralizados del Estado' },
  { id: 'gob',   label: 'Gobernación',                desc: 'Gobiernos departamentales' },
  { id: 'mun',   label: 'Municipalidad',              desc: 'Gobiernos municipales' },
];

const EMPTY_INST = {
  nombre: '',
  tipo: '',
  sigla: '',
  web: '',
  contacto: '',
  descripcion: '',
  estado: 'activo',
};

const NOMBRE_MAX = 120;
const DESC_MAX = 200;

// ---------------- Validación ----------------
// Devuelve { campo: 'mensaje' }. Objeto vacío = formulario válido.
// items = catálogo actual; editingId = id de la institución en edición (para no compararse consigo misma).
function validateInst(form, items, editingId) {
  const e = {};
  const otras = (items || []).filter((it) => !editingId || it.id !== editingId);

  const nombre = (form.nombre || '').trim();
  if (!nombre) {
    e.nombre = 'Ingresa el nombre de la institución.';
  } else if (nombre.length < 3) {
    e.nombre = 'El nombre debe tener al menos 3 caracteres.';
  } else if (nombre.length > NOMBRE_MAX) {
    e.nombre = `Máximo ${NOMBRE_MAX} caracteres.`;
  } else if (otras.some((it) => (it.nombre || '').trim().toLowerCase() === nombre.toLowerCase())) {
    e.nombre = 'Ya existe una institución con este nombre. Usa uno diferente.';
  }

  if (!form.tipo) {
    e.tipo = 'Selecciona un tipo de institución.';
  }

  const sigla = (form.sigla || '').trim();
  if (!sigla) {
    e.sigla = 'Ingresa la sigla.';
  } else if (!/^[A-ZÁÉÍÓÚÑ0-9]{2,8}$/.test(sigla)) {
    e.sigla = 'Entre 2 y 8 caracteres: solo letras mayúsculas y números.';
  } else if (otras.some((it) => (it.sigla || '').trim().toUpperCase() === sigla.toUpperCase())) {
    e.sigla = 'Ya existe una institución con esta sigla. Usa una diferente.';
  }

  const web = (form.web || '').trim();
  if (web) {
    const urlOk = /^https?:\/\/([a-z0-9](-?[a-z0-9])*\.)+[a-z]{2,}(:\d{2,5})?(\/[^\s]*)?$/i.test(web);
    if (!urlOk) {
      e.web = 'Ingresa una URL válida, ej. https://www.institucion.gov.py';
    }
  }

  if ((form.descripcion || '').length > DESC_MAX) {
    e.descripcion = `Máximo ${DESC_MAX} caracteres.`;
  }

  return e;
}

// Usuarios ya registrados que pertenecen a esta institución (para elegir el contacto principal).
function usuariosDeInst(editing) {
  if (!editing) return [];
  const sig = (editing.sigla || '').toLowerCase();
  const nom = (editing.nombre || '').toLowerCase();
  return window.cgrData.usuarios().filter((u) => {
    if (!window.cgrData.usuarioSeleccionable(u)) return false;
    const seg = (u.institucion || '').toLowerCase().split('·')[0].trim();
    return (sig && seg === sig) || (nom && (seg === nom || nom.startsWith(seg) || seg.startsWith(nom)));
  });
}

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

  const isEdit = !!editing;
  const [form, setForm] = useStateNI(() =>
    editing
      ? {
          nombre: editing.nombre || '',
          tipo: editing.tipo || '',
          sigla: editing.sigla || '',
          web: editing.web || '',
          contacto: editing.contacto || '',
          descripcion: editing.descripcion || '',
          estado: editing.estado || 'activo',
        }
      : EMPTY_INST
  );
  const [touched, setTouched] = useStateNI({});
  const [submitAttempted, setSubmitAttempted] = useStateNI(false);

  // Resincroniza si cambia el objeto en edición
  useEffectNI(() => {
    setTouched({});
    setSubmitAttempted(false);
    if (editing) {
      setForm({
        nombre: editing.nombre || '',
        tipo: editing.tipo || '',
        sigla: editing.sigla || '',
        web: editing.web || '',
        contacto: editing.contacto || '',
        descripcion: editing.descripcion || '',
        estado: editing.estado || 'activo',
      });
    } else {
      setForm(EMPTY_INST);
    }
  }, [editing]);

  const errors = useMemoNI(
    () => validateInst(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 slugId = (form.sigla || '')
    .toUpperCase()
    .replace(/[^A-Z0-9]+/g, '-')
    .replace(/^-|-$/g, '');

  const handleSubmit = () => {
    if (!isValid) {
      setSubmitAttempted(true);
      return;
    }
    onSave && onSave({ ...form, nombre: form.nombre.trim(), sigla: form.sigla.trim() });
  };

  const tiposCat = (window.cgrData ? window.cgrData.tiposInstitucion() : TIPOS_INST.map(t => t.label));
  const tipoActual = TIPOS_INST.find((t) => t.label === form.tipo);

  return (
    <div data-screen-label="08b Nueva institución" 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 Instituciones
          </button>
          <h1 className="page-head__title">
            {isEdit ? `Editar ${editing.sigla}` : 'Nueva institución'}
          </h1>
          <p className="page-head__sub">
            {isEdit
              ? 'Actualiza los datos de identificación, el tipo o el estado operativo de la institución. Los cambios quedan registrados.'
              : 'Completa los datos para registrar una nueva institución reportante en el catálogo oficial.'}
          </p>
        </div>
      </div>

      <div className="nip-card nip-card--wide">
        <div className="nip-form">
          {/* Nombre — fila completa */}
          <div className="nip-field nip-field--full">
            <label className="nip-label" htmlFor="nip-nombre">
              Nombre de la institución <span className="req">*</span>
            </label>
            <input
              id="nip-nombre"
              type="text"
              className={`nip-input${showErr('nombre') ? ' is-invalid' : ''}`}
              value={form.nombre}
              maxLength={NOMBRE_MAX}
              autoComplete="off"
              aria-invalid={!!showErr('nombre')}
              placeholder="Ej. Contraloría General de la República"
              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">Razón social conforme a decreto o ley.</div>}
          </div>

          {/* Tipo + Sigla */}
          <div className="nip-field">
            <label className="nip-label" htmlFor="nip-tipo">
              Tipo de institución <span className="req">*</span>
            </label>
            <select
              id="nip-tipo"
              className={`nip-select${showErr('tipo') ? ' is-invalid' : ''}`}
              value={form.tipo}
              aria-invalid={!!showErr('tipo')}
              onChange={(e) => update('tipo', e.target.value)}
              onBlur={() => blur('tipo')}
            >
              <option value="" disabled>Selecciona un tipo…</option>
              {tiposCat.map((t) => (
                <option key={t} value={t}>{t}</option>
              ))}
              {form.tipo && tiposCat.indexOf(form.tipo) === -1 && <option value={form.tipo}>{form.tipo}</option>}
            </select>
            {showErr('tipo')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.tipo}</div>
              : <div className="nip-hint">{tipoActual ? tipoActual.desc : 'Define dónde se ubica en el catálogo.'}</div>}
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nip-sigla">
              Sigla <span className="req">*</span>
            </label>
            <input
              id="nip-sigla"
              type="text"
              className={`nip-input mono${showErr('sigla') ? ' is-invalid' : ''}`}
              value={form.sigla}
              maxLength={8}
              autoComplete="off"
              aria-invalid={!!showErr('sigla')}
              placeholder="Ej. CGR"
              onChange={(e) => update('sigla', e.target.value.toUpperCase())}
              onBlur={() => blur('sigla')}
            />
            {showErr('sigla')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.sigla}</div>
              : <div className="nip-hint">2 a 8 caracteres, mayúsculas y números.</div>}
          </div>

          {/* ID interno + Sitio web */}
          <div className="nip-field">
            <label className="nip-label">ID interno</label>
            <div className="nip-generated mono">{slugId || '— sigla pendiente —'}</div>
            <div className="nip-hint">Se genera automáticamente a partir de la sigla.</div>
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nip-web">Sitio web</label>
            <input
              id="nip-web"
              type="url"
              inputMode="url"
              className={`nip-input${showErr('web') ? ' is-invalid' : ''}`}
              value={form.web}
              autoComplete="off"
              aria-invalid={!!showErr('web')}
              placeholder="Ej. https://www.institucion.gob"
              onChange={(e) => update('web', e.target.value)}
              onBlur={() => blur('web')}
            />
            {showErr('web')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.web}</div>
              : <div className="nip-hint">Opcional. Debe iniciar con http:// o https://</div>}
          </div>

          {/* Contacto principal — fila completa */}
          <div className="nip-field nip-field--full">
            <label className="nip-label" htmlFor="nip-focal">Contacto principal</label>
            {usuariosDeInst(editing).length === 0 ? (
              <>
                <select id="nip-focal" className="nip-select" disabled value="">
                  <option value="">Esta institución todavía no tiene usuarios</option>
                </select>
                <div className="nip-hint">Opcional. Es la persona que recibe las alertas y notificaciones de la institución. Podrás elegirla aquí una vez que la institución tenga usuarios.</div>
              </>
            ) : (
              <>
                <select
                  id="nip-focal"
                  className="nip-select"
                  value={form.contacto}
                  onChange={(e) => update('contacto', e.target.value)}
                >
                  <option value="">Sin contacto principal</option>
                  {form.contacto && !usuariosDeInst(editing).some((u) => `${u.nombre} · ${u.email}` === form.contacto) && (
                    <option value={form.contacto}>{form.contacto}</option>
                  )}
                  {usuariosDeInst(editing).map((u) => (
                    <option key={u.id} value={`${u.nombre} · ${u.email}`}>{u.nombre} · {u.email}</option>
                  ))}
                </select>
                <div className="nip-hint">Opcional. Es la persona que recibe las alertas y notificaciones de las acciones asignadas a esta institución.</div>
              </>
            )}
          </div>

          {/* Descripción — fila completa */}
          <div className="nip-field nip-field--full">
            <label className="nip-label" htmlFor="nip-desc">Descripción</label>
            <textarea
              id="nip-desc"
              rows="3"
              className={`nip-textarea${showErr('descripcion') ? ' is-invalid' : ''}`}
              value={form.descripcion}
              maxLength={DESC_MAX}
              aria-invalid={!!showErr('descripcion')}
              placeholder="Ej. Órgano superior de control de los recursos y bienes públicos del Estado."
              onChange={(e) => update('descripcion', e.target.value)}
              onBlur={() => blur('descripcion')}
            />
            <div className="nip-field__row">
              {showErr('descripcion')
                ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.descripcion}</div>
                : <div className="nip-hint">Opcional. Cómo se presenta en el catálogo.</div>}
              <div className="nip-counter">{form.descripcion.length} / {DESC_MAX}</div>
            </div>
          </div>

          {/* Estado (solo en edición) — fila completa */}
          {isEdit && (
            <div className="nip-field nip-field--full">
              <label className="nip-label" htmlFor="nip-estado">Estado operativo</label>
              <select
                id="nip-estado"
                className="nip-select"
                value={form.estado}
                onChange={(e) => update('estado', e.target.value)}
              >
                <option value="activo">Activa</option>
                <option value="desactivado">Desactivada</option>
              </select>
              <div className="nip-hint">
                {form.estado === 'activo'
                  ? 'Puede recibir asignaciones, cargar avances y recibir alertas.'
                  : 'Sin acceso al sistema; el historial permanece consultable.'}
              </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 institución'}
            </button>
          </div>
        </footer>
      </div>
    </div>
  );
}

Object.assign(window, { NuevaInstitucionForm });