import { useState, useEffect } from 'react';
import { Search, Menu, X } from 'lucide-react';

const navLinks = [
  { href: '/', label: 'Trang chủ' },
  { href: '/danh-sach/phim-le', label: 'Phim Lẻ' },
  { href: '/danh-sach/phim-bo', label: 'Phim Bộ' },
  { href: '/danh-sach/hoat-hinh', label: 'Hoạt hình' },
];

export default function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [query, setQuery] = useState('');
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const handleSearch = (e) => {
    e.preventDefault();
    if (query.trim()) {
      window.location.href = `/tim-kiem?q=${encodeURIComponent(query.trim())}`;
    }
  };

  if (!mounted) {
    return (
      <header className="fixed top-0 left-0 right-0 z-50 bg-black/90 opacity-0">
        <div className="mx-auto max-w-[1400px] px-4 py-2.5">
          <div className="text-2xl font-black text-white">T<span className="text-primary">PHIM</span>X</div>
        </div>
      </header>
    );
  }

  return (
    <header
      suppressHydrationWarning
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${scrolled ? 'glass bg-black/70 shadow-2xl' : 'bg-gradient-to-b from-black/95 to-transparent'}`}
    >
      {/* Row 1: Logo + Search + Auth */}
      <div suppressHydrationWarning className="mx-auto flex max-w-[1400px] items-center justify-between px-4 lg:px-6 py-2.5">
        <a href="/" className="flex items-center shrink-0 transition-transform hover:scale-[1.02] active:scale-95">
          <div className="h-9 md:h-10 w-auto overflow-hidden">
            <img src="/logo-full.png" className="h-full w-full object-contain" alt="TPHIMX" />
          </div>
        </a>

        <form onSubmit={handleSearch} className="hidden md:flex items-center flex-1 max-w-md mx-6 rounded-lg bg-white/[0.06] border border-white/[0.06] px-4 py-2 focus-within:bg-white/10 focus-within:border-primary/30 transition-all">
          <Search size={12} className="text-gray-500 mr-3 shrink-0" />
          <input
            type="text"
            placeholder="Tìm kiếm phim, diễn viên..."
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            className="flex-1 bg-transparent text-xs font-medium text-white outline-none placeholder:text-gray-500"
          />
        </form>

        <div suppressHydrationWarning className="flex items-center gap-2 shrink-0">
          <button onClick={() => setMenuOpen(!menuOpen)} className="flex h-10 w-10 items-center justify-center rounded-lg bg-white/5 text-white transition-all hover:bg-primary hover:text-dark md:hidden">
            {menuOpen ? <X size={18} /> : <Menu size={18} />}
          </button>
        </div>
      </div>

      {/* Row 2: Nav Bar */}
      <nav suppressHydrationWarning className={`hidden md:block border-t border-white/[0.04] ${scrolled ? 'bg-transparent' : 'bg-black/20'}`}>
        <div className="mx-auto max-w-[1400px] flex items-center gap-0.5 px-4 lg:px-6 py-0 text-[11px] font-bold">
          {navLinks.map((link) => (
            <a key={link.href} href={link.href} className="px-4 py-2.5 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all whitespace-nowrap">
              {link.label}
            </a>
          ))}
          <a href="/dien-vien" className="px-4 py-2.5 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all whitespace-nowrap">Diễn viên</a>
          <a href="/lich-chieu" className="px-4 py-2.5 text-gray-400 hover:text-white hover:bg-white/5 rounded-lg transition-all whitespace-nowrap">Lịch chiếu</a>
        </div>
      </nav>

      {/* Mobile Menu */}
      {menuOpen && (
        <div suppressHydrationWarning className="glass flex flex-col border-t border-white/5 bg-black/95 p-4 md:hidden">
          {navLinks.map((link) => (
            <a key={link.href} href={link.href} className="flex items-center justify-between rounded-xl px-5 py-4 text-xs font-bold text-gray-300 transition-all active:scale-95 active:bg-primary active:text-dark" onClick={() => setMenuOpen(false)}>
              {link.label}
              <i className="fas fa-chevron-right text-[9px] opacity-30"></i>
            </a>
          ))}
          <a href="/dien-vien" className="flex items-center justify-between rounded-xl px-5 py-4 text-xs font-bold text-gray-300 transition-all" onClick={() => setMenuOpen(false)}>Diễn viên</a>
          <a href="/lich-chieu" className="flex items-center justify-between rounded-xl px-5 py-4 text-xs font-bold text-gray-300 transition-all" onClick={() => setMenuOpen(false)}>Lịch chiếu</a>
        </div>
      )}
    </header>
  );
}