/* global React */
// Nueva Recomendación — pantalla interna, formulario único validado.
// HU.1.1 / HU.1.2 / HU.1.4 — mismo patrón de diseño que "Nueva institución".

const { useState: useStateN, useMemo: useMemoN } = React;

const MECS = [
  { id: 'MESICIC', org: 'OEA',  desc: 'Mecanismo de Seguimiento de la Convención Interamericana contra la Corrupción' },
  { id: 'UNCAC',   org: 'ONU',  desc: 'Convención de las Naciones Unidas contra la Corrupción' },
  { id: 'OCDE',    org: 'OCDE', desc: 'Grupo de Trabajo sobre Cohecho en Transacciones Comerciales' },
];

const TITULO_MAX = 120;

function validateRec(form) {
  const e = {};
  const ronda = (form.ronda || '').trim();
  if (!ronda) e.ronda = 'Indica la ronda o capítulo.';

  const titulo = (form.titulo || '').trim();
  if (!titulo) e.titulo = 'Ingresa un título corto interno.';
  else if (titulo.length < 5) e.titulo = 'Mínimo 5 caracteres.';
  else if (titulo.length > TITULO_MAX) e.titulo = `Máximo ${TITULO_MAX} caracteres.`;

  const texto = (form.texto || '').trim();
  if (!texto) e.texto = 'Transcribe el texto de la recomendación.';
  else if (texto.length < 20) e.texto = 'El texto es demasiado corto (mínimo 20 caracteres).';

  if (!form.eje) e.eje = 'Selecciona el eje temático.';
  if (!(form.instituciones || []).some(r => r.institucionId)) {
    e.instituciones = 'Asigna al menos una institución responsable.';
  }
  return e;
}

