/* gmcfontverse — Login / Signup */

function AuthPage({ mode = "login" }) {
  const r = useRoute();
  const a = useApp();
  const [m, setM] = useState(mode);
  const [step, setStep] = useState(1);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [oauthBusy, setOauthBusy] = useState(false);
  const [oauthError, setOauthError] = useState(() => getStoreAuthCallbackError());

  useEffect(() => setM(mode), [mode]);

  return (
    <div className="auth-min" data-screen-label={m === "login" ? "Login" : "Signup"}>
      <div className="auth-min-inner">
        <a className="auth-logo" onClick={() => r.go("home")}>
          <span className="logo-mark">g</span>
          <span>gmcfontverse</span>
        </a>

        <div className="tabs auth-tabs">
          <button className={m==="login"?"on":""} onClick={() => setM("login")}>เข้าสู่ระบบ</button>
          <button className={m==="signup"?"on":""} onClick={() => setM("signup")}>สมัครสมาชิก</button>
        </div>

        {m === "login" ? (
          <>
            <h1 className="auth-h1">ยินดีต้อนรับกลับ</h1>
            <p className="auth-sub">ใส่ข้อมูลเพื่อเข้าสู่บัญชีของคุณ</p>
            <div className="form-stack">
              <div>
                <div className="label-row"><span>อีเมล</span></div>
                <div className="field"><Icon name="mail" size={14}/><input placeholder="you@email.com"/></div>
              </div>
              <div>
                <div className="label-row">
                  <span>รหัสผ่าน</span>
                  <a style={{color:"var(--pink-deep)", cursor:"pointer"}}>ลืมรหัสผ่าน?</a>
                </div>
                <div className="field"><Icon name="lock" size={14}/><input type="password" placeholder="••••••••"/></div>
              </div>
              <label style={{display:"flex", alignItems:"center", gap:8, fontSize:13, color:"var(--ink-soft)"}}>
                <input type="checkbox" defaultChecked/>
                <span>จดจำฉันไว้ในเครื่องนี้</span>
              </label>
              <button className="btn coral lg block" onClick={() => {
                a.login({ name: "พลอย", email: "ploy@gmail.com" });
                r.go("dashboard");
              }}>
                เข้าสู่ระบบ
              </button>

              <div className="auth-divider"><span>หรือ</span></div>

              <button className="btn block" disabled={oauthBusy} onClick={async () => {
                setOauthBusy(true);
                setOauthError("");
                try {
                  await signInWithGoogle();
                } catch (error) {
                  setOauthError(error.message || "Google login failed.");
                  setOauthBusy(false);
                }
              }}>
                <span style={{fontSize:16}}>G</span> {oauthBusy ? "กำลังเชื่อมต่อ Google..." : "เข้าสู่ระบบด้วย Google"}
              </button>
              {oauthError && <p className="form-error">{oauthError}</p>}

              <p className="auth-foot">
                ยังไม่มีบัญชี? <a onClick={() => setM("signup")}>สมัครสมาชิกฟรี</a>
              </p>
            </div>
          </>
        ) : (
          <>
            <h1 className="auth-h1">สมัครสมาชิก</h1>
            <p className="auth-sub">ฟรี — รับฟอนต์รายเดือน + ส่วนลด 10%</p>

            <div className="auth-steps">
              {[1,2].map(s => (
                <div key={s} className={`auth-step ${step>=s?"on":""}`}/>
              ))}
            </div>

            {step === 1 ? (
              <div className="form-stack">
                <div className="auth-row">
                  <div>
                    <div className="label-row"><span>ชื่อ</span></div>
                    <div className="field"><input placeholder="สมหญิง" value={name} onChange={e => setName(e.target.value)}/></div>
                  </div>
                  <div>
                    <div className="label-row"><span>นามสกุล</span></div>
                    <div className="field"><input placeholder="ใจดี"/></div>
                  </div>
                </div>
                <div>
                  <div className="label-row"><span>อีเมล</span></div>
                  <div className="field"><Icon name="mail" size={14}/><input placeholder="you@email.com" value={email} onChange={e => setEmail(e.target.value)}/></div>
                </div>
                <div>
                  <div className="label-row"><span>รหัสผ่าน</span></div>
                  <div className="field"><Icon name="lock" size={14}/><input type="password" placeholder="อย่างน้อย 8 ตัวอักษร"/></div>
                </div>
                <label style={{display:"flex", alignItems:"flex-start", gap:8, fontSize:12, lineHeight:1.55, color:"var(--ink-soft)"}}>
                  <input type="checkbox" defaultChecked style={{marginTop:3}}/>
                  <span>ฉันยอมรับเงื่อนไขและนโยบายความเป็นส่วนตัว</span>
                </label>
                <button className="btn coral lg block" onClick={() => setStep(2)}>
                  ถัดไป
                </button>

                <p className="auth-foot">
                  มีบัญชีอยู่แล้ว? <a onClick={() => setM("login")}>เข้าสู่ระบบ</a>
                </p>
              </div>
            ) : (
              <div className="form-stack">
                <h3 style={{margin:"4px 0 4px", fontFamily:"var(--f-display)", fontSize:18}}>คุณใช้ฟอนต์เพื่ออะไร?</h3>
                <p style={{color:"var(--ink-soft)", fontSize:13, marginTop:0}}>เลือกได้มากกว่า 1 ข้อ</p>
                <div className="auth-purpose-grid">
                  {[
                    "ออกแบบกราฟิก",
                    "ทำแบรนด์/สินค้า",
                    "โซเชียลมีเดีย",
                    "งานเขียน/หนังสือ",
                    "วิดีโอ/มอชั่น",
                    "ใช้ส่วนตัว",
                  ].map(t => (
                    <label key={t} className="purpose-chip">
                      <input type="checkbox"/>
                      <span>{t}</span>
                    </label>
                  ))}
                </div>
                <div className="auth-row">
                  <button className="btn block" onClick={() => setStep(1)}>ย้อนกลับ</button>
                  <button className="btn coral lg block" onClick={() => {
                    a.login({ name: name || "สมาชิกใหม่", email });
                    r.go("dashboard");
                  }}>เริ่มต้นใช้งาน</button>
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AuthPage });