// CourseCheckoutPage.jsx — focused two-step checkout for course buyers.
const {
  useState: useCheckoutState,
  useMemo: useCheckoutMemo,
  useEffect: useCheckoutEffect,
} = React;

const checkoutPageConfig = window.CourseFunnelData.config;

function validateCourseCheckoutForm(form) {
  const errors = {};

  if (String(form.name || '').trim().length < 2) {
    errors.name = 'Ingresá tu nombre.';
  }

  if (!isValidCourseEmail(form.email)) {
    errors.email = 'Ingresá un email válido.';
  }

  if (!form.consent) {
    errors.consent = 'Necesito tu autorización para enviarte la información del curso.';
  }

  return errors;
}

function CourseCheckoutField({
  id,
  label,
  hint,
  error,
  as = 'input',
  ...fieldProps
}) {
  const Field = as;
  const describedBy = [
    hint ? `${id}-hint` : '',
    error ? `${id}-error` : '',
  ].filter(Boolean).join(' ') || undefined;

  return (
    <div className={`course-checkout-field ${error ? 'has-error' : ''}`}>
      <label htmlFor={id}>{label}</label>
      <Field
        id={id}
        aria-invalid={Boolean(error)}
        aria-describedby={describedBy}
        {...fieldProps}
      />
      {hint ? <small id={`${id}-hint`}>{hint}</small> : null}
      {error ? <span id={`${id}-error`} role="alert">{error}</span> : null}
    </div>
  );
}

