import { Link, useRouterState, useNavigate } from "@tanstack/react-router";
import {
  LayoutDashboard,
  Users,
  Package,
  FileText,
  Plus,
  LogOut,
} from "lucide-react";
import { toast } from "sonner";

import { logoutFn } from "@/lib/auth.functions";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar";
import logoWhite from "@/assets/x3-logo-white.png";
import mark from "@/assets/x3-mark.png";

const mainItems = [
  { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
  { title: "Propostas", url: "/propostas", icon: FileText },
  { title: "Clientes", url: "/clientes", icon: Users },
  { title: "Serviços", url: "/servicos", icon: Package },
];

export function AppSidebar() {
  const navigate = useNavigate();
  const currentPath = useRouterState({
    select: (s) => s.location.pathname,
  });
  const isActive = (url: string) =>
    currentPath === url || currentPath.startsWith(url + "/");

  const handleLogout = async () => {
    try {
      await logoutFn();
      toast.success("Sessão encerrada.");
      navigate({ to: "/login" });
    } catch {
      toast.error("Não foi possível sair. Tente novamente.");
    }
  };

  return (
    <Sidebar collapsible="icon" className="border-r-0">
      <SidebarHeader className="bg-sidebar">
        <Link
          to="/dashboard"
          className="flex items-center gap-2 px-2 py-3 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0"
        >
          {/* Mark visível apenas quando recolhida */}
          <img
            src={mark}
            alt="X3"
            className="hidden h-8 w-8 shrink-0 group-data-[collapsible=icon]:block"
          />
          {/* Logo completa visível apenas quando expandida */}
          <img
            src={logoWhite}
            alt="X3 Sites"
            className="h-6 w-auto group-data-[collapsible=icon]:hidden"
            style={{ filter: "brightness(0) invert(1)" }}
          />
        </Link>
      </SidebarHeader>

      <SidebarContent className="bg-sidebar">
        <SidebarGroup>
          <SidebarGroupLabel className="text-sidebar-foreground/60">
            Navegação
          </SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {mainItems.map((item) => (
                <SidebarMenuItem key={item.url}>
                  <SidebarMenuButton
                    asChild
                    isActive={isActive(item.url)}
                    tooltip={item.title}
                  >
                    <Link to={item.url}>
                      <item.icon />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                </SidebarMenuItem>
              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>

        <SidebarGroup>
          <SidebarGroupLabel className="text-sidebar-foreground/60">
            Ações rápidas
          </SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild tooltip="Nova proposta">
                  <Link to="/propostas/nova">
                    <Plus />
                    <span>Nova proposta</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>

      <SidebarFooter className="bg-sidebar">
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton onClick={handleLogout} tooltip="Sair">
              <LogOut />
              <span>Sair</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
        <div className="px-2 py-2 text-[10px] uppercase tracking-wider text-sidebar-foreground/40 group-data-[collapsible=icon]:hidden">
          X3 Sites · Propostas
        </div>
      </SidebarFooter>
    </Sidebar>
  );
}