"use client"

import * as React from "react"
import {
  LayoutDashboard,
  LifeBuoy,
  Ticket,
  PlayCircle,
  BarChart3,
  TrendingUp,
  PanelsTopLeft,
  UserCog,
  Building2,
  Waypoints,
  Clock4,
  Timer,
  MonitorCog,
  Layers3,
  UserPlus,
  BellRing,
} from "lucide-react"
import { usePathname } from "next/navigation"

import { SearchForm } from "@/components/search-form"
import { VersionSwitcher } from "@/components/version-switcher"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarRail,
} from "@/components/ui/sidebar"
import { Skeleton } from "@/components/ui/skeleton"
import { NavUser } from "@/components/nav-user"
import { useAuth } from "@/lib/auth-client"

import type { LucideIcon } from "lucide-react"

type NavRoleRequirement = "staff" | "admin"

type NavigationItem = {
  title: string
  url: string
  icon: LucideIcon
  requiredRole?: NavRoleRequirement
  exact?: boolean
}

type NavigationGroup = {
  title: string
  requiredRole?: NavRoleRequirement
  items: NavigationItem[]
}

const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
  versions: ["Rever Tecnologia"],
  navMain: [
    {
      title: "Operação",
      items: [
        { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard, requiredRole: "staff" },
        { title: "Tickets", url: "/tickets", icon: Ticket, requiredRole: "staff" },
        { title: "Visualizações", url: "/views", icon: PanelsTopLeft, requiredRole: "staff" },
        { title: "Modo Play", url: "/play", icon: PlayCircle, requiredRole: "staff" },
      ],
    },
    {
      title: "Relatórios",
      requiredRole: "staff",
      items: [
        { title: "SLA e produtividade", url: "/reports/sla", icon: TrendingUp, requiredRole: "staff" },
        { title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy, requiredRole: "staff" },
        { title: "Backlog", url: "/reports/backlog", icon: BarChart3, requiredRole: "staff" },
        { title: "Horas por cliente", url: "/reports/hours", icon: Clock4, requiredRole: "staff" },
      ],
    },
    {
      title: "Administração",
      requiredRole: "admin",
      items: [
        {
          title: "Convites e acessos",
          url: "/admin",
          icon: UserPlus,
          requiredRole: "admin",
          exact: true,
        },
        { title: "Canais & roteamento", url: "/admin/channels", icon: Waypoints, requiredRole: "admin" },
        { title: "Times & papéis", url: "/admin/teams", icon: UserCog, requiredRole: "admin" },
        { title: "Empresas & clientes", url: "/admin/companies", icon: Building2, requiredRole: "admin" },
        { title: "Máquinas", url: "/admin/machines", icon: MonitorCog, requiredRole: "admin" },
        { title: "Campos personalizados", url: "/admin/fields", icon: Layers3, requiredRole: "admin" },
        { title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
        { title: "Alertas enviados", url: "/admin/alerts", icon: BellRing, requiredRole: "admin" },
      ],
    },
    // Removido grupo "Conta" (Configurações) para evitar redundância com o menu do usuário no rodapé
  ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = usePathname()
  const { session, isLoading, isAdmin, isStaff } = useAuth()
  const [isHydrated, setIsHydrated] = React.useState(false)

  React.useEffect(() => {
    setIsHydrated(true)
  }, [])

  function isActive(item: NavigationItem) {
    const { url, exact } = item
    if (!pathname) return false
    if (url === "/dashboard" && pathname === "/") {
      return true
    }
    if (exact) {
      return pathname === url
    }
    return pathname === url || pathname.startsWith(`${url}/`)
  }

  function canAccess(requiredRole?: NavRoleRequirement) {
    if (!requiredRole) return true
    if (requiredRole === "admin") return isAdmin
    if (requiredRole === "staff") return isStaff
    return false
  }

  if (!isHydrated) {
    return (
      <Sidebar {...props}>
        <SidebarHeader className="gap-3">
          <Skeleton className="h-12 w-full rounded-lg" />
          <Skeleton className="h-9 w-full rounded-lg" />
        </SidebarHeader>
        <SidebarContent>
          {[0, 1, 2].map((group) => (
            <SidebarGroup key={group}>
              <SidebarGroupLabel>
                <Skeleton className="h-3 w-20 rounded" />
              </SidebarGroupLabel>
              <SidebarGroupContent>
                <div className="space-y-2">
                  {[0, 1, 2].map((item) => (
                    <Skeleton key={item} className="h-9 w-full rounded-md" />
                  ))}
                </div>
              </SidebarGroupContent>
            </SidebarGroup>
          ))}
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
    )
  }

  return (
    <Sidebar {...props}>
      <SidebarHeader className="gap-3">
        <VersionSwitcher
          label="Sistema de chamados"
          versions={[...navigation.versions]}
          defaultVersion={navigation.versions[0]}
        />
        <SearchForm placeholder="Buscar tickets" />
      </SidebarHeader>
      <SidebarContent>
        {navigation.navMain.map((group) => {
          if (!canAccess(group.requiredRole)) return null
          const visibleItems = group.items.filter((item) => canAccess(item.requiredRole))
          if (visibleItems.length === 0) return null
          return (
            <SidebarGroup key={group.title}>
              <SidebarGroupLabel>{group.title}</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {visibleItems.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton asChild isActive={isActive(item)}>
                        <a href={item.url} className="gap-2">
                          <item.icon className="size-4" />
                          <span>{item.title}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          )
        })}
      </SidebarContent>
      <SidebarFooter>
        {isLoading ? (
          <div className="flex items-center gap-3 rounded-lg border border-border/70 bg-sidebar p-3 shadow-sm">
            <Skeleton className="h-9 w-9 rounded-lg" />
            <div className="flex-1 space-y-1">
              <Skeleton className="h-3.5 w-24 rounded" />
              <Skeleton className="h-3 w-32 rounded" />
            </div>
          </div>
        ) : (
          <NavUser
            user={{
              name: session?.user?.name,
              email: session?.user?.email,
              avatarUrl: session?.user?.avatarUrl ?? undefined,
            }}
          />
        )}
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}

