"use client";

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Activity, LayoutDashboard, List, Search, Globe, Settings, TerminalSquare } from 'lucide-react';
import GlitchText from './GlitchText';
import { motion } from 'framer-motion';

const navItems = [
  { name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
  { name: 'Listings', href: '/listings', icon: List },
  { name: 'Targets', href: '/keywords', icon: Search },
  { name: 'Sites', href: '/sites', icon: Globe },
  { name: 'AI Log', href: '/ai-log', icon: TerminalSquare },
  { name: 'Settings', href: '/settings', icon: Settings },
];

export default function Navbar() {
  const pathname = usePathname();

  return (
    <header className="sticky top-0 z-40 w-full border-b border-border bg-background/80 backdrop-blur-md">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <Link href="/" className="flex items-center gap-2 group">
          <Activity className="h-6 w-6 text-primary group-hover:text-accent transition-colors" />
          <GlitchText text="BIDWRAITH" className="text-xl tracking-wider text-foreground" />
        </Link>
        <nav className="hidden md:flex gap-6">
          {navItems.map((item) => {
            const isActive = pathname.startsWith(item.href);
            return (
              <Link 
                key={item.name} 
                href={item.href}
                className={`flex items-center gap-2 text-sm font-medium transition-colors relative ${isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground'}`}
              >
                <item.icon className="h-4 w-4" />
                {item.name}
                {isActive && (
                  <motion.div
                    layoutId="navbar-indicator"
                    className="absolute -bottom-[21px] left-0 right-0 h-0.5 bg-primary shadow-[0_0_8px_rgba(0,255,136,0.8)]"
                    transition={{ type: 'spring', stiffness: 300, damping: 30 }}
                  />
                )}
              </Link>
            );
          })}
        </nav>
        <div className="flex items-center gap-4">
           <div className="hidden lg:flex items-center gap-2 text-xs font-mono text-primary/70">
             <span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(0,255,136,0.8)]"></span>
             SYSTEM_ONLINE
           </div>
        </div>
      </div>
    </header>
  );
}
