admin/src/app/(root)/navigation.tsx

"use client"
import {
  Activity,
  BarChart3,
  ChevronsLeft,
  ChevronsRight,
  CircleDollarSign,
  ClipboardList,
  ComputerIcon,
  ContactRound,
  DollarSign,
  DoorClosedIcon,
  FolderCode,
  Home,
  KeyRound,
  type LucideIcon,
  Package,
  ScanSearch,
  Shield,
  ShoppingBag,
  SquarePercent,
  TicketPercent,
  Users,
} from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { createContext, type ReactNode, useContext, useState } from "react"
import { twJoin } from "tailwind-merge"
import { Auth } from "@/components/auth"
import { Button } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import {
  ScopeAdminRead,
  ScopeAdminRoleRead,
  ScopeBalanceActivity,
  ScopeBatchRead,
  ScopeBillRead,
  ScopeChannelRead,
  ScopeCouponRead,
  ScopeDiscountRead,
  ScopePermissionRead,
  ScopeProductRead,
  ScopeProxyRead,
  ScopeResourceRead,
  ScopeTradeRead,
  ScopeUserRead,
  ScopeUserReadNotBind,
  ScopeUserReadOne,
} from "@/lib/scopes"

// Navigation Context
interface NavigationContextType {
  collapsed: boolean
  pathname: string
  isActive: (path: string) => boolean
}

const NavigationContext = createContext<NavigationContextType | undefined>(
  undefined,
)

const useNavigation = () => {
  const context = useContext(NavigationContext)
  if (!context) {
    throw new Error("Navigation components must be used within Navigation")
  }
  return context
}

// NavGroup Component
interface NavGroupProps {
  title: string
  children: ReactNode
}

function NavGroup({ title, children }: NavGroupProps) {
  const { collapsed } = useNavigation()

  return (
    <div className="px-3">
      {!collapsed && (
        <h3 className="px-3 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
          {title}
        </h3>
      )}
      <ul className={`${collapsed ? "mt-0" : "mt-2"} space-y-1`}>{children}</ul>
    </div>
  )
}

// NavItem Component
interface NavItemProps {
  href: string
  icon: LucideIcon
  label: string
  requiredScope?: string
}

function NavItem({ href, icon: Icon, label, requiredScope }: NavItemProps) {
  const { collapsed, isActive } = useNavigation()
  const active = isActive(href)

  let linkContent = (
    <Link
      href={href}
      className={`flex items-center ${
        collapsed ? "justify-center w-10 h-10" : "px-3 py-2"
      } rounded-md transition-colors ${
        active
          ? "bg-accent text-accent-foreground"
          : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
      }`}
    >
      <Icon className={`h-5 w-5 ${collapsed ? "" : "shrink-0"}`} />
      {!collapsed && <span className="ml-3 font-medium text-sm">{label}</span>}
    </Link>
  )

  if (collapsed) {
    linkContent = (
      <Tooltip>
        <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
        <TooltipContent side="right">
          <p>{label}</p>
        </TooltipContent>
      </Tooltip>
    )
  }

  if (requiredScope) {
    linkContent = (
      <Auth scope={requiredScope}>
        <li>{linkContent}</li>
      </Auth>
    )
  }

  return linkContent
}

// NavSeparator Component
function NavSeparator() {
  const { collapsed } = useNavigation()

  if (collapsed) return null

  return (
    <div className="my-4">
      <Separator />
    </div>
  )
}

