import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { cn } from '@/lib/utils';
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"

export function Header() {
  const location = useLocation();

  return (
    <header className="border-b bg-background sticky top-0 z-50 w-full border-border/40 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <div className="flex items-center gap-6">
          <Link to="/" className="flex items-center space-x-2">
            <span className="text-lg font-bold tracking-tight">FA Platform</span>
          </Link>
          <nav className="flex items-center gap-4 text-sm font-medium">
            <Link
              to="/"
              className={cn(
                "transition-colors hover:text-foreground/80",
                location.pathname === "/" ? "text-foreground" : "text-foreground/60"
              )}
            >
              首页
            </Link>
            <NavigationMenu>
              <NavigationMenuList>
                <NavigationMenuItem>
                  <NavigationMenuTrigger className="h-auto p-0 text-sm font-medium text-foreground/60 bg-transparent hover:bg-transparent hover:text-foreground/80 data-[state=open]:bg-transparent data-[active]:bg-transparent focus:bg-transparent">
                     历史报告
                  </NavigationMenuTrigger>
                  <NavigationMenuContent>
                    <div className="grid gap-3 p-6 w-[400px]">
                         <div className="text-sm font-medium leading-none">最近的分析</div>
                         <p className="text-sm text-muted-foreground mt-2">暂无历史记录 (Mock)</p>
                    </div>
                  </NavigationMenuContent>
                </NavigationMenuItem>
              </NavigationMenuList>
            </NavigationMenu>
            <Link
              to="/docs"
              className={cn(
                "transition-colors hover:text-foreground/80",
                location.pathname.startsWith("/docs") ? "text-foreground" : "text-foreground/60"
              )}
            >
              文档
            </Link>
            <Link
              to="/config"
              className={cn(
                "transition-colors hover:text-foreground/80",
                location.pathname.startsWith("/config") ? "text-foreground" : "text-foreground/60"
              )}
            >
              配置
            </Link>
          </nav>
        </div>
        <div className="flex items-center gap-2">
          {/* User profile or system status could go here */}
        </div>
      </div>
    </header>
  );
}

