import { Switch, Route } from "wouter";
import { queryClient } from "./lib/queryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { Toaster } from "@/components/ui/toaster";
import { TooltipProvider } from "@/components/ui/tooltip";
import { ThemeProvider } from "@/components/theme-provider";
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/app-sidebar";
import { useAuth } from "@/hooks/useAuth";
import NotFound from "@/pages/not-found";
import Landing from "@/pages/landing";
import Login from "@/pages/login";
import Dashboard from "@/pages/dashboard";
import Guards from "@/pages/guards";
import Sites from "@/pages/sites";
import Shifts from "@/pages/shifts";
import Reports from "@/pages/reports";
import Notifications from "@/pages/notifications";
import Users from "@/pages/users";
import AdvancedPlanning from "@/pages/advanced-planning";
import Vehicles from "@/pages/vehicles";
import Parameters from "@/pages/parameters";
import Services from "@/pages/services";
import Planning from "@/pages/planning";
import OperationalPlanning from "@/pages/operational-planning";
import GeneralPlanning from "@/pages/general-planning";
import ServicePlanning from "@/pages/service-planning";
import Customers from "@/pages/customers";
import PlanningMobile from "@/pages/planning-mobile";
import MyShiftsFixed from "@/pages/my-shifts-fixed";
import MyShiftsMobile from "@/pages/my-shifts-mobile";
import SitePlanningView from "@/pages/site-planning-view";

function Router() {
  const { isAuthenticated, isLoading } = useAuth();

  return (
    <Switch>
      <Route path="/login" component={Login} />
      {isLoading || !isAuthenticated ? (
        <Route path="/" component={Landing} />
      ) : (
        <>
          <Route path="/" component={Dashboard} />
          <Route path="/guards" component={Guards} />
          <Route path="/sites" component={Sites} />
          <Route path="/customers" component={Customers} />
          <Route path="/services" component={Services} />
          <Route path="/vehicles" component={Vehicles} />
          <Route path="/shifts" component={Shifts} />
          <Route path="/planning" component={Planning} />
          <Route path="/operational-planning" component={OperationalPlanning} />
          <Route path="/general-planning" component={GeneralPlanning} />
          <Route path="/service-planning" component={ServicePlanning} />
          <Route path="/planning-mobile" component={PlanningMobile} />
          <Route path="/advanced-planning" component={AdvancedPlanning} />
          <Route path="/my-shifts-fixed" component={MyShiftsFixed} />
          <Route path="/my-shifts-mobile" component={MyShiftsMobile} />
          <Route path="/site-planning-view" component={SitePlanningView} />
          <Route path="/reports" component={Reports} />
          <Route path="/notifications" component={Notifications} />
          <Route path="/users" component={Users} />
          <Route path="/parameters" component={Parameters} />
        </>
      )}
      <Route component={NotFound} />
    </Switch>
  );
}

function AppContent() {
  const { isAuthenticated, isLoading } = useAuth();

  // Sidebar style configuration for operational dashboard
  const sidebarStyle = {
    "--sidebar-width": "16rem",
    "--sidebar-width-icon": "3rem",
  } as React.CSSProperties;

  return (
    <ThemeProvider defaultTheme="dark" storageKey="vigilanza-theme">
      <TooltipProvider>
        {!isLoading && isAuthenticated ? (
          <SidebarProvider style={sidebarStyle}>
            <div className="flex h-screen w-full">
              <AppSidebar />
              <div className="flex flex-col flex-1 overflow-hidden">
                <header className="flex items-center justify-between p-4 border-b bg-background">
                  <SidebarTrigger data-testid="button-sidebar-toggle" />
                </header>
                <main className="flex-1 overflow-auto p-6">
                  <Router />
                </main>
              </div>
            </div>
          </SidebarProvider>
        ) : (
          <Router />
        )}
        <Toaster />
      </TooltipProvider>
    </ThemeProvider>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AppContent />
    </QueryClientProvider>
  );
}

export default App;