"use client"

import {
  ClipboardList,
  Gamepad2,
  LayoutDashboard,
  ListOrdered,
  Palette,
  Settings,
  Store,
  TrendingUp,
  Users,
} from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils"
import { useAuthStore } from "@/store/auth"

const playerLinks = [
  { href: "/dashboard", label: "概览", icon: LayoutDashboard },
  { href: "/dashboard/services", label: "服务管理", icon: ListOrdered },
]

const ownerLinks = [
  { href: "/dashboard", label: "概览", icon: LayoutDashboard },
  { href: "/dashboard/services", label: "服务管理", icon: ListOrdered },
  { href: "/dashboard/shop", label: "店铺管理", icon: Store },
  { href: "/dashboard/shop/orders", label: "订单总览", icon: ClipboardList },
  { href: "/dashboard/shop/income", label: "收入统计", icon: TrendingUp },
  { href: "/dashboard/shop/rules", label: "规则设置", icon: Settings },
  { href: "/dashboard/shop/employees", label: "员工管理", icon: Users },
  { href: "/dashboard/shop/templates", label: "模板编辑", icon: Palette },
]

export function DashboardSidebar() {
  const pathname = usePathname()
  const { currentRole } = useAuthStore()

  const links = currentRole === "owner" ? ownerLinks : playerLinks

  return (
    <aside className="w-56 shrink-0 border-r bg-muted/30">
      <div className="flex h-14 items-center gap-2 border-b px-4 font-semibold">
        <Gamepad2 className="h-4 w-4" />
        管理后台
      </div>
      <nav className="p-2 space-y-1">
        {links.map((link) => {
          const Icon = link.icon
          const isActive = pathname === link.href
          return (
            <Button
              key={link.href}
              variant={isActive ? "secondary" : "ghost"}
              className={cn("w-full justify-start", !isActive && "text-muted-foreground")}
              asChild
            >
              <Link href={link.href}>
                <Icon className="h-4 w-4" />
                {link.label}
              </Link>
            </Button>
          )
        })}
      </nav>
    </aside>
  )
}