const { Button, IconButton, Input, Select, Checkbox, Badge, Icon } = window.Academia_fb1ae0;

const TURNOS = [
  { value: '', label: 'Sin preferencia' },
  { value: 'manana', label: 'Mañana' },
  { value: 'tarde', label: 'Tarde' },
  { value: 'noche', label: 'Noche' },
  { value: 'sabados', label: 'Sábados' },
];

const NOTEBOOK = [
  { value: '', label: 'Elegí una opción' },
  { value: 'si', label: 'Sí, tengo notebook' },
  { value: 'no', label: 'No, necesito equipo en el aula' },
];

function PreinscripcionModal({ abierto, cursoInicial, onClose }) {
  const t = window.GIO.t;
  const cursos = window.GIO.cursos;

  const vacio = {
    // nombre lleva nombre y apellido juntos.
    nombre: '', telefono: '', email: '',
    // La modalidad online está suspendida; se envía siempre presencial.
    curso_id: '', modalidad: 'presencial', turno: '', notebook: '', novedades: true,
  };

  const [form, setForm] = React.useState(vacio);
  const [errores, setErrores] = React.useState({});
  const [enviando, setEnviando] = React.useState(false);
  const [enviado, setEnviado] = React.useState(false);
  const [errorGeneral, setErrorGeneral] = React.useState('');

  // Al abrir: reinicia el formulario y preselecciona el curso clickeado.
  React.useEffect(() => {
    if (abierto) {
      setForm({ ...vacio, curso_id: cursoInicial ? String(cursoInicial.id) : '' });
      setErrores({});
      setEnviado(false);
      setErrorGeneral('');
    }
  }, [abierto, cursoInicial]);

  // Cerrar con Escape.
  React.useEffect(() => {
    if (!abierto) return undefined;
    const onKey = ev => { if (ev.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [abierto, onClose]);

  if (!abierto) return null;

  const set = campo => ev => {
    const valor = ev.target.type === 'checkbox' ? ev.target.checked : ev.target.value;
    setForm(f => ({ ...f, [campo]: valor }));
    setErrores(e => ({ ...e, [campo]: null }));
  };

  function validar() {
    const err = {};
    const nombre = form.nombre.trim().replace(/\s+/g, ' ');
    if (nombre.length < 3 || !nombre.includes(' ')) err.nombre = 'Escribí tu nombre y apellido.';
    if (form.telefono.replace(/\D/g, '').length < 8) err.telefono = 'Escribí un teléfono válido.';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) err.email = 'Escribí un email válido.';
    if (!form.curso_id) err.curso_id = 'Elegí el curso que te interesa.';
    if (!form.notebook) err.notebook = 'Contanos si tenés notebook.';
    setErrores(err);
    return Object.keys(err).length === 0;
  }

  async function enviar(ev) {
    ev.preventDefault();
    if (enviando || !validar()) return;
    setEnviando(true);
    setErrorGeneral('');
    try {
      const res = await fetch(window.GIO.apiPreinscripcion, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json();
      if (data.ok) {
        setEnviado(true);
      } else {
        setErrores(data.errores || {});
        setErrorGeneral(data.mensaje || 'No pudimos guardar tu preinscripción. Probá de nuevo.');
      }
    } catch (e) {
      setErrorGeneral('No pudimos conectar con el servidor. Revisá tu conexión y probá de nuevo.');
    } finally {
      setEnviando(false);
    }
  }

  const cursoElegido = cursos.find(c => String(c.id) === String(form.curso_id));
  const opcionesCurso = [{ value: '', label: 'Elegí un curso' }]
    .concat(cursos.map(c => ({ value: String(c.id), label: c.titulo })))
    .concat([{ value: 'asesoramiento', label: 'Todavía no sé — quiero que me asesoren' }]);

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 90, background: 'rgba(16,16,19,.62)', backdropFilter: 'blur(4px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-6)' }}>
      <div onClick={ev => ev.stopPropagation()} role="dialog" aria-modal="true" aria-label={t.form_titulo}
        style={{ width: 'min(600px,100%)', maxHeight: '90vh', overflowY: 'auto', background: 'var(--surface-card)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', padding: 'var(--space-8)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>

        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--space-4)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
            <Badge tone="brand">{cursoElegido ? cursoElegido.areaLabel : t.form_titulo}</Badge>
            <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-title-l)', fontWeight: 'var(--weight-extrabold)', color: 'var(--text-heading)', margin: 0, letterSpacing: 'var(--tracking-tight)', textWrap: 'balance' }}>
              {enviado ? t.form_gracias_titulo : (cursoElegido ? cursoElegido.titulo : t.form_titulo)}
            </h3>
          </div>
          <IconButton icon="x" label="Cerrar" variant="ghost" onClick={onClose} />
        </div>

        {enviado ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <div style={{ display: 'flex', gap: 12, padding: 'var(--space-5)', background: 'var(--green-100)', borderRadius: 'var(--radius-md)', color: 'var(--green-500)' }}>
              <Icon name="check-circle" size={22} style={{ flex: '0 0 auto' }} />
              <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-m)', color: 'var(--ink-700)' }}>{t.form_gracias_texto}</span>
            </div>
            {window.GIO.contacto.waLink ? (
              <Button variant="accent" fullWidth icon="message-circle" as="a" href={window.GIO.contacto.waLink} target="_blank" rel="noopener">
                {t.contacto_whatsapp_boton}
              </Button>
            ) : null}
            <Button variant="secondary" fullWidth onClick={onClose}>Volver a los cursos</Button>
          </div>
        ) : (
          <form onSubmit={enviar} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-m)', color: 'var(--text-muted)', margin: 0, textWrap: 'pretty' }}>
              {cursoElegido ? cursoElegido.descripcion : t.form_bajada}
            </p>

            {cursoElegido ? (
              <div style={{ display: 'flex', gap: 'var(--space-5)', flexWrap: 'wrap', padding: 'var(--space-4)', background: 'var(--surface-sunken)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', color: 'var(--text-body)' }}>
                {cursoElegido.nivel ? <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Icon name="signal" size={15} />{cursoElegido.nivel}</span> : null}
                {cursoElegido.horas ? <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Icon name="clock" size={15} />{cursoElegido.horas}</span> : null}
                {cursoElegido.clases ? <span style={{ display: 'inline-flex', gap: 6, alignItems: 'center' }}><Icon name="play-circle" size={15} />{cursoElegido.clases}</span> : null}
              </div>
            ) : null}

            <Input label="Nombre y apellido" icon="user" placeholder="Tu nombre y apellido" name="nombre"
              value={form.nombre} onChange={set('nombre')} error={errores.nombre} autoComplete="name" required />

            <div className="gio-form-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-4)' }}>
              <Input label="Teléfono / WhatsApp" icon="phone" placeholder="+54 9 ..." name="telefono" type="tel"
                value={form.telefono} onChange={set('telefono')} error={errores.telefono} autoComplete="tel" required />
              <Input label="Email" icon="mail" placeholder="tunombre@correo.com" name="email" type="email"
                value={form.email} onChange={set('email')} error={errores.email} autoComplete="email" required />
            </div>

            <div>
              <Select label="Curso al que te querés inscribir" name="curso_id" value={form.curso_id}
                onChange={set('curso_id')} options={opcionesCurso} required />
              {errores.curso_id ? (
                <span style={{ display: 'block', marginTop: 6, fontFamily: 'var(--font-body)', fontSize: 'var(--text-caption)', color: 'var(--danger)' }}>{errores.curso_id}</span>
              ) : null}
            </div>

            <Select label="Turno preferido" name="turno" value={form.turno} onChange={set('turno')} options={TURNOS} />

            <div>
              <Select label="¿Disponés de notebook?" name="notebook" value={form.notebook}
                onChange={set('notebook')} options={NOTEBOOK} required />
              {errores.notebook ? (
                <span style={{ display: 'block', marginTop: 6, fontFamily: 'var(--font-body)', fontSize: 'var(--text-caption)', color: 'var(--danger)' }}>{errores.notebook}</span>
              ) : null}
            </div>

            <Checkbox label={t.form_novedades} checked={form.novedades} onChange={set('novedades')} />

            {errorGeneral ? (
              <div style={{ display: 'flex', gap: 10, padding: 'var(--space-4)', background: 'var(--red-100)', borderRadius: 'var(--radius-md)', fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-s)', color: 'var(--ink-700)' }}>
                <Icon name="alert-circle" size={18} style={{ color: 'var(--danger)', flex: '0 0 auto' }} />
                <span>{errorGeneral}</span>
              </div>
            ) : null}

            <Button type="submit" variant="primary" size="lg" fullWidth icon="send" disabled={enviando}>
              {enviando ? 'Enviando...' : t.form_boton}
            </Button>

            <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-caption)', color: 'var(--text-muted)', textAlign: 'center' }}>
              La preinscripción no tiene costo ni compromiso. Te contactamos para confirmar el cupo.
            </span>
          </form>
        )}
      </div>
    </div>
  );
}
Object.assign(window, { PreinscripcionModal });