/* auth-app.jsx — Radish auth entry screens (design_handoff_auth_flow).
 *
 * Six screens in one shell: sign in, create account, forgot password,
 * check-your-email, set a new password, signed out. The screen is derived from
 * location.pathname (auth-helpers.js), so each one is a real URL.
 *
 * The screens talk to the real /auth/* API (routes_auth.py): POST /auth/session,
 * POST /auth/users (a new company, or an invite token), POST /auth/reset-requests,
 * POST /auth/reset, and the public GET /auth/invite-preview. An invite link
 * (/signup?invite=...) fixes both the company and the email. Sign-in and
 * create-account land on a validated `?next` (auth-helpers.js safeNext), else "/";
 * `next` is carried between sign-in / create-account / forgot so a deep-link
 * survives the hop. auth-guard.js is deliberately NOT loaded on this page: it
 * redirects to /signin on any 401, which would loop here.
 * Pure logic (password rules, validation, failure→banner, safeNext) lives in
 * auth-helpers.js so it is unit-testable: `node tests/auth_helpers.test.mjs`.
 */
const { useState, useEffect, useRef, useId } = React;
const A = window.__AUTH;
const { PasswordField } = window.RadishPassword;

/* Destination of "Back to radish.app" on the signed-out screen (per the handoff copy). */
const MARKETING_URL = "https://radish.app";
const EMAIL_MSG = "Enter a valid email address.";
const PW_MSG = "Use 10+ characters with a number and a symbol.";

/* ── API (the /auth/* endpoints named in the header) ─────────────────────── */
async function authRequest(method, path, body) {
  try {
    const res = await fetch(path, {
      method,
      headers: body ? { "Content-Type": "application/json" } : undefined,
      body: body ? JSON.stringify(body) : undefined,
      credentials: "same-origin",
    });
    return { ok: res.ok, status: res.status };
  } catch (e) {
    return { ok: false, status: 0 };
  }
}
const authApi = {
  signIn: (email, password, remember) => authRequest("POST", "/auth/session", { email, password, remember }),
  createUser: (name, email, password, company, invite) =>
    authRequest("POST", "/auth/users", { name, email, password, company, invite }),
  requestReset: (email) => authRequest("POST", "/auth/reset-requests", { email }),
  reset: (token, password) => authRequest("POST", "/auth/reset", { token, password }),
};

/* ── Navigation ──────────────────────────────────────────────────────────── */
const NavCtx = React.createContext(() => {});

/* URL of a screen. The validated `next` of the current page is carried (and only
 * `next`: never invite/token) to the screens a deep-linked user hops between, so
 * /signin?next=/plan/abc -> Create an account -> still lands on /plan/abc. */
const NEXT_SCREENS = ["signin", "signup", "forgot"];
function screenUrl(screen) {
  const path = A.pathForScreen(screen);
  if (NEXT_SCREENS.indexOf(screen) === -1) return path;
  const next = A.safeNext(new URLSearchParams(window.location.search).get("next"));
  return next === "/" ? path : path + "?next=" + encodeURIComponent(next);
}

/* Real <a href> (open-in-new-tab, copy-link work); plain clicks route client-side. */
function AuthLink({ to, email, className, children }) {
  const nav = React.useContext(NavCtx);
  const onClick = (e) => {
    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
    e.preventDefault();
    nav(to, email);
  };
  return <a className={className} href={screenUrl(to)} onClick={onClick}>{children}</a>;
}

/* ── Shell ───────────────────────────────────────────────────────────────── */
function AuthShell({ children }) {
  return (
    <div className="auth">
      <aside className="auth-brand">
        <div className="brand"><div className="logo">R</div><div className="wordmark">Radish</div></div>
        <div className="auth-pitch">
          <h1>Plan the work, and the people doing it.</h1>
          <p>One place for schedules, allocation and cost, so a change to the plan shows up in the forecast the same afternoon.</p>
          <div className="auth-points">
            <div><i className="sage"></i>Gantt, allocation and close-month in one plan</div>
            <div><i className="amber"></i>Supplier POs reconciled against actuals</div>
            <div><i className="blue"></i>Capacity warnings before the week starts</div>
          </div>
        </div>
        <div className="auth-legal">Radish · Resource planning</div>
      </aside>
      <main className="auth-pane">
        <div className="auth-card">{children}</div>
      </main>
    </div>
  );
}

/* ── Form atoms ──────────────────────────────────────────────────────────── */
function Banner({ banner }) {
  if (!banner) return null;
  return (
    <div className={"banner " + banner.kind} role={banner.kind === "danger" ? "alert" : "status"}>
      <div>
        <div className="banner-title">{banner.title}</div>
        {banner.body && <div className="banner-body">{banner.body}</div>}
        {banner.link && (
          <div className="banner-body">
            <AuthLink to={A.screenForPath(banner.link.href)}>{banner.link.label}</AuthLink>
          </div>
        )}
      </div>
    </div>
  );
}

