"use client"

import { X, LayoutDashboard, Database, Tags, LineChart, Brain, Package, Monitor, ChevronRight } from "lucide-react"
import { cn } from "@/lib/utils"
import Link from "next/link"
import { usePathname } from "next/navigation"

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

const NAV_ITEMS = [
  { href: "/", label: "概览", icon: LayoutDashboard },
  { href: "/data-governance", label: "数据治理", icon: Database },
  { href: "/tag-portrait", label: "标签画像", icon: Tags },
  { href: "/value-model", label: "价值模型", icon: LineChart },
  { href: "/ai-insight", label: "AI洞察", icon: Brain },
  { href: "/data-asset", label: "数据资产", icon: Package },
  { href: "/monitoring", label: "系统监控", icon: Monitor },
]

export default function MobileSidebar({ isOpen, onClose }: MobileSidebarProps) {
  const pathname = usePathname()

  return (
    <div
      className={cn(
        "fixed inset-0 z-40 transition-transform duration-300 md:hidden",
        isOpen ? "translate-x-0" : "translate-x-full",
      )}
      aria-hidden={!isOpen}
    >
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />

      {/* Drawer */}
      <aside className="relative ml-auto h-full w-64 bg-white shadow-lg">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b">
          <div>
            <h2 className="text-lg font-bold text-gray-900">神射手</h2>
            <p className="text-xs text-gray-500">私域银行数据中台</p>
          </div>
          <button onClick={onClose} aria-label="Close menu" className="rounded p-1 hover:bg-gray-100">
            <X className="h-5 w-5" />
          </button>
        </div>

        {/* Navigation links */}
        <nav className="flex flex-col gap-1 p-4">
          {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
            const active = pathname === href || (href !== "/" && pathname.startsWith(href))
            return (
              <Link
                key={href}
                href={href}
                className={cn(
                  "flex items-center justify-between rounded-lg px-3 py-3 text-sm transition-colors",
                  active ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-100",
                )}
                onClick={onClose}
              >
                <div className="flex items-center gap-3">
                  <Icon className="h-5 w-5" />
                  <span>{label}</span>
                </div>
                <ChevronRight className="h-4 w-4 text-gray-400" />
              </Link>
            )
          })}
        </nav>
      </aside>
    </div>
  )
}