// Section 4.5 — Request-a-subject modal.
// Custom UI (no third-party form). Submits to ConvertKit via fetch.
// Listens for the 'intensives:openRequestSubject' event from Essay Intensive card.

const CONVERTKIT_CONFIG = /*EDITMODE-BEGIN*/{
  "formId": "REPLACE_WITH_FORM_ID",
  "apiKey": "REPLACE_WITH_API_KEY"
}/*EDITMODE-END*/;

const submitToConvertKit = async ({ email, fields, tags }) => {
  // Stub: replace formId + apiKey in CONVERTKIT_CONFIG before launch.
  // ConvertKit endpoint: https://api.convertkit.com/v3/forms/{formId}/subscribe
  // For now, this resolves to a fake success so the UI flow works end-to-end.
  if (CONVERTKIT_CONFIG.formId === "REPLACE_WITH_FORM_ID") {
    console.info('[ConvertKit] stub submit:', { email, fields, tags });
    return await new Promise((resolve) => setTimeout(() => resolve({ ok: true }), 700));
  }
  const res = await fetch(`https://api.convertkit.com/v3/forms/${CONVERTKIT_CONFIG.formId}/subscribe`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      api_key: CONVERTKIT_CONFIG.apiKey,
      email,
      fields,
      tags,
    }),
  });
  return res.ok ? { ok: true } : { ok: false };
};

const slugify = (s) => (s || '').toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');

const RequestSubjectModal = () => {
  const [open, setOpen] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', subject: '', stuck: '' });

  React.useEffect(() => {
    const handler = () => { setOpen(true); setSubmitted(false); };
    window.addEventListener('intensives:openRequestSubject', handler);
    return () => window.removeEventListener('intensives:openRequestSubject', handler);
  }, []);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);

  const onSubmit = async (e) => {
    e.preventDefault();
    setBusy(true);
    const subjectTag = `request-${slugify(form.subject)}`;
    const result = await submitToConvertKit({
      email: form.email,
      fields: {
        first_name: form.name,
        subject_requested: form.subject,
        stuck_context: form.stuck,
        signup_source: 'intensives-page-modal',
      },
      tags: ['intensives-subject-request', subjectTag],
    });
    setBusy(false);
    if (result.ok) setSubmitted(true);
  };

  if (!open) return null;

  return (
    <div className="modal-backdrop" onClick={() => setOpen(false)}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="modal-close" onClick={() => setOpen(false)} aria-label="Close">
          <Icon name="x" />
        </button>

        {!submitted ? (
          <>
            <div className="eyebrow">Request a subject</div>
            <h3 className="modal-h">We launch new subjects based on demand.</h3>
            <p className="modal-body">
              Tell us what you'd take and we'll prioritise it for the next cohort. First to request gets first seat at launch pricing.
            </p>
            <div className="modal-proof">
              Most requested recently · <b>Maths AA HL</b> · <b>Chemistry HL</b> · <b>Psychology HL</b>
            </div>

            <form className="modal-form" onSubmit={onSubmit}>
              <label className="field">
                <span>Your name</span>
                <input
                  type="text" required value={form.name}
                  onChange={(e) => setForm({ ...form, name: e.target.value })}
                  placeholder="First name"
                />
              </label>
              <label className="field">
                <span>Your email</span>
                <input
                  type="email" required value={form.email}
                  onChange={(e) => setForm({ ...form, email: e.target.value })}
                  placeholder="you@school.com"
                />
              </label>
              <label className="field">
                <span>Subject and level</span>
                <input
                  type="text" required value={form.subject}
                  onChange={(e) => setForm({ ...form, subject: e.target.value })}
                  placeholder="e.g. Maths AA HL, Chemistry HL, Spanish B SL"
                />
              </label>
              <label className="field">
                <span>Where are you stuck? <em>optional</em></span>
                <textarea
                  rows="2" value={form.stuck}
                  onChange={(e) => setForm({ ...form, stuck: e.target.value })}
                  placeholder="One line is fine. What's the deadline or paper?"
                />
              </label>
              <button type="submit" className="btn black modal-submit" disabled={busy}>
                {busy ? "Sending…" : <>Submit request <Icon name="arrow-right" /></>}
              </button>
            </form>
          </>
        ) : (
          <div className="modal-confirm">
            <div className="confirm-icon"><Icon name="check" /></div>
            <h3 className="modal-h">You're on the list.</h3>
            <p className="modal-body">
              We'll email you when the next cohort opens for that subject. If we hit enough requests for the August intake, you'll get launch pricing.
            </p>
            <button type="button" className="btn" onClick={() => setOpen(false)}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
};

window.RequestSubjectModal = RequestSubjectModal;