function FieldError({ id, error }) {
  return error ? <div className="auth-err" id={id} role="alert">{error}</div> : null;
}

function TextField({ label, type = "text", value, onChange, onBlur, error, placeholder, autoComplete, autoFocus, inputRef, readOnly }) {
  const id = useId();
  return (
    <div>
      <div className="field-label"><label htmlFor={id}>{label}</label></div>
      <input id={id} ref={inputRef} className={"input" + (error ? " invalid" : "")} type={type} readOnly={readOnly}
             value={value} placeholder={placeholder} autoComplete={autoComplete} autoFocus={autoFocus}
             aria-invalid={error ? "true" : undefined} aria-describedby={error ? id + "-err" : undefined}
             onChange={(e) => onChange(e.target.value)} onBlur={onBlur} />
      <FieldError id={id + "-err"} error={error} />
    </div>
  );
}

function SubmitButton({ submitting, disabled, children }) {
  return (
    <button type="submit" className={"btn primary block" + (submitting ? " is-loading" : "")}
            disabled={disabled} aria-busy={submitting ? "true" : undefined}>
      {children}
    </button>
  );
}

/* Sets/clears one key of an errors object. */
function useErrors() {
  const [errs, setErrs] = useState({});
  const set = (key, msg) => setErrs((e) => ({ ...e, [key]: msg || undefined }));
  return [errs, set, setErrs];
}

/* ── Screens ─────────────────────────────────────────────────────────────── */
function SignIn() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [remember, setRemember] = useState(true);
  const [errs, setErr, setErrs] = useErrors();
  const [banner, setBanner] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  const pwRef = useRef(null);

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    const next = {};
    if (!A.emailOk(email)) next.email = EMAIL_MSG;
    if (!password) next.password = "Enter your password.";
    setErrs(next);
    if (next.email || next.password) return;
    setBanner(null);
    setSubmitting(true);
    const res = await authApi.signIn(email.trim(), password, remember);
    setSubmitting(false);
    if (res.ok) { window.location.assign(A.safeNext(new URLSearchParams(window.location.search).get("next"))); return; }
    const b = A.bannerForFailure("signin", res);
    setBanner(b);
    if (b.clearPassword) { setPassword(""); if (pwRef.current) pwRef.current.focus(); }
  };

  return (
    <>
      <h2>Sign in</h2>
      <p className="lede">Use your work account to continue.</p>
      <Banner banner={banner} />
      <form className="auth-fields" onSubmit={submit} noValidate>
        <TextField label="Work email" type="email" value={email} autoComplete="email" autoFocus
                   error={errs.email}
                   onChange={(v) => { setEmail(v); if (errs.email) setErr("email", A.emailOk(v) ? null : EMAIL_MSG); }}
                   onBlur={() => setErr("email", email && !A.emailOk(email) ? EMAIL_MSG : null)} />
        <PasswordField label="Password" value={password} autoComplete="current-password" inputRef={pwRef}
                       error={errs.password}
                       right={<AuthLink to="forgot" className="right">Forgot?</AuthLink>}
                       onChange={(v) => { setPassword(v); if (errs.password && v) setErr("password", null); }} />
        <label className="auth-check">
          <input type="checkbox" checked={remember} onChange={(e) => setRemember(e.target.checked)} />
          Keep me signed in on this device
        </label>
        <SubmitButton submitting={submitting}>Sign in</SubmitButton>
      </form>
      <p className="auth-foot">New to Radish? <AuthLink to="signup">Create an account</AuthLink></p>
    </>
  );
}

