// MostlyPrivacy — Auth (screen G). Trust-forward split shell.
(function () {
const F = window.ForgeDesignSystem_e40d74;
const { Button, Field, Input, Checkbox } = F;
const { Icon, ICONS, PrivacyMark, Wordmark } = window.MP;

const Google = () => <svg width="16" height="16" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.5 12.2c0-.7-.1-1.4-.2-2H12v3.9h5.9a5 5 0 0 1-2.2 3.3v2.7h3.6c2.1-2 3.2-4.8 3.2-7.9z"/><path fill="#34A853" d="M12 23c2.9 0 5.4-1 7.2-2.6l-3.6-2.7c-1 .7-2.3 1.1-3.6 1.1-2.8 0-5.1-1.9-6-4.4H2.3v2.8A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M6 14.4a6.6 6.6 0 0 1 0-4.2V7.4H2.3a11 11 0 0 0 0 9.8z"/><path fill="#EA4335" d="M12 5.6c1.6 0 3 .5 4.1 1.6l3.1-3.1A11 11 0 0 0 2.3 7.4L6 10.2C6.9 7.6 9.2 5.6 12 5.6z"/></svg>;

function Auth({ nav }) {
  const api = window.MPApi || { ready: false };
  const [mode, setMode] = React.useState("signup");
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const isSignup = mode === "signup";

  async function submit() {
    setErr("");
    // Demo mode: no backend — just enter the app with canned data.
    if (!api.ready) { nav("app", "overview"); return; }
    const addr = email.trim();
    if (!/.+@.+\..+/.test(addr)) { setErr("Enter a valid email address."); return; }
    setBusy(true);
    try {
      await api.requestMagicLink(addr);
      setSent(true);
    } catch (e) {
      setErr((e && e.message) || "Could not send the link. Try again.");
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="au">
      <aside className="au__aside">
        <a className="au__aside-brand mp-brand" onClick={() => nav("landing")} style={{ cursor: "pointer" }}><PrivacyMark s={30} animate /><Wordmark size={20} /></a>
        <div className="au__aside-body">
          <h2 className="au__aside-h">Set up compliance in minutes.</h2>
          <p className="au__aside-p">Privacy policy, cookie consent and terms — localized and kept up to date, for every site you run. You're covered.</p>
          <div className="au__aside-trust">
            <span><Icon d={ICONS.shieldCheck} size={16} /> GDPR · CCPA · ePrivacy</span>
            <span><Icon d={ICONS.globe} size={16} /> 30+ languages</span>
            <span><Icon d={ICONS.lock} size={16} /> No card required</span>
          </div>
        </div>
      </aside>

      <div className="au__form-wrap">
        <div className="au__form">
          {sent ? (
            <>
              <h1 className="au__form-h">Check your email</h1>
              <p className="au__form-sub">We sent a magic sign-in link to <b>{email}</b>. Open it on this device to continue — no password needed.</p>
              <div className="au__fields">
                <Button variant="secondary" block onClick={() => setSent(false)}>Use a different email</Button>
              </div>
            </>
          ) : (
            <>
              <h1 className="au__form-h">{isSignup ? "Create your account" : "Welcome back"}</h1>
              <p className="au__form-sub">{isSignup ? "Start with a free cookie banner — upgrade anytime." : "Sign in to your MostlyPrivacy workspace."}</p>

              <div className="au__social">
                <Button variant="secondary" block iconLeft={<Google />} onClick={submit}>Continue with Google</Button>
              </div>
              <div className="au__divider">or with email</div>

              <div className="au__fields">
                {isSignup && <Field label="Name"><Input placeholder="Élise Moreau" /></Field>}
                <Field label="Email"><Input type="email" placeholder="you@business.com" value={email} onChange={(e) => setEmail(e.target.value)} /></Field>
                {isSignup
                  ? <Checkbox label="I agree to the Terms and Privacy Policy" defaultChecked />
                  : <div className="au__row"><Checkbox label="Remember me" defaultChecked /><a onClick={(e) => e.preventDefault()}>Need help?</a></div>}
                {err && <div style={{ color: "var(--danger, #b3261e)", fontSize: 13 }}>{err}</div>}
                <Button variant="primary" block disabled={busy} iconRight={<Icon d={ICONS.arrow} size={15} />} onClick={submit}>
                  {busy ? "Sending…" : isSignup ? "Create account" : "Sign in"}
                </Button>
                {api.ready && <p style={{ fontSize: 12, color: "var(--fg-subtle)", textAlign: "center", margin: 0 }}>We'll email you a magic link — no password to remember.</p>}
              </div>

              <div className="au__foot">
                {isSignup
                  ? <>Already have an account? <a onClick={() => setMode("signin")}>Sign in</a></>
                  : <>New to MostlyPrivacy? <a onClick={() => setMode("signup")}>Create an account</a></>}
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.MP.Auth = Auth;
})();