import React, { useState, useEffect } from "react";
import { initializeApp } from "firebase/app";
import { getAuth, signInWithPopup, GoogleAuthProvider, signOut, onAuthStateChanged } from "firebase/auth";
import { getDatabase, ref, onValue, set, remove } from "firebase/database";
 
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
  databaseURL: "YOUR_DATABASE_URL"
};
 
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const database = getDatabase(app);
const provider = new GoogleAuthProvider();
 
export default function LoginPage() {
  const [user, setUser] = useState(null);
  const [onlineUsers, setOnlineUsers] = useState(0);
 
  useEffect(() => {
    const unsubscribeAuth = onAuthStateChanged(auth, (user) => {
      if (user) {
        setUser(user);
        set(ref(database, `onlineUsers/${user.uid}`), {
          displayName: user.displayName,
          email: user.email
        }).catch((error) => console.error("Database Error:", error));
      } else {
        setUser(null);
      }
    });
 
    const usersRef = ref(database, "onlineUsers");
    const unsubscribeUsers = onValue(usersRef, (snapshot) => {
      setOnlineUsers(snapshot.exists() ? Object.keys(snapshot.val()).length : 0);
    }, (error) => console.error("Database Read Error:", error));
 
    return () => {
      unsubscribeAuth();
      unsubscribeUsers();
    };
  }, []);
 
  const handleLogin = async () => {
    try {
      await signInWithPopup(auth, provider);
    } catch (error) {
      console.error("Login Error:", error);
    }
  };
 
  const handleLogout = async () => {
    if (user) {
      try {
        await signOut(auth);
        await remove(ref(database, `onlineUsers/${user.uid}`));
      } catch (error) {
        console.error("Logout Error:", error);
      }
    }
  };
 
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-2xl font-bold mb-4">Login System</h1>
      {user ? (
        <div className="text-center">
          <p>Welcome, {user.displayName}</p>
          <button onClick={handleLogout} className="bg-red-500 text-white px-4 py-2 mt-2 rounded">Logout</button>
        </div>
      ) : (
        <button onClick={handleLogin} className="bg-blue-500 text-white px-4 py-2 rounded">Login with Google</button>
      )}
      <p className="mt-4">Active Users: {onlineUsers}</p>
    </div>
  );
}
 

