// Apply flow — multi-step modal triggered from every "Apply" CTA on the page.
// Two qualifying steps + confirmation. No payment inside. Every application
// goes to the same review queue regardless of answers.
//
// Trigger: window.dispatchEvent(new CustomEvent('intensives:openApplyFlow', {
//   detail: { programme: 'essay'|'component'|null, subject?: string }
// }))

const PROGRAMME_LABEL = {
  essay: "Essay Intensive",
  component: "Component Intensive",
  "not-sure": "Not sure yet",
};

const ESSAY_SUBJECTS = [
  "Economics",
  "History",
  "English A",
  "Other (request a subject)",
];

const COMPONENT_SUBJECTS = [
  "History IA",
  "Economics IA",
  "Biology IA",
  "Chemistry HL IA",
  "Maths AA IA",
  "Maths AI IA",
  "Latin IA",
  "Computer Science IA",
  "English A Essay",
  "English IO",
  "TOK Essay",
  "TOK Exhibition",
  "Extended Essay",
];

const PREDICTED_GRADES = ["3", "4", "5", "6", "7"];
const EXAM_SESSIONS = ["May 2026", "Nov 2026", "May 2027", "Nov 2027", "Other"];
const DRAFT_STATUS = [
  "Haven't started",
  "Outline only",
  "First draft written",
  "Multiple drafts",
  "Final draft",
];
const COMMITMENT = ["Yes", "I think so", "I'm not sure"];
const PAYER = ["I am", "Parent / guardian", "Other"];

const INITIAL_FORM = {
  name: "",
  email: "",
  programme: "",
  subject: "",
  predictedGrade: "",
  examSession: "",
  draftStatus: "",
  teacherFeedback: "",
  toFix: "",
  commitment: "",
  payer: "",
  notes: "",
};

/* ─── Small primitives ────────────────────────────────────────────── */

const ApplyField = ({ label, optional, children }) => (
  <div className="apf-field">
    <div className="apf-label">
      <span>{label}</span>
      {optional && <em>optional</em>}
    </div>
    {children}
  </div>
);

const ApplyRadioRow = ({ name, options, value, onChange, layout = "row" }) => (
  <div className={`apf-radio apf-radio-${layout}`} role="radiogroup">
    {options.map((opt) => {
      const v = typeof opt === "string" ? opt : opt.value;
      const label = typeof opt === "string" ? opt : opt.label;
      const checked = value === v;
      return (
        <label key={v} className={`apf-radio-opt ${checked ? "checked" : ""}`}>
          <input
            type="radio"
            name={name}
            value={v}
            checked={checked}
            onChange={() => onChange(v)}
          />
          <span>{label}</span>
        </label>
      );
    })}
  </div>
);

/* ─── Step 1 ──────────────────────────────────────────────────────── */

const Step1 = ({ form, setForm, onContinue, error }) => {
  const subjects = form.programme === "essay" ? ESSAY_SUBJECTS
                 : form.programme === "component" ? COMPONENT_SUBJECTS
                 : null;

  return (
    <div className="apf-step">
      <div className="apf-step-head">
        <div>
          <div className="eyebrow">Apply · Step 1 of 2</div>
          <h3 className="apf-h">Tell us about you.</h3>
        </div>
      </div>

      <div className="apf-fields">
        <ApplyField label="Full name">
          <input
            type="text" required
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
            placeholder="First and last"
          />
        </ApplyField>

        <ApplyField label="Email">
          <input
            type="email" required
            value={form.email}
            onChange={(e) => setForm({ ...form, email: e.target.value })}
            placeholder="you@school.com"
          />
        </ApplyField>

        <ApplyField label="Which programme">
          <ApplyRadioRow
            name="programme"
            value={form.programme}
            onChange={(v) => setForm({ ...form, programme: v, subject: "" })}
            options={[
              { value: "essay",     label: "Essay Intensive" },
              { value: "component", label: "Component Intensive" },
              { value: "not-sure",  label: "Not sure yet" },
            ]}
            layout="stack"
          />
        </ApplyField>

        {subjects && (
          <ApplyField label="Which subject">
            <div className="apf-select-wrap">
              <select
                value={form.subject}
                onChange={(e) => setForm({ ...form, subject: e.target.value })}
                required
              >
                <option value="">Select a subject…</option>
                {subjects.map((s) => <option key={s} value={s}>{s}</option>)}
              </select>
              <Icon name="chevron-down" />
            </div>
          </ApplyField>
        )}

        <ApplyField label="Predicted grade">
          <ApplyRadioRow
            name="predictedGrade"
            value={form.predictedGrade}
            onChange={(v) => setForm({ ...form, predictedGrade: v })}
            options={PREDICTED_GRADES}
            layout="row"
          />
        </ApplyField>

        <ApplyField label="Exam session">
          <div className="apf-select-wrap">
            <select
              value={form.examSession}
              onChange={(e) => setForm({ ...form, examSession: e.target.value })}
              required
            >
              <option value="">Select an exam session…</option>
              {EXAM_SESSIONS.map((s) => <option key={s} value={s}>{s}</option>)}
            </select>
            <Icon name="chevron-down" />
          </div>
        </ApplyField>
      </div>

      {error && <p className="apf-error">{error}</p>}

      <button type="button" className="btn purple apf-submit" onClick={onContinue}>
        Continue <Icon name="arrow-right" />
      </button>
      <p className="apf-microcopy">Step 1 of 2. Takes 60 seconds.</p>
    </div>
  );
};

