// PassMark onboarding — main app orchestrator
const { useState: useS, useEffect: useE, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#005f6c",
  "panelStyle": "deep",
  "displayFont": "Bricolage Grotesque",
  "radius": 16
}/*EDITMODE-END*/;

/* ---------- Account type chooser ---------- */
function AccountType({ onPick }) {
  const [hover, setHover] = useS(null);
  return (
    <div className="pm-acct">
      <div className="pm-acct-inner">
        <header className="pm-acct-head">
          <Logo size={34} />
          <h1 className="pm-acct-title">Let's get you started</h1>
          <p className="pm-acct-sub">Learn smarter, practice better, pass stronger. First — who's signing up?</p>
        </header>
        <div className="pm-acct-cards">
          <button className={"pm-acct-card" + (hover === "student" ? " hov" : "")}
            onMouseEnter={() => setHover("student")} onMouseLeave={() => setHover(null)}
            onClick={() => onPick("student")}>
            <span className="pm-acct-icon"><Icon name="user" size={28} /></span>
            <span className="pm-acct-name">I'm a Student</span>
            <span className="pm-acct-desc">Practice for WAEC, NECO, JAMB & Post-UTME, or turn your notes into study material. Sign up on your own.</span>
            <span className="pm-acct-go">Continue as student <Icon name="arrowRight" size={16} /></span>
          </button>
          <button className={"pm-acct-card" + (hover === "school" ? " hov" : "")}
            onMouseEnter={() => setHover("school")} onMouseLeave={() => setHover(null)}
            onClick={() => onPick("school")}>
            <span className="pm-acct-icon"><Icon name="school" size={28} /></span>
            <span className="pm-acct-name">We're a School</span>
            <span className="pm-acct-desc">Set up an enterprise account, onboard your students, and track performance across your whole institution.</span>
            <span className="pm-acct-go">Continue as school <Icon name="arrowRight" size={16} /></span>
          </button>
        </div>
        <p className="pm-acct-foot">Already have an account? <a href="Login.html">Log in</a></p>
      </div>
    </div>
  );
}

/* ---------- Brand / progress side panel ---------- */
function SidePanel({ kind, steps, current, panelTitle }) {
  const pct = Math.round(((current) / (steps.length - 1)) * 100);
  return (
    <aside className="pm-side">
      <div className="pm-side-top">
        <Logo light size={30} />
      </div>
      <div className="pm-side-mid">
        <span className="pm-side-eyebrow">{kind === "school" ? "Enterprise sign-up" : "Student sign-up"}</span>
        <h2 className="pm-side-head">{panelTitle}</h2>
        <ol className="pm-stepper">
          {steps.map((s, i) => (
            <li key={s.key} className={"pm-step" + (i === current ? " active" : "") + (i < current ? " done" : "")}>
              <span className="pm-step-dot">
                {i < current ? <Icon name="check" size={13} stroke={3} /> : <span>{i + 1}</span>}
              </span>
              <span className="pm-step-label">{s.panel || s.title}</span>
            </li>
          ))}
        </ol>
      </div>
      <div className="pm-side-foot">
        <div className="pm-side-quote">
          {kind === "school"
            ? "“We onboarded 400 students in a week and finally see exactly which classes need support.”"
            : "“PassMark showed me exactly which topics were dragging my score down. I jumped two grades.”"}
        </div>
        <div className="pm-side-cite">
          {kind === "school" ? "— Mrs. Okonkwo, Vice Principal · Greenfield" : "— Chiamaka, JAMB 2025 · 312/400"}
        </div>
      </div>
      <div className="pm-side-glow" aria-hidden="true" />
    </aside>
  );
}

/* ---------- Mobile progress bar ---------- */
function MobileBar({ steps, current, kind, onBack }) {
  const pct = Math.round(((current + 1) / steps.length) * 100);
  return (
    <div className="pm-mbar">
      <button className="pm-mbar-back" onClick={onBack} aria-label="Back"><Icon name="arrowLeft" size={20} /></button>
      <div className="pm-mbar-mid">
        <div className="pm-mbar-row">
          <Logo size={22} />
          <span className="pm-mbar-count">{current + 1} / {steps.length}</span>
        </div>
        <div className="pm-mbar-track"><div className="pm-mbar-fill" style={{ width: pct + "%" }} /></div>
      </div>
    </div>
  );
}