aW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlLCB1c2VFZmZlY3QgfSBmcm9tICJyZWFjdCI7CmltcG9ydCB7IGluaXRpYWxpemVBcHAgfSBmcm9tICJmaXJlYmFzZS9hcHAiOwppbXBvcnQgeyBnZXRBdXRoLCBzaWduSW5XaXRoUG9wdXAsIEdvb2dsZUF1dGhQcm92aWRlciwgc2lnbk91dCwgb25BdXRoU3RhdGVDaGFuZ2VkIH0gZnJvbSAiZmlyZWJhc2UvYXV0aCI7CmltcG9ydCB7IGdldERhdGFiYXNlLCByZWYsIG9uVmFsdWUsIHNldCwgcmVtb3ZlIH0gZnJvbSAiZmlyZWJhc2UvZGF0YWJhc2UiOwoKY29uc3QgZmlyZWJhc2VDb25maWcgPSB7CiAgYXBpS2V5OiAiWU9VUl9BUElfS0VZIiwKICBhdXRoRG9tYWluOiAiWU9VUl9BVVRIX0RPTUFJTiIsCiAgcHJvamVjdElkOiAiWU9VUl9QUk9KRUNUX0lEIiwKICBzdG9yYWdlQnVja2V0OiAiWU9VUl9TVE9SQUdFX0JVQ0tFVCIsCiAgbWVzc2FnaW5nU2VuZGVySWQ6ICJZT1VSX01FU1NBR0lOR19TRU5ERVJfSUQiLAogIGFwcElkOiAiWU9VUl9BUFBfSUQiLAogIGRhdGFiYXNlVVJMOiAiWU9VUl9EQVRBQkFTRV9VUkwiCn07Cgpjb25zdCBhcHAgPSBpbml0aWFsaXplQXBwKGZpcmViYXNlQ29uZmlnKTsKY29uc3QgYXV0aCA9IGdldEF1dGgoYXBwKTsKY29uc3QgZGF0YWJhc2UgPSBnZXREYXRhYmFzZShhcHApOwpjb25zdCBwcm92aWRlciA9IG5ldyBHb29nbGVBdXRoUHJvdmlkZXIoKTsKCmV4cG9ydCBkZWZhdWx0IGZ1bmN0aW9uIExvZ2luUGFnZSgpIHsKICBjb25zdCBbdXNlciwgc2V0VXNlcl0gPSB1c2VTdGF0ZShudWxsKTsKICBjb25zdCBbb25saW5lVXNlcnMsIHNldE9ubGluZVVzZXJzXSA9IHVzZVN0YXRlKDApOwoKICB1c2VFZmZlY3QoKCkgPT4gewogICAgY29uc3QgdW5zdWJzY3JpYmVBdXRoID0gb25BdXRoU3RhdGVDaGFuZ2VkKGF1dGgsICh1c2VyKSA9PiB7CiAgICAgIGlmICh1c2VyKSB7CiAgICAgICAgc2V0VXNlcih1c2VyKTsKICAgICAgICBzZXQocmVmKGRhdGFiYXNlLCBgb25saW5lVXNlcnMvJHt1c2VyLnVpZH1gKSwgewogICAgICAgICAgZGlzcGxheU5hbWU6IHVzZXIuZGlzcGxheU5hbWUsCiAgICAgICAgICBlbWFpbDogdXNlci5lbWFpbAogICAgICAgIH0pLmNhdGNoKChlcnJvcikgPT4gY29uc29sZS5lcnJvcigiRGF0YWJhc2UgRXJyb3I6IiwgZXJyb3IpKTsKICAgICAgfSBlbHNlIHsKICAgICAgICBzZXRVc2VyKG51bGwpOwogICAgICB9CiAgICB9KTsKCiAgICBjb25zdCB1c2Vyc1JlZiA9IHJlZihkYXRhYmFzZSwgIm9ubGluZVVzZXJzIik7CiAgICBjb25zdCB1bnN1YnNjcmliZVVzZXJzID0gb25WYWx1ZSh1c2Vyc1JlZiwgKHNuYXBzaG90KSA9PiB7CiAgICAgIHNldE9ubGluZVVzZXJzKHNuYXBzaG90LmV4aXN0cygpID8gT2JqZWN0LmtleXMoc25hcHNob3QudmFsKCkpLmxlbmd0aCA6IDApOwogICAgfSwgKGVycm9yKSA9PiBjb25zb2xlLmVycm9yKCJEYXRhYmFzZSBSZWFkIEVycm9yOiIsIGVycm9yKSk7CgogICAgcmV0dXJuICgpID0+IHsKICAgICAgdW5zdWJzY3JpYmVBdXRoKCk7CiAgICAgIHVuc3Vic2NyaWJlVXNlcnMoKTsKICAgIH07CiAgfSwgW10pOwoKICBjb25zdCBoYW5kbGVMb2dpbiA9IGFzeW5jICgpID0+IHsKICAgIHRyeSB7CiAgICAgIGF3YWl0IHNpZ25JbldpdGhQb3B1cChhdXRoLCBwcm92aWRlcik7CiAgICB9IGNhdGNoIChlcnJvcikgewogICAgICBjb25zb2xlLmVycm9yKCJMb2dpbiBFcnJvcjoiLCBlcnJvcik7CiAgICB9CiAgfTsKCiAgY29uc3QgaGFuZGxlTG9nb3V0ID0gYXN5bmMgKCkgPT4gewogICAgaWYgKHVzZXIpIHsKICAgICAgdHJ5IHsKICAgICAgICBhd2FpdCBzaWduT3V0KGF1dGgpOwogICAgICAgIGF3YWl0IHJlbW92ZShyZWYoZGF0YWJhc2UsIGBvbmxpbmVVc2Vycy8ke3VzZXIudWlkfWApKTsKICAgICAgfSBjYXRjaCAoZXJyb3IpIHsKICAgICAgICBjb25zb2xlLmVycm9yKCJMb2dvdXQgRXJyb3I6IiwgZXJyb3IpOwogICAgICB9CiAgICB9CiAgfTsKCiAgcmV0dXJuICgKICAgIDxkaXYgY2xhc3NOYW1lPSJmbGV4IGZsZXgtY29sIGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBtaW4taC1zY3JlZW4gYmctZ3JheS0xMDAiPgogICAgICA8aDEgY2xhc3NOYW1lPSJ0ZXh0LTJ4bCBmb250LWJvbGQgbWItNCI+TG9naW4gU3lzdGVtPC9oMT4KICAgICAge3VzZXIgPyAoCiAgICAgICAgPGRpdiBjbGFzc05hbWU9InRleHQtY2VudGVyIj4KICAgICAgICAgIDxwPldlbGNvbWUsIHt1c2VyLmRpc3BsYXlOYW1lfTwvcD4KICAgICAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlTG9nb3V0fSBjbGFzc05hbWU9ImJnLXJlZC01MDAgdGV4dC13aGl0ZSBweC00IHB5LTIgbXQtMiByb3VuZGVkIj5Mb2dvdXQ8L2J1dHRvbj4KICAgICAgICA8L2Rpdj4KICAgICAgKSA6ICgKICAgICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUxvZ2lufSBjbGFzc05hbWU9ImJnLWJsdWUtNTAwIHRleHQtd2hpdGUgcHgtNCBweS0yIHJvdW5kZWQiPkxvZ2luIHdpdGggR29vZ2xlPC9idXR0b24+CiAgICAgICl9CiAgICAgIDxwIGNsYXNzTmFtZT0ibXQtNCI+QWN0aXZlIFVzZXJzOiB7b25saW5lVXNlcnN9PC9wPgogICAgPC9kaXY+CiAgKTsKfQo=