/* ─── Step 2 ──────────────────────────────────────────────────────── */

const Step2 = ({ form, setForm, onBack, onSubmit, busy, error }) => (
  <div className="apf-step">
    <div className="apf-step-head">
      <button type="button" className="apf-back" onClick={onBack} aria-label="Back to step 1">
        <Icon name="arrow-left" />
      </button>
      <div>
        <div className="eyebrow">Apply · Step 2 of 2</div>
        <h3 className="apf-h">Where you are right now.</h3>
      </div>
    </div>

    <div className="apf-fields">
      <ApplyField label="Current draft status">
        <ApplyRadioRow
          name="draftStatus"
          value={form.draftStatus}
          onChange={(v) => setForm({ ...form, draftStatus: v })}
          options={DRAFT_STATUS}
          layout="stack"
        />
      </ApplyField>

      <ApplyField label="What has your teacher or supervisor said so far?" optional>
        <textarea
          rows="3" value={form.teacherFeedback}
          onChange={(e) => setForm({ ...form, teacherFeedback: e.target.value })}
          placeholder="A short paraphrase is fine. We won't share."
        />
      </ApplyField>

      <ApplyField label="What specifically do you want to fix?">
        <textarea
          rows="3" required value={form.toFix}
          onChange={(e) => setForm({ ...form, toFix: e.target.value })}
          placeholder="Be specific. Structure, methodology, analysis, time management, anything."
        />
      </ApplyField>

      <ApplyField label="Can you commit to weekly submissions for four weeks?">
        <ApplyRadioRow
          name="commitment"
          value={form.commitment}
          onChange={(v) => setForm({ ...form, commitment: v })}
          options={COMMITMENT}
          layout="row"
        />
      </ApplyField>

      <ApplyField label="Who is paying for this?">
        <ApplyRadioRow
          name="payer"
          value={form.payer}
          onChange={(v) => setForm({ ...form, payer: v })}
          options={PAYER}
          layout="row"
        />
      </ApplyField>

      <ApplyField label="Anything else we should know?" optional>
        <textarea
          rows="2" value={form.notes}
          onChange={(e) => setForm({ ...form, notes: e.target.value })}
          placeholder="Deadlines, learning differences, anything that helps us match you."
        />
      </ApplyField>
    </div>

    {error && <p className="apf-error">{error}</p>}

    <button type="button" className="btn purple apf-submit" onClick={onSubmit} disabled={busy}>
      {busy ? "Submitting…" : <>Submit application <Icon name="arrow-right" /></>}
    </button>
    <p className="apf-microcopy">We review every application personally and respond within 48 hours.</p>
  </div>
);

/* ─── Step 3 — Confirmation ───────────────────────────────────────── */

const Step3 = ({ name, onClose }) => (
  <div className="apf-step apf-step-confirm">
    <div className="apf-confirm-icon"><Icon name="check" /></div>
    <h3 className="apf-h">Application received.</h3>
    <p className="apf-confirm-body">
      {name ? `Thanks, ${name.split(" ")[0]}. ` : ""}
      We'll review and email you within 48 hours.
      If you're a fit, we'll send next steps including payment and onboarding.
    </p>

    <div className="apf-while-you-wait">
      <div className="eyebrow">While you wait</div>
      <div className="apf-wyw-grid">
        <a className="apf-wyw-tile" href="#guarantee" onClick={onClose}>
          <div className="apf-wyw-label">Read</div>
          <div className="apf-wyw-title">The guarantee</div>
          <div className="apf-wyw-arrow"><Icon name="arrow-right" /></div>
        </a>
        <a className="apf-wyw-tile" href="#coaches" onClick={onClose}>
          <div className="apf-wyw-label">Meet</div>
          <div className="apf-wyw-title">The coaches</div>
          <div className="apf-wyw-arrow"><Icon name="arrow-right" /></div>
        </a>
      </div>
    </div>

    <button type="button" className="btn apf-close-btn" onClick={onClose}>Close</button>
  </div>
);

