"use client"

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

interface MobileSidebarProps {
  isOpen: boolean
  onClose: () => void
}

export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
  const pathname = usePathname()
  const [expandedSections, setExpandedSections] = useState({
    "user-portrait": true,
    "user-value": false,
  })

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

  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "unset"
    }

    return () => {
      document.body.style.overflow = "unset"
    }
  }, [isOpen])

  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(
          "fixed inset-0 bg-black/20 backdrop-blur-sm z-40 transition-opacity duration-300",
          isOpen ? "opacity-100" : "opacity-0 pointer-events-none",
        )}
        onClick={onClose}
      />

      {/* 侧边栏 */}
      <div
        className={cn(
          "fixed left-0 top-0 h-full w-80 glass-nav safe-area-top safe-area-left z-50 transition-transform duration-300 ease-out",
          isOpen ? "translate-x-0" : "-translate-x-full",
        )}
      >
        {/* 头部 */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-white/20">
          <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>
          <Button variant="ghost" size="icon" onClick={onClose} className="glass-light rounded-xl">
            <X className="h-5 w-5" />
          </Button>
        </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",
                  )}
                >
                  <Link href={item.href} onClick={onClose} className="flex items-center flex-1">
                    <div className="transition-colors duration-300">{item.icon}</div>
                    <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>
                  {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>

                {/* 子菜单 */}
                {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}
                        onClick={onClose}
                        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="border-t border-white/20 p-4">
          <Link
            href="/settings"
            onClick={onClose}
            className={cn(
              "flex items-center px-4 py-2 text-xs font-medium rounded-lg transition-all duration-300 w-full",
              pathname === "/settings"
                ? "glass-heavy text-blue-700 shadow-glass"
                : "glass-light text-gray-600 hover:glass-heavy hover:text-blue-500",
            )}
          >
            <Settings className="h-4 w-4 transition-colors duration-300" />
            <span className="ml-2">设置</span>
          </Link>
        </div>
      </div>
    </>
  )
}