"use client";

import Link from "next/link";
import { useEffect, useState } from "react";
import { Heart, Menu, Search, ShoppingCart, User, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

type NavCategory = {
  id: string;
  name: string;
  slug: string;
  children?: { id: string; name: string; slug: string }[];
};

export function SiteHeader({ categories = [] }: { categories?: NavCategory[] }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [mega, setMega] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <header
        className={cn(
          "fixed inset-x-0 top-0 z-50 transition-all duration-300",
          scrolled ? "glass border-b border-white/5 py-3" : "bg-transparent py-5",
        )}
      >
        <div className="container-shell flex items-center justify-between gap-4">
          <div className="flex items-center gap-8">
            <Link href="/" className="font-[family-name:var(--font-space)] text-xl font-bold tracking-tight">
              305<span className="text-accent">Gaming</span>
            </Link>
            <nav className="hidden items-center gap-6 lg:flex">
              <div
                className="relative"
                onMouseEnter={() => setMega(true)}
                onMouseLeave={() => setMega(false)}
              >
                <button className="text-sm text-muted transition hover:text-text">Kategori</button>
                {mega ? (
                  <div className="absolute left-0 top-full pt-4">
                    <div className="grid w-[640px] grid-cols-3 gap-3 rounded-2xl border border-border bg-surface p-5 shadow-2xl">
                      {categories.map((cat) => (
                        <Link
                          key={cat.id}
                          href={`/category/${cat.slug}`}
                          className="rounded-xl p-3 transition hover:bg-white/5"
                        >
                          <p className="font-semibold">{cat.name}</p>
                          <p className="mt-1 text-xs text-muted line-clamp-2">
                            {cat.children?.map((c) => c.name).join(", ") || "Lihat semua produk"}
                          </p>
                        </Link>
                      ))}
                    </div>
                  </div>
                ) : null}
              </div>
              <Link href="/products" className="text-sm text-muted transition hover:text-text">
                Produk
              </Link>
              <Link href="/blog" className="text-sm text-muted transition hover:text-text">
                Artikel
              </Link>
              <Link href="/#faq" className="text-sm text-muted transition hover:text-text">
                FAQ
              </Link>
            </nav>
          </div>

          <div className="flex items-center gap-2">
            <button
              aria-label="Search"
              onClick={() => setSearchOpen(true)}
              className="rounded-xl p-2.5 text-muted transition hover:bg-white/5 hover:text-text"
            >
              <Search className="h-5 w-5" />
            </button>
            <Link href="/wishlist" className="hidden rounded-xl p-2.5 text-muted transition hover:bg-white/5 hover:text-text sm:inline-flex">
              <Heart className="h-5 w-5" />
            </Link>
            <Link href="/cart" className="rounded-xl p-2.5 text-muted transition hover:bg-white/5 hover:text-text">
              <ShoppingCart className="h-5 w-5" />
            </Link>
            <Link href="/login" className="hidden rounded-xl p-2.5 text-muted transition hover:bg-white/5 hover:text-text md:inline-flex">
              <User className="h-5 w-5" />
            </Link>
            <Button href="/products" size="sm" className="hidden md:inline-flex">
              Belanja
            </Button>
            <Link href="/admin/login" className="sr-only">
              Admin Login
            </Link>
            <button
              className="rounded-xl p-2.5 text-muted transition hover:bg-white/5 lg:hidden"
              onClick={() => setOpen((v) => !v)}
              aria-label="Menu"
            >
              {open ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
            </button>
          </div>
        </div>

        {open ? (
          <div className="container-shell mt-4 space-y-2 border-t border-white/5 pt-4 lg:hidden">
            {categories.map((cat) => (
              <Link key={cat.id} href={`/category/${cat.slug}`} className="block rounded-xl px-3 py-2 text-sm hover:bg-white/5" onClick={() => setOpen(false)}>
                {cat.name}
              </Link>
            ))}
            <Link href="/products" className="block rounded-xl px-3 py-2 text-sm hover:bg-white/5" onClick={() => setOpen(false)}>
              Semua Produk
            </Link>
            <Link href="/blog" className="block rounded-xl px-3 py-2 text-sm hover:bg-white/5" onClick={() => setOpen(false)}>
              Artikel
            </Link>
            <Link href="/admin/login" className="sr-only">
              Admin Login
            </Link>
          </div>
        ) : null}
      </header>

      {searchOpen ? (
        <div className="fixed inset-0 z-[60] bg-black/70 p-4 backdrop-blur-sm" onClick={() => setSearchOpen(false)}>
          <form
            action="/search"
            className="mx-auto mt-24 max-w-2xl"
            onClick={(e) => e.stopPropagation()}
          >
            <div className="flex items-center gap-3 rounded-2xl border border-border bg-surface p-3">
              <Search className="h-5 w-5 text-muted" />
              <input
                autoFocus
                name="q"
                placeholder="Cari produk, voucher, top up..."
                className="w-full bg-transparent text-sm outline-none placeholder:text-muted"
              />
              <Button type="submit" size="sm">
                Cari
              </Button>
            </div>
          </form>
        </div>
      ) : null}
    </>
  );
}