// Quiz — 3-step pre-VSL gate. Replaces the old /apply quiz.
// Steps: 1) Revenue (DQ if too-early)  2) DMs/month (data only)  3) Name+Email+Phone
// Bilingual: receives `lang` prop and pulls copy from window.COPY[lang].quiz.

const Q_SPOTS_LEFT = 7;
const Q_TOTAL_STEPS = 3;
const Q_STORAGE_KEY = "cashy_quiz_v2";

// Google Apps Script webhook — posts every lead into the Cashy Leads sheet.
const Q_WEBHOOK_URL = "https://script.google.com/macros/s/AKfycbw3i7brxDMZh9O_ePrfLsuDWn_DueTpNlym4s-ufcMf2rGWKhhz8W_-yIRp3Uy4yiGb9Q/exec";

function qReadUtms() {
  try {
    const p = new URLSearchParams(window.location.search);
    const out = {};
    ["utm_source", "utm_medium", "utm_campaign", "utm_content", "utm_term"].forEach(k => {
      const v = p.get(k);
      if (v) out[k] = v;
    });
    return out;
  } catch (e) { return {}; }
}

function qPostToSheet(payload) {
  try {
    fetch(Q_WEBHOOK_URL, {
      method: "POST",
      mode: "no-cors",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload)
    }).catch(err => console.warn("[Cashy] sheet webhook failed", err));
  } catch (e) {
    console.warn("[Cashy] sheet webhook threw", e);
  }
}

const Q_COUNTRIES = [
  { code: "+1",  flag: "🇺🇸" }, { code: "+44", flag: "🇬🇧" },
  { code: "+61", flag: "🇦🇺" }, { code: "+1",  flag: "🇨🇦" },
  { code: "+49", flag: "🇩🇪" }, { code: "+33", flag: "🇫🇷" },
  { code: "+34", flag: "🇪🇸" }, { code: "+39", flag: "🇮🇹" },
  { code: "+31", flag: "🇳🇱" }, { code: "+46", flag: "🇸🇪" },
  { code: "+47", flag: "🇳🇴" }, { code: "+45", flag: "🇩🇰" },
  { code: "+353",flag: "🇮🇪" }, { code: "+64", flag: "🇳🇿" },
  { code: "+27", flag: "🇿🇦" }, { code: "+971",flag: "🇦🇪" },
  { code: "+65", flag: "🇸🇬" }, { code: "+91", flag: "🇮🇳" },
  { code: "+52", flag: "🇲🇽" }, { code: "+55", flag: "🇧🇷" }
];

// Default country code per language so NL users see +31 first.
function defaultCountryCode(lang) {
  return lang === "nl" ? "+31" : "+1";
}

function QProgress({ step, label }) {
  return (
    <div className="apply-progress" role="progressbar" aria-valuemin="1" aria-valuemax={Q_TOTAL_STEPS} aria-valuenow={step}>
      <div className="apply-progress-track">
        {Array.from({ length: Q_TOTAL_STEPS }).map((_, i) => {
          const idx = i + 1;
          const cls = idx < step ? "is-filled" : idx === step ? "is-active" : "";
          return <div key={i} className={`apply-progress-seg ${cls}`} />;
        })}
      </div>
      <div className="apply-progress-label">{label}</div>
    </div>
  );
}

function QRadioList({ options, value, onChange }) {
  return (
    <ul className="opt-list">
      {options.map((o) => {
        const selected = value === o.v;
        return (
          <li key={o.v}>
            <button
              type="button"
              className={`opt-row ${selected ? "is-selected" : ""}`}
              onClick={() => onChange(o.v)}
            >
              <span className="opt-radio" aria-hidden="true"></span>
              <span>{o.label}</span>
            </button>
          </li>
        );
      })}
    </ul>
  );
}

function QStep1({ data, set, onNext, q }) {
  const onPick = (v) => {
    set("revenue", v);
    setTimeout(() => onNext(v), 380);
  };
  return (
    <div className="apply-step">
      <h2 className="apply-q">{q.step1.title}</h2>
      <p className="apply-sub">{q.step1.sub}</p>
      <QRadioList options={q.step1.options} value={data.revenue} onChange={onPick} />
    </div>
  );
}

