/* global React */
// Slide-over panel: Nueva Recomendación
// HU.1.1 (registro), HU.1.2 (clasificación), HU.1.4 (asignación inicial)

const { useState: useStateN } = React;

function NuevaRecomendacionPanel({ open, onClose, onSave }) {
  const I = window.Icons;
  const [step, setStep] = useStateN(1);

  // ----- Estado del formulario (mock — no se persiste) -----
  const [form, setForm] = useStateN({
    mecanismo: 'MESICIC',
    ronda: 'V',
    idIntl: '',
    titulo: '',
    texto: '',
    eje: '',
    tipo: 'Normativa',
    prioridad: 'Alta',
    capArt: '',
    archivos: [
      { name: 'reporte_MESICIC_RondaV_PRY.pdf', size: '2.4 MB', type: 'pdf' },
    ],
    instituciones: [
      { sigla: 'SENAC', rol: 'Líder',        plazo: '12 jun 2026' },
    ],
  });

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  if (!open) return null;

  // Indicador de pasos
  const steps = [
    { n: 1, label: 'Mecanismo y texto' },
    { n: 2, label: 'Clasificación' },
    { n: 3, label: 'Asignación inicial' },
    { n: 4, label: 'Revisión y guardado' },
  ];

  const progress = (step / steps.length) * 100;

  return (
    <div className="sheet-overlay" role="dialog" aria-modal="true" aria-label="Nueva recomendación">
      <div className="sheet-scrim" onClick={onClose}></div>

      <aside className="sheet sheet--wide">
        {/* Header */}
        <header className="sheet__head">
          <div>
            <div className="sheet__eyebrow">
              <I.PlusCircle size={13} /> Registro de nuevo compromiso
            </div>
            <h2 className="sheet__title">Nueva recomendación internacional</h2>
            <p className="sheet__sub">
              Solo CGR (Súper Administrador o Administrador) puede registrar nuevas recomendaciones.
              El ID interno se genera automáticamente al guardar.
            </p>
          </div>
          <button type="button" className="sheet__close" onClick={onClose} aria-label="Cerrar">
            <I.XCircle size={20} />
          </button>
        </header>

        {/* Stepper */}
        <nav className="stepper">
          <div className="stepper__bar" style={{ '--p': progress + '%' }}></div>
          {steps.map(s => (
            <button
              key={s.n}
              type="button"
              className={`stepper__step${step === s.n ? ' is-active' : ''}${step > s.n ? ' is-done' : ''}`}
              onClick={() => setStep(s.n)}
            >
              <span className="stepper__num">
                {step > s.n ? <I.CheckCircle2 size={13} /> : s.n}
              </span>
              <span className="stepper__label">{s.label}</span>
            </button>
          ))}
        </nav>

        {/* Body */}
        <div className="sheet__body">
          {step === 1 && <StepMecanismo form={form} update={update} />}
          {step === 2 && <StepClasificacion form={form} update={update} />}
          {step === 3 && <StepAsignacion form={form} update={update} />}
          {step === 4 && <StepRevision form={form} />}
        </div>

        {/* Footer */}
        <footer className="sheet__foot">
          <div className="sheet__foot-left">
            <I.AlertCircle size={13} />
            <span>Los campos marcados con * son obligatorios para registrar la recomendación.</span>
          </div>
          <div className="sheet__foot-actions">
            <button type="button" className="btn btn--ghost" onClick={onClose}>Cancelar</button>
            <button type="button" className="btn btn--secondary">
              <I.FileText size={14} /> Guardar borrador
            </button>
            {step < 4 ? (
              <button type="button" className="btn btn--primary" onClick={() => setStep(s => Math.min(4, s + 1))}>
                Continuar <I.ArrowRight size={14} />
              </button>
            ) : (
              <button type="button" className="btn btn--primary" onClick={() => { onSave && onSave(form); onClose(); }}>
                <I.CheckCircle2 size={14} /> Registrar recomendación
              </button>
            )}
          </div>
        </footer>
      </aside>
    </div>
  );
}