function SignUp() {
  const query = new URLSearchParams(window.location.search);
  const nextPath = A.safeNext(query.get("next"));
  const inviteToken = query.get("invite") || "";
  const [invite, setInvite] = useState(inviteToken ? { state: "loading" } : null);
  const [name, setName] = useState("");
  const [company, setCompany] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [agreed, setAgreed] = useState(false);
  const [errs, setErr, setErrs] = useErrors();
  const [banner, setBanner] = useState(null);
  const [submitting, setSubmitting] = useState(false);

  // An invite link fixes both the company and the email; ask the server who it is for.
  useEffect(() => {
    if (!inviteToken) return undefined;
    let live = true;
    fetch("/auth/invite-preview?token=" + encodeURIComponent(inviteToken))
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((d) => { if (live) { setInvite({ state: "ok", company: d.company }); setEmail(d.email); } })
      .catch((status) => {
        if (!live) return;
        // 404/410 = the token is unknown, expired or used. Anything else (a 5xx, 429, a dropped
        // connection, unparseable JSON) is not the invite's fault: report it as what it is.
        // Either way the form stays blocked; there is nothing to submit without a valid invite.
        const code = typeof status === "number" ? status : 0;
        setInvite({ state: "bad" });
        setBanner(A.bannerForFailure("signup", { status: code === 404 ? 410 : code }));
      });
    return () => { live = false; };
  }, []);

  const inviteOk = !!invite && invite.state === "ok";
  const blocked = !!invite && invite.state !== "ok";     // invite still loading, or bad: nothing to submit

  const submit = async (e) => {
    e.preventDefault();
    if (submitting || !agreed || blocked) return;
    const next = {};
    if (!name.trim()) next.name = "Enter your name.";
    if (!inviteToken && !company.trim()) next.company = "Enter your company name.";
    if (!A.emailOk(email)) next.email = EMAIL_MSG;
    if (A.pwRules(password).score < 3) next.password = PW_MSG;
    setErrs(next);
    if (next.name || next.company || next.email || next.password) return;
    setBanner(null);
    setSubmitting(true);
    const res = await authApi.createUser(name.trim(), email.trim(), password,
                                         inviteToken ? null : company.trim(), inviteToken || null);
    setSubmitting(false);
    if (res.ok) { window.location.assign(nextPath); return; }
    setBanner(A.bannerForFailure("signup", res));
  };

  return (
    <>
      <h2>Create your account</h2>
      <p className="lede">{inviteOk ? "You're joining " + invite.company + "." : "Free while your team is under ten people."}</p>
      <Banner banner={banner} />
      <form className="auth-fields" onSubmit={submit} noValidate>
        <TextField label="Full name" value={name} placeholder="Ana Duarte" autoComplete="name" autoFocus
                   error={errs.name}
                   onChange={(v) => { setName(v); if (errs.name && v.trim()) setErr("name", null); }} />
        {!inviteToken && (
          <TextField label="Company" value={company} placeholder="Northwind" autoComplete="organization"
                     error={errs.company}
                     onChange={(v) => { setCompany(v); if (errs.company && v.trim()) setErr("company", null); }} />
        )}
        <TextField label="Work email" type="email" value={email} placeholder="you@company.com" autoComplete="email"
                   readOnly={!!inviteToken} error={errs.email}
                   onChange={(v) => { setEmail(v); if (errs.email) setErr("email", A.emailOk(v) ? null : EMAIL_MSG); }}
                   onBlur={() => setErr("email", email && !A.emailOk(email) ? EMAIL_MSG : null)} />
        <PasswordField label="Password" value={password} placeholder="At least 10 characters" autoComplete="new-password"
                       meter error={errs.password}
                       onChange={(v) => { setPassword(v); if (errs.password && A.pwRules(v).score === 3) setErr("password", null); }} />
        <label className="auth-check tight">
          <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />
          <span>I agree to the <a href="#">terms of service</a> and <a href="#">privacy policy</a>.</span>
        </label>
        <SubmitButton submitting={submitting} disabled={!agreed || blocked}>Create account</SubmitButton>
      </form>
      <p className="auth-foot">Already have an account? <AuthLink to="signin">Sign in</AuthLink></p>
    </>
  );
}

function Forgot() {
  const nav = React.useContext(NavCtx);
  const [email, setEmail] = useState("");
  const [err, setErr] = useState(null);
  const [banner, setBanner] = useState(null);
  const [submitting, setSubmitting] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    if (!A.emailOk(email)) { setErr(EMAIL_MSG); return; }
    setErr(null);
    setBanner(null);
    setSubmitting(true);
    const res = await authApi.requestReset(email.trim());
    setSubmitting(false);
    // Same confirmation whether or not the address exists: the server answers 2xx either way.
    if (res.ok) { nav("sent", email.trim()); return; }
    setBanner(A.bannerForFailure("forgot", res));
  };

  return (
    <>
      <AuthLink to="signin" className="auth-back"><Icon name="arrow_l" size={12} /> Back to sign in</AuthLink>
      <h2>Forgot your password?</h2>
      <p className="lede">Enter the email you sign in with and we'll send a link to set a new one. The link is good for 30 minutes.</p>
      <Banner banner={banner} />
      <form className="auth-fields" onSubmit={submit} noValidate>
        <TextField label="Work email" type="email" value={email} autoComplete="email" autoFocus error={err}
                   onChange={(v) => { setEmail(v); if (err) setErr(A.emailOk(v) ? null : EMAIL_MSG); }}
                   onBlur={() => setErr(email && !A.emailOk(email) ? EMAIL_MSG : null)} />
        <SubmitButton submitting={submitting}>Send reset link</SubmitButton>
      </form>
    </>
  );
}

