"use client"

import {
  Gamepad2,
  LayoutDashboard,
  ListOrdered,
  Palette,
  Settings2,
  Store,
  Users,
} from "lucide-react"
import Link from "next/link"
import { usePathname } from "next/navigation"
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/employees", label: "员工管理", icon: Users },
  { href: "/dashboard/shop/templates", label: "模板编辑", icon: Palette },
  { href: "/dashboard/settings", label: "店铺设置", icon: Settings2 },
]

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 (
            <Link
              key={link.href}
              href={link.href}
              className={cn(
                "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                isActive
                  ? "bg-accent text-accent-foreground"
                  : "text-muted-foreground hover:text-foreground hover:bg-accent/50",
              )}
            >
              <Icon className="h-4 w-4" />
              {link.label}
            </Link>
          )
        })}
      </nav>
    </aside>
  )
}