const GoogleLogo = () => (
  <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844a4.14 4.14 0 0 1-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.875 2.684-6.615z" fill="#4285F4"/>
    <path 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" fill="#34A853"/>
    <path d="M3.964 10.71A5.41 5.41 0 0 1 3.682 9c0-.593.102-1.17.282-1.71V4.958H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.042l3.007-2.332z" fill="#FBBC05"/>
    <path 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" fill="#EA4335"/>
  </svg>
);

const AuthScreen = () => {
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [accepted, setAccepted] = React.useState(false);

  const handleGoogle = async () => {
    if (busy) return;
    if (!accepted) {
      setError("Você precisa aceitar os Termos e a Política de Privacidade para continuar.");
      return;
    }
    setBusy(true);
    setError(null);
    try {
      await window.gtAuth.signInWithGoogle();
      // The browser navigates to Google here. Code below only runs if the redirect
      // was prevented (e.g., popup blocked) — in which case clear the busy state.
    } catch (err) {
      setError((err && err.message) || "Falha ao iniciar login com Google.");
      setBusy(false);
    }
  };

  return (
    <div style={{minHeight: "100vh", display: "grid", placeItems: "center", padding: 24, background: "var(--bg)"}}>
      <div className="card" style={{width: "100%", maxWidth: 380, padding: 28}}>
        <div className="row-gap" style={{gap: 10, alignItems: "center", marginBottom: 22}}>
          <span style={{width: 32, height: 32, borderRadius: 8, background: "var(--brand)", display: "grid", placeItems: "center", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 800}}>G</span>
          <span style={{fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, letterSpacing: "-0.02em"}}>GenerateThumb</span>
        </div>

        <h2 style={{margin: "0 0 4px", fontSize: 22, fontFamily: "var(--font-display)", letterSpacing: "-0.02em"}}>Entrar</h2>
        <p className="muted-2" style={{margin: "0 0 20px", fontSize: 13}}>Acesse com sua conta Google pra começar.</p>

        <label className="row-gap" style={{gap: 10, alignItems: "flex-start", marginBottom: 16, cursor: "pointer"}}>
          <input
            type="checkbox"
            checked={accepted}
            onChange={(e) => { setAccepted(e.target.checked); if (e.target.checked) setError(null); }}
            style={{marginTop: 3, flexShrink: 0}}
          />
          <span className="muted-2" style={{fontSize: 12, lineHeight: 1.5}}>
            Li e aceito os{" "}
            <a href="/terms" target="_blank" rel="noopener noreferrer" style={{color: "var(--text-2)"}}>Termos de Uso</a>
            {" "}e a{" "}
            <a href="/privacy" target="_blank" rel="noopener noreferrer" style={{color: "var(--text-2)"}}>Política de Privacidade</a>.
          </span>
        </label>

        <button
          type="button"
          className="btn btn-lg"
          disabled={busy || !accepted}
          onClick={handleGoogle}
          style={{width: "100%", justifyContent: "center", gap: 10, opacity: accepted ? 1 : 0.55}}
        >
          <GoogleLogo />
          {busy ? "Redirecionando..." : "Continuar com Google"}
        </button>

        {error && <div style={{color: "var(--brand)", fontSize: 13, marginTop: 12}}>{error}</div>}
      </div>
    </div>
  );
};

window.AuthScreen = AuthScreen;