import { Link, useLocation } from '@tanstack/react-router';
import { Menu, Search, Settings, Gamepad2, Home, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface HeaderProps {
  onMenuToggle?: () => void;
}

const navigation = [
  { name: 'Dashboard', href: '/', icon: Home },
  { name: 'Juegos', href: '/games', icon: Gamepad2 },
  { name: 'Importar ROMs', href: '/import', icon: FileText },
  { name: 'Configuración', href: '/settings', icon: Settings },
];

export function Header({ onMenuToggle }: HeaderProps) {
  const location = useLocation();

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center">
        {/* Botón de menú para móviles */}
        <Button variant="ghost" size="sm" className="mr-4 md:hidden" onClick={onMenuToggle}>
          <Menu className="h-5 w-5" />
          <span className="sr-only">Toggle menu</span>
        </Button>

        {/* Logo y título */}
        <div className="mr-4 hidden md:flex">
          <Link to="/" className="mr-6 flex items-center space-x-2">
            <Gamepad2 className="h-6 w-6" />
            <span className="hidden font-bold sm:inline-block">Quasar</span>
          </Link>
        </div>

        {/* Navegación principal */}
        <nav className="flex items-center space-x-6 text-sm font-medium">
          {navigation.map((item) => {
            const Icon = item.icon;
            const isActive = location.pathname === item.href;

            return (
              <Link
                key={item.name}
                to={item.href}
                className={cn(
                  'transition-colors hover:text-foreground/80',
                  isActive ? 'text-foreground' : 'text-foreground/60'
                )}
              >
                <span className="flex items-center space-x-1">
                  <Icon className="h-4 w-4" />
                  <span>{item.name}</span>
                </span>
              </Link>
            );
          })}
        </nav>

        {/* Barra de búsqueda */}
        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
          <div className="w-full flex-1 md:w-auto md:flex-none">
            {/* Placeholder para barra de búsqueda */}
            <Button
              variant="outline"
              className="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
            >
              <Search className="mr-2 h-4 w-4" />
              Buscar juegos...
              <kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
                ⌘K
              </kbd>
            </Button>
          </div>
        </div>

        {/* Usuario y acciones */}
        <div className="flex items-center space-x-2">
          <Button variant="ghost" size="sm">
            <Settings className="h-4 w-4" />
            <span className="sr-only">Configuración</span>
          </Button>
        </div>
      </div>
    </header>
  );
}
