// Google auth gate — only the listed emails can access the app.

const ALLOWED_EMAILS = [
  "pradeep@famspring.com",
  "niru@famspring.com",
  "sneha.a@famspring.com",
];

function LoginScreen({ onSignIn }) {
  return (
    <div className="auth-screen">
      <div className="auth-card">
        <div className="auth-brand">
          <div className="brand-mark">F</div>
          <div className="brand-name">Famspring</div>
        </div>
        <h1 className="auth-title">ABA Schedule Planner</h1>
        <p className="auth-sub">Sign in with your Famspring Google account to continue.</p>
        <button className="auth-google-btn" onClick={onSignIn}>
          <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.716v2.259h2.908C16.658 11.835 17.64 9.527 17.64 9.2z" 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 6.29C4.672 4.163 6.656 3.58 9 3.58z" fill="#EA4335"/>
          </svg>
          Sign in with Google
        </button>
      </div>
    </div>
  );
}

function DeniedScreen({ email, onSignOut }) {
  return (
    <div className="auth-screen">
      <div className="auth-card">
        <div className="auth-brand">
          <div className="brand-mark">F</div>
          <div className="brand-name">Famspring</div>
        </div>
        <div className="auth-denied-icon">✕</div>
        <h1 className="auth-title">Access denied</h1>
        <p className="auth-sub"><strong>{email}</strong> is not on the authorized list for this planner.</p>
        <button className="auth-google-btn" onClick={onSignOut}>Sign out &amp; try another account</button>
      </div>
    </div>
  );
}

function AuthGate({ children }) {
  const [authState, setAuthState] = React.useState("loading");
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    return firebase.auth().onAuthStateChanged(u => {
      if (!u) {
        window.FS_AUTH = null;
        setUser(null);
        setAuthState("out");
      } else if (ALLOWED_EMAILS.includes(u.email)) {
        window.FS_AUTH = { user: u, signOut: () => firebase.auth().signOut() };
        setUser(u);
        setAuthState("ok");
      } else {
        firebase.auth().signOut();
        setUser({ email: u.email });
        setAuthState("denied");
      }
    });
  }, []);

  const signIn = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    const isLocal = location.hostname === 'localhost' || location.hostname === '127.0.0.1';
    if (isLocal) {
      firebase.auth().signInWithPopup(provider);
    } else {
      firebase.auth().signInWithRedirect(provider);
    }
  };

  if (authState === "loading") {
    return (
      <div className="auth-screen">
        <div className="auth-card">
          <div className="auth-brand">
            <div className="brand-mark">F</div>
            <div className="brand-name">Famspring</div>
          </div>
          <p className="auth-sub" style={{textAlign:"center", marginTop: 20}}>Loading…</p>
        </div>
      </div>
    );
  }
  if (authState === "out") return <LoginScreen onSignIn={signIn} />;
  if (authState === "denied") return <DeniedScreen email={user?.email} onSignOut={() => firebase.auth().signOut()} />;
  return children;
}

window.AuthGate = AuthGate;