"use client"

import * as React from "react"
import {
  LayoutDashboard,
  LifeBuoy,
  Ticket,
  PlayCircle,
  BookOpen,
  BarChart3,
  Gauge,
  PanelsTopLeft,
  Users,
  Waypoints,
  Timer,
  Plug,
  Layers3,
  UserPlus,
  Settings,
} from "lucide-react"
import { usePathname } from "next/navigation"

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

import type { LucideIcon } from "lucide-react"

type NavRoleRequirement = "staff" | "admin" | "customer"

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

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

const navigation: { versions: string[]; navMain: NavigationGroup[] } = {
  versions: ["0.0.1"],
  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: "Base de conhecimento", url: "/knowledge", icon: BookOpen, requiredRole: "staff" },
      ],
    },
    {
      title: "Relatórios",
      requiredRole: "staff",
      items: [
        { title: "SLA e produtividade", url: "/reports/sla", icon: Gauge, requiredRole: "staff" },
        { title: "Qualidade (CSAT)", url: "/reports/csat", icon: LifeBuoy, requiredRole: "staff" },
        { title: "Backlog", url: "/reports/backlog", icon: BarChart3, requiredRole: "staff" },
      ],
    },
    {
      title: "Administração",
      requiredRole: "admin",
      items: [
        { title: "Convites e acessos", url: "/admin", icon: UserPlus, requiredRole: "admin" },
        { title: "Canais & roteamento", url: "/admin/channels", icon: Waypoints, requiredRole: "admin" },
        { title: "Times & papéis", url: "/admin/teams", icon: Users, requiredRole: "admin" },
        { title: "Campos personalizados", url: "/admin/fields", icon: Layers3, requiredRole: "admin" },
        { title: "SLAs", url: "/admin/slas", icon: Timer, requiredRole: "admin" },
        { title: "Integrações", url: "/admin/integrations", icon: Plug, requiredRole: "admin" },
      ],
    },
    {
      title: "Conta",
      requiredRole: "staff",
      items: [{ title: "Configurações", url: "/settings", icon: Settings, requiredRole: "staff" }],
    },
  ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = usePathname()
  const { isAdmin, isStaff, isCustomer } = useAuth()

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

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

  return (
    <Sidebar {...props}>
      <SidebarHeader className="gap-3">
        <VersionSwitcher
          label="Sistema de chamados"
          versions={[...navigation.versions]}
          defaultVersion={navigation.versions[0]}
        />
        <SearchForm placeholder="Buscar tickets, macros ou artigos" />
      </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.url)}>
                        <a href={item.url} className="gap-2">
                          <item.icon className="size-4" />
                          <span>{item.title}</span>
                        </a>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          )
        })}
      </SidebarContent>
      <SidebarRail />
    </Sidebar>
  )
}