"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { useCart } from "@/components/cart/CartContext";
import { siteConfig } from "@/lib/config";
import { CategoryIcon } from "@/components/ui/CategoryIcon";
import { ThemeToggle } from "./ThemeToggle";
import { Logo } from "./Logo";

type Cat = { name: string; slug: string; icon: string | null };
type SessionInfo = { name: string; role: string } | null;

export function HeaderClient({
  categories,
  user,
}: {
  categories: Cat[];
  user: SessionInfo;
}) {
  const router = useRouter();
  const { count, isReady } = useCart();
  const [query, setQuery] = useState("");
  const [menuOpen, setMenuOpen] = useState(false);

  function submitSearch(e: React.FormEvent) {
    e.preventDefault();
    const q = query.trim();
    router.push(q ? `/products?q=${encodeURIComponent(q)}` : "/products");
    setMenuOpen(false);
  }

  return (
    <header className="no-print sticky top-0 z-40 border-b border-slate-200 bg-white/80 backdrop-blur-xl dark:border-line">
      {/* Announcement bar */}
      <div className="bg-brand-gradient text-white">
        <div className="mx-auto flex max-w-7xl items-center justify-between gap-2 px-4 py-1.5 text-xs">
          <span className="truncate">
            🛡 Tested devices • Seller warranty • Cash on delivery
          </span>
          <a href={`tel:${siteConfig.phone}`} className="hidden sm:inline hover:underline">
            📞 {siteConfig.phone}
          </a>
        </div>
      </div>

      {/* Main bar */}
      <div className="mx-auto flex max-w-7xl items-center gap-3 px-4 py-3">
        <button
          className="md:hidden -ml-1 rounded p-1.5 text-slate-600 hover:bg-slate-100"
          aria-label="Toggle menu"
          onClick={() => setMenuOpen((v) => !v)}
        >
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M3 6h18M3 12h18M3 18h18" />
          </svg>
        </button>

        <Link href="/" className="group flex shrink-0 items-center" aria-label={siteConfig.name}>
          <Logo className="h-6 w-auto text-content transition group-hover:scale-[1.03] sm:h-7" />
        </Link>

        {/* Search */}
        <form onSubmit={submitSearch} className="ml-1 flex flex-1 md:ml-4">
          <div className="flex w-full items-center rounded-lg border border-slate-300 bg-slate-50 focus-within:border-brand-500 focus-within:bg-white">
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Search laptops, RAM, monitors…"
              className="w-full bg-transparent px-3 py-2 text-sm outline-none"
              aria-label="Search products"
            />
            <button type="submit" className="px-3 text-slate-500 hover:text-brand-600" aria-label="Search">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="11" cy="11" r="7" />
                <path d="m21 21-4.3-4.3" />
              </svg>
            </button>
          </div>
        </form>

        {/* Account + cart */}
        <div className="flex shrink-0 items-center gap-1">
          <ThemeToggle className="hidden sm:grid" />
          {user ? (
            <Link
              href={user.role === "ADMIN" ? "/admin" : "/account"}
              className="hidden rounded-lg px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 sm:block"
            >
              {user.role === "ADMIN" ? "Admin" : "Account"}
            </Link>
          ) : (
            <Link
              href="/login"
              className="hidden rounded-lg px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-100 sm:block"
            >
              Login
            </Link>
          )}

          <Link
            href="/cart"
            className="relative rounded-lg p-2 text-slate-700 hover:bg-slate-100"
            aria-label="Cart"
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="9" cy="21" r="1" />
              <circle cx="20" cy="21" r="1" />
              <path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6" />
            </svg>
            {isReady && count > 0 ? (
              <span className="absolute -right-0.5 -top-0.5 grid h-5 min-w-5 place-items-center rounded-full bg-brand-600 px-1 text-xs font-bold text-white">
                {count}
              </span>
            ) : null}
          </Link>
        </div>
      </div>

      {/* Category nav (desktop) */}
      <nav className="hidden border-t border-slate-100 md:block">
        <div className="mx-auto flex max-w-7xl items-center gap-1 overflow-x-auto px-4">
          <Link
            href="/products"
            className="whitespace-nowrap px-3 py-2.5 text-sm font-medium text-slate-600 hover:text-brand-700"
          >
            All Products
          </Link>
          {categories.map((c) => (
            <Link
              key={c.slug}
              href={`/category/${c.slug}`}
              className="inline-flex items-center gap-1.5 whitespace-nowrap px-3 py-2.5 text-sm font-medium text-slate-600 transition hover:text-brand-600 dark:text-muted dark:hover:text-brand-400"
            >
              <CategoryIcon slug={c.slug} emoji={c.icon} className="h-4 w-4" />
              {c.name}
            </Link>
          ))}
          <Link
            href="/repair"
            className="ml-auto whitespace-nowrap px-3 py-2.5 text-sm font-semibold text-brand-600 hover:text-brand-700"
          >
            🛠 Book Repair
          </Link>
          <Link
            href="/sell"
            className="whitespace-nowrap px-3 py-2.5 text-sm font-semibold text-accent-600 hover:text-accent-500"
          >
            💰 Sell your device
          </Link>
        </div>
      </nav>

      {/* Mobile menu */}
      {menuOpen ? (
        <div className="border-t border-slate-100 bg-white md:hidden">
          <div className="mx-auto max-w-7xl px-4 py-2">
            <Link
              href="/products"
              onClick={() => setMenuOpen(false)}
              className="block rounded px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
            >
              All Products
            </Link>
            {categories.map((c) => (
              <Link
                key={c.slug}
                href={`/category/${c.slug}`}
                onClick={() => setMenuOpen(false)}
                className="flex items-center gap-2 rounded px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
              >
                <CategoryIcon slug={c.slug} emoji={c.icon} className="h-4 w-4 text-brand-500" />
                {c.name}
              </Link>
            ))}
            <Link
              href="/repair"
              onClick={() => setMenuOpen(false)}
              className="block rounded px-2 py-2 text-sm font-semibold text-brand-600 hover:bg-slate-50"
            >
              🛠 Book a repair
            </Link>
            <Link
              href="/sell"
              onClick={() => setMenuOpen(false)}
              className="block rounded px-2 py-2 text-sm font-semibold text-accent-600 hover:bg-slate-50"
            >
              💰 Sell your device
            </Link>
            <div className="my-2 border-t border-slate-100" />
            {user ? (
              <Link
                href={user.role === "ADMIN" ? "/admin" : "/account"}
                onClick={() => setMenuOpen(false)}
                className="block rounded px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
              >
                {user.role === "ADMIN" ? "Admin panel" : "My account"}
              </Link>
            ) : (
              <Link
                href="/login"
                onClick={() => setMenuOpen(false)}
                className="block rounded px-2 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
              >
                Login / Register
              </Link>
            )}
            <div className="mt-1 flex items-center justify-between rounded px-2 py-2 text-sm font-medium text-slate-700">
              <span>Dark mode</span>
              <ThemeToggle />
            </div>
          </div>
        </div>
      ) : null}
    </header>
  );
}