function QStep2({ data, set, onBack, onNext, q }) {
  const onPick = (v) => {
    set("dms", v);
    setTimeout(() => onNext(), 380);
  };
  return (
    <div className="apply-step">
      <h2 className="apply-q">{q.step2.title}</h2>
      <p className="apply-sub">{q.step2.sub}</p>
      <QRadioList options={q.step2.options} value={data.dms} onChange={onPick} />
      <div className="apply-foot">
        <button type="button" className="apply-back" onClick={onBack}>
          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>
          {q.back}
        </button>
      </div>
    </div>
  );
}

function QStep3({ data, set, onBack, onSubmit, q, lang }) {
  const [errors, setErrors] = React.useState({});
  const validate = () => {
    const e = {};
    if (!(data.name || "").trim()) e.name = q.step3.errors.name;
    if (!(data.email || "").trim() || !/.+@.+\..+/.test(data.email || "")) e.email = q.step3.errors.email;
    if ((data.phone || "").replace(/[^\d]/g, "").length < 7) e.phone = q.step3.errors.phone;
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const handleSubmit = () => {
    if (validate()) onSubmit();
  };
  return (
    <div className="apply-step">
      <h2 className="apply-q">{q.step3.title}</h2>
      <p className="apply-sub">{q.step3.sub}</p>

      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 4 }}>
        <input
          className={`opt-other-input ${errors.name ? "has-error" : ""}`}
          type="text"
          autoComplete="given-name"
          placeholder={q.step3.fields.name}
          value={data.name || ""}
          onChange={(e) => { set("name", e.target.value); if (errors.name) setErrors(x => ({...x, name: undefined})); }}
        />
        {errors.name && <div className="field-err">{errors.name}</div>}

        <input
          className={`opt-other-input ${errors.email ? "has-error" : ""}`}
          type="email"
          inputMode="email"
          autoComplete="email"
          placeholder={q.step3.fields.email}
          value={data.email || ""}
          onChange={(e) => { set("email", e.target.value); if (errors.email) setErrors(x => ({...x, email: undefined})); }}
        />
        {errors.email && <div className="field-err">{errors.email}</div>}

        <div className="phone-row">
          <select
            className="phone-cc"
            value={data.cc || defaultCountryCode(lang)}
            onChange={(e) => set("cc", e.target.value)}
            aria-label="Country code"
          >
            {Q_COUNTRIES.map((c, i) => (
              <option key={i} value={c.code}>{c.flag} {c.code}</option>
            ))}
          </select>
          <input
            className={`phone-input ${errors.phone ? "has-error" : ""}`}
            type="tel"
            inputMode="tel"
            autoComplete="tel"
            placeholder={q.step3.fields.phonePlaceholder}
            value={data.phone || ""}
            onChange={(e) => { set("phone", e.target.value); if (errors.phone) setErrors(x => ({...x, phone: undefined})); }}
          />
        </div>
        {errors.phone && <div className="field-err">{errors.phone}</div>}
      </div>

      <p className="apply-micro" style={{ color: "var(--fg-3)", marginTop: 6 }}>
        <svg viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>
        {q.microPrivacy}
      </p>

      <div className="apply-foot">
        <button type="button" className="apply-back" onClick={onBack}>
          <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>
          {q.back}
        </button>
        <button type="button" className="apply-cta" onClick={handleSubmit}>
          {q.submitBtn}
          <svg className="arr" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
        </button>
      </div>
    </div>
  );
}

