"use client"

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

import { SearchForm } from "@/components/search-form"
import { SidebarBrand } from "@/components/sidebar-brand"
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 { cn } from "@/lib/utils"

import type { LucideIcon } from "lucide-react"

type NavRoleRequirement = "staff" | "admin"

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

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

const navigation: NavigationGroup[] = [
  {
    title: "Operação",
    items: [
      { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard, requiredRole: "staff" },
      {
        title: "Tickets",
        url: "/tickets",
        icon: Ticket,
        requiredRole: "staff",
        children: [{ title: "Resolvidos", url: "/tickets/resolved", icon: ShieldCheck, 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: "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: "Empresas", url: "/reports/company", icon: Building2, requiredRole: "staff" },
      { title: "Horas", url: "/reports/hours", icon: Clock4, requiredRole: "staff" },
    ],
  },
  {
    title: "Administração",
    requiredRole: "admin",
    items: [
      {
        title: "Administração",
        url: "/admin",
        icon: UserPlus,
        requiredRole: "admin",
        exact: true,
      },
      { title: "Filas", url: "/admin/channels", icon: Waypoints, requiredRole: "admin" },
      { title: "Times & papéis", url: "/admin/teams", icon: UserCog, requiredRole: "admin" },
      {
        title: "Empresas",
        url: "/admin/companies",
        icon: Building2,
        requiredRole: "admin",
      },
      { title: "Usuários", url: "/admin/users", icon: Users, requiredRole: "admin" },
      { title: "Máquinas", url: "/admin/machines", icon: MonitorCog, requiredRole: "admin" },
      { title: "SLAs", url: "/admin/slas", icon: Timer, 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)
  const canAccess = React.useCallback(
    (requiredRole?: NavRoleRequirement) => {
      if (!requiredRole) return true
      if (requiredRole === "admin") return isAdmin
      if (requiredRole === "staff") return isStaff
      return false
    },
    [isAdmin, isStaff]
  )
  const initialExpanded = React.useMemo(() => {
    const open = new Set<string>()
    navigation.forEach((group) => {
      group.items.forEach((item) => {
        if (!item.children || item.children.length === 0) return
        const shouldOpen = item.children.some((child) => {
          if (!canAccess(child.requiredRole)) return false
          return pathname === child.url || pathname.startsWith(`${child.url}/`)
        })
        if (shouldOpen) {
          open.add(item.title)
        }
      })
    })
    return open
  }, [pathname, canAccess])
  const [expanded, setExpanded] = React.useState<Set<string>>(initialExpanded)

  React.useEffect(() => {
    setExpanded((prev) => {
      const next = new Set(prev)
      initialExpanded.forEach((key) => next.add(key))
      return next
    })
  }, [initialExpanded])

  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}/`)
  }

  const toggleExpanded = React.useCallback((title: string) => {
    setExpanded((prev) => {
      const next = new Set(prev)
      if (next.has(title)) {
        next.delete(title)
      } else {
        next.add(title)
      }
      return next
    })
  }, [])

  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">
        <SidebarBrand
          logoSrc="/logo-raven.png"
          logoAlt="Logotipo Raven"
          title="Raven"
          subtitle="Por Rever Tecnologia"
        />
        <SearchForm placeholder="Buscar tickets" />
      </SidebarHeader>
      <SidebarContent>
        {navigation.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) => {
                    if (item.children && item.children.length > 0) {
                      const childItems = item.children.filter((child) => canAccess(child.requiredRole))
                      const isExpanded = expanded.has(item.title)
                      const isChildActive = childItems.some((child) => isActive(child))
                      const parentActive = isActive(item) || isChildActive

                      return (
                        <React.Fragment key={item.title}>
                          <SidebarMenuItem>
                            <SidebarMenuButton asChild isActive={parentActive}>
                              <Link href={item.url} className={cn("gap-2", "relative pr-7") }>
                                {item.icon ? <item.icon className="size-4" /> : null}
                                <span className="flex-1">{item.title}</span>
                                <span
                                  role="button"
                                  aria-label={isExpanded ? "Recolher submenu" : "Expandir submenu"}
                                  onClick={(event) => {
                                    event.preventDefault()
                                    event.stopPropagation()
                                    toggleExpanded(item.title)
                                  }}
                                  className={cn(
                                    "absolute right-1.5 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-neutral-500 transition hover:bg-slate-200 hover:text-neutral-700",
                                    isExpanded && "rotate-180"
                                  )}
                                >
                                  <ChevronDown className="size-3" />
                                </span>
                              </Link>
                            </SidebarMenuButton>
                          </SidebarMenuItem>
                          {isExpanded
                            ? childItems.map((child) => (
                                <SidebarMenuItem key={`${item.title}-${child.title}`}>
                                  <SidebarMenuButton asChild isActive={isActive(child)}>
                                    <Link href={child.url} className="gap-2 pl-7 text-sm">
                                      {child.icon ? <child.icon className="size-3.5 text-neutral-500" /> : null}
                                      <span>{child.title}</span>
                                    </Link>
                                  </SidebarMenuButton>
                                </SidebarMenuItem>
                              ))
                            : null}
                        </React.Fragment>
                      )
                    }

                    return (
                      <SidebarMenuItem key={item.title}>
                        <SidebarMenuButton asChild isActive={isActive(item)}>
                          <Link href={item.url} className="gap-2">
                            {item.icon ? <item.icon className="size-4" /> : null}
                            <span>{item.title}</span>
                          </Link>
                        </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,
            }}
          />
        )}
        {/* Dev debug removido */}
      </SidebarFooter>
      <SidebarRail />
    </Sidebar>
  )
}