/* Login gate for Delaney's private area.
   One password. Unlocks chat + lessons + tasks + dashboard for the session. */

const { useState: useStateL } = React;

const ADMIN_PASSWORD = "starthere";

function isUnlocked() {
  try { return sessionStorage.getItem("bydelaney.unlocked") === "1"; } catch { return false; }
}
function setUnlocked() {
  try { sessionStorage.setItem("bydelaney.unlocked", "1"); } catch {}
}

function LoginPage({ setRoute }) {
  const [val, setVal] = useStateL("");
  const [err, setErr] = useStateL(false);

  const submit = (e) => {
    e.preventDefault();
    if (val.trim().toLowerCase() === ADMIN_PASSWORD) {
      setUnlocked();
      // Restore the route Delaney was actually trying to reach (dashboard, lessons, etc.)
      // instead of always dumping her on chat.
      const current = (window.location.hash || "").replace("#/", "").replace("#", "").split("?")[0];
      const target = (current && current !== "login" && current !== "home") ? current : "dashboard";
      if (setRoute) setRoute(target);
      else window.location.hash = "#/" + target;
    } else {
      setErr(true);
      setTimeout(() => setErr(false), 1400);
    }
  };

  return (
    <main className="page-enter login-wrap">
      <div className="shell">
        <div className="login">
          <div className="login-mark serif">¹</div>
          <h1 className="login-h serif">Hi, Delaney.</h1>
          <p className="login-p">Sign in to talk to your AI.</p>
          <form onSubmit={submit} className="login-form">
            <input
              type="password"
              className="input login-input"
              value={val}
              placeholder="Password"
              onChange={(e) => setVal(e.target.value)}
              autoFocus
            />
            <button className="btn" type="submit">
              Sign in <span aria-hidden="true">→</span>
            </button>
          </form>
          {err && <div className="login-err">Not quite. Try again.</div>}
        </div>
      </div>
      <style>{`
        .login-wrap { padding: clamp(72px, 12vw, 160px) 0; }
        .login {
          max-width: 460px;
          margin: 0 auto;
          padding: 56px 48px;
          border: 1px solid var(--line);
          border-radius: 4px;
          background: var(--cream);
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
        }
        .login-mark { font-size: 64px; line-height: 1; color: var(--terracotta-deep); font-style: italic; }
        .login-h { font-size: clamp(36px, 4.5vw, 52px); line-height: 1.1; margin-top: 4px; }
        .login-p { color: var(--ink-2); font-family: var(--serif); font-size: 18px; margin: 0 0 8px; }
        .login-form { display: flex; gap: 10px; width: 100%; margin-top: 16px; }
        .login-input { flex: 1; }
        .login-err { color: var(--terracotta-deep); font-size: 13px; margin-top: 4px; }
      `}</style>
    </main>
  );
}

Object.assign(window, { LoginPage, isUnlocked, setUnlocked });