// screens-auth.jsx — Register & OTP (real API, no demo auto-fill)

function RegisterScreen({ t, lang, setLang, state, setState, onNext, onLogin, layout }) {
  const [agreed,  setAgreed]  = useState(state.agreed || false);
  const [errors,  setErrors]  = useState({});
  const [loading, setLoading] = useState(false);
  const f = state.reg || {};

  function set(k, v) { setState((s) => ({ ...s, reg: { ...s.reg, [k]: v } })); }

  async function submit() {
    const e = {};
    if (!f.name)                                           e.name  = t.required;
    if (!f.wa || f.wa.replace(/\D/g, "").length < 8)      e.wa    = t.invalidWa;
    if (!f.email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(f.email)) e.email = t.invalidEmail;
    if (!agreed) e.agree = t.required;
    setErrors(e);
    if (Object.keys(e).length > 0) return;

    setLoading(true);
    try {
      const result = await window.API.register(f.name, f.wa, f.email, lang);
      if (result.ok) {
        setState((s) => ({ ...s, agreed: true }));
        onNext();
      } else {
        setErrors({ server: result.error || (lang === "id" ? "Terjadi kesalahan" : "Something went wrong") });
      }
    } catch {
      setErrors({ server: lang === "id" ? "Gagal menghubungi server. Coba lagi." : "Could not reach server. Try again." });
    } finally {
      setLoading(false);
    }
  }

  const form = (
    <div className="fadein">
      <div className="eyebrow">{t.regEyebrow}</div>
      <h1 className="title">{t.regTitle}</h1>
      <p className="sub" style={{ marginBottom: 24 }}>{t.regSub}</p>

      <Field label={t.fullName} error={errors.name} required>
        <Input lead="user" placeholder={t.fullNamePh} value={f.name || ""}
          invalid={!!errors.name} onChange={(e) => set("name", e.target.value)} />
      </Field>
      <Field label={t.waNumber} error={errors.wa} hint="WhatsApp" required>
        <Input leadText="+62" placeholder={t.waPh} value={f.wa || ""} inputMode="tel"
          invalid={!!errors.wa} onChange={(e) => set("wa", e.target.value)} />
      </Field>
      <Field label={t.email} error={errors.email} required>
        <Input lead="mail" placeholder={t.emailPh} value={f.email || ""} inputMode="email"
          invalid={!!errors.email} onChange={(e) => set("email", e.target.value)} />
      </Field>

      <label className="check" style={{
        marginTop: 8, marginBottom: 4,
        padding: "10px 12px",
        borderRadius: "var(--radius-sm)",
        border: `1.5px solid ${errors.agree ? "var(--danger)" : "var(--line)"}`,
        background: errors.agree ? "color-mix(in oklab, var(--danger) 6%, white)" : "var(--surface)",
        transition: "border-color .15s, background .15s",
      }}>
        <input type="checkbox" checked={agreed} onChange={(e) => { setAgreed(e.target.checked); if (e.target.checked) setErrors(er => ({ ...er, agree: undefined })); }} />
        <span>{t.agree} <a onClick={(e) => e.preventDefault()} href="#" style={{ color: "var(--brand)", fontWeight: 700 }}>{t.terms}</a> {t.and} <a onClick={(e) => e.preventDefault()} href="#" style={{ color: "var(--brand)", fontWeight: 700 }}>{t.privacy}</a></span>
      </label>
      {errors.agree && (
        <div style={{ display: "flex", alignItems: "center", gap: 6, color: "var(--danger)", fontSize: 12.5, fontWeight: 600, marginTop: 5, marginBottom: 6 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
          {lang === "id" ? "Anda harus menyetujui syarat & ketentuan untuk melanjutkan." : "You must agree to the terms & conditions to continue."}
        </div>
      )}
      {errors.server && (
        <div className="banner" style={{ background: "#fef2f2", borderColor: "#fca5a5", color: "#dc2626", marginBottom: 8 }}>
          {errors.server}
        </div>
      )}

      <Button block lg iconR="arrow" disabled={loading} onClick={submit} style={{ marginTop: 18 }}>
        {loading ? (lang === "id" ? "Mengirim kode…" : "Sending code…") : t.sendOtp}
      </Button>

      <p className="tcenter muted" style={{ fontSize: 13.5, marginTop: 18 }}>
        {t.haveAccount} <a href="#" onClick={(e) => { e.preventDefault(); if (typeof onLogin === "function") onLogin(); }} style={{ fontWeight: 700 }}>{t.login}</a>
      </p>
    </div>
  );

  if (layout === "centered") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad">{form}</div>
      </div>
    );
  }

  return (
    <div className="center-wrap">
      <div className="col-mid" style={{ maxWidth: 920 }}>
        <div className="split">
          <div className="split-brand">
            <div className="deco-ring" style={{ width: 280, height: 280, right: -90, top: -90 }} />
            <div className="deco-ring" style={{ width: 180, height: 180, right: -40, top: -40 }} />
            <Logo light />
            <div style={{ marginTop: 10 }}>
              <div className="brand-hero-title">{t.brandHero}</div>
            </div>
            <div className="brand-bullets">
              {[["wa", t.bullet1], ["sparkle", t.bullet2], ["shield", t.bullet3]].map(([ic, tx], i) => (
                <div className="brand-bullet" key={i}>
                  <span className="bi"><Icon name={ic} size={16} /></span>
                  <span>{tx}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="split-form">{form}</div>
        </div>
      </div>
    </div>
  );
}

// Input 6 kotak untuk satu channel OTP
function OtpBoxes({ value, onChange, disabled, onEnter }) {
  const refs = useRef([]);
  const digits = value.split("").concat(Array(6).fill("")).slice(0, 6);

  function handleChange(i, v) {
    v = v.replace(/\D/g, "").slice(-1);
    const next = [...digits]; next[i] = v;
    onChange(next.join(""));
    if (v && i < 5) refs.current[i + 1]?.focus();
  }
  function handleKey(i, e) {
    if (e.key === "Backspace" && !digits[i] && i > 0) refs.current[i - 1]?.focus();
    if (e.key === "Enter" && onEnter) onEnter();
  }
  function handlePaste(e) {
    e.preventDefault();
    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, 6);
    if (!pasted) return;
    onChange(pasted);
    const focusIdx = Math.min(pasted.length, 5);
    refs.current[focusIdx]?.focus();
  }
  return (
    <div className="otp-inputs" style={{ gap: 6 }}>
      {digits.map((d, i) => (
        <input key={i} ref={(el) => (refs.current[i] = el)}
          className={`otp-box ${d ? "filled" : ""} ${disabled ? "disabled" : ""}`}
          inputMode="numeric" maxLength={1} value={d} disabled={disabled}
          autoFocus={i === 0}
          style={{ opacity: disabled ? 0.35 : 1, flex: 1, minWidth: 0 }}
          onChange={(e) => handleChange(i, e.target.value)}
          onKeyDown={(e) => handleKey(i, e)}
          onPaste={handlePaste} />
      ))}
    </div>
  );
}

function OtpScreen({ t, lang, state, setState, onNext, onBack }) {
  const email  = (state.reg && state.reg.email) || "";
  const waRaw  = (state.reg && state.reg.wa)    || "";
  const waMask = waRaw ? waRaw.replace(/(\d{4})(\d+)(\d{3})/, "$1 **** $3") : "—";
  const id     = lang === "id";

  const STEPS = [
    { key: "email", icon: "mail",  label: "Email",    contact: email,  hint: id ? "Cek kotak masuk atau folder spam email Anda." : "Check your inbox or spam folder." },
    { key: "wa",    icon: "wa",    label: "WhatsApp", contact: waMask, hint: id ? "Cek pesan WhatsApp di nomor Anda." : "Check your WhatsApp messages." },
    { key: "sms",   icon: "phone", label: "SMS",      contact: waMask, hint: id ? "Cek pesan SMS di nomor Anda." : "Check your SMS messages." },
  ];

  const [page,       setPage]       = useState(0);
  const [codes,      setCodes]      = useState({ email: "", wa: "", sms: "" });
  const [skipped,    setSkipped]    = useState({ email: false, wa: false, sms: false });
  const [secs,       setSecs]       = useState(60);
  const [sending,    setSending]    = useState(false);
  const [loading,    setLoading]    = useState(false);
  const [error,      setError]      = useState("");
  // Stage: 'otp' | 'setpassword'
  const [stage,      setStage]      = useState("otp");
  const [emailVerified, setEmailVerified] = useState(false);
  const [pwdValue,   setPwdValue]   = useState("");
  const [pwdConfirm, setPwdConfirm] = useState("");
  const [showPwd,    setShowPwd]    = useState(false);
  const [emailSent,  setEmailSent]  = useState(false);

  const cur = STEPS[page];
  const isLast = page === STEPS.length - 1;

  // Kirim OTP saat pertama masuk ke setiap page
  useEffect(() => {
    setSecs(60); setError("");
    setSending(true);
    window.API.sendOtp(email, cur.key)
      .catch(() => {})
      .finally(() => setSending(false));
  }, [page]);

  useEffect(() => {
    if (secs <= 0) return;
    const tm = setTimeout(() => setSecs((s) => s - 1), 1000);
    return () => clearTimeout(tm);
  }, [secs]);

  // Step 1 & 2: auto-verify lalu lanjut. Step 3 (last): hanya lanjut manual
  async function advance(skippingCur = false, codeOverride) {
    setError("");
    if (skippingCur) {
      setSkipped(s => ({ ...s, [cur.key]: true }));
      if (!isLast) { setPage(p => p + 1); return; }
      doVerify({ ...skipped, [cur.key]: true }, codes);
      return;
    }
    if (!isLast) {
      // Auto-verify kode step ini sebelum lanjut
      const code = codeOverride ?? codes[cur.key];
      if (code.length === 6) {
        setLoading(true);
        try {
          const r = await window.API.verify(email, code);
          if (r.token) {
            // Simpan token sementara, lanjut ke step berikutnya
            window.API.setToken(r.token);
            setState(s => ({ ...s, reg: { ...s.reg, ...r.applicant } }));
          }
          // Lanjut ke step berikutnya terlepas dari hasil (OTP mungkin tidak aktif)
        } catch {}
        setLoading(false);
      }
      setPage(p => p + 1);
      return;
    }
    // Step terakhir: verify manual
    doVerify(skipped, codes);
  }

  async function doVerify(finalSkipped, finalCodes) {
    finalSkipped = finalSkipped ?? skipped;
    finalCodes   = finalCodes   ?? codes;
    const attempts = STEPS.filter(s => !finalSkipped[s.key] && finalCodes[s.key].length === 6);
    if (!attempts.length) {
      setError(lang === "id" ? "Minimal satu kode harus diisi." : "At least one code must be entered.");
      return;
    }
    // Jika token sudah ada (dapat dari step sebelumnya), langsung ke set-password
    if (window.API.getToken()) { setStage("setpassword"); return; }
    setLoading(true);
    let lastErr = "";
    for (const ch of attempts) {
      try {
        const r = await window.API.verify(email, finalCodes[ch.key]);
        if (!r.error) {
          window.API.setToken(r.token);
          setState(s => ({ ...s, reg: { ...s.reg, ...r.applicant } }));
          setEmailVerified(!!r.emailVerified);
          setLoading(false);
          setStage("setpassword");
          return;
        }
        lastErr = r.error;
      } catch { lastErr = "error"; }
    }
    setLoading(false);
    setError(lastErr === "Kode OTP salah"
      ? (id ? "Kode yang dimasukkan salah. Periksa kembali." : "Wrong OTP code. Please check again.")
      : lastErr === "Kode OTP sudah kadaluarsa"
      ? (id ? "Kode sudah kadaluarsa. Minta kode baru." : "Codes expired. Request new ones.")
      : lastErr);
  }

  async function submitPassword() {
    setError("");
    const pwd = pwdValue.trim();
    if (pwd.length < 6) { setError(id ? "Password minimal 6 karakter." : "Password must be at least 6 characters."); return; }
    if (pwd !== pwdConfirm.trim()) { setError(id ? "Konfirmasi password tidak cocok." : "Passwords do not match."); return; }
    setLoading(true);
    try {
      const r = await window.API.setPassword(pwd);
      if (r.ok) {
        setEmailSent(!!r.emailSent);
        setTimeout(onNext, r.emailSent ? 2200 : 0);
      } else {
        setError(r.error || (id ? "Gagal menyimpan password." : "Failed to save password."));
      }
    } catch {
      setError(id ? "Terjadi kesalahan. Coba lagi." : "Something went wrong. Please try again.");
    }
    setLoading(false);
  }

  async function resend() {
    setSecs(60); setError("");
    setCodes(c => ({ ...c, [cur.key]: "" }));
    setSending(true);
    try { await window.API.sendOtp(email, cur.key); } catch {}
    finally { setSending(false); }
  }

  const curCode  = codes[cur.key];
  const isFilled = curCode.length === 6;

  // Auto-submit step 1 & 2 saat 6 digit terisi; step 3 manual
  useEffect(() => {
    if (isFilled && !loading && !sending && !isLast) advance(false, curCode);
  }, [curCode, sending, loading]);

  // ── Stage: Set Password ────────────────────────────────────────────────────
  if (stage === "setpassword") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad fadein">
          {/* Progress dots — semua hijau + satu terakhir aktif */}
          <div style={{ display: "flex", gap: 6, marginBottom: 20 }}>
            {[...STEPS, { key: "pwd" }].map((s, i) => (
              <div key={s.key} style={{
                height: 4, flex: 1, borderRadius: 99,
                background: i < STEPS.length ? "var(--success)" : "var(--brand)",
                transition: "background .3s"
              }} />
            ))}
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
            <div style={{ width: 38, height: 38, borderRadius: 12, background: "var(--brand-soft)", color: "var(--brand)", display: "grid", placeItems: "center" }}>
              <Icon name="lock" size={18} />
            </div>
            <div>
              <div style={{ fontWeight: 800, fontSize: 18 }}>{id ? "Buat Password" : "Create Password"}</div>
              <div style={{ color: "var(--muted)", fontSize: 13 }}>4 / 4</div>
            </div>
          </div>

          <p className="sub" style={{ marginBottom: 16, fontSize: 13.5 }}>
            {id ? "Buat password untuk masuk ke akun Anda." : "Create a password to log in to your account."}
          </p>

          {emailSent && (
            <div className="banner" style={{ background: "#f0fdf4", borderColor: "#86efac", color: "#16a34a", marginBottom: 14, fontWeight: 600, fontSize: 14 }}>
              ✅ {id ? `Data akun dikirim ke email ${email}` : `Account data sent to ${email}`}
            </div>
          )}

          {error && (
            <div className="banner" style={{ background: "#fef2f2", borderColor: "#fca5a5", color: "#dc2626", marginBottom: 12 }}>
              {error}
            </div>
          )}

          <Field label={id ? "Password" : "Password"} style={{ marginBottom: 12 }}>
            <div style={{ position: "relative" }}>
              <Input
                type={showPwd ? "text" : "password"}
                placeholder={id ? "Min. 6 karakter" : "Min. 6 characters"}
                value={pwdValue}
                onChange={e => { setPwdValue(e.target.value); setError(""); }}
                onKeyDown={e => e.key === "Enter" && submitPassword()}
              />
              <button type="button" onClick={() => setShowPwd(v => !v)}
                style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--muted)", padding: 0 }}>
                <Icon name={showPwd ? "eyeOff" : "eye"} size={18} />
              </button>
            </div>
          </Field>

          <Field label={id ? "Konfirmasi Password" : "Confirm Password"} style={{ marginBottom: 20 }}>
            <Input
              type={showPwd ? "text" : "password"}
              placeholder={id ? "Ulangi password" : "Repeat password"}
              value={pwdConfirm}
              onChange={e => { setPwdConfirm(e.target.value); setError(""); }}
              onKeyDown={e => e.key === "Enter" && submitPassword()}
            />
          </Field>

          <Button block lg iconR="arrow" disabled={loading || !pwdValue} onClick={submitPassword}>
            {loading ? (id ? "Menyimpan…" : "Saving…") : (id ? "Simpan & Lanjutkan" : "Save & Continue")}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="center-wrap">
      <div className="col-narrow card card-pad fadein">

        {/* Progress dots */}
        <div style={{ display: "flex", gap: 6, marginBottom: 20 }}>
          {STEPS.map((s, i) => (
            <div key={s.key} style={{
              height: 4, flex: 1, borderRadius: 99,
              background: i < page ? "var(--success)" : i === page ? "var(--brand)" : "var(--line)",
              transition: "background .3s"
            }} />
          ))}
        </div>

        {/* Channel header */}
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
          <div style={{ width: 38, height: 38, borderRadius: 12, background: "var(--brand-soft)", color: "var(--brand)", display: "grid", placeItems: "center" }}>
            <Icon name={cur.icon} size={18} />
          </div>
          <div>
            <div style={{ fontWeight: 800, fontSize: 18 }}>{cur.label}</div>
            <div style={{ color: "var(--muted)", fontSize: 13 }}>{cur.contact}</div>
          </div>
          <div style={{ marginLeft: "auto", color: "var(--muted)", fontSize: 12 }}>
            {page + 1} / {STEPS.length}
          </div>
        </div>

        <p className="sub" style={{ marginBottom: 12, fontSize: 13.5 }}>{cur.hint}</p>

        {sending && (
          <div className="banner" style={{ background: "var(--brand-soft)", borderColor: "var(--brand)", color: "var(--brand)", marginBottom: 12 }}>
            {lang === "id" ? "⏳ Mengirim kode…" : "⏳ Sending code…"}
          </div>
        )}

        <OtpBoxes
          key={cur.key}
          value={curCode}
          onChange={(v) => { setCodes(c => ({ ...c, [cur.key]: v })); setError(""); }}
          disabled={false}
          onEnter={isLast && isFilled && !loading ? () => advance(false) : undefined}
        />

        {error && (
          <div className="banner" style={{ background: "#fef2f2", borderColor: "#fca5a5", color: "#dc2626", margin: "12px 0 0" }}>
            {error}
          </div>
        )}

        {/* Step 1 & 2: loading indicator saja. Step 3: tombol submit manual */}
        {isLast ? (
          <Button block lg iconR="check"
            disabled={!isFilled || loading} onClick={() => advance(false)}
            style={{ marginTop: 20 }}>
            {loading ? (id ? "Memverifikasi…" : "Verifying…") : t.verify}
          </Button>
        ) : loading ? (
          <div className="banner" style={{ background: "var(--brand-soft)", borderColor: "var(--brand)", color: "var(--brand)", marginTop: 20, textAlign: "center" }}>
            {id ? "⏳ Memverifikasi…" : "⏳ Verifying…"}
          </div>
        ) : isFilled ? (
          <div className="banner" style={{ background: "#f0fdf4", borderColor: "#86efac", color: "#16a34a", marginTop: 20, textAlign: "center" }}>
            ✓ {id ? "Kode diterima, melanjutkan…" : "Code accepted, continuing…"}
          </div>
        ) : null}

        {/* Lewati */}
        <button className="btn btn-ghost" onClick={() => advance(true)}
          style={{ marginTop: 10, width: "100%" }} disabled={loading}>
          {id ? `Lewati — tidak terima kode ${cur.label}` : `Skip — didn't receive ${cur.label} code`}
        </button>

        <div className="resend" style={{ marginTop: 16 }}>
          {secs > 0 ? (
            <span>{t.resendIn} <b style={{ color: "var(--ink)" }}>{secs}</b> {t.sec}</span>
          ) : (
            <a href="#" onClick={(e) => { e.preventDefault(); resend(); }} style={{ fontWeight: 700 }}>{t.resend}</a>
          )}
        </div>
        <div className="tcenter" style={{ marginTop: 10 }}>
          <button className="btn btn-text" onClick={page > 0 ? () => setPage(p => p - 1) : onBack}>
            {page > 0 ? (id ? "← Kembali" : "← Back") : t.changeNumber}
          </button>
        </div>
      </div>
    </div>
  );
}