function CourseCheckoutPage() {
  useCourseRoute('checkout');

  const storedBuyer = useCheckoutMemo(() => getStoredCourseBuyer(), []);
  const [form, setForm] = useCheckoutState({
    name: storedBuyer?.name || '',
    email: storedBuyer?.email || '',
    whatsapp: storedBuyer?.whatsapp || '',
    idea: storedBuyer?.idea || '',
    website: '',
    consent: Boolean(storedBuyer),
  });
  const [errors, setErrors] = useCheckoutState({});
  const [status, setStatus] = useCheckoutState('idle');
  const [leadReady, setLeadReady] = useCheckoutState(Boolean(storedBuyer));
  const [message, setMessage] = useCheckoutState('');

  const paymentUrl = buildCoursePaymentUrl();
  const paymentConfigured = Boolean(paymentUrl);
  const checkoutCancelled =
    new URLSearchParams(window.location.search).get('checkout') === 'cancelado';

  useCheckoutEffect(() => {
    if (!paymentConfigured) return undefined;

    loadHotmartCheckoutWidget()
      .then(() => trackCourseEvent('course_hotmart_widget_loaded'))
      .catch(() => trackCourseEvent('course_hotmart_widget_error'));

    return undefined;
  }, [paymentConfigured]);

  function updateField(event) {
    const { name, type, checked, value } = event.target;
    setForm((current) => ({
      ...current,
      [name]: type === 'checkbox' ? checked : value,
    }));
    setErrors((current) => ({ ...current, [name]: undefined }));
    setLeadReady(false);
    setMessage('');
  }

  async function handleSubmit(event) {
    event.preventDefault();
    const nextErrors = validateCourseCheckoutForm(form);
    setErrors(nextErrors);

    if (Object.keys(nextErrors).length) {
      setStatus('error');
      setMessage('Revisá los campos marcados para continuar.');
      trackCourseEvent('course_checkout_validation_error', {
        fields: Object.keys(nextErrors).join(','),
      });
      return;
    }

    setStatus('submitting');
    setMessage('');

    try {
      const result = await submitCourseLead(form);
      storeCourseBuyer(form);
      setLeadReady(true);
      setStatus('success');
      setMessage(
        result.preview
          ? 'Vista local: datos validados. En producción se enviarán con Resend.'
          : 'Datos guardados. Ya podés completar el pago seguro.'
      );
      trackCourseEvent('course_lead_submitted', {
        preview: Boolean(result.preview),
      });
    } catch (error) {
      setStatus('error');
      setMessage(error.message || 'No pudimos guardar tus datos. Probá nuevamente.');
      trackCourseEvent('course_lead_error');
    }
  }

  return (
    <div className="course-page course-checkout-page">
      <header className="course-checkout-nav">
        <div className="course-wrap course-checkout-nav__inner">
          <a href="/curso" className="course-nav__brand" aria-label="Volver al curso">
            <img src="assets/anthonys-logo.ico" alt="" />
            <span>A.STEPVOY</span>
          </a>
          <a href="/curso#oferta" className="course-checkout-nav__back">
            <i className="ph ph-arrow-left" aria-hidden="true" />
            Volver
          </a>
        </div>
      </header>

      <main className="course-checkout">
        <div className="course-wrap">
          <div className="course-checkout__heading">
            <div className="course-kicker">
              <span>CHECKOUT</span>
              <span aria-hidden="true">/</span>
              <span>ACCESO FUNDADOR</span>
            </div>
            <h1>Estás a un paso de empezar tu app.</h1>
            <p>
              Primero dejame tus datos. Después completás el pago de {checkoutPageConfig.price} en
              Hotmart.
            </p>
          </div>

          {checkoutCancelled ? (
            <div className="course-checkout-alert" role="status">
              <i className="ph ph-info" aria-hidden="true" />
              El pago no se completó y no se realizó ningún cargo. Tus datos siguen guardados.
            </div>
          ) : null}

          <div className="course-checkout__layout">
            <section className="course-checkout-panel" aria-labelledby="checkout-form-title">
              <div className="course-checkout-steps" aria-label="Progreso del checkout">
                <div className="is-active">
                  <span>01</span>
                  <strong>Tus datos</strong>
                </div>
                <div className={leadReady ? 'is-active' : ''}>
                  <span>02</span>
                  <strong>Pago seguro</strong>
                </div>
              </div>

              <form className="course-checkout-form" onSubmit={handleSubmit} noValidate>
                <div className="course-checkout-form__intro">
                  <span>PASO 01</span>
                  <h2 id="checkout-form-title">¿A quién le reservo el acceso?</h2>
                  <p>Estos datos me permiten enviarte la confirmación y coordinar las llamadas 1:1.</p>
                </div>

                <CourseCheckoutField
                  id="course-checkout-name"
                  name="name"
                  label="Nombre"
                  type="text"
                  value={form.name}
                  onChange={updateField}
                  autoComplete="name"
                  placeholder="Tu nombre"
                  error={errors.name}
                  required
                />

                <CourseCheckoutField
                  id="course-checkout-email"
                  name="email"
                  label="Email"
                  type="email"
                  value={form.email}
                  onChange={updateField}
                  autoComplete="email"
                  placeholder="vos@email.com"
                  hint="Usá el mismo email que vas a ingresar en Hotmart."
                  error={errors.email}
                  required
                />

                <CourseCheckoutField
                  id="course-checkout-whatsapp"
                  name="whatsapp"
                  label="WhatsApp (opcional)"
                  type="tel"
                  value={form.whatsapp}
                  onChange={updateField}
                  autoComplete="tel"
                  placeholder="+598..."
                />

                <CourseCheckoutField
                  id="course-checkout-idea"
                  name="idea"
                  label="¿Qué app querés crear? (opcional)"
                  as="textarea"
                  value={form.idea}
                  onChange={updateField}
                  rows="4"
                  placeholder="Contame tu idea en pocas líneas..."
                />

                <div className="course-checkout-honeypot" aria-hidden="true">
                  <label htmlFor="course-checkout-website">Website</label>
                  <input
                    id="course-checkout-website"
                    name="website"
                    type="text"
                    value={form.website}
                    onChange={updateField}
                    tabIndex="-1"
                    autoComplete="off"
                  />
                </div>

                <label className={`course-checkout-consent ${errors.consent ? 'has-error' : ''}`}>
                  <input
                    name="consent"
                    type="checkbox"
                    checked={form.consent}
                    onChange={updateField}
                  />
                  <span>
                    Autorizo a Anthony a usar estos datos para contactarme sobre el curso, mi compra
                    y las llamadas privadas.
                  </span>
                </label>
                {errors.consent ? (
                  <span className="course-checkout-consent-error" role="alert">
                    {errors.consent}
                  </span>
                ) : null}

                <button
                  type="submit"
                  className="course-checkout-submit"
                  disabled={status === 'submitting'}
                >
                  <span>
                    {status === 'submitting' ? 'Guardando tus datos...' : 'Guardar datos y continuar'}
                  </span>
                  <i
                    className={`ph ${status === 'submitting' ? 'ph-circle-notch' : 'ph-arrow-right'}`}
                    aria-hidden="true"
                  />
                </button>

                {message ? (
                  <div
                    className={`course-checkout-message course-checkout-message--${status}`}
                    role="status"
                  >
                    <i
                      className={`ph ${status === 'success' ? 'ph-check-circle' : 'ph-warning-circle'}`}
                      aria-hidden="true"
                    />
                    {message}
                  </div>
                ) : null}
              </form>

              <div className={`course-payment-step ${leadReady ? 'is-ready' : ''}`}>
                <div className="course-payment-step__heading">
                  <div>
                    <span>PASO 02</span>
                    <h2>Completá el pago en Hotmart</h2>
                  </div>
                  <i className="ph ph-lock-key" aria-hidden="true" />
                </div>

                <p>
                  El checkout seguro se abre desde esta página. En móvil, Hotmart puede llevarte a su
                  pantalla de pago.
                </p>

                {paymentConfigured ? (
                  <a
                    className={`course-payment-button hotmart-fb hotmart__button-checkout ${
                      leadReady ? '' : 'is-disabled'
                    }`.trim()}
                    href={paymentUrl}
                    aria-disabled={!leadReady}
                    tabIndex={leadReady ? undefined : -1}
                    onClickCapture={(event) => {
                      if (!leadReady) {
                        event.preventDefault();
                        event.stopPropagation();
                      }
                    }}
                    onClick={() => {
                      if (leadReady) {
                        trackCourseEvent('course_hotmart_click', { source: 'checkout_page' });
                      }
                    }}
                  >
                    <span>
                      {leadReady
                        ? `Obtener acceso fundador — ${checkoutPageConfig.price}`
                        : 'Primero completá tus datos'}
                    </span>
                    <i className="ph ph-arrow-up-right" aria-hidden="true" />
                  </a>
                ) : (
                  <button className="course-payment-button" type="button" disabled>
                    <span>Hotmart pendiente de conectar</span>
                    <i className="ph ph-lock-key" aria-hidden="true" />
                  </button>
                )}

                <div className="course-payment-security">
                  <span><i className="ph ph-shield-check" aria-hidden="true" /> Pago seguro</span>
                  <span><i className="ph ph-credit-card" aria-hidden="true" /> Procesado por Hotmart</span>
                </div>
              </div>
            </section>

            <aside className="course-order-card" aria-label="Resumen de compra">
              <div className="course-order-card__top">
                <span className="course-label course-label--gold">TU ACCESO</span>
                <span>PRIMERA EDICIÓN</span>
              </div>

              <h2>Creá y publicá tu app con IA</h2>
              <p>El proceso completo, desde la idea hasta un producto listo para salir al mundo.</p>

              <div className="course-order-card__price">
                <strong>{checkoutPageConfig.price}</strong>
                <div>
                  <span>pago único</span>
                  <del>{checkoutPageConfig.futurePrice} al lanzamiento</del>
                </div>
              </div>

              <ul>
                <li><i className="ph ph-check" aria-hidden="true" /> Curso completo al lanzamiento</li>
                <li><i className="ph ph-check" aria-hidden="true" /> Acceso de por vida</li>
                <li><i className="ph ph-check" aria-hidden="true" /> Actualizaciones futuras</li>
                <li><i className="ph ph-check" aria-hidden="true" /> Prompts, plantillas y proyecto real</li>
              </ul>

              <div className="course-order-card__bonus">
                <span>BONUS FUNDADOR</span>
                <strong>4 llamadas privadas 1:1</strong>
                <p>
                  Una sesión personalizada por semana durante el primer mes. Después del lanzamiento,
                  este acompañamiento costará {checkoutPageConfig.callsMonthlyPrice}.
                </p>
              </div>

              <div className="course-order-card__author">
                <img src="assets/anthony-pfp.png" alt="Anthony Stepvoy" />
                <div>
                  <strong>Comprás directamente conmigo.</strong>
                  <span>Si algo falla, me escribís y lo resolvemos.</span>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { CourseCheckoutPage });