import { useEffect } from "react";
import { HashRouter, Routes, Route, useNavigate } from "react-router-dom";
import { TooltipProvider } from "@/components/ui/tooltip";
import { useAuthStore } from "@/stores/auth-store";
import { LoginPage } from "@/features/auth/login-page";
import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import SettingsPage from "@/features/settings-page";
import AudioVideoSettingsPage from "@/features/settings/audio-video-settings-page";
import NetworkSelector from "@/features/network-selector";
import NetworkRoot from "@/features/network-root";
import ParticleViewResolver from "@/features/particles/particle-view-resolver";
import Layout from "@/features/layout";
import NetworkSettingsPage from "@/features/network-settings";
import { Toaster } from "@/components/ui/sonner";
import { PusherProvider } from "@/lib/pusher-provider";

const queryClient = new QueryClient();

const App = () => {
  const status = useAuthStore((s) => s.status);
  const restoreSession = useAuthStore((s) => s.restoreSession);

  useEffect(() => {
    restoreSession();
  }, [restoreSession]);

  if (status === "idle" || status === "restoring") {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <p className="text-muted-foreground text-sm">Loading...</p>
      </div>
    );
  }

  if (status !== "authenticated") {
    return <LoginPage />;
  }

  return (
    <PusherProvider>
      <AuthenticatedApp />
    </PusherProvider>
  );
};

function AutoplayNavigationListener() {
  const navigate = useNavigate();

  useEffect(() => {
    return window.electronAutoplay.onNavigate((data) => {
      navigate(`/${data.networkId}/${data.streamId}`);
    });
  }, [navigate]);

  return null;
}

function AuthenticatedApp() {
  return (
    <HashRouter>
      <AutoplayNavigationListener />
      <Routes>
        <Route path="settings" element={<SettingsPage />} />
        <Route path="settings/audio-video" element={<AudioVideoSettingsPage />} />

        <Route path="/">
          <Route index element={<Layout><NetworkSelector /></Layout>} />
          <Route path=":networkId">
            <Route index element={<Layout><NetworkRoot /></Layout>} />
            <Route path="settings" element={<NetworkSettingsPage />} />
            <Route path="*" element={<ParticleViewResolver />} />
          </Route>
        </Route>
      </Routes>
    </HashRouter>
  );
}

const AppWithProviders = () => (
  <TooltipProvider>
    <QueryClientProvider client={queryClient}>
      <App />
      <Toaster />
    </QueryClientProvider>
  </TooltipProvider>
);

export default AppWithProviders;