/* ============================================================
   beedle dataroom — Login (3 style variants)
   variant: "split" | "centered" | "fullbleed"
   ============================================================ */
// Built-in English copy for the sign-in screen. Used as the live fallback when a
// branding field is blank, and as the prefill in Admin → Company branding, so the
// two never drift. A function (not a const) so T() resolves at the current language.
function loginTextDefaults() {
  return {
    eyebrow: T("Secure data room"),
    heading: T("Welcome back."),
    subtitle: T("Sign in to access the beedle Series A due-diligence room. Access is granted per invitation."),
    quote: T("A simple “yes” is all it takes to answer a call from the people who love you."),
    quoteBy: T("— the beedle promise"),
    secureBadge: T("256-bit encrypted"),
    regionBadge: T("Hosted in Canada"),
    stats: [
      { k: T("Round"), v: "Series A" },
      { k: T("Active homes"), v: "2,140" },
      { k: T("Based in"), v: "Montréal, QC" },
    ],
  };
}

function Login({ variant = "split", onLogin }) {
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [show, setShow] = React.useState(false);
  const [remember, setRemember] = React.useState(true);
  const [err, setErr] = React.useState("");
  const [busy, setBusy] = React.useState(false);

  // Admin-editable copy (from Admin → Company branding), with a per-field fallback
  // to the built-in default so a blank field shows the default rather than nothing.
  const brand = React.useContext(BrandContext) || {};
  const bl = brand.login || {};
  const def = loginTextDefaults();
  const tx = (k) => (bl[k] && String(bl[k]).trim() ? bl[k] : def[k]);
  const stats = Array.isArray(bl.stats) && bl.stats.length ? bl.stats : def.stats;

  const submit = async (e) => {
    e.preventDefault();
    if (!email.includes("@") || pw.length < 4) { setErr(T("Check your email and password and try again.")); return; }
    setErr(""); setBusy(true);
    try {
      const user = await api.login(email.trim(), pw, remember);
      onLogin(user);
    } catch (ex) {
      setBusy(false);
      setErr(ex.message || T("Sign-in failed. Please try again."));
    }
  };

  const form = (
    <form className="login-card" onSubmit={submit}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <Brand size={40} />
        <LangToggle />
      </div>
      <div className="eyebrow login-eyebrow">{tx("eyebrow")}</div>
      <h1>{tx("heading")}</h1>
      <p className="sub">{tx("subtitle")}</p>

      <div className="field">
        <label>{T("Email address")}</label>
        <input className="input" type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder={T("you@firm.com")} autoComplete="username" />
      </div>
      <div className="field">
        <label>{T("Password")}</label>
        <div className="input-wrap">
          <input className="input" type={show ? "text" : "password"} value={pw} onChange={e => setPw(e.target.value)} placeholder="••••••••••" autoComplete="current-password" />
          <button type="button" className="reveal" onClick={() => setShow(s => !s)} aria-label={T("Password")}>
            <Icon name={show ? "eyeoff" : "eye"} size={18} />
          </button>
        </div>
      </div>
      {err && <div className="err"><Icon name="info" size={14} /> {err}</div>}
      <div className="row">
        <label className="checkbox">
          <input type="checkbox" checked={remember} onChange={e => setRemember(e.target.checked)} />
          <span className="box"><Icon name="check" size={12} sw={2.6} /></span>
          {T("Keep me signed in")}
        </label>
        <a className="link" href="#" onClick={e => e.preventDefault()}>{T("Forgot password?")}</a>
      </div>
      <button className="btn btn-primary" type="submit" disabled={busy}>
        {busy ? T("Verifying…") : T("Sign in")} {!busy && <Icon name="arrowR" size={16} />}
      </button>
      <div className="foot">
        <span className="secure"><Icon name="shield" size={14} /> {tx("secureBadge")}</span>
        <span>·</span>
        <span className="secure"><MapleMark size={13} /> {tx("regionBadge")}</span>
      </div>
    </form>
  );

  if (variant === "split") {
    return (
      <div className="login split">
        <div className="login-brand">
          <div className="dots" />
          <Brand size={30} light />
          <div className="quote">
            <span className="mark">“</span>
            <p>{tx("quote")}</p>
            <div className="by">{tx("quoteBy")}</div>
          </div>
          <div className="meta">
            {stats.map((s, i) => (
              <div key={i}><div className="k">{s.k}</div><div className="v">{s.v}</div></div>
            ))}
          </div>
        </div>
        <div className="login-form-wrap">{form}</div>
      </div>
    );
  }
  if (variant === "centered") {
    return <div className="login center"><div className="login-form-wrap">{form}</div></div>;
  }
  return <div className="login fullbleed"><div className="login-form-wrap">{form}</div></div>;
}
Object.assign(window, { Login, loginTextDefaults });