// ====================================================================
// PASO 1 — Mecanismo, ronda y texto
// ====================================================================
function StepMecanismo({ form, update }) {
  const I = window.Icons;
  const mecs = [
    { id: 'MESICIC', org: 'OEA', desc: 'Mecanismo de Seguimiento de la Convención Interamericana contra la Corrupción' },
    { id: 'UNCAC',   org: 'ONU', desc: 'United Nations Convention against Corruption' },
    { id: 'OCDE',    org: 'OCDE', desc: 'Working Group on Bribery in Intl. Business Transactions' },
  ];
  return (
    <>
      <FormSection title="Mecanismo de origen *" sub="Selecciona el organismo internacional que emitió la recomendación. Una recomendación pertenece a un solo mecanismo.">
        <div className="mech-cards">
          {mecs.map(m => (
            <button
              key={m.id}
              type="button"
              className={`mech-card${form.mecanismo === m.id ? ' is-selected' : ''}`}
              onClick={() => update('mecanismo', m.id)}
            >
              <div className={`mech-card__tag mech-tag mech-tag--${m.id.toLowerCase()}`}>{m.id}</div>
              <div className="mech-card__title">{m.id}</div>
              <div className="mech-card__org">{m.org}</div>
              <div className="mech-card__desc">{m.desc}</div>
              {form.mecanismo === m.id && (
                <div className="mech-card__check"><I.CheckCircle2 size={16} /></div>
              )}
            </button>
          ))}
        </div>
      </FormSection>

      <FormSection title="Ronda o período de evaluación *" sub="Define el ciclo de evaluación en el que se emitió esta recomendación.">
        <div className="form-row form-row--2">
          <Field label="Ronda / Capítulo *" hint="Ej. Ronda V, Cap. II, Phase 2">
            <input type="text" value={form.ronda} onChange={e => update('ronda', e.target.value)} placeholder="Ronda V" />
          </Field>
          <Field label="Año de evaluación" hint="Año del informe oficial">
            <input type="text" placeholder="2024" />
          </Field>
        </div>
      </FormSection>

      <FormSection title="Identificación" sub="El ID interno se genera automáticamente. Puedes vincular el ID del organismo internacional para facilitar la correlación.">
        <div className="form-row form-row--2">
          <Field label="ID interno" hint="Generado automáticamente al guardar">
            <div className="generated-id mono">{form.mecanismo.slice(0, 3).toUpperCase()}-{form.ronda.replace(/\s+/g,'')}-•••</div>
          </Field>
          <Field label="ID del organismo internacional" hint="Ej. OEA/MESICIC/586, UNCAC/CAC/COSP/2024/14">
            <input type="text" value={form.idIntl} onChange={e => update('idIntl', e.target.value)}
              placeholder="OEA/MESICIC/586" />
          </Field>
        </div>
      </FormSection>

      <FormSection title="Texto de la recomendación *" sub="Transcribe el texto literal recibido del organismo internacional. Se puede editar luego.">
        <Field label="Título corto interno" hint="Cómo lo identificará la CGR (máx. 120 caracteres)">
          <input type="text" maxLength="120"
            value={form.titulo} onChange={e => update('titulo', e.target.value)}
            placeholder="Fortalecimiento del régimen de declaración jurada de funcionarios públicos" />
        </Field>
        <Field label="Texto completo *">
          <textarea rows="6" value={form.texto} onChange={e => update('texto', e.target.value)}
            placeholder="Adoptar las medidas pertinentes para que el sistema de declaración jurada de bienes, ingresos, activos y pasivos…" />
          <div className="field__counter">{form.texto.length} caracteres · recomendado entre 300 y 800</div>
        </Field>
      </FormSection>

      <FormSection title="Informe oficial del organismo" sub="Adjunta el documento original como referencia documental.">
        <FileDrop archivos={form.archivos} />
      </FormSection>
    </>
  );
}

