import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

import Desktop from "~/core/pages/Desktop";
import Login from "~/core/pages/Login";
import Boot from "~/core/pages/Boot";
import MobileSimulator from "~/mobile/os/components/MobileSimulator";
// Nirvaagi Imports
import NirvaagiLogin from "~/core/pages/nirvaagi/NirvaagiLogin";

import "@unocss/reset/tailwind.css";
import "virtual:uno.css";
import "~/app/styles/tailwind.css";
import "katex/dist/katex.min.css";
import "remixicon/fonts/remixicon.css";
import "~/app/styles/index.css";
import "~/app/styles/win11.scss";
import { AudioProvider } from "~/shared/context/AudioContext";

function MainOS() {
  const [login, setLogin] = useState<boolean>(true);
  const [booting, setBooting] = useState<boolean>(true);
  const [restart, setRestart] = useState<boolean>(false);
  const [sleep, setSleep] = useState<boolean>(false);
  const [desktopLoaded, setDesktopLoaded] = useState<boolean>(false);

  const shutMac = (e: React.MouseEvent): void => {
    e.stopPropagation();
    setRestart(false);
    setSleep(false);
    setLogin(false);
    setBooting(true);
  };

  const restartMac = (e: React.MouseEvent): void => {
    e.stopPropagation();
    setRestart(true);
    setSleep(false);
    setLogin(false);
    setBooting(true);
  };

  const sleepMac = (e: React.MouseEvent): void => {
    e.stopPropagation();
    setRestart(false);
    setSleep(true);
    setLogin(false);
    setBooting(true);
  };

  // Main rendering: Background apps + Boot Screen Overlay
  return (
    <>
      <Desktop
        setLogin={setLogin}
        shutMac={shutMac}
        sleepMac={sleepMac}
        restartMac={restartMac}
        onLoaded={() => setDesktopLoaded(true)}
        booting={booting}
      />
      {!login && (
        <div className="absolute inset-0 z-[99999] size-full">
          <Login
            setLogin={setLogin}
            shutMac={shutMac}
            sleepMac={sleepMac}
            restartMac={restartMac}
            onLoaded={() => setDesktopLoaded(true)}
          />
        </div>
      )}

      {booting && (
        <Boot
          restart={restart}
          sleep={sleep}
          setBooting={setBooting}
          isLoaded={desktopLoaded}
        />
      )}
    </>
  );
}

import adminApps from "~/shared/configs/adminApps";
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from "~/shared/firebase";
import { useNavigate } from "react-router-dom";

function AdminOS() {
  const [user, setUser] = useState<any>(null);
  const [authChecked, setAuthChecked] = useState(false);
  const navigate = useNavigate();

  React.useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      if (currentUser) {
        setUser(currentUser);
      } else {
        navigate('/nirvaagi/login');
      }
      setAuthChecked(true);
    });
    return () => unsubscribe();
  }, [navigate]);

  const handleLogout = async () => {
    await signOut(auth);
    navigate('/nirvaagi/login');
  };

  if (!authChecked) {
    return (
      <div className="flex items-center justify-center w-full h-screen bg-[#F5F5F7] dark:bg-[#121212]">
        <div className="w-8 h-8 border-4 border-t-blue-500 border-blue-500/20 rounded-full animate-spin"></div>
      </div>
    );
  }
  if (!user) return null;

  return (
    <Desktop
      isAdminMode={true}
      apps={adminApps}
      onLogout={handleLogout}
      setLogin={() => { }}
      shutMac={handleLogout}
      sleepMac={handleLogout}
      restartMac={handleLogout}
    />
  );
}

export default function App() {
  const { dark } = useStore();
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  React.useEffect(() => {
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  React.useEffect(() => {
    if (dark) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [dark]);

  return (
    <Routes>
      <Route path="/" element={isMobile ? <MobileSimulator /> : <MainOS />} />
      <Route path="/mobile/*" element={<MobileSimulator />} />
      <Route path="/nirvaagi" element={isMobile ? <Navigate to="/" replace /> : <NirvaagiLogin />} />
      <Route path="/nirvaagi/login" element={isMobile ? <Navigate to="/" replace /> : <NirvaagiLogin />} />
      <Route path="/nirvaagi/dashboard" element={isMobile ? <Navigate to="/" replace /> : <AdminOS />} />
    </Routes>
  );
}

const rootElement = document.getElementById("root") as HTMLElement;
const root = createRoot(rootElement);

root.render(
  <React.StrictMode>
    <AudioProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </AudioProvider>
  </React.StrictMode>
);