"use client";

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import { useCart } from "@/lib/cart-context";
import { categories } from "@/lib/categories";
import { SearchBar } from "./SearchBar";
import { MobileMenu } from "./MobileMenu";
import { CartDrawer } from "./CartDrawer";
import { TopBar } from "./TopBar";

export function Header() {
  const { itemCount, openCart } = useCart();
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <>
      <TopBar />
      <header className="sticky top-0 z-40 border-b border-black/[0.06] bg-white/95 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center gap-3 px-4 py-3 sm:px-6 lg:gap-6 lg:px-8">
          <button
            aria-label="Open menu"
            onClick={() => setMenuOpen(true)}
            className="rounded-lg p-1.5 text-brand-ink hover:bg-black/5 lg:hidden"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
              <path strokeLinecap="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>

          <Link href="/" className="flex shrink-0 items-center">
            <Image
              src="/images/brand/logo-horizontal.png"
              alt="Shopp Gadgets"
              width={148}
              height={38}
              priority
              className="h-8 w-auto sm:h-9"
            />
          </Link>

          <div className="hidden flex-1 lg:block">
            <SearchBar />
          </div>

          <button
            aria-label={`Open cart, ${itemCount} item${itemCount === 1 ? "" : "s"}`}
            onClick={openCart}
            className="relative ml-auto rounded-lg p-2 text-brand-ink hover:bg-black/5"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M3 3h1.6l1.2 12.2A2 2 0 0 0 7.8 17h9.4a2 2 0 0 0 2-1.8L20.4 7H6" />
              <circle cx="9" cy="20" r="1.4" fill="currentColor" stroke="none" />
              <circle cx="17" cy="20" r="1.4" fill="currentColor" stroke="none" />
            </svg>
            {itemCount > 0 && (
              <span className="absolute right-0.5 top-0.5 flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-brand-orange px-1 text-[10px] font-bold text-white">
                {itemCount}
              </span>
            )}
          </button>
        </div>

        <div className="px-4 pb-3 lg:hidden sm:px-6">
          <SearchBar variant="mobile" />
        </div>

        <nav className="hidden border-t border-black/[0.05] lg:block">
          <div className="mx-auto flex max-w-7xl items-center gap-6 px-4 py-2.5 sm:px-6 lg:px-8">
            {categories.map((c) => (
              <Link
                key={c.slug}
                href={`/category/${c.slug}`}
                className="text-sm font-medium text-brand-ink/80 transition hover:text-brand-orange"
              >
                {c.name}
              </Link>
            ))}
            <Link
              href="/track-order"
              className="ml-auto text-sm font-medium text-brand-ink/80 transition hover:text-brand-orange"
            >
              Track order
            </Link>
          </div>
        </nav>
      </header>

      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <CartDrawer />
    </>
  );
}