// LoginGate: renders either the auth screens or the rest of the app.
// Hash-based mini-router so OAuth/verify/reset can be deep-linked.
(function () {
  const { useState, useEffect, useCallback } = React;
  const S = window.KomonichiState;
  const Loader = window.KomonichiLoader;

  function parseHash() {
    const h = (location.hash || "").replace(/^#/, "");
    const [route, qs] = h.split("?");
    const params = new URLSearchParams(qs || "");
    // Logged-out users land on the public homepage by default. The login,
    // signup, and other auth routes are reached via explicit links/CTAs.
    return { route: route || "home", params };
  }

  // Public homepage routes (no auth required).
  const HOME_ROUTES = new Set(["home", "features", "guide"]);

  function useHashRoute() {
    const [r, setR] = useState(parseHash());
    useEffect(() => {
      const f = () => setR(parseHash());
      window.addEventListener("hashchange", f);
      return () => window.removeEventListener("hashchange", f);
    }, []);
    return r;
  }

  function FieldRow({ label, children }) {
    return (
      React.createElement("label", { className: "auth-row" },
        React.createElement("span", { className: "label" }, label),
        children
      )
    );
  }

  function AuthShell({ title, sub, children, footer }) {
    const MuteButton = window.KomonichiMute && window.KomonichiMute.MuteButton;
    return React.createElement("div", { className: "auth-wrap fade-in" },
      MuteButton ? React.createElement("div", { className: "mute-auth-pos" },
        React.createElement(MuteButton, null)
      ) : null,
      React.createElement("div", { className: "auth-card card" },
        React.createElement("a", { className: "brand", href: "#home",
          style: { marginBottom: 18, display: "flex", alignItems: "center", gap: 16, textDecoration: "none", color: "var(--ink)" } },
          React.createElement("div", { className: "mark" }),
          React.createElement("div", null,
            React.createElement("div", { className: "name", style: { fontSize: 22, fontFamily: "var(--serif)" } }, "komonichi"),
            React.createElement("div", { className: "tag" }, "a quiet practice")
          )
        ),
        React.createElement("h3", { className: "title", style: { fontSize: 22 } }, title),
        sub ? React.createElement("p", { className: "haiku", style: { fontSize: 13, marginTop: 4 } }, sub) : null,
        React.createElement("div", { style: { marginTop: 18 } }, children),
        footer ? React.createElement("div", { className: "dashed", style: { marginTop: 22, paddingTop: 14 } }, footer) : null
      )
    );
  }

  function LoginView({ onLoggedIn }) {
    const [identifier, setIdentifier] = useState("");
    const [password, setPassword]     = useState("");
    const [remember, setRemember]     = useState(true);
    const [err, setErr]               = useState(null);
    const [busy, setBusy]             = useState(false);

    async function submit(e) {
      e && e.preventDefault();
      setBusy(true); setErr(null);
      try {
        await Loader.show({ label: "signing in" });
        const r = await fetch("/api/auth/login", {
          method: "POST", credentials: "include",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ identifier, password, rememberMe: remember }),
        });
        if (!r.ok) {
          const b = await r.json().catch(() => ({}));
          throw new Error((b.error && b.error.message) || "login_failed");
        }
        const data = await r.json();
        S.setAccess(data.access_token);
        await S.bootstrap();
        onLoggedIn(data.user);
      } catch (e) {
        setErr(e.message);
      } finally {
        setBusy(false);
        Loader.hide();
      }
    }

    return React.createElement(AuthShell, {
      title: React.createElement("span", null, "welcome ", React.createElement("span", { className: "em", style: { fontStyle: "italic", color: "var(--persimmon)" } }, "back")),
      sub: "Sign in with your email or username.",
      footer: React.createElement("div", null,
        React.createElement("a", { href: "#signup", className: "btn ghost tiny" }, "create account"),
        " ",
        React.createElement("a", { href: "#forgot", className: "btn ghost tiny" }, "forgot password"),
      ),
    },
      React.createElement("form", { onSubmit: submit },
        React.createElement(FieldRow, { label: "email or username" },
          React.createElement("input", { className: "f", value: identifier, onChange: (e) => setIdentifier(e.target.value), autoComplete: "username" })
        ),
        React.createElement(FieldRow, { label: "password" },
          React.createElement("input", { className: "f", type: "password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "current-password" })
        ),
        React.createElement("label", { className: "auth-checkrow" },
          React.createElement("input", { type: "checkbox", checked: remember, onChange: (e) => setRemember(e.target.checked) }),
          React.createElement("span", { className: "label", style: { marginLeft: 8 } }, "remember me")
        ),
        err ? React.createElement("div", { className: "auth-err" }, err) : null,
        React.createElement("div", { style: { marginTop: 14, display: "flex", gap: 10, alignItems: "center" } },
          React.createElement("button", { className: "btn warm", type: "submit", disabled: busy }, busy ? "…" : "sign in"),
          React.createElement("a", { className: "btn ghost", href: "/api/auth/oauth/google/start" }, "continue with google")
        )
      )
    );
  }

  function SignupView({ onLoggedIn }) {
    const [email, setEmail]       = useState("");
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const [remember, setRemember] = useState(true);
    const [err, setErr]           = useState(null);
    const [busy, setBusy]         = useState(false);

    async function submit(e) {
      e && e.preventDefault();
      setBusy(true); setErr(null);
      try {
        await Loader.show({ label: "creating account" });
        const r = await fetch("/api/auth/signup", {
          method: "POST", credentials: "include",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ email, username, password, displayName: username, rememberMe: remember }),
        });
        if (!r.ok) {
          const b = await r.json().catch(() => ({}));
          throw new Error((b.error && b.error.message) || "signup_failed");
        }
        const data = await r.json();
        S.setAccess(data.access_token);
        await S.bootstrap();
        onLoggedIn(data.user);
      } catch (e) { setErr(e.message); }
      finally { setBusy(false); Loader.hide(); }
    }

    return React.createElement(AuthShell, {
      title: React.createElement("span", null, "begin a ", React.createElement("span", { className: "em", style: { fontStyle: "italic", color: "var(--persimmon)" } }, "practice")),
      sub: "We'll send a verification email — you can use the app meanwhile.",
      footer: React.createElement("a", { href: "#login", className: "btn ghost tiny" }, "i already have an account"),
    },
      React.createElement("form", { onSubmit: submit },
        React.createElement(FieldRow, { label: "email" },
          React.createElement("input", { className: "f", type: "email", value: email, onChange: (e) => setEmail(e.target.value), autoComplete: "email" })
        ),
        React.createElement(FieldRow, { label: "username" },
          React.createElement("input", { className: "f", value: username, onChange: (e) => setUsername(e.target.value), autoComplete: "username" })
        ),
        React.createElement(FieldRow, { label: "password (≥ 8 chars)" },
          React.createElement("input", { className: "f", type: "password", value: password, onChange: (e) => setPassword(e.target.value), autoComplete: "new-password" })
        ),
        React.createElement("label", { className: "auth-checkrow" },
          React.createElement("input", { type: "checkbox", checked: remember, onChange: (e) => setRemember(e.target.checked) }),
          React.createElement("span", { className: "label", style: { marginLeft: 8 } }, "remember me")
        ),
        err ? React.createElement("div", { className: "auth-err" }, err) : null,
        React.createElement("div", { style: { marginTop: 14 } },
          React.createElement("button", { className: "btn warm", type: "submit", disabled: busy }, busy ? "…" : "create account")
        )
      )
    );
  }

  function ForgotView() {
    const [email, setEmail] = useState("");
    const [done, setDone]   = useState(false);
    const [busy, setBusy]   = useState(false);
    async function submit(e) {
      e.preventDefault(); setBusy(true);
      await fetch("/api/auth/reset/request", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email }) });
      setBusy(false); setDone(true);
    }
    return React.createElement(AuthShell, {
      title: "forgot password",
      sub: "We'll send a one-time link if the email is registered.",
      footer: React.createElement("a", { href: "#login", className: "btn ghost tiny" }, "back to sign in"),
    },
      done
        ? React.createElement("p", { className: "haiku" }, "If that email exists, a reset link is on its way.")
        : React.createElement("form", { onSubmit: submit },
            React.createElement(FieldRow, { label: "email" },
              React.createElement("input", { className: "f", type: "email", value: email, onChange: (e) => setEmail(e.target.value) })
            ),
            React.createElement("div", { style: { marginTop: 14 } },
              React.createElement("button", { className: "btn warm", type: "submit", disabled: busy }, busy ? "…" : "send link")
            )
          )
    );
  }

  function ResetView({ token, onDone }) {
    const [pw, setPw]   = useState("");
    const [err, setErr] = useState(null);
    const [busy, setBusy] = useState(false);
    async function submit(e) {
      e.preventDefault(); setBusy(true); setErr(null);
      try {
        const r = await fetch("/api/auth/reset/confirm", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token, new_password: pw }),
        });
        if (!r.ok) { const b = await r.json().catch(() => ({})); throw new Error((b.error && b.error.message) || "reset_failed"); }
        onDone();
      } catch (e) { setErr(e.message); } finally { setBusy(false); }
    }
    return React.createElement(AuthShell, {
      title: "set a new password",
      footer: React.createElement("a", { href: "#login", className: "btn ghost tiny" }, "back to sign in"),
    },
      React.createElement("form", { onSubmit: submit },
        React.createElement(FieldRow, { label: "new password" },
          React.createElement("input", { className: "f", type: "password", value: pw, onChange: (e) => setPw(e.target.value) })
        ),
        err ? React.createElement("div", { className: "auth-err" }, err) : null,
        React.createElement("div", { style: { marginTop: 14 } },
          React.createElement("button", { className: "btn warm", type: "submit", disabled: busy || pw.length < 8 }, busy ? "…" : "set password")
        )
      )
    );
  }

  function VerifyConfirm({ token, onDone }) {
    const [state, setState] = useState("verifying");
    useEffect(() => {
      (async () => {
        const r = await fetch("/api/auth/verify/confirm", {
          method: "POST", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ token }),
        });
        setState(r.ok ? "ok" : "fail");
      })();
    }, [token]);
    return React.createElement(AuthShell, {
      title: state === "ok" ? "email verified" : state === "fail" ? "link invalid" : "verifying",
      footer: React.createElement("button", { className: "btn warm", onClick: onDone }, "continue"),
    });
  }

  function LoginGate({ children }) {
    const route = useHashRoute();
    const [user, setUser] = useState(null);
    const [checked, setChecked] = useState(false);
    const [firstRun, setFirstRun] = useState(false);

    // On mount: try to refresh, then bootstrap. If that fails, show login.
    useEffect(() => {
      (async () => {
        // OAuth landing: ?token=...&new=1
        if (route.route === "oauth" && route.params.get("token")) {
          const isNew = route.params.get("new") === "1";
          S.setAccess(route.params.get("token"));
          history.replaceState(null, "", location.pathname);
          try {
            await S.bootstrap();
            setUser(S.getState().profile);
            if (isNew) setFirstRun(true);
          } catch { /* fall through */ }
          setChecked(true);
          return;
        }
        const ok = await S.tryRefresh();
        if (ok) {
          try { await S.bootstrap(); setUser(S.getState().profile); }
          catch {}
        }
        setChecked(true);
      })();
    }, []);

    // global unauth handler: blow away access and surface login screen
    useEffect(() => {
      S.setUnauthHandler(() => { S.setAccess(null); setUser(null); location.hash = "#login"; });
    }, []);

    if (!checked) return null; // initial loader still covers the screen
    if (user && firstRun && window.KomonichiWelcome) {
      return React.createElement(window.KomonichiWelcome.WelcomeScreen, {
        onReady: () => { setFirstRun(false); location.hash = "#today"; },
      });
    }
    if (user) return children;

    // Public homepage — intro / features / guide. Sits in front of the auth
    // views; the homepage's CTAs (begin / continue with google / log in) are
    // what get the user into the auth flow.
    if (HOME_ROUTES.has(route.route) && window.KomonichiHome) {
      return React.createElement(window.KomonichiHome.HomePage, { route: route.route });
    }

    if (route.route === "signup")
      return React.createElement(SignupView, { onLoggedIn: (u) => { setFirstRun(true); setUser(u); } });
    if (route.route === "forgot") return React.createElement(ForgotView);
    if (route.route === "reset" && route.params.get("token"))
      return React.createElement(ResetView, { token: route.params.get("token"), onDone: () => location.hash = "#login" });
    if (route.route === "verify" && route.params.get("token"))
      return React.createElement(VerifyConfirm, { token: route.params.get("token"), onDone: () => location.hash = "#login" });
    return React.createElement(LoginView, { onLoggedIn: setUser });
  }

  window.KomonichiAuth = { LoginGate };
})();