function NuevaRecomendacionForm({ onCancel, onSave }) {
  const I = window.Icons;
  const [form, setForm] = useStateN({
    mecanismo: (((window.cgrData && window.cgrData.mecanismos()) || [])[0] || { id: 'MESICIC' }).id,
    ronda: '',
    anio: '',
    idIntl: '',
    titulo: '',
    texto: '',
    eje: '',
    tipo: (function () { var ts = (window.cgrData ? window.cgrData.tiposMedida() : window.TIPOS_MEDIDA) || []; return ts[0] ? ts[0].label : 'Normativa'; })(),
    prioridad: ((window.cgrData && window.cgrData.prioridades()) || ['Alta'])[0] || 'Alta',
    capArt: '',
    instituciones: [{ institucionId: '', rol: 'Líder', plazo: '' }],
    archivos: [],
  });
  const [touched, setTouched] = useStateN({});
  const [submitAttempted, setSubmitAttempted] = useStateN(false);

  const errors = useMemoN(() => validateRec(form), [form]);
  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];

  // Repetidor de instituciones responsables
  const setRow = (i, k, v) => setForm(f => ({ ...f, instituciones: f.instituciones.map((r, idx) => idx === i ? { ...r, [k]: v } : r) }));
  const addRow = () => setForm(f => ({ ...f, instituciones: [...f.instituciones, { institucionId: '', rol: 'Apoyo', plazo: '' }] }));
  const removeRow = (i) => setForm(f => ({ ...f, instituciones: f.instituciones.filter((_, idx) => idx !== i) }));

  const idInterno = `${form.mecanismo.slice(0, 3).toUpperCase()}-${(form.ronda || '').replace(/\s+/g, '') || '•••'}-•••`;

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

  return (
    <div data-screen-label="03b Nueva recomendació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 Compromisos
          </button>
          <h1 className="page-head__title">Nueva recomendación</h1>
          <p className="page-head__sub">
            Registra una recomendación internacional indicando su mecanismo, texto oficial y clasificación.
            Al guardar se genera un ID interno y queda en estado inicial "Pendiente".
          </p>
        </div>
      </div>

      <div className="nip-card nip-card--wide">
        <div className="nip-form">
          {/* Mecanismo */}
          <div className="nip-field nip-field--full">
            <label className="nip-label">Mecanismo de origen <span className="req">*</span></label>
            <div className="role-cards role-cards--mech">
              {(window.cgrData ? window.cgrData.mecanismos() : MECS).map(m => (
                <button
                  key={m.id}
                  type="button"
                  className={`role-card${form.mecanismo === m.id ? ' is-selected' : ''}`}
                  onClick={() => update('mecanismo', m.id)}
                >
                  <div className="role-card__head">
                    <span className={`mech-tag mech-tag--${m.id.toLowerCase()}`}>{m.id}</span>
                    {form.mecanismo === m.id && <span className="role-card__check"><I.CheckCircle2 size={14} /></span>}
                  </div>
                  <div className="role-card__org">{m.org}</div>
                  <p className="role-card__desc">{m.desc}</p>
                </button>
              ))}
            </div>
          </div>

          {/* Ronda + Año */}
          <div className="nip-field">
            <label className="nip-label" htmlFor="nr-ronda">Ronda / Capítulo <span className="req">*</span></label>
            <input
              id="nr-ronda" type="text"
              className={`nip-input${showErr('ronda') ? ' is-invalid' : ''}`}
              value={form.ronda} autoComplete="off"
              placeholder="Ej. Ronda V · Cap. II · Phase 2"
              onChange={e => update('ronda', e.target.value)}
              onBlur={() => blur('ronda')}
            />
            {showErr('ronda')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.ronda}</div>
              : <div className="nip-hint">Ciclo de evaluación en que se emitió.</div>}
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nr-anio">Año de evaluación</label>
            <input
              id="nr-anio" type="text" inputMode="numeric"
              className="nip-input mono"
              value={form.anio} autoComplete="off"
              placeholder="Ej. 2024"
              onChange={e => update('anio', e.target.value)}
            />
            <div className="nip-hint">Opcional. Año del informe oficial.</div>
          </div>

          {/* ID interno + ID organismo */}
          <div className="nip-field">
            <label className="nip-label">ID interno</label>
            <div className="nip-generated mono">{idInterno}</div>
            <div className="nip-hint">Se genera automáticamente a partir del mecanismo y la ronda.</div>
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nr-idintl">ID del organismo internacional</label>
            <input
              id="nr-idintl" type="text"
              className="nip-input mono"
              value={form.idIntl} autoComplete="off"
              placeholder="Ej. OEA/MESICIC/586"
              onChange={e => update('idIntl', e.target.value)}
            />
            <div className="nip-hint">Opcional. Facilita la correlación con el organismo.</div>
          </div>

          {/* Título */}
          <div className="nip-field nip-field--full">
            <label className="nip-label" htmlFor="nr-titulo">Título corto interno <span className="req">*</span></label>
            <input
              id="nr-titulo" type="text"
              className={`nip-input${showErr('titulo') ? ' is-invalid' : ''}`}
              value={form.titulo} maxLength={TITULO_MAX} autoComplete="off"
              placeholder="Ej. Fortalecimiento del régimen de declaración jurada de funcionarios"
              onChange={e => update('titulo', e.target.value)}
              onBlur={() => blur('titulo')}
            />
            {showErr('titulo')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.titulo}</div>
              : <div className="nip-hint">Cómo lo identificará la CGR (máx. {TITULO_MAX} caracteres).</div>}
          </div>

          {/* Texto completo */}
          <div className="nip-field nip-field--full">
            <label className="nip-label" htmlFor="nr-texto">Texto completo <span className="req">*</span></label>
            <textarea
              id="nr-texto" rows="5"
              className={`nip-textarea${showErr('texto') ? ' is-invalid' : ''}`}
              value={form.texto}
              placeholder="Transcribe el texto literal recibido del organismo internacional…"
              onChange={e => update('texto', e.target.value)}
              onBlur={() => blur('texto')}
            />
            <div className="nip-field__row">
              {showErr('texto')
                ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.texto}</div>
                : <div className="nip-hint">Texto oficial; se puede editar luego.</div>}
              <div className="nip-counter">{form.texto.length} car. · ideal 300–800</div>
            </div>
          </div>

          {/* Eje + Tipo */}
          <div className="nip-field">
            <label className="nip-label" htmlFor="nr-eje">Eje temático <span className="req">*</span></label>
            <select
              id="nr-eje"
              className={`nip-select${showErr('eje') ? ' is-invalid' : ''}`}
              value={form.eje}
              onChange={e => update('eje', e.target.value)}
              onBlur={() => blur('eje')}
            >
              <option value="" disabled>Selecciona un eje…</option>
              {window.cgrData.ejes().map(ej => <option key={ej} value={ej}>{ej}</option>)}
            </select>
            {showErr('eje')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.eje}</div>
              : <div className="nip-hint">Categoría operativa de la Dirección de Análisis de Datos.</div>}
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nr-tipo">Tipo de medida</label>
            <select
              id="nr-tipo"
              className="nip-select"
              value={form.tipo}
              onChange={e => update('tipo', e.target.value)}
            >
              {window.cgrData.tiposMedida().map(t => (
                <option key={t.id} value={t.label}>{t.label}</option>
              ))}
            </select>
            <div className="nip-hint">Naturaleza de la acción que exige la recomendación.</div>
          </div>

          {/* Prioridad + Cap/Art */}
          <div className="nip-field">
            <label className="nip-label" htmlFor="nr-prio">Nivel de prioridad</label>
            <select
              id="nr-prio"
              className="nip-select"
              value={form.prioridad}
              onChange={e => update('prioridad', e.target.value)}
            >
              {window.cgrData.prioridades().map(p => <option key={p} value={p}>{p}</option>)}
            </select>
            <div className="nip-hint">Nivel de seguimiento que aplica la CGR.</div>
          </div>

          <div className="nip-field">
            <label className="nip-label" htmlFor="nr-cap">Capítulo / Artículo</label>
            <input
              id="nr-cap" type="text"
              className="nip-input"
              value={form.capArt} autoComplete="off"
              placeholder="Ej. Capítulo II · Art. 16"
              onChange={e => update('capArt', e.target.value)}
            />
            <div className="nip-hint">Opcional. Referencia normativa de origen.</div>
          </div>

          {/* Instituciones responsables (varias) */}
          <div className="nip-field nip-field--full">
            <label className="nip-label">Instituciones responsables <span className="req">*</span></label>
            <div className="rec-assign">
              <div className="rec-assign__labels">
                <span>Institución</span><span>Rol</span><span>Plazo interno</span><span></span>
              </div>
              {form.instituciones.map((row, i) => (
                <div className="rec-assign__row" key={i}>
                  <select
                    className={`nip-select${(submitAttempted && !form.instituciones.some(r => r.institucionId)) ? ' is-invalid' : ''}`}
                    value={row.institucionId}
                    onChange={e => setRow(i, 'institucionId', e.target.value)}
                  >
                    <option value="">Seleccionar institución…</option>
                    {window.cgrData.instituciones().map(inst => {
                      const off = inst.estado === 'desactivado';
                      return (
                        <option key={inst.id} value={inst.id} disabled={off}>
                          {inst.nombre} ({inst.sigla}){off ? ' — desactivada' : ''}
                        </option>
                      );
                    })}
                  </select>
                  <select className="nip-select" value={row.rol} onChange={e => setRow(i, 'rol', e.target.value)}>
                    <option>Líder</option>
                    <option>Coordinación</option>
                    <option>Apoyo</option>
                  </select>
                  <input
                    type="date"
                    className="nip-input"
                    value={row.plazo}
                    onChange={e => setRow(i, 'plazo', e.target.value)}
                  />
                  <button
                    type="button"
                    className="rec-assign__del"
                    title="Quitar institución"
                    aria-label="Quitar institución"
                    onClick={() => removeRow(i)}
                    disabled={form.instituciones.length === 1}
                  >
                    <I.XCircle size={16} />
                  </button>
                </div>
              ))}
            </div>
            <button type="button" className="rec-assign__add" onClick={addRow}>
              <I.Plus size={14} /> Agregar institución
            </button>
            {showErr('instituciones')
              ? <div className="nip-error"><I.AlertCircle size={12} /> {errors.instituciones}</div>
              : <div className="nip-hint">Define una institución líder y, si aplica, instituciones de apoyo. Cada una con su rol y plazo interno (habilita alertas D-7 / D-3 / D-1).</div>}
          </div>

          {/* Adjunto */}
          <div className="nip-field nip-field--full">
            <label className="nip-label">Informe oficial del organismo</label>
            <FileDrop archivos={form.archivos} />
            <div className="nip-hint">Opcional. Documento original como referencia (PDF, DOCX, XLSX, PNG, JPG).</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} /> Registrar recomendación
            </button>
          </div>
        </footer>
      </div>
    </div>
  );
}