/* ─── Modal shell + state machine ─────────────────────────────────── */

const ApplyFlowModal = () => {
  const [open, setOpen] = React.useState(false);
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({ ...INITIAL_FORM });
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState("");

  // Open the modal from anywhere on the page via custom event.
  React.useEffect(() => {
    const handler = (e) => {
      const detail = e.detail || {};
      setForm((prev) => ({
        ...INITIAL_FORM,
        programme: detail.programme || prev.programme || "",
        subject:   detail.subject   || prev.subject   || "",
      }));
      setStep(1);
      setError("");
      setOpen(true);
    };
    window.addEventListener('intensives:openApplyFlow', handler);
    return () => window.removeEventListener('intensives:openApplyFlow', handler);
  }, []);

  // ESC closes. Clicking outside does NOT close (per spec).
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') closeModal(); };
    if (open) {
      document.addEventListener('keydown', onKey);
      document.body.style.overflow = 'hidden';
    }
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  const closeModal = () => { setOpen(false); };

  const validateStep1 = () => {
    if (!form.name.trim()) return "Please enter your name.";
    if (!form.email.trim() || !/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) return "Please enter a valid email.";
    if (!form.programme) return "Please pick a programme.";
    if ((form.programme === "essay" || form.programme === "component") && !form.subject) return "Please pick a subject.";
    if (!form.predictedGrade) return "Please select your predicted grade.";
    if (!form.examSession) return "Please select your exam session.";
    return null;
  };

  const onContinue = async () => {
    const err = validateStep1();
    if (err) { setError(err); return; }
    setError("");

    // Save the partial lead immediately, even if they bounce on Step 2.
    submitToConvertKit({
      email: form.email,
      fields: {
        first_name: form.name,
        programme_interest: PROGRAMME_LABEL[form.programme] || form.programme,
        subject_interest: form.subject,
        predicted_grade: form.predictedGrade,
        exam_session: form.examSession,
        signup_source: 'intensives-apply-step1',
        apply_completed: 'false',
      },
      tags: ['intensives-apply-started'],
    });

    setStep(2);
  };

  const validateStep2 = () => {
    if (!form.draftStatus) return "Please choose your current draft status.";
    if (!form.toFix.trim()) return "Tell us what you want to fix.";
    if (!form.commitment) return "Let us know if you can commit weekly.";
    if (!form.payer) return "Let us know who's paying.";
    return null;
  };

  const onSubmit = async () => {
    const err = validateStep2();
    if (err) { setError(err); return; }
    setError("");
    setBusy(true);
    const result = await submitToConvertKit({
      email: form.email,
      fields: {
        first_name: form.name,
        programme_interest: PROGRAMME_LABEL[form.programme] || form.programme,
        subject_interest: form.subject,
        predicted_grade: form.predictedGrade,
        exam_session: form.examSession,
        draft_status: form.draftStatus,
        teacher_feedback: form.teacherFeedback,
        what_to_fix: form.toFix,
        weekly_commitment: form.commitment,
        payer: form.payer,
        application_notes: form.notes,
        signup_source: 'intensives-apply-step2',
        apply_completed: 'true',
      },
      tags: [
        'intensives-apply-completed',
        `apply-${form.programme || 'unknown'}`,
      ],
    });
    setBusy(false);
    if (result.ok) setStep(3);
  };

  if (!open) return null;

  return (
    <div className="apply-backdrop">
      <div className="apply-modal" role="dialog" aria-modal="true">
        <button className="apf-close" onClick={closeModal} aria-label="Close">
          <Icon name="x" />
        </button>

        {step === 1 && (
          <Step1
            form={form}
            setForm={setForm}
            onContinue={onContinue}
            error={error}
          />
        )}
        {step === 2 && (
          <Step2
            form={form}
            setForm={setForm}
            onBack={() => { setStep(1); setError(""); }}
            onSubmit={onSubmit}
            busy={busy}
            error={error}
          />
        )}
        {step === 3 && (
          <Step3
            name={form.name}
            onClose={() => { setOpen(false); }}
          />
        )}
      </div>
    </div>
  );
};

const openApplyFlow = (detail = {}) => {
  window.dispatchEvent(new CustomEvent('intensives:openApplyFlow', { detail }));
};

Object.assign(window, { ApplyFlowModal, openApplyFlow });