const { useState: useStateModal, useEffect: useEffectModal } = React;

const EMPTY_FORM = {
  nombre: '',
  apellidos: '',
  empresa: '',
  cargo: '',
  email: '',
  telefono: '',
  acompanantes: 0,
  quiereDemo: false,
  demoUsos: [],
  demoWeb: '',
  pregunta: '',
  extra: '',
  consent: false,
};

function ConfirmModal({ open, onClose, prefillEmail, prefillDemo }) {
  const [form, setForm] = useStateModal(EMPTY_FORM);
  const [errors, setErrors] = useStateModal({});
  const [submitting, setSubmitting] = useStateModal(false);
  const [result, setResult] = useStateModal(null);
  const [serverError, setServerError] = useStateModal('');

  useEffectModal(() => {
    if (!open) return;
    setForm((f) => ({
      ...f,
      email: prefillEmail || f.email,
      quiereDemo: prefillDemo ? true : f.quiereDemo,
    }));
  }, [open, prefillEmail, prefillDemo]);

  useEffectModal(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === 'Escape' && !submitting) close();
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, submitting]);

  if (!open) return null;

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

  const toggleUso = (x) => {
    const has = form.demoUsos.includes(x);
    set('demoUsos', has ? form.demoUsos.filter((i) => i !== x) : [...form.demoUsos, x]);
  };

  const validate = () => {
    const e = {};
    if (!form.nombre.trim()) e.nombre = 'Requerido';
    if (!form.apellidos.trim()) e.apellidos = 'Requerido';
    if (!form.empresa.trim()) e.empresa = 'Requerido';
    if (!form.email.trim()) e.email = 'Requerido';
    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = 'Email no válido';
    if (!form.telefono.trim()) e.telefono = 'Requerido — te llamará SKAI';
    else if (form.telefono.replace(/\D/g, '').length < 9) e.telefono = 'Teléfono no válido';
    if (!form.consent) e.consent = 'Debes aceptar la política';
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (submitting) return;
    setServerError('');
    if (!validate()) return;

    setSubmitting(true);
    try {
      const resp = await fetch('/api/rsvp', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          nombre: form.nombre.trim(),
          apellidos: form.apellidos.trim(),
          empresa: form.empresa.trim(),
          cargo: form.cargo.trim(),
          email: form.email.trim().toLowerCase(),
          telefono: form.telefono.trim(),
          acompanantes: Number(form.acompanantes) || 0,
          quiereDemo: !!form.quiereDemo,
          demoUsos: form.quiereDemo ? form.demoUsos : [],
          demoWeb: form.quiereDemo ? form.demoWeb.trim() : '',
          pregunta: form.pregunta.trim(),
          extra: form.extra.trim(),
          consent: form.consent,
        }),
      });

      let payload = null;
      try {
        payload = await resp.json();
      } catch (_) {
        /* respuesta no JSON */
      }

      if (!resp.ok || !payload?.ok) {
        throw new Error(
          payload?.error || `Error ${resp.status}. Inténtalo de nuevo en unos segundos.`
        );
      }

      setResult({ status: payload.status, demo: payload.demo });
    } catch (err) {
      setServerError(err.message || 'No se pudo enviar la confirmación. Inténtalo de nuevo.');
    } finally {
      setSubmitting(false);
    }
  };

  const close = () => {
    if (submitting) return;
    setResult(null);
    setServerError('');
    setForm(EMPTY_FORM);
    setErrors({});
    onClose();
  };

  const isConfirmed = result?.status === 'confirmed';

  return (
    <div
      className="modal-scrim"
      onClick={(e) => {
        if (e.target.classList.contains('modal-scrim')) close();
      }}
    >
      <div className="modal" role="dialog" aria-modal="true" aria-label="Confirmar asistencia">
        <button className="close" onClick={close} aria-label="Cerrar" disabled={submitting}>
          ✕
        </button>

        {result ? (
          <div className="success">
            <div className="success-mark" aria-hidden="true">
              {isConfirmed ? '✓' : '·'}
            </div>
            <h4>{isConfirmed ? 'Estás dentro' : 'Hemos recibido tu solicitud'}</h4>
            <p>
              {isConfirmed ? (
                <>
                  Te hemos mandado la confirmación a <strong>{form.email}</strong> con la
                  ubicación y los detalles.
                </>
              ) : (
                <>
                  No estabas en la lista de invitados, así que tu plaza queda pendiente de
                  revisión. Te hemos escrito a <strong>{form.email}</strong> y te avisamos en
                  cuanto la confirmemos.
                </>
              )}
            </p>
            {result.demo && (
              <p className="success-demo">
                Has pedido tu agente. Si entras en las {EVENT.cupoDemos} plazas te llamamos
                para preparar los datos antes del evento.
              </p>
            )}
            <div className="success-actions">
              <button className="btn btn-primary" onClick={close}>
                Volver
              </button>
              {isConfirmed && (
                <a className="btn btn-ghost" href={buildIcs()} download="skai-live-26.ics">
                  Añadir al calendario
                </a>
              )}
            </div>
          </div>
        ) : (
          <form onSubmit={submit} noValidate>
            <h3>Confirmar asistencia</h3>
            <p className="lede">
              {EVENT.dateLabel} · {EVENT.timeRange} · #LaPlaza, Circular Universe (Logroño)
            </p>

            <div className="form-grid">
              <div className="field">
                <label htmlFor="f-nombre">Nombre *</label>
                <input
                  id="f-nombre"
                  className={errors.nombre ? 'error' : ''}
                  value={form.nombre}
                  onChange={(e) => set('nombre', e.target.value)}
                  disabled={submitting}
                  autoComplete="given-name"
                />
                {errors.nombre && <span className="err">{errors.nombre}</span>}
              </div>

              <div className="field">
                <label htmlFor="f-apellidos">Apellidos *</label>
                <input
                  id="f-apellidos"
                  className={errors.apellidos ? 'error' : ''}
                  value={form.apellidos}
                  onChange={(e) => set('apellidos', e.target.value)}
                  disabled={submitting}
                  autoComplete="family-name"
                />
                {errors.apellidos && <span className="err">{errors.apellidos}</span>}
              </div>

              <div className="field">
                <label htmlFor="f-empresa">Empresa *</label>
                <input
                  id="f-empresa"
                  className={errors.empresa ? 'error' : ''}
                  value={form.empresa}
                  onChange={(e) => set('empresa', e.target.value)}
                  disabled={submitting}
                  autoComplete="organization"
                />
                {errors.empresa && <span className="err">{errors.empresa}</span>}
              </div>

              <div className="field">
                <label htmlFor="f-cargo">Cargo</label>
                <input
                  id="f-cargo"
                  value={form.cargo}
                  onChange={(e) => set('cargo', e.target.value)}
                  disabled={submitting}
                  autoComplete="organization-title"
                />
              </div>

              <div className="field">
                <label htmlFor="f-email">Email *</label>
                <input
                  id="f-email"
                  type="email"
                  className={errors.email ? 'error' : ''}
                  value={form.email}
                  onChange={(e) => set('email', e.target.value)}
                  disabled={submitting}
                  autoComplete="email"
                />
                {errors.email && <span className="err">{errors.email}</span>}
              </div>

              <div className="field">
                <label htmlFor="f-telefono">Teléfono *</label>
                <input
                  id="f-telefono"
                  type="tel"
                  className={errors.telefono ? 'error' : ''}
                  value={form.telefono}
                  onChange={(e) => set('telefono', e.target.value)}
                  disabled={submitting}
                  autoComplete="tel"
                  placeholder="600 000 000"
                />
                {errors.telefono && <span className="err">{errors.telefono}</span>}
              </div>

              <div className="field full">
                <label htmlFor="f-acomp">¿Vienes con alguien?</label>
                <div className="counter">
                  {[0, 1, 2, 3].map((n) => (
                    <button
                      key={n}
                      type="button"
                      className={Number(form.acompanantes) === n ? 'on' : ''}
                      onClick={() => set('acompanantes', n)}
                      disabled={submitting}
                    >
                      {n === 0 ? 'Voy solo' : `+${n}`}
                    </button>
                  ))}
                </div>
              </div>

              {/* --- El regalo estrella --- */}
              <div className="field full">
                <label className={`demo-toggle ${form.quiereDemo ? 'on' : ''}`}>
                  <input
                    type="checkbox"
                    checked={form.quiereDemo}
                    onChange={(e) => set('quiereDemo', e.target.checked)}
                    disabled={submitting}
                  />
                  <span className="demo-copy">
                    <strong>Quiero mi SKAI gratis</strong>
                    <small>
                      Montamos tu agente antes del evento y te lo llevas con siete días de
                      acceso. {EVENT.cupoDemos} plazas.
                    </small>
                  </span>
                </label>
              </div>

              {form.quiereDemo && (
                <>
                  <div className="field full">
                    <label>¿Para qué lo quieres? · Marca lo que encaje</label>
                    <div className="chips">
                      {DEMO_USOS.map((u) => (
                        <button
                          key={u}
                          type="button"
                          className={form.demoUsos.includes(u) ? 'on' : ''}
                          onClick={() => toggleUso(u)}
                          disabled={submitting}
                        >
                          {u}
                        </button>
                      ))}
                    </div>
                  </div>
                  <div className="field full">
                    <label htmlFor="f-web">Web de tu empresa</label>
                    <input
                      id="f-web"
                      value={form.demoWeb}
                      onChange={(e) => set('demoWeb', e.target.value)}
                      disabled={submitting}
                      placeholder="tuempresa.com"
                    />
                    <span className="hint">
                      Es de donde tu agente sacará la información para responder.
                    </span>
                  </div>
                </>
              )}

              <div className="field full">
                <label htmlFor="f-pregunta">Tu pregunta más difícil</label>
                <textarea
                  id="f-pregunta"
                  value={form.pregunta}
                  onChange={(e) => set('pregunta', e.target.value)}
                  disabled={submitting}
                  placeholder="La que crees que va a dejar en evidencia a nuestra IA. La responderemos en directo."
                />
              </div>

              <div className="field full">
                <label htmlFor="f-extra">Alergias, intolerancias o accesibilidad</label>
                <textarea
                  id="f-extra"
                  value={form.extra}
                  onChange={(e) => set('extra', e.target.value)}
                  disabled={submitting}
                  placeholder="Opcional — hay catering"
                />
              </div>

              <label className="consent full">
                <input
                  type="checkbox"
                  checked={form.consent}
                  onChange={(e) => set('consent', e.target.checked)}
                  disabled={submitting}
                />
                <span>
                  Acepto el tratamiento de mis datos para gestionar mi asistencia a SKAI LIVE
                  '26, conforme a la <a href="/privacidad" target="_blank" rel="noreferrer">política de privacidad</a>.
                  {errors.consent && (
                    <span className="err" style={{ display: 'block', marginTop: 4 }}>
                      {errors.consent}
                    </span>
                  )}
                </span>
              </label>
            </div>

            {serverError && (
              <div className="form-error" role="alert">
                {serverError}
              </div>
            )}

            <div className="modal-actions">
              <div className="meta mono">* Campos obligatorios</div>
              <button className="btn btn-primary" type="submit" disabled={submitting}>
                {submitting ? (
                  'Enviando…'
                ) : (
                  <>
                    Confirmar <span className="arrow">→</span>
                  </>
                )}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

function buildIcs() {
  const pad = (n) => String(n).padStart(2, '0');
  const dt = (d) =>
    `${d.getUTCFullYear()}${pad(d.getUTCMonth() + 1)}${pad(d.getUTCDate())}T${pad(
      d.getUTCHours()
    )}${pad(d.getUTCMinutes())}${pad(d.getUTCSeconds())}Z`;

  const start = EVENT.date;
  const end = EVENT.dateEnd;

  const ics = [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//Solverkey//SKAI LIVE 26//ES',
    'BEGIN:VEVENT',
    'UID:skai-live-26@holasoyskai.com',
    `DTSTAMP:${dt(new Date())}`,
    `DTSTART:${dt(start)}`,
    `DTEND:${dt(end)}`,
    "SUMMARY:SKAI LIVE '26",
    `LOCATION:#LaPlaza\\, Circular Universe\\, ${EVENT.address}\\, Logroño`,
    'DESCRIPTION:Ven con tu web. Vete con tu IA.',
    'BEGIN:VALARM',
    'ACTION:DISPLAY',
    `DESCRIPTION:Mañana SKAI LIVE '26 a las ${EVENT.timeLabel} en Logroño`,
    'TRIGGER:-P1D',
    'END:VALARM',
    'END:VEVENT',
    'END:VCALENDAR',
  ].join('\r\n');

  return 'data:text/calendar;charset=utf-8,' + encodeURIComponent(ics);
}

window.ConfirmModal = ConfirmModal;
window.buildIcs = buildIcs;