// ====================================================================
// PASO 2 — Clasificación
// ====================================================================
function StepClasificacion({ form, update }) {
  const I = window.Icons;
  return (
    <>
      <FormSection title="Eje temático *" sub="Categoría operativa de la Dirección de Análisis de Datos.">
        <div className="pill-grid">
          {window.EJES_TEMATICOS.map(e => (
            <button
              key={e}
              type="button"
              className={`pill-grid__pill${form.eje === e ? ' is-selected' : ''}`}
              onClick={() => update('eje', e)}
            >
              {e}
            </button>
          ))}
        </div>
      </FormSection>

      <FormSection title="Tipo de medida *" sub="Naturaleza de la acción que la recomendación exige.">
        <div className="radio-cards">
          {window.TIPOS_MEDIDA.map(t => (
            <label key={t.id} className={`radio-card${form.tipo === t.label ? ' is-selected' : ''}`}>
              <input type="radio" name="tipo" checked={form.tipo === t.label}
                onChange={() => update('tipo', t.label)} />
              <div className="radio-card__head">
                <div className="radio-card__dot"></div>
                <strong>{t.label}</strong>
              </div>
              <small>{t.desc}</small>
            </label>
          ))}
        </div>
      </FormSection>

      <FormSection title="Nivel de prioridad *" sub="Define el nivel de seguimiento que aplica la CGR.">
        <div className="prio-row">
          {['Alta', 'Media', 'Baja'].map(p => (
            <button key={p} type="button"
              className={`prio-btn prio-btn--${p.toLowerCase()}${form.prioridad === p ? ' is-selected' : ''}`}
              onClick={() => update('prioridad', p)}
            >
              <span className="prio-btn__dot"></span> {p}
            </button>
          ))}
        </div>
      </FormSection>

      <FormSection title="Referencia normativa" sub="Capítulo o artículo de la convención donde se origina la recomendación.">
        <div className="form-row form-row--2">
          <Field label="Capítulo / Artículo" hint="Ej. Capítulo II · Art. 16">
            <input type="text" value={form.capArt} onChange={e => update('capArt', e.target.value)}
              placeholder="Capítulo II · Art. 16" />
          </Field>
          <Field label="Vincular con otra recomendación" hint="Permite cruzar recomendaciones entre mecanismos">
            <button type="button" className="link-btn">
              <I.Link2 size={13} /> Buscar y vincular (opcional)
            </button>
          </Field>
        </div>
      </FormSection>
    </>
  );
}

// ====================================================================
// PASO 3 — Asignación de instituciones y plazos
// ====================================================================
function StepAsignacion({ form, update }) {
  const I = window.Icons;
  const removeInst = i => update('instituciones', form.instituciones.filter((_, idx) => idx !== i));
  const addInst = () => update('instituciones', [...form.instituciones, { sigla: '', rol: 'Apoyo', plazo: '' }]);

  return (
    <>
      <div className="cgr-callout">
        <I.AlertCircle size={16} />
        <div>
          <strong>Solo la CGR puede asignar instituciones responsables.</strong>
          <small>Una recomendación puede tener múltiples instituciones, cada una con su plazo interno
            propio. Las instituciones recibirán notificación por correo y bandeja interna al guardar.</small>
        </div>
      </div>

      <FormSection title="Instituciones responsables *" sub="Define una institución líder y, si aplica, instituciones de apoyo. Cada una recibe su propio plazo interno.">
        <div className="assign-stack">
          {form.instituciones.map((inst, i) => (
            <div className="assign-row" key={i}>
              <Field label="Institución" hint="Catálogo de instituciones reportantes">
                <select value={inst.sigla} onChange={e => {
                  const next = [...form.instituciones]; next[i] = { ...next[i], sigla: e.target.value };
                  update('instituciones', next);
                }}>
                  <option value="">Seleccionar…</option>
                  {window.INSTITUCIONES.map(o => <option key={o.id} value={o.sigla}>{o.nombre}</option>)}
                </select>
              </Field>
              <Field label="Rol">
                <select value={inst.rol} onChange={e => {
                  const next = [...form.instituciones]; next[i] = { ...next[i], rol: e.target.value };
                  update('instituciones', next);
                }}>
                  <option>Líder</option>
                  <option>Coordinación</option>
                  <option>Apoyo</option>
                </select>
              </Field>
              <Field label="Plazo interno" hint="Habilita alertas D-7 / D-3 / D-1">
                <input type="text" placeholder="dd mmm aaaa" value={inst.plazo}
                  onChange={e => {
                    const next = [...form.instituciones]; next[i] = { ...next[i], plazo: e.target.value };
                    update('instituciones', next);
                  }} />
              </Field>
              <button type="button" className="assign-row__del" onClick={() => removeInst(i)} disabled={form.instituciones.length === 1}>
                <I.XCircle size={16} />
              </button>
            </div>
          ))}
        </div>
        <button type="button" className="add-row" onClick={addInst}>
          <I.Plus size={14} /> Agregar otra institución
        </button>
      </FormSection>

      <FormSection title="Alertas automáticas" sub="Configurables por la CGR. Aplican al plazo interno definido.">
        <div className="alerts-grid">
          {[
            { code: 'D-7', label: 'Aviso de proximidad', def: true },
            { code: 'D-3', label: 'Recordatorio', def: true },
            { code: 'D-1', label: 'Urgencia', def: true },
            { code: 'D',   label: 'Vencimiento', def: true },
            { code: 'D+1', label: 'Sin avance', def: true },
          ].map(a => (
            <label key={a.code} className="toggle-row">
              <input type="checkbox" defaultChecked={a.def} />
              <span className="toggle-row__code mono">{a.code}</span>
              <span className="toggle-row__label">{a.label}</span>
            </label>
          ))}
        </div>
      </FormSection>
    </>
  );
}

