sistema-de-chamados/src/components/app-sidebar.tsx

"use client"

import * as React from "react"
import {
  AlertTriangle,
  Building,
  Building2,
  ClipboardList,
  CalendarDays,
  ChevronDown,
  Clock4,
  Gauge,
  LayoutDashboard,
  Layers3,
  LayoutTemplate,
  LifeBuoy,
  MonitorCog,
  Package,
  PlayCircle,
  ShieldAlert,
  ShieldCheck,
  Ticket,
  Timer,
  TrendingUp,
  UserCog,
  UserPlus,
  Users,
  Waypoints,
} from "lucide-react"
import { usePathname } from "next/navigation"
import Link from "next/link"

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" | "agent"

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

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: "Todos os tickets", url: "/tickets", icon: ClipboardList, requiredRole: "staff" },
          { title: "Resolvidos", url: "/tickets/resolved", icon: ShieldCheck, requiredRole: "staff" },
          { title: "Modo Play", url: "/play", icon: PlayCircle, requiredRole: "staff" },
        ],
      },
      { title: "Agenda", url: "/agenda", icon: CalendarDays, requiredRole: "staff" },
      { title: "Dispositivos", url: "/admin/devices", icon: MonitorCog, requiredRole: "admin" },
      { title: "Empréstimos", url: "/emprestimos", icon: Package, requiredRole: "staff" },
    ],
  },
  {
    title: "Relatórios",
    requiredRole: "staff",
    items: [
      { title: "Painéis customizados", url: "/dashboards", icon: LayoutTemplate, requiredRole: "staff" },
      { title: "SLA & Produtividade", url: "/reports/sla", icon: TrendingUp, requiredRole: "staff" },
      { title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy, requiredRole: "staff" },
      { title: "Backlog", url: "/reports/backlog", icon: Gauge, requiredRole: "staff" },
      { title: "Clientes", url: "/reports/company", icon: Building2, requiredRole: "staff" },
      { title: "Categorias", url: "/reports/categories", icon: Layers3, requiredRole: "staff" },
      { title: "Horas", url: "/reports/hours", icon: Clock4, requiredRole: "staff" },
      { title: "Máquinas x categorias", url: "/reports/machines", icon: MonitorCog, requiredRole: "staff" },
    ],
  },
  {
    title: "Administração",
    requiredRole: "agent",
    items: [
      {
        title: "Cadastros",
        url: "/admin",
        icon: UserPlus,
        requiredRole: "admin",
        children: [
          { title: "Equipe", url: "/admin", icon: LayoutDashboard, requiredRole: "admin", exact: true },
          { title: "Empresas", url: "/admin/companies", icon: Building, requiredRole: "admin" },
          { title: "Usuários", url: "/admin/users", icon: Users, requiredRole: "admin" },
          { title: "Campos personalizados", url: "/admin/custom-fields", icon: ClipboardList, requiredRole: "admin" },
          { title: "Templates de comentários", url: "/settings/templates", icon: LayoutTemplate, requiredRole: "admin" },
          { title: "Templates de checklist", url: "/settings/checklists", icon: ClipboardList, requiredRole: "admin" },
          { title: "Templates de relatórios", url: "/admin/report-templates", icon: LayoutTemplate, requiredRole: "admin" },
        ],
      },
      { title: "Automações", url: "/automations", icon: Waypoints, requiredRole: "agent" },
      {
        title: "Orquestração",
        url: "/admin/channels",
        icon: Layers3,
        requiredRole: "admin",
        children: [
          { title: "Filas", url: "/admin/channels", icon: Waypoints, requiredRole: "admin" },
          { title: "Times & papéis", url: "/admin/teams", icon: UserCog, requiredRole: "admin" },
        ],
      },
      {
        title: "Integração & SLAs",
        url: "/admin/devices",
        icon: MonitorCog,
        requiredRole: "admin",
        children: [
          { title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
          { title: "Alertas", url: "/admin/alerts", icon: ShieldAlert, requiredRole: "admin" },
        ],
      },
      { title: "Incidentes", url: "/incidentes", icon: AlertTriangle, requiredRole: "admin", hidden: true },
    ],
  },
]

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = usePathname()
  const { session, isLoading, isAdmin, isStaff, role } = useAuth()
  const [isHydrated, setIsHydrated] = React.useState(false)
  const canAccess = React.useCallback(
    (requiredRole?: NavRoleRequirement) => {
      if (!requiredRole) return true
      if (requiredRole === "admin") return isAdmin
      if (requiredRole === "agent") return isAdmin || role === "agent"
      if (requiredRole === "staff") return isStaff
      return false
    },
    [isAdmin, isStaff, role]
  )
  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="pt-4">
          <Skeleton className="h-14 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="pt-4">
        <SidebarBrand
          logoSrc="/logo-raven.png"
          logoAlt="Logotipo Raven"
          title="Raven"
          subtitle="Chamados"
        />
      </SidebarHeader>
      <SidebarContent>
        {navigation.map((group) => {
          if (!canAccess(group.requiredRole)) return null
          const visibleItems = group.items.filter((item) => !item.hidden && 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) => !child.hidden && canAccess(child.requiredRole))
                      const isExpanded = expanded.has(item.title)
                      const isChildActive = childItems.some((child) => isActive(child))
                      const parentActive = isChildActive
                      const isToggleOnly = true // Todos os menus com filhos expandem ao clicar, nao navegam

                      return (
                        <React.Fragment key={item.title}>
                          <SidebarMenuItem>
                            {isToggleOnly ? (
                              <button
                                type="button"
                                className={cn(
                                  "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg border border-transparent px-2 py-1 text-left transition hover:bg-sidebar-accent/70",
                                  isExpanded && "bg-sidebar-accent/60"
                                )}
                                onClick={() => toggleExpanded(item.title)}
                              >
                                {item.icon ? <item.icon className="size-4" /> : null}
                                <span className="flex-1 text-sm font-medium text-foreground">{item.title}</span>
                                <span
                                  aria-hidden="true"
                                  className={cn(
                                    "inline-flex h-6 w-6 items-center justify-center rounded-md text-neutral-500 transition",
                                    isExpanded && "rotate-180"
                                  )}
                                >
                                  <ChevronDown className="size-3" />
                                </span>
                              </button>
                            ) : (
                              <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)} className="font-medium">
                          <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>
  )
}