// Sign-in screen — magic-link only. Renders before the main app when the
// session check returns 401. Also handles /auth/link?t=… by consuming the
// token and dropping the user straight into the app.

const { useState: useLS, useEffect: useLE } = React;

function LoginScreen({ onAuthed }) {
  const initialEmail = (() => {
    try { return localStorage.getItem("bos.lastEmail") || ""; } catch { return ""; }
  })();

  const [email, setEmail] = useLS(initialEmail);
  const [busy,  setBusy]  = useLS(false);
  const [error, setError] = useLS(null);
  const [sent,  setSent]  = useLS(false);

  // If we landed on /auth/link?t=… consume the token immediately.
  useLE(() => {
    const params = new URLSearchParams(location.search);
    const path   = location.pathname;
    if (path.startsWith("/auth/link") && params.get("t")) {
      const t = params.get("t");
      setBusy(true);
      (async () => {
        try {
          await api.post("/auth/consume-link", { token: t });
          history.replaceState({}, "", "/");
          onAuthed();
        } catch (err) {
          setError("Länken är inte giltig längre. Begär en ny nedan.");
          history.replaceState({}, "", "/");
        } finally {
          setBusy(false);
        }
      })();
    }
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    setBusy(true); setError(null);
    try {
      await api.post("/auth/request-link", { email });
      try { localStorage.setItem("bos.lastEmail", email); } catch {}
      setSent(true);
    } catch (err) {
      setError(err.body?.error === "invalid_email"
        ? "Det där ser inte ut som en e-postadress."
        : "Något gick fel — försök igen om en stund.");
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="auth-screen">
      <form className="auth-card" onSubmit={submit}>
        <div className="auth-brand">
          <div className="sb-mark">B</div>
          <span>Bright<em>nest</em> · Brand OS</span>
        </div>
        <h1 className="auth-title">Logga in</h1>
        <p className="auth-sub">Skriv din e-post — vi mejlar en länk du klickar på.</p>

        {!sent && (
          <>
            <label className="field">
              <span>E-post</span>
              <input className="text-input" type="email" required autoFocus
                     value={email} onChange={(e) => setEmail(e.target.value)} />
            </label>

            {error && <div className="auth-error">{error}</div>}

            <button type="submit" className="tb-btn is-primary auth-submit" disabled={busy || !email}>
              {busy ? "Skickar…" : "Skicka magisk länk"}
            </button>
          </>
        )}

        {sent && (
          <div className="auth-info auth-sent">
            <strong>Kolla mejlen.</strong>
            <p>Om <code>{email}</code> hör till ett konto har vi skickat en länk dit. Den fungerar i 15 minuter.</p>
            <button type="button" className="tb-btn auth-resend"
                    onClick={() => { setSent(false); setError(null); }}>
              Använd en annan e-post
            </button>
          </div>
        )}
      </form>
    </div>
  );
}

window.LoginScreen = LoginScreen;