import { NavLink, useNavigate } from "react-router"
import {
  LayoutDashboard,
  BookOpen,
  FolderOpen,
  TreePine,
  Users,
  MessageSquare,
  Settings,
  LogOut,
  FileCheck,
  AlertCircle,
  Shield,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { useAuth } from "@/hooks/use-auth"

const navItems = [
  { to: "/", label: "数据看板", icon: LayoutDashboard, end: true },
  { to: "/questions", label: "题库管理", icon: BookOpen },
  { to: "/questions?source=ugc", label: "UGC 审核", icon: FileCheck },
  { to: "/categories", label: "分类管理", icon: FolderOpen },
  { to: "/skill-tree", label: "技能树", icon: TreePine },
  { to: "/users", label: "用户管理", icon: Users },
  { to: "/feedback", label: "用户反馈", icon: MessageSquare },
  { to: "/reports", label: "举报处理", icon: AlertCircle },
  { to: "/admins", label: "管理员", icon: Shield },
  { to: "/settings", label: "系统设置", icon: Settings },
]

export function Sidebar() {
  const { logout } = useAuth()
  const navigate = useNavigate()

  function handleLogout() {
    logout()
    navigate("/login")
  }

  return (
    <aside className="flex h-screen w-60 flex-col border-r bg-sidebar-background">
      <div className="flex h-14 items-center border-b px-4">
        <span className="text-lg font-semibold">多奇管理后台</span>
      </div>

      <nav className="flex-1 space-y-1 p-3">
        {navItems.map(({ to, label, icon: Icon, end }) => (
          <NavLink
            key={to}
            to={to}
            end={end}
            className={({ isActive }) =>
              cn(
                "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
                isActive
                  ? "bg-sidebar-accent text-sidebar-accent-foreground"
                  : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
              )
            }
          >
            <Icon className="h-4 w-4" />
            {label}
          </NavLink>
        ))}
      </nav>

      <div className="border-t p-3">
        <button
          onClick={handleLogout}
          className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent/50 hover:text-sidebar-foreground"
        >
          <LogOut className="h-4 w-4" />
          退出登录
        </button>
      </div>
    </aside>
  )
}