// ====================================================================
// Helpers de formulario (compartidos — se mantienen para compatibilidad)
// ====================================================================
function FormSection({ title, sub, children }) {
  return (
    <section className="form-section">
      <header className="form-section__head">
        <h3>{title}</h3>
        {sub && <p>{sub}</p>}
      </header>
      <div className="form-section__body">{children}</div>
    </section>
  );
}

function Field({ label, hint, children }) {
  return (
    <label className="field">
      <span className="field__label">{label}</span>
      {children}
      {hint && <span className="field__hint">{hint}</span>}
    </label>
  );
}

function FileDrop({ archivos }) {
  const I = window.Icons;
  return (
    <div className="filedrop">
      <div className="filedrop__zone">
        <I.Upload size={22} />
        <strong>Arrastra archivos aquí o haz clic para seleccionar</strong>
        <small>PDF, DOCX, XLSX, PNG, JPG · máx. 25 MB cada uno</small>
      </div>
      {archivos.length > 0 &&
        <ul className="files">
          {archivos.map((f, i) =>
            <li key={i} className="file">
              <I.FileText size={14} />
              <span>{f.name}</span>
              <small>· {f.size}</small>
              <button type="button" className="file__del" aria-label="Quitar">
                <I.XCircle size={14} />
              </button>
            </li>
          )}
        </ul>
      }
    </div>
  );
}

Object.assign(window, { NuevaRecomendacionForm, FormSection, Field, FileDrop });