/* global React */
// Slide-over: Nueva Institución (HU.4.3)
// Súper Admin · CGR — alta de institución reportante en el catálogo

const { useState: useStateNI } = React;

const TIPOS_INST = [
  { id: 'min',  label: 'Ministerio',           desc: 'Carteras del Poder Ejecutivo' },
  { id: 'sec',  label: 'Secretaría Ejecutiva', desc: 'Reporta directamente a la Presidencia' },
  { id: 'ctrl', label: 'Órgano de Control',    desc: 'CGR, Auditoría General, etc.' },
  { id: 'extra',label: 'Órgano Extra-Poder',   desc: 'Ministerio Público, Defensoría, etc.' },
  { id: 'sub',  label: 'Subsecretaría',        desc: 'Dependiente de un ministerio' },
  { id: 'dir',  label: 'Dirección',            desc: 'Dirección Nacional autónoma' },
  { id: 'esp',  label: 'Unidad Especializada', desc: 'Ej. SEPRELAD, UIF' },
  { id: 'pod',  label: 'Poder del Estado',     desc: 'Legislativo, Judicial' },
];

function NuevaInstitucionPanel({ open, onClose, onSave }) {
  const I = window.Icons;
  const FormSection = window.FormSection;
  const Field = window.Field;

  const [step, setStep] = useStateNI(1);
  const [form, setForm] = useStateNI({
    nombre: '',
    sigla: '',
    tipo: 'Ministerio',
    descripcion: '',
    dominio: '',
    direccion: '',
    ciudad: 'Asunción',
    web: '',
    admin_nombre: '',
    admin_email: '',
    admin_telefono: '',
    admin_cargo: '',
    canalAlerta: ['email', 'bandeja'],
    estadoInicial: 'activo',
    notas: '',
  });

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const toggleCanal = (k) => setForm(f => ({
    ...f, canalAlerta: f.canalAlerta.includes(k)
      ? f.canalAlerta.filter(x => x !== k)
      : [...f.canalAlerta, k],
  }));

  if (!open) return null;

  const steps = [
    { n: 1, label: 'Identificación' },
    { n: 2, label: 'Contacto principal' },
    { n: 3, label: 'Notificaciones y estado' },
    { n: 4, label: 'Revisión y alta' },
  ];
  const progress = (step / steps.length) * 100;

  const slugId = (form.sigla || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');

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

      <aside className="sheet sheet--wide">
        <header className="sheet__head">
          <div>
            <div className="sheet__eyebrow">
              <I.Building2 size={13} /> Catálogo de instituciones reportantes
            </div>
            <h2 className="sheet__title">Nueva institución</h2>
            <p className="sheet__sub">
              Solo el Súper Administrador de la CGR puede dar de alta una institución reportante.
              El ID interno se genera a partir de la sigla. Las instituciones desactivadas conservan
              su historial.
            </p>
          </div>
          <button type="button" className="sheet__close" onClick={onClose} aria-label="Cerrar">
            <I.XCircle size={20} />
          </button>
        </header>

        <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>

        <div className="sheet__body">
          {step === 1 && (
            <>
              <FormSection title="Identificación oficial *" sub="Nombre completo y sigla con que figura en actos administrativos y comunicaciones formales.">
                <div className="form-row form-row--2">
                  <Field label="Nombre completo *" hint="Razón social conforme decreto o ley">
                    <input type="text" value={form.nombre} onChange={e => update('nombre', e.target.value)}
                      placeholder="Ministerio de Tecnologías de la Información y Comunicación" />
                  </Field>
                  <Field label="Sigla *" hint="2 a 8 caracteres en mayúsculas">
                    <input type="text" maxLength="8" value={form.sigla}
                      onChange={e => update('sigla', e.target.value.toUpperCase())}
                      placeholder="MITIC" />
                  </Field>
                </div>
                <div className="form-row form-row--2">
                  <Field label="ID interno" hint="Se genera automáticamente a partir de la sigla">
                    <div className="generated-id mono">{slugId || '— sigla pendiente —'}</div>
                  </Field>
                  <Field label="Sitio web oficial">
                    <input type="text" value={form.web} onChange={e => update('web', e.target.value)}
                      placeholder="https://www.mitic.gov.py" />
                  </Field>
                </div>
                <Field label="Descripción breve" hint="Cómo se presenta en el catálogo público (máx. 200 caracteres)">
                  <textarea rows="2" maxLength="200" value={form.descripcion}
                    onChange={e => update('descripcion', e.target.value)}
                    placeholder="Cartera ejecutiva responsable de las políticas TIC del Estado paraguayo." />
                  <div className="field__counter">{form.descripcion.length} / 200</div>
                </Field>
              </FormSection>

              <FormSection title="Tipo de institución *" sub="Define dónde se ubica en el catálogo y los filtros disponibles para la CGR.">
                <div className="radio-cards inst-type-grid">
                  {TIPOS_INST.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="Domicilio" sub="Dirección física para correspondencia oficial. Opcional.">
                <div className="form-row form-row--3">
                  <Field label="Dirección">
                    <input type="text" value={form.direccion} onChange={e => update('direccion', e.target.value)}
                      placeholder="Av. Mcal. López 3333" />
                  </Field>
                  <Field label="Ciudad">
                    <input type="text" value={form.ciudad} onChange={e => update('ciudad', e.target.value)} />
                  </Field>
                  <Field label="Dominio de correo *" hint="Para validar futuros usuarios">
                    <input type="text" value={form.dominio} onChange={e => update('dominio', e.target.value)}
                      placeholder="@mitic.gov.py" />
                  </Field>
                </div>
              </FormSection>
            </>
          )}

          {step === 2 && (
            <>
              <div className="cgr-callout">
                <I.AlertCircle size={16} />
                <div>
                  <strong>Contacto principal = primer usuario de la institución.</strong>
                  <small>Será dado de alta como <em>Institución Reportante</em> con permiso de
                    cargar avances. Recibirá un correo de activación al guardar. Podrás agregar más
                    usuarios desde el módulo de Usuarios.</small>
                </div>
              </div>

              <FormSection title="Persona designada *" sub="Funcionario/a responsable del seguimiento de compromisos en la plataforma.">
                <div className="form-row form-row--2">
                  <Field label="Nombre completo *">
                    <input type="text" value={form.admin_nombre}
                      onChange={e => update('admin_nombre', e.target.value)}
                      placeholder="Lorena Ramírez Aquino" />
                  </Field>
                  <Field label="Cargo en la institución">
                    <input type="text" value={form.admin_cargo}
                      onChange={e => update('admin_cargo', e.target.value)}
                      placeholder="Coordinadora de la UTA" />
                  </Field>
                </div>
                <div className="form-row form-row--2">
                  <Field label="Correo institucional *" hint="Debe coincidir con el dominio declarado">
                    <div className="input-with-icon">
                      <I.AtSign size={14} />
                      <input type="email" value={form.admin_email}
                        onChange={e => update('admin_email', e.target.value)}
                        placeholder={`l.ramirez${form.dominio || '@institucion.gov.py'}`} />
                    </div>
                  </Field>
                  <Field label="Teléfono de contacto" hint="Opcional · solo visible para CGR">
                    <div className="input-with-icon">
                      <I.Phone size={14} />
                      <input type="tel" value={form.admin_telefono}
                        onChange={e => update('admin_telefono', e.target.value)}
                        placeholder="+595 21 414 9000" />
                    </div>
                  </Field>
                </div>
              </FormSection>

              <FormSection title="Rol en la institución" sub="Por defecto el contacto principal recibe permisos de carga. Puedes habilitar permisos adicionales más tarde.">
                <div className="perm-grid">
                  {[
                    { code: 'cargar', label: 'Cargar avances', desc: 'Sube evidencia y descripción', def: true },
                    { code: 'aprobar', label: 'Aprobar evidencia interna', desc: 'Visto bueno antes de enviar a CGR', def: false },
                    { code: 'usuarios', label: 'Gestionar usuarios de la institución', desc: 'Invitar y desactivar pares', def: false },
                  ].map(p => (
                    <label key={p.code} className="perm-row">
                      <input type="checkbox" defaultChecked={p.def} />
                      <div>
                        <strong>{p.label}</strong>
                        <small>{p.desc}</small>
                      </div>
                    </label>
                  ))}
                </div>
              </FormSection>
            </>
          )}

          {step === 3 && (
            <>
              <FormSection title="Canales de notificación habilitados" sub="Cómo recibe la institución avisos de nuevos compromisos, devoluciones y vencimientos.">
                <div className="alerts-grid">
                  {[
                    { code: 'email',    label: 'Correo electrónico', desc: 'Diario consolidado + alertas críticas' },
                    { code: 'bandeja',  label: 'Bandeja interna',    desc: 'Mensajería dentro de la plataforma' },
                    { code: 'sms',      label: 'SMS al referente',   desc: 'Solo alertas D-1 y vencimientos' },
                    { code: 'webhook',  label: 'Webhook institucional', desc: 'Integración con sistemas propios' },
                  ].map(c => (
                    <label key={c.code} className="toggle-row toggle-row--wide">
                      <input type="checkbox"
                        checked={form.canalAlerta.includes(c.code)}
                        onChange={() => toggleCanal(c.code)} />
                      <div>
                        <span className="toggle-row__label">{c.label}</span>
                        <small>{c.desc}</small>
                      </div>
                    </label>
                  ))}
                </div>
              </FormSection>

              <FormSection title="Estado inicial *" sub="Define si la institución empieza a operar de inmediato o queda pendiente de activación.">
                <div className="radio-cards" style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
                  {[
                    { v: 'activo',     label: 'Activa',     desc: 'Disponible para asignación inmediata' },
                    { v: 'pendiente',  label: 'Pendiente',  desc: 'Espera primer ingreso del contacto' },
                    { v: 'borrador',   label: 'Borrador',   desc: 'No visible para el resto de la CGR' },
                  ].map(o => (
                    <label key={o.v} className={`radio-card${form.estadoInicial === o.v ? ' is-selected' : ''}`}>
                      <input type="radio" name="estado" checked={form.estadoInicial === o.v}
                        onChange={() => update('estadoInicial', o.v)} />
                      <div className="radio-card__head">
                        <div className="radio-card__dot"></div>
                        <strong>{o.label}</strong>
                      </div>
                      <small>{o.desc}</small>
                    </label>
                  ))}
                </div>
              </FormSection>

              <FormSection title="Notas internas" sub="Visible solo para Súper Admin y Admin CGR. Útil para registrar acuerdos previos o contexto político.">
                <Field label="Anotaciones">
                  <textarea rows="3" value={form.notas} onChange={e => update('notas', e.target.value)}
                    placeholder="Ej. Convenio interinstitucional firmado en abr 2025; depende del Decreto 4567/25." />
                </Field>
              </FormSection>
            </>
          )}

          {step === 4 && (
            <div className="review">
              <div className="review__header">
                <div>
                  <div className="review__eyebrow">
                    <span className="status is-info">{form.tipo}</span>
                    <span style={{ marginLeft: 8 }}>{slugId ? `ID interno: ${slugId}` : 'ID pendiente'}</span>
                  </div>
                  <h3 className="review__title">{form.nombre || '— nombre pendiente —'}</h3>
                </div>
                <div className="review__id" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div className="inst-card__avatar" style={{ width: 44, height: 44 }}>
                    {(form.sigla || '??').slice(0, 4)}
                  </div>
                </div>
              </div>

              <div className="review__section">
                <h4>Descripción</h4>
                <p className="prose">{form.descripcion || 'Sin descripción cargada.'}</p>
              </div>

              <div className="review__grid">
                <div><small>Sigla</small><strong>{form.sigla || '—'}</strong></div>
                <div><small>Dominio email</small><strong className="mono">{form.dominio || '—'}</strong></div>
                <div><small>Ciudad</small><strong>{form.ciudad || '—'}</strong></div>
                <div><small>Sitio web</small><strong className="mono" style={{ fontSize: 11.5 }}>{form.web || '—'}</strong></div>
              </div>

              <div className="review__section">
                <h4>Contacto principal · primer usuario</h4>
                <div className="assign-list">
                  <div className="assign">
                    <div className="assign__inst">
                      <strong>{form.admin_nombre || '— sin asignar —'}</strong>
                      <small style={{ display: 'block', color: 'var(--cgr-text-muted)', fontSize: 11 }}>
                        {form.admin_cargo || 'Cargo sin definir'}
                      </small>
                    </div>
                    <div className="assign__role"><small>Correo</small><strong className="mono" style={{ fontSize: 11.5 }}>{form.admin_email || '—'}</strong></div>
                    <div className="assign__plazo"><small>Teléfono</small><strong className="mono">{form.admin_telefono || '—'}</strong></div>
                    <div className="assign__status">
                      <span className="role-pill-tag role-inst">Institución Reportante</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="review__section">
                <h4>Notificaciones habilitadas</h4>
                <div className="chips" style={{ marginTop: 4 }}>
                  {form.canalAlerta.length === 0
                    ? <span className="status is-warn">Sin canales activos</span>
                    : form.canalAlerta.map(c => (
                        <span key={c} className="chip is-active">{c}</span>
                      ))
                  }
                </div>
              </div>

              {form.notas && (
                <div className="review__section">
                  <h4>Notas internas</h4>
                  <p className="prose">{form.notas}</p>
                </div>
              )}

              <div className="review__notice">
                <I.AlertCircle size={14} />
                <span>Al confirmar, la institución quedará con estado <strong>"{form.estadoInicial}"</strong> y
                  el contacto principal recibirá un correo de activación con su enlace personal.</span>
              </div>
            </div>
          )}
        </div>

        <footer className="sheet__foot">
          <div className="sheet__foot-left">
            <I.AlertCircle size={13} />
            <span>Los campos marcados con * son obligatorios. Quedará registro en el log de auditoría.</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} /> Dar de alta institución
              </button>
            )}
          </div>
        </footer>
      </aside>
    </div>
  );
}

Object.assign(window, { NuevaInstitucionPanel });