import { useState } from 'react';
import { Link } from 'react-router-dom';
import { Menu, X, Box, Activity, Layers, Clock, Server, Fuel } from 'lucide-react';
import { cn } from '../lib/utils';
import ThemeToggle from './ThemeToggle';
import SearchAutocomplete from './SearchAutocomplete';

export default function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const navLinks = [
    { to: '/', label: 'Home', icon: Activity },
    { to: '/blocks', label: 'Blocks', icon: Box },
    { to: '/mempool', label: 'Mempool', icon: Clock },
    { to: '/dag', label: 'DAG', icon: Layers },
    { to: '/gas', label: 'Gas', icon: Fuel },
    { to: '/network', label: 'Network', icon: Server },
  ];

  return (
    <header className="sticky top-0 z-50 bg-gray-950/95 backdrop-blur border-b border-gray-800">
      <div className="container mx-auto px-4 max-w-7xl">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <Link to="/" className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-synor-400 to-synor-600 flex items-center justify-center">
              <span className="text-white font-bold text-sm">S</span>
            </div>
            <span className="font-semibold text-lg hidden sm:block">
              Synor Explorer
            </span>
          </Link>

          {/* Desktop Nav */}
          <nav className="hidden md:flex items-center gap-1" aria-label="Main navigation">
            {navLinks.map(({ to, label, icon: Icon }) => (
              <Link
                key={to}
                to={to}
                className="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors"
              >
                <Icon size={18} />
                {label}
              </Link>
            ))}
          </nav>

          {/* Search with Autocomplete */}
          <div className="hidden sm:block flex-1 max-w-md mx-4">
            <SearchAutocomplete />
          </div>

          {/* Theme Toggle */}
          <div className="hidden sm:block">
            <ThemeToggle />
          </div>

          {/* Mobile Menu Button */}
          <button
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            className="md:hidden p-2 text-gray-400 hover:text-white"
            aria-label={isMenuOpen ? 'Close navigation menu' : 'Open navigation menu'}
            aria-expanded={isMenuOpen}
            aria-controls="mobile-nav-menu"
          >
            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

        {/* Mobile Menu */}
        <div
          id="mobile-nav-menu"
          className={cn(
            'md:hidden overflow-hidden transition-all duration-200',
            isMenuOpen ? 'max-h-80 pb-4' : 'max-h-0'
          )}
          aria-hidden={!isMenuOpen}
        >
          {/* Mobile Search */}
          <div className="mb-4">
            <SearchAutocomplete placeholder="Search..." />
          </div>

          {/* Mobile Theme Toggle */}
          <div className="mb-4 flex justify-center">
            <ThemeToggle />
          </div>

          {/* Mobile Nav Links */}
          <nav className="flex flex-col gap-1" aria-label="Mobile navigation">
            {navLinks.map(({ to, label, icon: Icon }) => (
              <Link
                key={to}
                to={to}
                onClick={() => setIsMenuOpen(false)}
                className="flex items-center gap-2 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
              >
                <Icon size={18} />
                {label}
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </header>
  );
}
