// ———— Login / Register ————
function LoginPage({ onLogin }) {
  const [tab, setTab] = useState("login");
  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");
  const [pwd2, setPwd2] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const submit = async (e) => {
    e.preventDefault();
    setError("");
    if (tab === "register" && pwd !== pwd2) {
      setError("两次密码不一致");
      return;
    }
    setLoading(true);
    try {
      if (tab === "login") {
        await window.API.login(email, pwd);
      } else {
        await window.API.register(email, pwd);
      }
      onLogin();
    } catch (err) {
      setError(err.message || "操作失败");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-root">
      <form className="login-card" onSubmit={submit}>
        <div className="login-logo-area">
          <div className="login-logo">爆</div>
          <h1 className="login-title">短视频爆款知识库</h1>
          <div className="login-sub">internal tool · 仅限授权账户</div>
        </div>
        <div className="login-body">
          <div className="tabs" style={{ marginBottom: 20 }}>
            <button type="button" className={`tab ${tab==="login"?"active":""}`} onClick={()=>{setTab("login");setError("");}}>登录</button>
            <button type="button" className={`tab ${tab==="register"?"active":""}`} onClick={()=>{setTab("register");setError("");}}>注册</button>
          </div>

          {error && (
            <div style={{ marginBottom: 12, padding: "8px 12px", background: "var(--danger-bg, #fff0f0)", border: "1px solid var(--danger)", borderRadius: 6, fontSize: 12, color: "var(--danger)" }}>
              {error}
            </div>
          )}

          <div className="field">
            <label className="field-label">Email</label>
            <input className="input" type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="you@intra.local" required />
          </div>
          <div className="field">
            <label className="field-label">密码</label>
            <input className="input" type="password" value={pwd} onChange={e=>setPwd(e.target.value)} placeholder="至少 8 位" required />
          </div>
          {tab === "register" && (
            <div className="field">
              <label className="field-label">确认密码</label>
              <input className="input" type="password" value={pwd2} onChange={e=>setPwd2(e.target.value)} placeholder="再输一次" required />
            </div>
          )}

          <button type="submit" className="btn primary lg" style={{ width: "100%", marginTop: 8 }} disabled={loading}>
            {loading && <Icon.Spinner />}
            {tab === "login" ? (loading ? "登录中..." : "登录") : (loading ? "注册中..." : "注册并登录")}
          </button>

          <div style={{ marginTop: 18, fontSize: 11.5, color: "var(--ink-3)", textAlign: "center", fontFamily: "var(--font-mono)" }}>
            JWT 存储于 localStorage · 会话有效期 7 天
          </div>
        </div>
      </form>
    </div>
  );
}
window.LoginPage = LoginPage;