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 { SidebarProvider, Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarTrigger } from "@/components/ui/sidebar";
import { LayoutDashboard, AlertTriangle, Server, Shield, Menu } from "lucide-react";
import Dashboard from "@/pages/Dashboard";
import Detections from "@/pages/Detections";
import Routers from "@/pages/Routers";
import NotFound from "@/pages/not-found";

const menuItems = [
  { title: "Dashboard", url: "/", icon: LayoutDashboard },
  { title: "Rilevamenti", url: "/detections", icon: AlertTriangle },
  { title: "Router", url: "/routers", icon: Server },
  { title: "Whitelist", url: "/whitelist", icon: Shield },
];

function AppSidebar() {
  return (
    <Sidebar data-testid="sidebar">
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel data-testid="text-sidebar-title">IDS System</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {menuItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton asChild data-testid={`link-${item.title.toLowerCase()}`}>
                    <a href={item.url}>
                      <item.icon />
                      <span>{item.title}</span>
                    </a>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  );
}

function Router() {
  return (
    <Switch>
      <Route path="/" component={Dashboard} />
      <Route path="/detections" component={Detections} />
      <Route path="/routers" component={Routers} />
      <Route component={NotFound} />
    </Switch>
  );
}

function App() {
  const style = {
    "--sidebar-width": "16rem",
    "--sidebar-width-icon": "3rem",
  };

  return (
    <QueryClientProvider client={queryClient}>
      <TooltipProvider>
        <SidebarProvider style={style as React.CSSProperties}>
          <div className="flex h-screen w-full" data-testid="app-container">
            <AppSidebar />
            <div className="flex flex-col flex-1 overflow-hidden">
              <header className="flex items-center gap-2 p-4 border-b" data-testid="header">
                <SidebarTrigger data-testid="button-sidebar-toggle">
                  <Menu className="h-5 w-5" />
                </SidebarTrigger>
                <div className="flex-1">
                  <h1 className="text-sm font-medium text-muted-foreground" data-testid="text-header-title">
                    Intrusion Detection System
                  </h1>
                </div>
              </header>
              <main className="flex-1 overflow-auto" data-testid="main-content">
                <Router />
              </main>
            </div>
          </div>
        </SidebarProvider>
        <Toaster />
      </TooltipProvider>
    </QueryClientProvider>
  );
}

export default App;