function ThankYou({ lang }) {
  const copy = window.COPY[lang || "en"] || window.COPY.en;
  const t = copy.thanks;
  return (
    <div className="apply-shell">
      <div className="thanks-stage">
        <div className="thanks-card">
          <div className="thanks-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/><path d="M9 12l2 2 4-4"/></svg>
          </div>

          <p className="thanks-eyebrow">{t.eyebrow}</p>
          <h1 className="thanks-title">{t.title}</h1>

          <p className="thanks-lede" dangerouslySetInnerHTML={{ __html: t.ledeHtml }} />

          <div className="thanks-divider" aria-hidden="true"></div>

          <h3 className="thanks-sub">{t.sub}</h3>
          <ul className="thanks-list">
            {t.items.map((item, i) => (
              <li key={i}>
                <span className="thanks-num">{i + 1}</span>
                <div>
                  <strong>{item.title}</strong> {item.body}
                </div>
              </li>
            ))}
          </ul>

          <p className="thanks-sign">
            {t.sign}
            <br />
            <span className="thanks-sign-name">{t.signName}</span>
          </p>

          <button
            type="button"
            className="apply-cta thanks-cta"
            onClick={() => { window.location.hash = "optin"; if (window.__vslNavigate) window.__vslNavigate("optin"); }}
          >
            {t.btn}
            <svg className="arr" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>
    </div>
  );
}

function Quiz({ onComplete, onDQ, lang }) {
  const copy = window.COPY[lang || "en"] || window.COPY.en;
  const q = copy.quiz;
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState(() => {
    try {
      const raw = localStorage.getItem(Q_STORAGE_KEY);
      if (raw) return JSON.parse(raw);
    } catch (e) {}
    return {};
  });

  React.useEffect(() => {
    try { localStorage.setItem(Q_STORAGE_KEY, JSON.stringify(data)); } catch (e) {}
  }, [data]);

  const set = (k, v) => setData((d) => ({ ...d, [k]: v }));
  const back = () => setStep((s) => Math.max(s - 1, 1));

  const afterRevenue = (v) => {
    const opt = q.step1.options.find(o => o.v === v);
    if (opt && opt.tier === "TIER_TOO_EARLY") {
      onDQ();
      return;
    }
    setStep(2);
  };

  const submit = () => {
    const revOpt = q.step1.options.find(o => o.v === data.revenue);
    const dmOpt  = q.step2.options.find(o => o.v === data.dms);
    const tier   = revOpt && revOpt.tier === "TIER_TOO_EARLY" ? "too_early" : "qualified";
    const utms   = qReadUtms();

    const payload = {
      name: (data.name || "").trim(),
      email: (data.email || "").trim(),
      phone: `${data.cc || defaultCountryCode(lang)} ${(data.phone || "").trim()}`.trim(),
      monthly_revenue: revOpt ? revOpt.label : (data.revenue || ""),
      dms_per_month: dmOpt ? dmOpt.label : (data.dms || ""),
      message: "",
      source: "Cashy VSL Quiz",
      tier,
      language: lang || "en",
      submitted_at: new Date().toISOString(),
      page_url: window.location.href,
      referrer: document.referrer || "",
      ...utms
    };

    qPostToSheet(payload);

    // Fire Meta Pixel Lead event after sheet POST is dispatched.
    if (typeof window.trackPixel === "function") {
      window.trackPixel("Lead", {
        content_name: "VSL Quiz",
        content_category: "VSL Funnel",
        content_language: lang || "en",
        lead_tier: tier,
        value: 0,
        currency: lang === "nl" ? "EUR" : "USD"
      });
    }

    onComplete(data);
  };

  const progressLabel = (q.progressLabel || "Step {n} of {total}")
    .replace("{n}", String(step))
    .replace("{total}", String(Q_TOTAL_STEPS));

  return (
    <div className="apply-shell">
      <QProgress step={step} label={progressLabel} />
      <div className="apply-stage">
        <div className="apply-card" key={step}>
          {step === 1 && <QStep1 data={data} set={set} onNext={afterRevenue} q={q} />}
          {step === 2 && <QStep2 data={data} set={set} onBack={back} onNext={() => setStep(3)} q={q} />}
          {step === 3 && <QStep3 data={data} set={set} onBack={back} onSubmit={submit} q={q} lang={lang} />}
        </div>
      </div>
    </div>
  );
}

window.Quiz = Quiz;
window.ThankYou = ThankYou;