/* ============================================================
   Login screen — Google SSO, locked to @mesper.de
   ============================================================ */
const { useState, useEffect, useRef } = React;
function Logo({ size = 30 }) {
  return <BrandLockup height={size * 0.8} sub="Leave" />;
}

function GoogleGlyph({ size = 18 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 18 18" aria-hidden="true" style={{ flex: "0 0 auto" }}>
      <path fill="#4285F4" d="M17.64 9.205c0-.639-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.716v2.259h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" />
      <path fill="#34A853" d="M9 18c2.43 0 4.467-.806 5.956-2.18l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" />
      <path fill="#FBBC05" d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.997 8.997 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" />
      <path fill="#EA4335" d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z" />
    </svg>
  );
}

function LoginScreen() {
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState("");

  async function signIn() {
    setErr("");
    setBusy(true);
    try {
      const { error } = await MesperDB.signInWithGoogle();
      if (error) { setErr(error.message || "Sign-in could not start. Please try again."); setBusy(false); }
      // On success the browser redirects to Google, so no further work here.
    } catch (e) {
      setErr(e.message || "Sign-in could not start. Please try again.");
      setBusy(false);
    }
  }

  return (
    <div style={{ minHeight: "100%", display: "grid", placeItems: "center", padding: "40px 24px" }}>
      <div className="vp-fade-up" style={{ width: "100%", maxWidth: 396 }}>
        <Card pad="34px 34px 30px" style={{ borderRadius: "var(--r-lg)", boxShadow: "var(--sh-md)" }}>
          <div style={{ display: "flex", alignItems: "center", marginBottom: 28 }}>
            <BrandLockup height={30} sub="" />
          </div>

          <h2 style={{ fontSize: 23, marginBottom: 5 }}>Sign in</h2>
          <p style={{ color: "var(--ink-3)", fontSize: 14, marginTop: 0, marginBottom: 22 }}>
            Use your Mesper Google account. Access is limited to&nbsp;@mesper.de.
          </p>

          <button type="button" onClick={signIn} disabled={busy} className="vp-focusable"
            style={{
              width: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 11,
              padding: "13px 16px", fontSize: 15, fontWeight: 600, fontFamily: "var(--font-body)",
              color: "var(--ink)", background: "var(--surface)", border: "1px solid var(--line-2)",
              borderRadius: "var(--r-sm)", cursor: busy ? "default" : "pointer", opacity: busy ? 0.65 : 1,
              boxShadow: "var(--sh-sm)", transition: "all 0.15s ease",
            }}>
            <GoogleGlyph size={18} />
            {busy ? "Opening Google…" : "Continue with Google"}
          </button>

          {err && (
            <div className="vp-fade" style={{
              marginTop: 14, padding: "11px 13px", background: "var(--st-declined-soft)",
              color: "var(--st-declined)", borderRadius: "var(--r-sm)", fontSize: 13.5,
              display: "flex", gap: 9, alignItems: "flex-start", lineHeight: 1.45,
            }}>
              <Icon name="info" size={17} style={{ flex: "0 0 auto", marginTop: 1 }} /> {err}
            </div>
          )}

          <p style={{ color: "var(--ink-4)", fontSize: 12.5, marginTop: 20, marginBottom: 0, lineHeight: 1.5 }}>
            First time signing in? Your profile is created automatically — no separate password to set up.
          </p>
        </Card>
        <p style={{ textAlign: "center", color: "var(--ink-4)", fontSize: 12, marginTop: 16 }}>
          Mesper internal · Tools
        </p>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, Logo });