// Login page

function LoginPage({ onNav, onLogin }) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [error, setError] = React.useState(null);
  const [busy, setBusy] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setError(null);
    if (!email.trim() || !password) {
      setError("Enter your email and password to continue.");
      return;
    }
    setBusy(true);
    setTimeout(() => {
      const res = onLogin(email, password);
      setBusy(false);
      if (res?.error) {
        setError(res.error);
        return;
      }
      onNav("inventory");
    }, 350);
  };

  return (
    <div className="container" style={{ maxWidth: 880, padding: "64px 24px 96px" }}>
      <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr)", placeItems: "center" }}>
        <div style={{
          width: "min(440px, 100%)",
          background: "var(--bg-elev)",
          border: "1px solid var(--line)",
          borderRadius: 16,
          padding: "36px 36px 32px",
          boxShadow: "0 1px 0 rgba(15,23,42,0.02), 0 12px 32px -16px rgba(15,23,42,0.08)",
        }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Approved buyers</div>
          <h1 style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, marginBottom: 8 }}>
            Sign in to Clearspace
          </h1>
          <p style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55, margin: "0 0 28px" }}>
            Welcome back. Sign in to place bids, manage your watchlist, and track wins.
          </p>

          <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <label style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>Email</label>
              <input className="input" type="email" autoFocus autoComplete="email"
                value={email} onChange={(e) => setEmail(e.target.value)}
                placeholder="you@company.com" />
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <div className="row between center">
                <label style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>Password</label>
                <a href="#" onClick={(e) => e.preventDefault()}
                  style={{ fontSize: 12, color: "var(--ink-3)", textDecoration: "none" }}
                  title="Email clearspace.sols@gmail.com to reset">
                  Forgot password?
                </a>
              </div>
              <input className="input" type="password" autoComplete="current-password"
                value={password} onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••" />
            </div>

            {error && (
              <div style={{
                padding: "10px 12px", borderRadius: 8,
                background: "rgba(239,68,68,0.08)",
                border: "1px solid rgba(239,68,68,0.25)",
                color: "#b42318", fontSize: 13, lineHeight: 1.45,
              }}>{error}</div>
            )}

            <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={busy}>
              {busy ? "Signing in…" : <>Sign in <IcArrow size={16} /></>}
            </button>
          </form>

          <div className="row center gap-8" style={{ margin: "24px 0 18px", color: "var(--ink-3)" }}>
            <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.1em" }}>NEW TO CLEARSPACE</span>
            <div style={{ flex: 1, height: 1, background: "var(--line)" }} />
          </div>
          <button className="btn btn-secondary btn-lg btn-block" onClick={() => onNav("access-request")}>
            Request buyer access
          </button>
          <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 14, textAlign: "center", lineHeight: 1.5 }}>
            Invite-only marketplace. We vet every buyer company before granting access.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { LoginPage });