/* ============================================================
   Dinasty Control — Login screen (entry point)
   ============================================================ */

function Login({ onSignIn, aiStatus }) {
  const [mode, setMode] = useState("login");
  const [email, setEmail] = useState("");
  const [pw, setPw] = useState("");
  const [msg, setMsg] = useState("");
  const [busy, setBusy] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setBusy(true);
    setMsg("");
    try {
      const endpoint = mode === "register" ? "/api/auth/register" : mode === "forgot" ? "/api/auth/forgot-password" : "/api/auth/login";
      const body = mode === "forgot" ? { email } : { email, password: pw };
      const res = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || data.ok === false) throw new Error(data.message || "Auth request failed.");
      if (mode === "login") onSignIn(data);
      else setMsg(data.message || (mode === "register" ? "Registration submitted." : "Password reset email requested."));
    } catch (err) {
      setMsg(err && err.message ? err.message : "Auth request failed.");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="login">
      <div className="login-grid-bg"></div>
      <div className="login-card">
        <div className="login-brand">
          <span className="login-mark"><BrandMark size={44} gid="bm-login" /></span>
          <div className="login-brand-txt">
            <div className="login-name">DINASTY<span> CONTROL</span></div>
            <div className="login-tag">DINASTY FUTURE · EA TERMINAL</div>
          </div>
        </div>

        <form className="login-form" onSubmit={submit}>
          <label className="lf">
            <span className="lf-label">EMAIL</span>
            <input className="lf-input mono" type="email" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
          </label>
          {mode !== "forgot" ? <label className="lf">
            <span className="lf-label">PASSWORD</span>
            <input className="lf-input mono" type="password" value={pw} onChange={(e) => setPw(e.target.value)} autoComplete={mode === "register" ? "new-password" : "current-password"} />
          </label> : null}

          <button className="lf-submit" type="submit" disabled={busy}>
            <span>{busy ? "Working" : mode === "register" ? "Register" : mode === "forgot" ? "Send Reset Email" : "Sign In"}</span>
            <span className="lf-submit-arw">→</span>
          </button>
          {msg ? <div className="login-tag">{msg}</div> : null}
          <div className="login-foot-row">
            <button className="reset" type="button" onClick={() => { setMode("login"); setMsg(""); }}>Sign In</button>
            <button className="reset" type="button" onClick={() => { setMode("register"); setMsg(""); }}>Register</button>
            <button className="reset" type="button" onClick={() => { setMode("forgot"); setMsg(""); }}>Forgot Password</button>
          </div>
        </form>

        <div className="login-foot">
          <div className="login-foot-row">
            <span className="vpsdot"><span className="dot dot-ok"></span><span className="vpsdot-name">VPS-1</span><span className="vpsdot-ping">42ms</span></span>
            <span className="vpsdot"><span className="dot dot-warn"></span><span className="vpsdot-name">VPS-2</span><span className="vpsdot-ping">214ms</span></span>
          </div>
          <AIBadge status={aiStatus} />
        </div>
      </div>
      <div className="login-version mono">v4.2.1 · build 2026.06.03 · encrypted session</div>
    </div>
  );
}

window.Login = Login;