// ====================================================================
// PASO 4 — Revisión
// ====================================================================
function StepRevision({ form }) {
  const I = window.Icons;
  return (
    <>
      <div className="review">
        <div className="review__header">
          <div>
            <div className="review__eyebrow">
              <span className={`mech-tag mech-tag--${form.mecanismo.toLowerCase()}`}>{form.mecanismo}</span>
              <span style={{ marginLeft: 8 }}>Ronda {form.ronda}</span>
            </div>
            <h3 className="review__title">{form.titulo || '— título pendiente —'}</h3>
          </div>
          <div className="review__id mono">{form.mecanismo.slice(0,3).toUpperCase()}-{form.ronda.replace(/\s+/g,'')}-•••</div>
        </div>

        <div className="review__section">
          <h4>Texto de la recomendación</h4>
          <p className="prose">{form.texto || 'Sin texto cargado.'}</p>
        </div>

        <div className="review__grid">
          <div><small>Eje temático</small><strong>{form.eje || '—'}</strong></div>
          <div><small>Tipo de medida</small><strong>{form.tipo}</strong></div>
          <div><small>Prioridad</small><strong>{form.prioridad}</strong></div>
          <div><small>Capítulo / Artículo</small><strong>{form.capArt || '—'}</strong></div>
        </div>

        <div className="review__section">
          <h4>Asignación inicial</h4>
          <div className="assign-list">
            {form.instituciones.map((a, i) => (
              <div className="assign" key={i}>
                <div className="assign__inst">
                  <strong>{a.sigla || '— sin asignar —'}</strong>
                </div>
                <div className="assign__role"><small>Rol</small><strong>{a.rol}</strong></div>
                <div className="assign__plazo"><small>Plazo</small><strong className="mono">{a.plazo || 'sin plazo'}</strong></div>
                <div className="assign__status">
                  <span className="status is-warn">
                    <I.Bell size={11} /> {a.plazo ? 'Alertas activas' : 'Sin alertas'}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="review__section">
          <h4>Documentos adjuntos</h4>
          {form.archivos.length === 0
            ? <p className="prose">Sin adjuntos.</p>
            : <ul className="files">
                {form.archivos.map((f, i) => (
                  <li key={i} className="file">
                    <I.FileText size={14} /> {f.name} <small>· {f.size}</small>
                  </li>
                ))}
              </ul>
          }
        </div>

        <div className="review__notice">
          <I.AlertCircle size={14} />
          <span>Al registrar, la recomendación quedará con <strong>estado inicial "No Cumplido"</strong> y
            se enviará notificación a las {form.instituciones.length} institución(es) asignada(s).</span>
        </div>
      </div>
    </>
  );
}

// ====================================================================
// Helpers de formulario
// ====================================================================
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, { NuevaRecomendacionPanel, FormSection, Field, FileDrop });