"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { logout } from "@/lib/api/auth"
import {
  Brain,
  Music,
  Shirt,
  Gift,
  Home,
  Utensils,
  User,
  Settings,
  BarChart,
  LogOut,
  Lock,
  Sparkles,
  Heart,
  Footprints,
  Trophy,
} from "lucide-react"

export function Sidebar() {
  const pathname = usePathname()
  const router = useRouter()

  const handleLogout = async () => {
    try {
      // 调用退出登录API
      await logout()
      
      // 退出后重定向到登录页面
      router.push("/login")
    } catch (error) {
      console.error("退出登录失败:", error)
    }
  }

  return (
    <div className="flex h-screen border-r bg-gradient-to-b from-white to-gray-50 shadow-md">
      <div className="flex w-full flex-col space-y-4 p-4">
        <div className="flex h-16 items-center px-4 py-2">
          <div className="flex items-center gap-2">
            <div className="h-8 w-8 rounded-full bg-gradient-to-br from-pink-500 to-purple-600 flex items-center justify-center">
              <Sparkles className="h-4 w-4 text-white" />
            </div>
            <h2 className="text-xl font-bold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-pink-600 to-purple-600">
              洛天依管理系统
            </h2>
          </div>
        </div>

        <div className="space-y-1.5">
          <Button
            variant={pathname === "/" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/">
              <BarChart className="mr-2 h-4 w-4" />
              仪表盘
            </Link>
          </Button>

          <div className="pt-4 pb-2">
            <p className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">AI 管理</p>
          </div>

          <Button
            variant={pathname === "/ai-model" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/ai-model"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/ai-model">
              <Brain className="mr-2 h-4 w-4" />
              大模型管理
            </Link>
          </Button>

          <div className="pt-4 pb-2">
            <p className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">内容管理</p>
          </div>

          <Button
            variant={pathname === "/outfits" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/outfits"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/outfits">
              <Shirt className="mr-2 h-4 w-4" />
              服装管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/props" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/props"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/props">
              <Gift className="mr-2 h-4 w-4" />
              道具管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/home-decor" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/home-decor"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/home-decor">
              <Home className="mr-2 h-4 w-4" />
              家居装饰管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/songs" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/songs"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/songs">
              <Music className="mr-2 h-4 w-4" />
              歌曲管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/dances" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/dances"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/dances">
              <Footprints className="mr-2 h-4 w-4" />
              舞蹈管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/food" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/food"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/food">
              <Utensils className="mr-2 h-4 w-4" />
              食物管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/achievements" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/achievements"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/achievements">
              <Trophy className="mr-2 h-4 w-4" />
              成就管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/affinity" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/affinity"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/affinity">
              <Heart className="mr-2 h-4 w-4" />
              好感度系统
            </Link>
          </Button>

          <div className="pt-4 pb-2">
            <p className="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">系统管理</p>
          </div>

          <Button
            variant={pathname === "/users" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/users"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/users">
              <User className="mr-2 h-4 w-4" />
              用户管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/permissions" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/permissions"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/permissions">
              <Lock className="mr-2 h-4 w-4" />
              权限管理
            </Link>
          </Button>

          <Button
            variant={pathname === "/settings" ? "default" : "ghost"}
            className={cn(
              "w-full justify-start",
              pathname === "/settings"
                ? "bg-gradient-to-r from-pink-500 to-purple-600 text-white hover:from-pink-600 hover:to-purple-700"
                : "hover:bg-gray-100",
            )}
            asChild
          >
            <Link href="/settings">
              <Settings className="mr-2 h-4 w-4" />
              系统设置
            </Link>
          </Button>
        </div>

        <div className="mt-auto pt-4">
          <Button
            variant="ghost"
            className="w-full justify-start hover:bg-red-50 hover:text-red-600 transition-colors"
            onClick={handleLogout}
          >
            <LogOut className="mr-2 h-4 w-4" />
            退出登录
          </Button>
        </div>
      </div>
    </div>
  )
}