function Sent({ email }) {
  const [banner, setBanner] = useState(null);
  const [submitting, setSubmitting] = useState(false);

  const resend = async () => {
    if (submitting || !email) return;
    setBanner(null);
    setSubmitting(true);
    const res = await authApi.requestReset(email);
    setSubmitting(false);
    if (!res.ok) setBanner(A.bannerForFailure("forgot", res));
  };

  return (
    <>
      <div className="auth-mark"><Icon name="check" size={17} /></div>
      <h2>Check your email</h2>
      <p className="lede">
        We sent a reset link to {email ? <span className="mono">{email}</span> : "your email address"}. It expires in 30 minutes.
      </p>
      <Banner banner={banner} />
      <div className="auth-fields">
        <button type="button" className={"btn ghost block quiet" + (submitting ? " is-loading" : "")} onClick={resend}>
          Resend the email
        </button>
      </div>
      <p className="auth-foot">Wrong address? <AuthLink to="forgot">Try another</AuthLink></p>
    </>
  );
}

function Reset() {
  const nav = React.useContext(NavCtx);
  const token = new URLSearchParams(window.location.search).get("token") || "";
  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [errs, setErr, setErrs] = useErrors();
  // No token in the URL is the same dead end as an expired one.
  const [banner, setBanner] = useState(() => (token ? null : A.bannerForFailure("reset", { status: 410 })));
  const [submitting, setSubmitting] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    const next = {};
    if (A.pwRules(password).score < 3) next.password = PW_MSG;
    const mismatch = A.confirmError(password, confirm);
    if (mismatch) next.confirm = mismatch;
    setErrs(next);
    if (next.password || next.confirm) return;
    if (!token) { setBanner(A.bannerForFailure("reset", { status: 410 })); return; }
    setBanner(null);
    setSubmitting(true);
    const res = await authApi.reset(token, password);
    setSubmitting(false);
    if (res.ok) { nav("signin"); return; }
    setBanner(A.bannerForFailure("reset", res));
  };

  return (
    <>
      <h2>Set a new password</h2>
      <p className="lede">Sessions on every other device will end.</p>
      <Banner banner={banner} />
      <form className="auth-fields" onSubmit={submit} noValidate>
        <PasswordField label="New password" value={password} autoComplete="new-password" autoFocus meter
                       error={errs.password}
                       onChange={(v) => { setPassword(v); if (errs.password && A.pwRules(v).score === 3) setErr("password", null); }} />
        <TextField label="Confirm password" type="password" value={confirm} autoComplete="new-password"
                   error={errs.confirm}
                   onChange={(v) => { setConfirm(v); if (errs.confirm && !A.confirmError(password, v)) setErr("confirm", null); }}
                   onBlur={() => setErr("confirm", confirm ? A.confirmError(password, confirm) : null)} />
        <SubmitButton submitting={submitting}>Update password</SubmitButton>
      </form>
    </>
  );
}

function SignedOut() {
  return (
    <>
      <div className="auth-mark quiet"><Icon name="signout" size={17} /></div>
      <h2>You're signed out</h2>
      <p className="lede">Unsaved plan edits stay on this device until you sign back in.</p>
      <div className="auth-fields">
        <AuthLink to="signin" className="btn primary block">Sign in again</AuthLink>
        <a className="btn ghost block quiet" href={MARKETING_URL}>Back to radish.app</a>
      </div>
    </>
  );
}

/* ── Root ────────────────────────────────────────────────────────────────── */
const TITLES = {
  signin: "Sign in", signup: "Create account", forgot: "Forgot password",
  sent: "Check your email", reset: "Set a new password", signedout: "Signed out",
};

function readRoute() {
  return {
    screen: A.screenForPath(window.location.pathname),
    email: (window.history.state && window.history.state.email) || "",
  };
}

function AuthApp() {
  const [route, setRoute] = useState(readRoute);
  useEffect(() => {
    const onPop = () => setRoute(readRoute());
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  useEffect(() => { document.title = "Radish · " + TITLES[route.screen]; }, [route.screen]);

  const nav = (screen, email) => {
    window.history.pushState(email ? { email } : null, "", screenUrl(screen));
    setRoute({ screen, email: email || "" });
    window.scrollTo(0, 0);
  };

  let body;
  switch (route.screen) {
    case "signup": body = <SignUp />; break;
    case "forgot": body = <Forgot />; break;
    case "sent": body = <Sent email={route.email} />; break;
    case "reset": body = <Reset />; break;
    case "signedout": body = <SignedOut />; break;
    default: body = <SignIn />;
  }
  return (
    <NavCtx.Provider value={nav}>
      <AuthShell>{body}</AuthShell>
    </NavCtx.Provider>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AuthApp />);