const menuSections: { title: string; items: NavItemProps[] }[] = [
  {
    title: "概览",
    items: [
      { href: "/", icon: Home, label: "首页" },
      { href: "/statistics", icon: BarChart3, label: "数据统计" },
    ],
  },
  {
    title: "客户",
    items: [
      {
        href: "/user",
        icon: Users,
        label: "客户认领",
        requiredScope: ScopeUserReadNotBind,
      },
      {
        href: "/client/cust",
        icon: ScanSearch,
        label: "客户查询",
        requiredScope: ScopeUserReadOne,
      },
      {
        href: "/cust",
        icon: ContactRound,
        label: "客户管理",
        requiredScope: ScopeUserRead,
      },
      {
        href: "/trade",
        icon: Activity,
        label: "交易明细",
        requiredScope: ScopeTradeRead,
      },
      {
        href: "/balance",
        icon: CircleDollarSign,
        label: "余额明细",
        requiredScope: ScopeBalanceActivity,
      },
      {
        href: "/billing",
        icon: DollarSign,
        label: "账单详情",
        requiredScope: ScopeBillRead,
      },
    ],
  },
  {
    title: "运营",
    items: [
      {
        href: "/product",
        icon: ShoppingBag,
        label: "产品管理",
        requiredScope: ScopeProductRead,
      },
      {
        href: "/discount",
        icon: SquarePercent,
        label: "折扣管理",
        requiredScope: ScopeDiscountRead,
      },
      {
        href: "/coupon",
        icon: TicketPercent,
        label: "优惠券",
        requiredScope: ScopeCouponRead,
      },
      {
        href: "/resources",
        icon: Package,
        label: "套餐管理",
        requiredScope: ScopeResourceRead,
      },
      {
        href: "/batch",
        icon: ClipboardList,
        label: "提取记录",
        requiredScope: ScopeBatchRead,
      },
      {
        href: "/channel",
        icon: FolderCode,
        label: "IP管理",
        requiredScope: ScopeChannelRead,
      },
    ],
  },
  {
    title: "系统",
    items: [
      {
        href: "/gateway",
        icon: DoorClosedIcon,
        label: "网关列表",
        requiredScope:ScopeProxyRead
      },
      {
        href: "/admin",
        icon: Shield,
        label: "管理员",
        requiredScope: ScopeAdminRead,
      },
      {
        href: "/roles",
        icon: KeyRound,
        label: "角色列表",
        requiredScope: ScopeAdminRoleRead,
      },
      {
        href: "/permissions",
        icon: Shield,
        label: "权限列表",
        requiredScope: ScopePermissionRead,
      },
    ],
  },
]

// Main Navigation Component
export default function Navigation() {
  const [collapsed, setCollapsed] = useState(false)
  const pathname = usePathname()
  const isActive = (path: string) => {
    if (path === "/") {
      return pathname === path
    }
    return pathname === path || pathname.startsWith(path + "/")
  }

  const contextValue: NavigationContextType = {
    collapsed,
    pathname,
    isActive,
  }

  return (
    <TooltipProvider delayDuration={0}>
      <NavigationContext.Provider value={contextValue}>
        <aside
          className={twJoin(
            "bg-background border-r border-border transition-all duration-300 ease-in-out flex flex-col h-full",
            collapsed ? "w-16" : "w-64",
          )}
        >
          {/*Logo 区域 */}
          <div className="h-16 flex items-center justify-center border-b border-border p-4 shrink-0">
            {!collapsed ? (
              <span className="text-xl font-bold tracking-wide text-foreground">
                管理系统
              </span>
            ) : (
              <span className="text-xl font-bold mx-auto text-foreground">
                <ComputerIcon />
              </span>
            )}
          </div>
          {/* Navigation Menu */}
          <ScrollArea className="flex-1 py-3 overflow-hidden">
            <nav className="space-y-3">
              {menuSections.map((section, idx) => (
                <div key={section.title}>
                  <NavGroup title={section.title}>
                    {section.items.map(item => (
                      <NavItem key={item.label} {...item} />
                    ))}
                  </NavGroup>
                  {idx !== menuSections.length - 1 && <NavSeparator />}
                </div>
              ))}
            </nav>
          </ScrollArea>

          <div className="p-4 border-t border-border mt-auto shrink-0">
            <Button
              variant="ghost"
              onClick={() => setCollapsed(!collapsed)}
              className="w-full justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground"
            >
              {collapsed ? (
                <ChevronsRight className="h-5 w-5" />
              ) : (
                <>
                  <ChevronsLeft className="h-5 w-5" />
                  <span className="ml-2 text-sm">收起菜单</span>
                </>
              )}
            </Button>
          </div>
        </aside>
      </NavigationContext.Provider>
    </TooltipProvider>
  )
}