"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { LayoutDashboard, Target, Calendar, TrendingUp, Settings, FileText, Menu } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

const navigation = [
  { name: "儀表板", href: "/", icon: LayoutDashboard },
  { name: "KPI 管理", href: "/kpi", icon: Target },
  { name: "進度追蹤", href: "/progress", icon: TrendingUp },
  { name: "審查管理", href: "/reviews", icon: Calendar },
  { name: "報表分析", href: "/reports", icon: FileText },
  { name: "系統管理", href: "/admin", icon: Settings },
]

export function Navigation() {
  const pathname = usePathname()

  return (
    <>
      {/* Desktop Navigation */}
      <nav className="hidden lg:flex space-x-1 bg-white p-2 rounded-lg shadow-sm">
        {navigation.map((item) => {
          const isActive = pathname === item.href
          return (
            <Link key={item.name} href={item.href}>
              <Button
                variant={isActive ? "default" : "ghost"}
                size="sm"
                className={cn("flex items-center space-x-2", isActive && "bg-primary text-primary-foreground")}
              >
                <item.icon className="h-4 w-4" />
                <span className="hidden xl:inline">{item.name}</span>
              </Button>
            </Link>
          )
        })}
      </nav>

      {/* Mobile Navigation */}
      <div className="lg:hidden">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="outline" size="sm">
              <Menu className="h-4 w-4" />
              <span className="ml-2">選單</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-48">
            {navigation.map((item) => {
              const isActive = pathname === item.href
              return (
                <DropdownMenuItem key={item.name} asChild>
                  <Link href={item.href} className={cn("flex items-center space-x-2", isActive && "bg-accent")}>
                    <item.icon className="h-4 w-4" />
                    <span>{item.name}</span>
                  </Link>
                </DropdownMenuItem>
              )
            })}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </>
  )
}