/* ---------- Signup OTP verification ---------- */
function SignupOtpScreen({ kind, allSteps, signupEmail, data, onVerified, onBack }) {
  const [digits, setDigits] = useS(["", "", "", "", "", ""]);
  const [error, setError] = useS("");
  const [loading, setLoading] = useS(false);
  const [seconds, setSeconds] = useS(60);
  const [resending, setResending] = useS(false);
  const refs = React.useRef([]);

  useE(() => {
    if (seconds > 0) { const t = setTimeout(() => setSeconds((s) => s - 1), 1000); return () => clearTimeout(t); }
  }, [seconds]);

  const setDigit = (i, v) => {
    const clean = v.replace(/\D/g, "").slice(-1);
    const next = [...digits]; next[i] = clean; setDigits(next); setError("");
    if (clean && i < 5) refs.current[i + 1]?.focus();
  };
  const onKey = (i, e) => { if (e.key === "Backspace" && !digits[i] && i > 0) refs.current[i - 1]?.focus(); };
  const onPaste = (e) => {
    const txt = (e.clipboardData.getData("text") || "").replace(/\D/g, "").slice(0, 6);
    if (txt) { e.preventDefault(); const next = txt.split("").concat(Array(6).fill("")).slice(0, 6); setDigits(next); refs.current[Math.min(txt.length, 5)]?.focus(); }
  };

  const verify = async () => {
    if (digits.some((d) => !d)) return setError("Enter all 6 digits");
    setLoading(true);
    try {
      const cfg = (typeof window !== "undefined" && window.PASSMARK_CONFIG) || {};
      const base = cfg.apiBase || "/v1";
      const code = digits.join("");
      const url = kind === "school" ? `${base}/auth/signup/school/verify` : `${base}/auth/signup/verify`;
      const body = kind === "school"
        ? { ...data, code }
        : { firstName: data.firstName, lastName: data.lastName, email: data.email, password: data.password, level: data.education, feature: data.feature || "both", code };
      const res = await fetch(url, {
        method: "POST", credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      const resp = await res.json();
      if (!res.ok) throw new Error(resp?.error?.message || "Verification failed");
      onVerified(resp);
    } catch (err) {
      setError(err.message || "Incorrect or expired code. Try again.");
    } finally {
      setLoading(false);
    }
  };

  const resend = async () => {
    setResending(true);
    try {
      const cfg = (typeof window !== "undefined" && window.PASSMARK_CONFIG) || {};
      const base = cfg.apiBase || "/v1";
      if (kind === "school") {
        await fetch(`${base}/auth/signup/school`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) });
      } else {
        await fetch(`${base}/auth/signup`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ firstName: data.firstName, lastName: data.lastName, email: data.email, password: data.password }) });
      }
      setSeconds(60);
      setDigits(["", "", "", "", "", ""]);
      setError("");
    } catch {} finally { setResending(false); }
  };

  return (
    <div className="pm-wizard">
      <SidePanel kind={kind} steps={allSteps} current={allSteps.length} panelTitle="Verify your email" />
      <MobileBar steps={allSteps} current={allSteps.length - 1} kind={kind} onBack={onBack} />
      <main className="pm-main">
        <div className="pm-main-scroll">
          <div className="pm-stage">
            <div className="pm-stage-head">
              <span className="pm-eyebrow">Almost there</span>
              <h1 className="pm-h1">Check your email</h1>
              <p className="pm-sub">We sent a 6-digit verification code to <b>{signupEmail}</b>. Enter it below.</p>
            </div>
            <div className="pm-stage-body">
              <div className={"auth-otp" + (error ? " is-error" : "")} style={{ marginBottom: 8 }} onPaste={onPaste}>
                {digits.map((d, i) => (
                  <input key={i} ref={(el) => (refs.current[i] = el)} className="auth-otp-box"
                    inputMode="numeric" maxLength={1} value={d} autoFocus={i === 0}
                    onChange={(e) => setDigit(i, e.target.value)} onKeyDown={(e) => onKey(i, e)} />
                ))}
              </div>
              {error && <div className="pm-formerr" style={{ marginTop: 0 }}>{error}</div>}
              <p className="auth-resend" style={{ marginTop: 20 }}>
                {seconds > 0
                  ? <>Resend code in <b>0:{String(seconds).padStart(2, "0")}</b></>
                  : <button type="button" className="auth-resend-btn" disabled={resending} onClick={resend}>{resending ? "Sending…" : "Resend code"}</button>}
              </p>
            </div>
          </div>
        </div>
        <footer className="pm-footer">
          <Btn variant="ghost" iconLeft="arrowLeft" onClick={onBack}>Back</Btn>
          <div className="pm-footer-dots" />
          <Btn variant="primary" iconRight={loading ? null : "check"} onClick={verify} disabled={loading}>
            {loading ? "Verifying…" : "Verify & create account"}
          </Btn>
        </footer>
      </main>
    </div>
  );
}

