"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import {
  LayoutDashboard,
  Database,
  Tags,
  Brain,
  Package,
  Monitor,
  ChevronDown,
  ChevronRight,
  FileText,
  Users,
  Zap,
  Target,
  BarChart3,
  Shield,
  Bell,
  Server,
  MessageSquare,
  Sparkles,
  GitBranch,
  Calendar,
  Bot,
  Search,
  FileOutput,
  Webhook,
  Activity,
  ScrollText,
  Globe,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { useState } from "react"

// 五大核心模块导航结构（不可删除）
const NAV_ITEMS = [
  // 第一部分：数据概览
  { 
    href: "/", 
    label: "数据概览", 
    icon: LayoutDashboard,
    description: "AI对话 · 数据仪表板"
  },
  // 第二部分：数据接入
  {
    href: "/data-ingestion",
    label: "数据接入",
    icon: Database,
    children: [
      { href: "/data-ingestion/sources", label: "数据源管理", icon: Database },
      { href: "/data-ingestion/ai-engine", label: "AI标签引擎", icon: Brain },
      { href: "/data-ingestion/cleaning", label: "清洗规则", icon: Zap },
      { href: "/data-ingestion/tasks", label: "任务调度", icon: Calendar },
      { href: "/data-ingestion/lineage", label: "数据血缘", icon: GitBranch },
    ],
  },
  // 第三部分：标签画像
  {
    href: "/tag-portrait",
    label: "标签画像",
    icon: Tags,
    children: [
      { href: "/tag-portrait/tags", label: "标签管理", icon: Tags },
      { href: "/tag-portrait/portrait", label: "用户画像", icon: Users },
      { href: "/tag-portrait/crowd", label: "流量池", icon: Target },
    ],
  },
  // 第四部分：AI Agent（对接飞书/企微等外部平台）
  {
    href: "/ai-agent",
    label: "AI Agent",
    icon: Bot,
    children: [
      { href: "/ai-agent/channels", label: "渠道配置", icon: Webhook },
      { href: "/ai-agent/smart-tag", label: "AI打标", icon: Sparkles },
      { href: "/ai-agent/data-cleaning", label: "AI清洗", icon: Zap },
      { href: "/ai-agent/report", label: "智能报告", icon: FileText },
    ],
  },
  // 第五部分：数据市场
  {
    href: "/data-market",
    label: "数据市场",
    icon: Package,
    children: [
      { href: "/data-market/packages", label: "流量包", icon: Package },
      { href: "/data-market/api", label: "API服务", icon: Server },
      { href: "/data-market/open-api", label: "开放接口", icon: Globe },
    ],
  },
] as const

// 底部工具菜单（系统监控等）
const BOTTOM_NAV_ITEMS = [
  {
    href: "/monitoring/health",
    label: "系统监控",
    icon: Monitor,
  },
] as const

type NavItem = (typeof NAV_ITEMS)[number]

function NavItemComponent({ item, level = 0 }: { item: NavItem; level?: number }) {
  const pathname = usePathname()
  const [isOpen, setIsOpen] = useState(false)
  const hasChildren = "children" in item && item.children && item.children.length > 0
  const isExactActive = pathname === item.href
  const isActive = isExactActive || (item.href !== "/" && pathname.startsWith(item.href))

  // Auto expand if child is active
  const childActive =
    hasChildren && item.children?.some((child) => pathname === child.href || pathname.startsWith(child.href))

  return (
    <li>
      {hasChildren ? (
        <div>
          {/* 父级菜单：左侧可点击跳转，右侧按钮展开子菜单 */}
          <div className={cn(
            "flex items-center rounded-xl transition-all duration-200",
            isExactActive
              ? "bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-md"
              : isActive || childActive
                ? "bg-blue-50 text-blue-600"
                : "text-gray-600 hover:bg-gray-100",
          )}>
            <Link
              href={item.href}
              className="flex-1 flex items-center gap-3 px-4 py-3 text-sm font-medium"
            >
              <item.icon className="h-5 w-5" />
              <span>{item.label}</span>
            </Link>
            <button
              onClick={(e) => {
                e.preventDefault()
                setIsOpen(!isOpen)
              }}
              className={cn(
                "px-3 py-3 rounded-r-xl transition-colors",
                isExactActive 
                  ? "hover:bg-white/10" 
                  : "hover:bg-gray-200"
              )}
              aria-label={isOpen ? "收起子菜单" : "展开子菜单"}
            >
              {isOpen || childActive ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
            </button>
          </div>
          {(isOpen || childActive) && (
            <ul className="mt-1 ml-4 space-y-1 border-l-2 border-gray-100 pl-4">
              {item.children?.map((child) => {
                const childIsActive = pathname === child.href
                return (
                  <li key={child.href}>
                    <Link
                      href={child.href}
                      className={cn(
                        "flex items-center gap-2 rounded-lg px-3 py-2 text-sm transition-all duration-200",
                        childIsActive
                          ? "bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-md"
                          : "text-gray-500 hover:bg-gray-100 hover:text-gray-900",
                      )}
                    >
                      <child.icon className="h-4 w-4" />
                      <span>{child.label}</span>
                    </Link>
                  </li>
                )
              })}
            </ul>
          )}
        </div>
      ) : (
        <Link
          href={item.href}
          aria-current={isActive ? "page" : undefined}
          className={cn(
            "flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-medium transition-all duration-200",
            isActive
              ? "bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-md"
              : "text-gray-600 hover:bg-gray-100 hover:text-gray-900",
          )}
        >
          <item.icon className="h-5 w-5" />
          <span>{item.label}</span>
        </Link>
      )}
    </li>
  )
}

export default function Sidebar() {
  return (
    <aside className="hidden md:flex flex-col w-64 shrink-0 border-r bg-white/80 backdrop-blur-md h-screen sticky top-0">
      <div className="p-6">
        <h2 className="text-2xl font-bold text-gray-900 mb-1">神射手</h2>
        <p className="text-sm text-gray-600">用户资产数字化平台</p>
      </div>
      <nav className="flex-1 px-4 pb-4 overflow-y-auto">
        <ul className="space-y-1">
          {NAV_ITEMS.map((item) => (
            <NavItemComponent key={item.href} item={item} />
          ))}
        </ul>
      </nav>
      <div className="p-4 border-t border-gray-100">
        <div className="flex items-center gap-3 px-2">
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center text-white text-sm font-bold">
            管
          </div>
          <div className="flex-1 min-w-0">
            <p className="text-sm font-medium text-gray-900 truncate">平台管理员</p>
            <p className="text-xs text-gray-500 truncate">admin@archer.com</p>
          </div>
        </div>
      </div>
    </aside>
  )
}