function LoginScreen({ t, lang, state, setState, onSuccess, onBack, onForgot }) {
  const [identifier, setIdentifier] = useState("");
  const [password,   setPassword]   = useState("");
  const [showPass,   setShowPass]   = useState(false);
  const [loading,    setLoading]    = useState(false);
  const [errors,     setErrors]     = useState({});

  async function submit() {
    const e = {};
    if (!identifier.trim()) e.identifier = t.required;
    if (!password.trim())   e.password   = t.required;
    setErrors(e);
    if (Object.keys(e).length) return;

    setLoading(true);
    setErrors({});
    try {
      const r = await window.API.login(identifier.trim(), password.trim());
      if (r.ok) {
        window.API.setToken(r.token);
        setState((s) => ({ ...s, reg: { ...s.reg, ...r.applicant } }));
        onSuccess(r.resumeStep, r);
      } else {
        const msg = r.error === "Akun tidak ditemukan"
          ? (lang === "id" ? "Akun tidak ditemukan. Periksa email/nomor HP." : "Account not found.")
          : r.error === "Password salah"
          ? (lang === "id" ? "Password salah. Periksa kembali." : "Wrong password.")
          : r.error === "Akun belum diverifikasi"
          ? (lang === "id" ? "Akun belum aktif. Selesaikan registrasi terlebih dahulu." : "Account not verified yet.")
          : (r.error || (lang === "id" ? "Terjadi kesalahan." : "Something went wrong."));
        setErrors({ server: msg });
      }
    } catch {
      setErrors({ server: lang === "id" ? "Gagal menghubungi server." : "Could not reach server." });
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="center-wrap">
      <div className="col-narrow card card-pad fadein">
        <div className="eyebrow">{t.loginEyebrow}</div>
        <h1 className="title">{t.loginTitle}</h1>
        <p className="sub" style={{ marginBottom: 24 }}>{t.loginSub}</p>

        <Field label={t.loginIdentifier} error={errors.identifier}>
          <Input lead="user" placeholder={t.loginIdentifierPh} value={identifier}
            invalid={!!errors.identifier} onChange={(e) => setIdentifier(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && submit()} />
        </Field>

        <Field label={t.loginPassword} error={errors.password} style={{ marginTop: 14 }}>
          <div style={{ position: "relative" }}>
            <Input lead="lock" placeholder="••••••••••" value={password}
              type={showPass ? "text" : "password"}
              invalid={!!errors.password} onChange={(e) => setPassword(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && submit()} />
            <button type="button" onClick={() => setShowPass((v) => !v)}
              style={{ position: "absolute", right: 14, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--muted)", fontSize: 13 }}>
              {showPass ? (lang === "id" ? "Sembunyikan" : "Hide") : (lang === "id" ? "Tampilkan" : "Show")}
            </button>
          </div>
        </Field>

        {errors.server && (
          <div className="banner" style={{ background: "#fef2f2", borderColor: "#fca5a5", color: "#dc2626", marginBottom: 4 }}>
            {errors.server}
          </div>
        )}

        <Button block lg iconR="arrow" disabled={loading} onClick={submit} style={{ marginTop: 20 }}>
          {loading ? (lang === "id" ? "Masuk…" : "Signing in…") : t.loginBtn}
        </Button>

        <p className="tcenter" style={{ fontSize: 13.5, marginTop: 14 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onForgot(); }} style={{ color: "var(--brand)", fontWeight: 600 }}>
            {t.forgotLink}
          </a>
        </p>

        <p className="tcenter muted" style={{ fontSize: 13.5, marginTop: 6 }}>
          {t.noAccount}{" "}
          <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ fontWeight: 700 }}>
            {t.register}
          </a>
        </p>
      </div>
    </div>
  );
}

function ForgotPasswordScreen({ t, lang, onBack, onSuccess }) {
  // stage: 'input' | 'otp' | 'password' | 'done'
  const [stage,       setStage]      = useState("input");
  const [identifier,  setIdentifier] = useState("");
  const [channel,     setChannel]    = useState("wa"); // 'wa' | 'sms'
  const [resolvedEmail, setResolvedEmail] = useState(""); // filled after OTP sent
  const [otpCodes,    setOtpCodes]   = useState(["","","","","",""]);
  const [newPassword, setNewPassword]= useState("");
  const [showPw,      setShowPw]     = useState(false);
  const [loading,     setLoading]    = useState(false);
  const [error,       setError]      = useState("");
  const [banner,      setBanner]     = useState("");

  const id = lang === "id";

  // ── Stage 1: send OTP via email, fallback to WA/SMS ─────────────────────
  async function submitIdentifier() {
    if (!identifier.trim()) { setError(id ? "Wajib diisi." : "Required."); return; }
    setLoading(true); setError("");
    try {
      // Try email first
      const r = await window.API.forgot(identifier.trim());
      if (r.ok) {
        setResolvedEmail(r.email || identifier.trim());
        setStage("done_email");
        return;
      }
      if (r.error === "Akun tidak ditemukan") {
        setError(id ? "Akun tidak ditemukan." : "Account not found.");
        return;
      }
      if (r.needOtp) {
        // Email not verified or send failed → offer WA/SMS OTP
        setResolvedEmail(r.email || identifier.trim());
        setStage("choose_channel");
        return;
      }
      setError(r.error || (id ? "Terjadi kesalahan." : "Something went wrong."));
    } catch {
      setError(id ? "Gagal menghubungi server." : "Could not reach server.");
    } finally {
      setLoading(false);
    }
  }

  // ── Stage 2: send OTP via WA or SMS ─────────────────────────────────────
  async function sendOtp(ch) {
    setChannel(ch);
    setLoading(true); setError("");
    try {
      await window.API.forgotOtp(identifier.trim(), ch);
      setBanner(id ? `Kode OTP dikirim via ${ch.toUpperCase()}` : `OTP sent via ${ch.toUpperCase()}`);
      setStage("otp");
    } catch {
      setError(id ? "Gagal mengirim OTP." : "Failed to send OTP.");
    } finally {
      setLoading(false);
    }
  }

  // ── Stage 3: verify OTP ──────────────────────────────────────────────────
  async function verifyOtp() {
    const code = otpCodes.join("");
    if (code.length < 6) { setError(id ? "Masukkan 6 digit kode OTP." : "Enter 6-digit OTP."); return; }
    setLoading(true); setError("");
    try {
      // We just advance to password stage; actual verification happens on resetPassword
      setStage("password");
    } finally {
      setLoading(false);
    }
  }

  // ── Stage 4: set new password ────────────────────────────────────────────
  async function submitPassword() {
    if (newPassword.length < 6) { setError(id ? "Password minimal 6 karakter." : "Password min 6 chars."); return; }
    const code = otpCodes.join("");
    setLoading(true); setError("");
    try {
      const r = await window.API.resetPassword(resolvedEmail || identifier.trim(), code, newPassword);
      if (r.ok) {
        setStage("done");
      } else {
        setError(r.error || (id ? "Terjadi kesalahan." : "Something went wrong."));
      }
    } catch {
      setError(id ? "Gagal menghubungi server." : "Could not reach server.");
    } finally {
      setLoading(false);
    }
  }

  // ── Done (email) ─────────────────────────────────────────────────────────
  if (stage === "done_email") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad fadein tcenter">
          <div className="done-check" style={{ background: "var(--brand-soft)", color: "var(--brand)", margin: "0 auto 20px" }}>
            <Icon name="check" size={36} />
          </div>
          <div className="eyebrow">{t.forgotEyebrow}</div>
          <h1 className="title" style={{ marginBottom: 12 }}>{id ? "Berhasil!" : "Done!"}</h1>
          <p className="sub">{t.forgotSuccess}</p>
          <Button block lg onClick={onBack} style={{ marginTop: 24 }}>{t.backToLogin}</Button>
        </div>
      </div>
    );
  }

  // ── Done (OTP reset) ─────────────────────────────────────────────────────
  if (stage === "done") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad fadein tcenter">
          <div className="done-check" style={{ background: "var(--brand-soft)", color: "var(--brand)", margin: "0 auto 20px" }}>
            <Icon name="check" size={36} />
          </div>
          <div className="eyebrow">{t.forgotEyebrow}</div>
          <h1 className="title" style={{ marginBottom: 12 }}>{id ? "Password Diperbarui!" : "Password Updated!"}</h1>
          <p className="sub">{id ? "Password baru berhasil disimpan. Silakan login." : "New password saved. Please log in."}</p>
          <Button block lg onClick={onSuccess || onBack} style={{ marginTop: 24 }}>{id ? "Login Sekarang" : "Login Now"}</Button>
        </div>
      </div>
    );
  }

  // ── Choose channel ───────────────────────────────────────────────────────
  if (stage === "choose_channel") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad fadein">
          <div className="eyebrow">{t.forgotEyebrow}</div>
          <h1 className="title">{id ? "Verifikasi via OTP" : "Verify via OTP"}</h1>
          <p className="sub" style={{ marginBottom: 24 }}>
            {id ? "Email belum diverifikasi. Pilih metode penerimaan kode OTP:" : "Email not verified. Choose how to receive your OTP:"}
          </p>
          {error && <div className="otp-error" style={{ marginBottom: 16 }}>{error}</div>}
          <Button block lg disabled={loading} onClick={() => sendOtp("wa")} style={{ marginBottom: 12 }}>
            {loading && channel === "wa" ? (id ? "Mengirim…" : "Sending…") : "WhatsApp"}
          </Button>
          <Button block lg variant="outline" disabled={loading} onClick={() => sendOtp("sms")}>
            {loading && channel === "sms" ? (id ? "Mengirim…" : "Sending…") : "SMS"}
          </Button>
          <p className="tcenter" style={{ fontSize: 13.5, marginTop: 18 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); setStage("input"); }} style={{ fontWeight: 600 }}>
              ← {id ? "Kembali" : "Back"}
            </a>
          </p>
        </div>
      </div>
    );
  }

  // ── OTP input ────────────────────────────────────────────────────────────
  if (stage === "otp") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad fadein">
          <div className="eyebrow">{t.forgotEyebrow}</div>
          <h1 className="title">{id ? "Masukkan Kode OTP" : "Enter OTP Code"}</h1>
          {banner && <div className="otp-banner otp-banner-ok" style={{ marginBottom: 16 }}>{banner}</div>}
          <p className="sub" style={{ marginBottom: 24 }}>
            {id ? `Kode OTP dikirim via ${channel.toUpperCase()} ke nomor terdaftar.` : `OTP sent via ${channel.toUpperCase()} to registered number.`}
          </p>
          {error && <div className="otp-error" style={{ marginBottom: 12 }}>{error}</div>}
          <OtpBoxes codes={otpCodes} setCodes={setOtpCodes} />
          <Button block lg disabled={loading} onClick={verifyOtp} style={{ marginTop: 20 }}>
            {loading ? (id ? "Memverifikasi…" : "Verifying…") : (id ? "Lanjut" : "Continue")}
          </Button>
          <p className="tcenter" style={{ fontSize: 13.5, marginTop: 14 }}>
            <a href="#" onClick={(e) => { e.preventDefault(); setStage("choose_channel"); setOtpCodes(["","","","","",""]); setBanner(""); }} style={{ fontWeight: 600 }}>
              ← {id ? "Kirim Ulang" : "Resend"}
            </a>
          </p>
        </div>
      </div>
    );
  }

  // ── New password ─────────────────────────────────────────────────────────
  if (stage === "password") {
    return (
      <div className="center-wrap">
        <div className="col-narrow card card-pad fadein">
          <div className="eyebrow">{t.forgotEyebrow}</div>
          <h1 className="title">{id ? "Buat Password Baru" : "Set New Password"}</h1>
          <p className="sub" style={{ marginBottom: 24 }}>
            {id ? "Masukkan password baru untuk akun Anda." : "Enter a new password for your account."}
          </p>
          {error && <div className="otp-error" style={{ marginBottom: 12 }}>{error}</div>}
          <Field label={id ? "Password Baru" : "New Password"}>
            <div style={{ position: "relative" }}>
              <Input type={showPw ? "text" : "password"} placeholder={id ? "Min. 6 karakter" : "Min. 6 characters"}
                value={newPassword} onChange={(e) => setNewPassword(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && submitPassword()} />
              <button type="button" onClick={() => setShowPw(v => !v)}
                style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--fg-muted)", fontSize: 13 }}>
                {showPw ? (id ? "Sembunyikan" : "Hide") : (id ? "Tampilkan" : "Show")}
              </button>
            </div>
          </Field>
          <Button block lg disabled={loading} onClick={submitPassword} style={{ marginTop: 20 }}>
            {loading ? (id ? "Menyimpan…" : "Saving…") : (id ? "Simpan Password" : "Save Password")}
          </Button>
        </div>
      </div>
    );
  }

  // ── Stage 1: identifier input ────────────────────────────────────────────
  return (
    <div className="center-wrap">
      <div className="col-narrow card card-pad fadein">
        <div className="eyebrow">{t.forgotEyebrow}</div>
        <h1 className="title">{t.forgotTitle}</h1>
        <p className="sub" style={{ marginBottom: 24 }}>{t.forgotSub}</p>

        <Field label={t.loginIdentifier} error={error}>
          <Input lead="user" placeholder={t.loginIdentifierPh} value={identifier}
            invalid={!!error} onChange={(e) => setIdentifier(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && submitIdentifier()} />
        </Field>

        <Button block lg iconR="arrow" disabled={loading} onClick={submitIdentifier} style={{ marginTop: 20 }}>
          {loading ? (id ? "Mengirim…" : "Sending…") : t.forgotBtn}
        </Button>

        <p className="tcenter" style={{ fontSize: 13.5, marginTop: 18 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); onBack(); }} style={{ fontWeight: 600 }}>
            ← {t.backToLogin}
          </a>
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { RegisterScreen, OtpScreen, LoginScreen, ForgotPasswordScreen });