"use client";
import Link from "next/link";
import { useState } from "react";
import { Menu, X, Search, Globe2, ChevronDown } from "lucide-react";
import { CONTINENTS, CATEGORIES } from "@/lib/continents";

export default function Header() {
  const [mobileOpen, setMobileOpen]     = useState(false);
  const [megaOpen,   setMegaOpen]       = useState<string | null>(null);
  const [searchOpen, setSearchOpen]     = useState(false);
  const [searchQuery, setSearchQuery]   = useState("");

  return (
    <header className="sticky top-0 z-50 bg-navy-900/95 backdrop-blur-md border-b border-white/10">

      {/* ── Top bar ───────────────────────────────────────── */}
      <div className="border-b border-white/5">
        <div className="max-w-screen-xl mx-auto px-4 h-8 flex items-center justify-between">
          <div className="flex items-center gap-4 text-xs text-gray-500">
            <span>{new Date().toLocaleDateString("en-US", { weekday:"long", year:"numeric", month:"long", day:"numeric" })}</span>
          </div>
          <div className="flex items-center gap-3 text-xs text-gray-400">
            {CATEGORIES.map(c => (
              <Link key={c.slug} href={`/category/${c.slug}`}
                className="hover:text-white transition-colors hidden sm:block">
                {c.name}
              </Link>
            ))}
          </div>
        </div>
      </div>

      {/* ── Main header ───────────────────────────────────── */}
      <div className="max-w-screen-xl mx-auto px-4">
        <div className="flex items-center justify-between h-16 gap-6">

          {/* Logo */}
          <Link href="/" className="shrink-0 flex items-center gap-2">
            <Globe2 className="w-7 h-7 text-brand-500" />
            <span className="text-white font-display font-bold text-xl tracking-tight">
              Mega<span className="text-brand-500">Blog</span>
            </span>
          </Link>

          {/* Desktop nav — continents */}
          <nav className="hidden lg:flex items-center gap-1 flex-1">
            {CONTINENTS.map(continent => (
              <div key={continent.slug} className="relative"
                onMouseEnter={() => setMegaOpen(continent.slug)}
                onMouseLeave={() => setMegaOpen(null)}>
                <button className={`flex items-center gap-1 px-3 py-2 rounded-lg text-sm font-medium transition-colors
                  ${megaOpen === continent.slug ? "text-white bg-white/10" : "text-gray-300 hover:text-white hover:bg-white/5"}`}>
                  <span>{continent.emoji}</span>
                  <span>{continent.name}</span>
                  <ChevronDown className={`w-3.5 h-3.5 transition-transform ${megaOpen === continent.slug ? "rotate-180" : ""}`} />
                </button>

                {/* Mega dropdown */}
                {megaOpen === continent.slug && (
                  <div className="absolute top-full left-0 pt-2 z-50 animate-fadeIn">
                    <div className="bg-navy-900 border border-white/10 rounded-2xl shadow-2xl p-4 min-w-[280px]">
                      <p className="text-xs text-gray-500 uppercase tracking-wider font-semibold mb-3 px-2">
                        {continent.emoji} {continent.name}
                      </p>
                      <div className="grid grid-cols-1 gap-0.5">
                        {continent.countries.map(country => (
                          <div key={country.slug}>
                            <Link href={`/${continent.slug}/${country.slug}`}
                              className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-white/10 transition-colors group">
                              <span className="text-base">{country.flag}</span>
                              <span className="text-sm text-gray-200 font-medium group-hover:text-white">{country.name}</span>
                              <ChevronDown className="w-3 h-3 text-gray-500 ml-auto -rotate-90" />
                            </Link>
                            {/* Category sub-items */}
                            <div className="ml-9 grid grid-cols-2 gap-0.5 mb-1">
                              {CATEGORIES.map(cat => (
                                <Link key={cat.slug}
                                  href={`/${continent.slug}/${country.slug}/${cat.slug}`}
                                  className={`text-xs px-2 py-1 rounded-md transition-colors ${cat.color} hover:bg-white/10`}>
                                  {cat.name}
                                </Link>
                              ))}
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </nav>

          {/* Search + mobile toggle */}
          <div className="flex items-center gap-2">
            {searchOpen ? (
              <div className="flex items-center gap-2 bg-white/10 rounded-xl px-3 py-1.5 border border-white/20">
                <Search className="w-4 h-4 text-gray-400" />
                <input autoFocus value={searchQuery} onChange={e => setSearchQuery(e.target.value)}
                  onKeyDown={e => { if (e.key === "Enter" && searchQuery) window.location.href = `/search?q=${searchQuery}`; }}
                  placeholder="Search articles..."
                  className="bg-transparent text-sm text-white placeholder-gray-500 outline-none w-44" />
                <button onClick={() => setSearchOpen(false)}>
                  <X className="w-4 h-4 text-gray-400 hover:text-white" />
                </button>
              </div>
            ) : (
              <button onClick={() => setSearchOpen(true)}
                className="p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors">
                <Search className="w-5 h-5" />
              </button>
            )}
            <button onClick={() => setMobileOpen(!mobileOpen)}
              className="lg:hidden p-2 text-gray-400 hover:text-white hover:bg-white/10 rounded-lg transition-colors">
              {mobileOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
            </button>
          </div>
        </div>
      </div>

      {/* ── Mobile menu ───────────────────────────────────── */}
      {mobileOpen && (
        <div className="lg:hidden border-t border-white/10 bg-navy-900 max-h-[80vh] overflow-y-auto">
          {CONTINENTS.map(continent => (
            <div key={continent.slug} className="border-b border-white/5">
              <button onClick={() => setMegaOpen(megaOpen === continent.slug ? null : continent.slug)}
                className="w-full flex items-center justify-between px-4 py-3 text-white font-medium">
                <span>{continent.emoji} {continent.name}</span>
                <ChevronDown className={`w-4 h-4 transition-transform ${megaOpen === continent.slug ? "rotate-180" : ""}`} />
              </button>
              {megaOpen === continent.slug && (
                <div className="bg-black/20 pb-2">
                  {continent.countries.map(country => (
                    <div key={country.slug} className="px-6 py-1">
                      <Link href={`/${continent.slug}/${country.slug}`}
                        onClick={() => setMobileOpen(false)}
                        className="flex items-center gap-2 py-2 text-sm text-gray-300 font-medium">
                        <span>{country.flag}</span> {country.name}
                      </Link>
                      <div className="flex flex-wrap gap-2 ml-6 mb-2">
                        {CATEGORIES.map(cat => (
                          <Link key={cat.slug}
                            href={`/${continent.slug}/${country.slug}/${cat.slug}`}
                            onClick={() => setMobileOpen(false)}
                            className={`text-xs px-2 py-1 rounded-full bg-white/5 ${cat.color}`}>
                            {cat.name}
                          </Link>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      )}
    </header>
  );
}