/* ---------- Success ---------- */
function Success({ kind, data, onRestart }) {
  const name = kind === "school" ? data.schoolName : data.firstName;
  const dest = kind === "school" ? "School Dashboard.html"
    : data.feature === "cbt" ? "CBT Dashboard.html"
    : data.feature === "learn" ? "Notepass Dashboard.html"
    : "Student Dashboard.html";
  return (
    <div className="pm-done">
      <div className="pm-done-card">
        <div className="pm-done-burst"><Icon name="check" size={40} stroke={2.4} /></div>
        <h1 className="pm-done-title">You're all set{name ? `, ${name}` : ""}!</h1>
        <p className="pm-done-sub">
          {kind === "school"
            ? "Your enterprise workspace is ready. Next, you'll onboard your students and explore your school dashboard."
            : "Your account is ready. Jump into your dashboard to start practicing and tracking your progress."}
        </p>
        <div className="pm-done-actions">
          <Btn variant="primary" iconRight="arrowRight" onClick={() => { window.location.href = dest; }}>
            {kind === "school" ? "Go to school dashboard" : "Go to my dashboard"}
          </Btn>
          <Btn variant="ghost" onClick={onRestart}>Start over</Btn>
        </div>
      </div>
    </div>
  );
}

/* ---------- Wizard ---------- */
function Wizard({ kind, onExit }) {
  const allSteps = kind === "school" ? SCHOOL_STEPS : STUDENT_STEPS;
  const [data, setData] = useS({});
  const [idx, setIdx] = useS(0);
  const [errors, setErrors] = useS({});
  const [dir, setDir] = useS(1);
  const [done, setDone] = useS(false);
  const [submitting, setSubmitting] = useS(false);
  const [otpPending, setOtpPending] = useS(false);
  const [signupEmail, setSignupEmail] = useS("");

  // visible steps depend on data (e.g. skip interests for "learn")
  const steps = useMemo(() => allSteps.filter((s) => !(s.skip && s.skip(data))), [allSteps, data]);
  const safeIdx = Math.min(idx, steps.length - 1);
  const step = steps[safeIdx];
  const isLast = safeIdx === steps.length - 1;

  const update = (patch) => { setData((d) => ({ ...d, ...patch })); setErrors({}); };

  const next = async () => {
    const errs = step.validate ? step.validate(data) : {};
    if (Object.keys(errs).length) { setErrors(errs); return; }
    setErrors({});
    if (isLast) {
      setSubmitting(true);
      try {
        const cfg = (typeof window !== "undefined" && window.PASSMARK_CONFIG) || {};
        const base = cfg.apiBase || "/v1";
        let body = null;
        const res = kind === "school"
          ? await fetch(`${base}/auth/signup/school`, {
              method: "POST", credentials: "include",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(data),
            })
          : await fetch(`${base}/auth/signup`, {
              method: "POST", credentials: "include",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                firstName: data.firstName, lastName: data.lastName,
                email: data.email, password: data.password, level: data.education,
              }),
            });
        body = await res.json();
        if (!res.ok) throw new Error(body?.error?.message || "Signup failed");
        if (body.pending) {
          setSignupEmail(body.email || (kind === "school" ? data.adminEmail : data.email) || "");
          setOtpPending(true);
        } else {
          // Shouldn't reach here in normal flow, but handle gracefully
          const u = body.user || {};
          const normUser = {
            id: u.id,
            firstName: u.firstName || u.first_name || "",
            lastName: u.lastName || u.last_name || "",
            email: u.email || "",
            role: u.role || (kind === "school" ? "school_admin" : "student"),
            schoolId: u.schoolId || u.school_id || null,
            schoolName: u.schoolName || u.school_name || (kind === "school" ? data.schoolName : "") || "",
            plan: u.plan || "free",
            packagePlan: u.packagePlan || (kind === "school" ? "both" : (data.feature || "both")),
            level: u.level || null,
          };
          try { sessionStorage.setItem("pm_access_token", body.accessToken); } catch {}
          if (body.refreshToken) { try { sessionStorage.setItem("pm_refresh_token", body.refreshToken); } catch {} }
          try { sessionStorage.setItem("pm_user_v1", JSON.stringify(normUser)); } catch {}
          setDone(true);
        }
      } catch (err) {
        setErrors({ _: err.message || "Something went wrong. Please try again." });
      } finally {
        setSubmitting(false);
      }
      return;
    }
    setDir(1); setIdx(safeIdx + 1);
  };
  const back = () => {
    if (safeIdx === 0) { onExit(); return; }
    setDir(-1); setIdx(safeIdx - 1); setErrors({});
  };

  if (done) return <Success kind={kind} data={data} onRestart={onExit} />;

  if (otpPending) return (
    <SignupOtpScreen kind={kind} allSteps={allSteps} signupEmail={signupEmail} data={data}
      onBack={() => setOtpPending(false)}
      onVerified={(body) => {
        const u = body.user || {};
        const normUser = {
          _v: 3,
          id: u.id,
          firstName: u.firstName || u.first_name || "",
          lastName: u.lastName || u.last_name || "",
          email: u.email || "",
          role: u.role || (kind === "school" ? "school_admin" : "student"),
          schoolId: u.schoolId || u.school_id || null,
          schoolName: u.schoolName || u.school_name || (kind === "school" ? data.schoolName : "") || "",
          plan: u.plan || "free",
          packagePlan: u.packagePlan || (kind === "school" ? "both" : (data.feature || "both")),
          level: u.level || null,
        };
        try { sessionStorage.setItem("pm_access_token", body.accessToken); } catch {}
        if (body.refreshToken) { try { sessionStorage.setItem("pm_refresh_token", body.refreshToken); } catch {} }
        try { sessionStorage.setItem("pm_user_v1", JSON.stringify(normUser)); } catch {}
        setDone(true);
      }}
    />
  );

  return (
    <div className="pm-wizard">
      <SidePanel kind={kind} steps={steps} current={safeIdx} panelTitle={step.panel} />
      <MobileBar steps={steps} current={safeIdx} kind={kind} onBack={back} />
      <main className="pm-main">
        <div className="pm-main-scroll">
          <div className="pm-stage" key={step.key} data-dir={dir}>
            <div className="pm-stage-head">
              <span className="pm-eyebrow">{step.eyebrow}</span>
              <h1 className="pm-h1">{step.title}</h1>
              <p className="pm-sub">{step.subtitle}</p>
            </div>
            {errors._ && <div className="pm-formerr">{errors._}</div>}
            <div className="pm-stage-body">
              {step.render({ data, update, errors })}
            </div>
          </div>
        </div>
        <footer className="pm-footer">
          <Btn variant="ghost" iconLeft="arrowLeft" onClick={back}>
            {safeIdx === 0 ? "Account type" : "Back"}
          </Btn>
          <div className="pm-footer-dots">
            {steps.map((s, i) => (
              <span key={s.key} className={"pm-dot" + (i === safeIdx ? " on" : "") + (i < safeIdx ? " past" : "")} />
            ))}
          </div>
          <Btn variant="primary" iconRight={isLast && !submitting ? "check" : "arrowRight"} onClick={next} disabled={submitting}>
            {isLast ? (submitting ? "Creating account…" : (kind === "school" ? "Create enterprise account" : "Create account")) : "Continue"}
          </Btn>
        </footer>
      </main>
    </div>
  );
}

/* ---------- Root ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useS(null); // null = account type, 'student', 'school'

  useE(() => {
    const r = document.documentElement;
    r.style.setProperty("--brand", t.accent);
    r.style.setProperty("--radius", t.radius + "px");
    r.style.setProperty("--display-font", `"${t.displayFont}", system-ui, sans-serif`);
    r.setAttribute("data-panel", t.panelStyle);
  }, [t]);

  return (
    <div className="pm-root">
      {route === null
        ? <AccountType onPick={setRoute} />
        : <Wizard kind={route} onExit={() => setRoute(null)} />}

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={["#005f6c", "#006d37", "#2256E8", "#6D28D9", "#7b4c00"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Brand panel" value={t.panelStyle}
          options={["deep", "tint"]} onChange={(v) => setTweak("panelStyle", v)} />
        <TweakSection label="Type & shape" />
        <TweakSelect label="Display font" value={t.displayFont}
          options={["Bricolage Grotesque", "Hanken Grotesque", "Space Grotesk", "Fraunces"]}
          onChange={(v) => setTweak("displayFont", v)} />
        <TweakSlider label="Corner radius" value={t.radius} min={6} max={26} unit="px"
          onChange={(v) => setTweak("radius", v)} />
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);