users/app/components/Sidebar.tsx

"use client"

import { useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import {
  Database,
  LayoutDashboard,
  Settings,
  Users,
  Target,
  ChevronLeft,
  ChevronDown,
  ChevronRight,
  Tag,
  BarChart3,
  TrendingUp,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"

export default function Sidebar() {
  const pathname = usePathname()
  const [expanded, setExpanded] = useState(true)
  const [expandedSections, setExpandedSections] = useState({
    "user-portrait": true,
    "user-value": false,
  })

  const toggleSidebar = () => {
    setExpanded(!expanded)
  }

  const toggleSection = (section: string) => {
    setExpandedSections((prev) => ({
      ...prev,
      [section]: !prev[section],
    }))
  }

  // 重新设计的导航结构
  const navItems = [
    {
      title: "概览",
      href: "/",
      icon: <LayoutDashboard className="h-5 w-5" />,
      primary: true,
    },
    {
      title: "数据集成",
      href: "/data-integration",
      icon: <Database className="h-5 w-5" />,
      primary: true,
      tag: "核心",
    },
    {
      title: "用户画像",
      href: "/user-portrait",
      icon: <Users className="h-5 w-5" />,
      primary: true,
      expandable: true,
      section: "user-portrait",
      children: [
        {
          title: "用户词",
          href: "/user-portrait/user-keywords",
          icon: <Tag className="h-4 w-4" />,
        },
        {
          title: "标签管理",
          href: "/user-portrait/tags",
          icon: <Tag className="h-4 w-4" />,
        },
      ],
    },
    {
      title: "用户估值",
      href: "/user-value",
      icon: <Target className="h-5 w-5" />,
      primary: true,
      expandable: true,
      section: "user-value",
      children: [
        {
          title: "估值模型",
          href: "/user-value/model",
          icon: <BarChart3 className="h-4 w-4" />,
        },
        {
          title: "用户升级路径",
          href: "/user-value/upgrade-paths",
          icon: <TrendingUp className="h-4 w-4" />,
        },
      ],
    },
  ]

  const getTagColor = (tag: string) => {
    switch (tag) {
      case "核心":
        return "glass-light text-orange-700 border-orange-200"
      default:
        return "glass-light text-gray-700 border-gray-200"
    }
  }

  return (
    <div
      className={cn(
        "flex flex-col h-screen glass-nav m-4 transition-all duration-300 ease-in-out",
        expanded ? "w-72" : "w-20",
      )}
    >
      {/* 头部 */}
      <div className="flex items-center h-16 px-6 border-b border-white/20">
        {expanded ? (
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 rounded-lg glass-light flex items-center justify-center">
              <Database className="h-5 w-5 text-blue-600" />
            </div>
            <h1 className="text-lg font-semibold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
              用户数字资产中台
            </h1>
          </div>
        ) : (
          <div className="mx-auto">
            <div className="w-8 h-8 rounded-lg glass-light flex items-center justify-center">
              <Database className="h-5 w-5 text-blue-600" />
            </div>
          </div>
        )}
      </div>

      {/* 导航菜单 */}
      <div className="flex-1 overflow-y-auto py-4">
        <nav className="space-y-2 px-4">
          {navItems.map((item) => (
            <div key={item.href}>
              <div
                className={cn(
                  "flex items-center px-4 py-3 text-sm font-medium rounded-xl transition-all duration-300 group",
                  pathname === item.href
                    ? "glass-heavy text-blue-700 shadow-glass"
                    : "glass-light text-gray-700 hover:glass-heavy hover:text-blue-600 hover:scale-105",
                )}
              >
                <Link href={item.href} className={cn("flex items-center flex-1", !expanded && "justify-center")}>
                  <div className="transition-colors duration-300">{item.icon}</div>
                  {expanded && (
                    <div className="flex-1 flex items-center justify-between ml-3">
                      <span className="font-medium">{item.title}</span>
                      {item.tag && (
                        <Badge className={cn("text-xs px-2 py-1 rounded-lg", getTagColor(item.tag))}>{item.tag}</Badge>
                      )}
                    </div>
                  )}
                </Link>
                {expanded && item.expandable && (
                  <button
                    onClick={() => toggleSection(item.section!)}
                    className="ml-2 p-1 hover:bg-white/20 rounded-lg transition-colors duration-200"
                  >
                    {expandedSections[item.section!] ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    )}
                  </button>
                )}
              </div>

              {/* 子菜单 */}
              {expanded && item.children && expandedSections[item.section!] && (
                <div className="ml-6 mt-2 space-y-1">
                  {item.children.map((subItem) => (
                    <Link
                      key={subItem.href}
                      href={subItem.href}
                      className={cn(
                        "flex items-center px-3 py-2 text-sm rounded-lg transition-all duration-300",
                        pathname === subItem.href
                          ? "glass-light text-blue-600 shadow-glass-sm"
                          : "text-gray-600 hover:glass-light hover:text-blue-500",
                      )}
                    >
                      <div className="mr-3 text-gray-400 transition-colors duration-300">{subItem.icon}</div>
                      <span>{subItem.title}</span>
                    </Link>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
      </div>

      {/* 底部设置和折叠按钮 */}
      <div className="mt-auto border-t border-white/20">
        <Link
          href="/settings"
          className={cn(
            "flex items-center px-4 py-2 mx-4 my-2 text-xs font-medium rounded-lg transition-all duration-300",
            pathname === "/settings"
              ? "glass-heavy text-blue-700 shadow-glass"
              : "glass-light text-gray-600 hover:glass-heavy hover:text-blue-500",
          )}
        >
          <div className={cn("transition-colors duration-300", !expanded && "mx-auto")}>
            <Settings className="h-4 w-4" />
          </div>
          {expanded && <span className="ml-2">设置</span>}
        </Link>

        <div className="p-4">
          <button
            onClick={toggleSidebar}
            className="w-full flex items-center justify-center p-3 rounded-xl glass-button hover:scale-105 transition-all duration-300"
          >
            <ChevronLeft
              className={cn(
                "h-5 w-5 transform transition-transform duration-300",
                expanded ? "rotate-0" : "rotate-180",
              )}
            />
          </button>
        </div>
      </div>
    </div>
  )
}