import { Link, router, usePage } from "@inertiajs/react";
import { LogOut, Moon, Settings, Sun } from "lucide-react";
import ErrorBoundary from "@/Components/ErrorBoundary";
import { menuConfig } from "@/config/menu";
import { Button } from "@/Components/ui/button";
import { Toaster } from "@/Components/ui/sonner";
import { ThemeProvider, useTheme } from "@/Components/ThemeProvider";
import { PresentationModeProvider } from "@/Components/PresentationModeProvider";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/Components/ui/sidebar";
import ProjectSwitcher from "@/Components/ProjectSwitcher";
import BrandLogo from "@/Components/BrandLogo";

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  return (
    <Button
      variant="ghost"
      size="icon"
      className="h-8 w-8"
      onClick={toggleTheme}
      title={theme === "dark" ? "Modo claro" : "Modo escuro"}
    >
      {theme === "dark" ? (
        <Sun className="h-4 w-4" />
      ) : (
        <Moon className="h-4 w-4" />
      )}
    </Button>
  );
}

function AppSidebar() {
  const page = usePage();
  const { auth } = page.props;
  const user = auth.user;
  const can = auth.permissions?.can || {};

  const visibleItems = menuConfig.filter((item) => {
    if (item.permission && !can[item.permission]) return false;
    return true;
  });

  const navItems = visibleItems.filter(
    (item) => item.routeName !== "configuracoes.index"
  );
  const hasConfiguracoes = visibleItems.some(
    (item) => item.routeName === "configuracoes.index"
  );

  return (
    <Sidebar collapsible="icon">
      <SidebarHeader className="px-4 py-4 items-start group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-3 group-data-[collapsible=icon]:items-center">
        <BrandLogo variant="full" className="h-8 w-auto group-data-[collapsible=icon]:hidden" />
        <BrandLogo variant="icon" className="h-5 w-5 hidden group-data-[collapsible=icon]:block" />
      </SidebarHeader>

      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Navegação</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {navItems.map((item) => (
                <SidebarMenuItem key={item.title}>
                  <SidebarMenuButton
                    asChild
                    isActive={route().current(item.activePattern ?? item.routeName)}
                    tooltip={item.title}
                  >
                    <Link href={route(item.routeName)}>
                      <item.icon />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="pb-3">
        <SidebarMenu>
          {hasConfiguracoes && (
            <SidebarMenuItem>
              <SidebarMenuButton
                asChild
                isActive={route().current("configuracoes.index")}
                tooltip="Configurações"
              >
                <Link href={route("configuracoes.index")}>
                  <Settings />
                  <span>Configurações</span>
                </Link>
              </SidebarMenuButton>
            </SidebarMenuItem>
          )}

          {/* User card */}
          <SidebarMenuItem>
            <div className="flex items-center gap-3 px-2 py-2 rounded-md group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0">
              {user.avatar ? (
                <img
                  src={user.avatar}
                  alt={user.name}
                  className="h-7 w-7 rounded-full shrink-0"
                  title={user.name}
                />
              ) : (
                <div className="h-7 w-7 rounded-full bg-brand flex items-center justify-center shrink-0" title={user.name}>
                  <span className="text-xs font-semibold text-white">
                    {user.name?.charAt(0).toUpperCase()}
                  </span>
                </div>
              )}
              <div className="flex-1 min-w-0 group-data-[collapsible=icon]:hidden">
                <p className="text-sm font-medium leading-tight truncate">
                  {user.name}
                </p>
                <p className="text-xs text-muted-foreground leading-tight truncate">
                  {user.email}
                </p>
              </div>
            </div>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
    </Sidebar>
  );
}

function AppLayoutInner({ children }) {
  return (
    <SidebarProvider>
      <AppSidebar />
      <Toaster richColors position="top-right" />
      <SidebarInset className="min-w-0">
        <header className="sticky top-0 z-10 flex h-14 shrink-0 items-center justify-between border-b bg-background px-4">
          <div className="flex items-center gap-3">
            <SidebarTrigger className="-ml-1" />
            <ProjectSwitcher />
          </div>
          <div className="flex items-center gap-1">
            <ThemeToggle />
            <Button
              variant="ghost"
              size="icon"
              className="h-8 w-8"
              title="Sair"
              onClick={() => router.post(route("logout"))}
            >
              <LogOut className="h-4 w-4" />
            </Button>
          </div>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-3 sm:p-6">
          <ErrorBoundary>{children}</ErrorBoundary>
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}

export default function AppLayout({ children }) {
  return (
    <ThemeProvider>
      <PresentationModeProvider>
        <AppLayoutInner>{children}</AppLayoutInner>
      </PresentationModeProvider>
    </ThemeProvider>
  );
}