// Kotleto · AUTH modal (login/signup) + simple checkout sheet

function AuthModal({ open, onClose, onSuccess }) {
  const { lang } = useLang();
  const [mode, setMode] = useState("signin"); // signin | signup | otp
  const [phone, setPhone] = useState("");
  const [otp, setOtp] = useState(["", "", "", ""]);
  const [name, setName] = useState("");

  if (!open) return null;

  const submit = () => {
    if (mode === "signin" || mode === "signup") setMode("otp");
    else { onSuccess?.({ phone, name }); onClose(); setMode("signin"); }
  };

  return (
    <>
      <div onClick={onClose} style={{
        position: "fixed", inset: 0, zIndex: 80,
        background: "rgba(26,20,16,0.5)", backdropFilter: "blur(6px)",
      }} />
      <div role="dialog" style={{
        position: "fixed", zIndex: 81, top: "50%", left: "50%", transform: "translate(-50%, -50%)",
        width: "min(440px, 92vw)",
        background: "var(--paper)", borderRadius: 28, border: "1.5px solid var(--ink)",
        boxShadow: "0 30px 80px rgba(0,0,0,0.4)",
        overflow: "hidden",
      }}>
        <div style={{ background: "var(--ink)", color: "var(--paper)", padding: "24px 28px", position: "relative" }}>
          <button onClick={onClose} style={{ position: "absolute", top: 16, insetInlineEnd: 16, color: "var(--paper)" }}><Ico.X /></button>
          <KotletoMark light />
          <h3 className="display" style={{ margin: "16px 0 4px", fontSize: 28 }}>
            {mode === "otp" ? (lang === "fa" ? "کد تأیید" : "Verify code")
              : mode === "signin" ? (lang === "fa" ? "خوش اومدی دوباره!" : "Welcome back!")
              : (lang === "fa" ? "بپیوند به کتلتُ" : "Join Kotleto")}
          </h3>
          <p style={{ margin: 0, fontSize: 13, opacity: 0.7 }}>
            {mode === "otp" ? (lang === "fa" ? `کدی که اومد به ${toFa(phone)} رو بزن` : `Enter the code we sent to ${phone}`)
              : (lang === "fa" ? "با شمارهٔ موبایلت وارد شو، ۱۰ ثانیه‌ای" : "Sign in with your phone — 10 seconds")}
          </p>
        </div>

        <div style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14 }}>
          {mode === "signup" && (
            <Field label={lang === "fa" ? "اسم" : "Name"}>
              <input value={name} onChange={e => setName(e.target.value)} placeholder={lang === "fa" ? "اسم کامل" : "Full name"} style={inputStyle} />
            </Field>
          )}
          {(mode === "signin" || mode === "signup") && (
            <Field label={lang === "fa" ? "موبایل" : "Phone"}>
              <input value={phone} onChange={e => setPhone(e.target.value)} placeholder={lang === "fa" ? "۰۹۱۲۳۴۵۶۷۸۹" : "+98 912 345 6789"} dir="ltr" style={inputStyle} />
            </Field>
          )}
          {mode === "otp" && (
            <div style={{ display: "flex", gap: 10, justifyContent: "center", direction: "ltr" }}>
              {otp.map((d, i) => (
                <input key={i} maxLength={1} value={d} onChange={e => {
                  const next = [...otp]; next[i] = e.target.value.replace(/\D/g, ""); setOtp(next);
                }} style={{
                  width: 56, height: 64, textAlign: "center",
                  borderRadius: 14, border: "1.5px solid var(--ink)",
                  fontFamily: "var(--display)", fontSize: 28, background: "var(--paper)"
                }} />
              ))}
            </div>
          )}

          <button className="btn btn-primary btn-lg" style={{ marginTop: 8 }} onClick={submit}>
            {mode === "otp" ? (lang === "fa" ? "تأیید و ورود" : "Verify & sign in")
              : (lang === "fa" ? "بفرست کد" : "Send code")}
            <Ico.Arrow />
          </button>

          {mode !== "otp" && (
            <div style={{ textAlign: "center", fontSize: 13, color: "var(--ink-3)" }}>
              {mode === "signin" ? (lang === "fa" ? "تازه‌واردی؟" : "New here?") : (lang === "fa" ? "قبلاً ثبت‌نام کردی؟" : "Already a member?")}
              {" "}
              <button onClick={() => setMode(mode === "signin" ? "signup" : "signin")} style={{ color: "var(--brand)", fontWeight: 700 }}>
                {mode === "signin" ? (lang === "fa" ? "ثبت‌نام کن" : "Sign up") : (lang === "fa" ? "وارد شو" : "Sign in")}
              </button>
            </div>
          )}
        </div>
      </div>
    </>
  );
}

const inputStyle = {
  width: "100%", padding: "14px 16px",
  borderRadius: 14, border: "1.5px solid var(--ink)",
  background: "var(--paper)", fontSize: 15, fontWeight: 600,
  outline: "none",
};

function Field({ label, children }) {
  return (
    <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
      <span style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em" }}>{label}</span>
      {children}
    </label>
  );
}

window.AuthModal = AuthModal;