"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { site } from "@/lib/site";
import { useCurrency, type Currency } from "@/lib/currency";

const navLinks = [
  { href: "/", label: "Home" },
  { href: "/tools/", label: "Single Tools" },
  { href: "/private-tools/", label: "Private Tools" },
  { href: "/packages/", label: "Packages" },
  { href: "/tool-limitations/", label: "Tools Limitation" },
];

const currencies: { code: Currency; label: string }[] = [
  { code: "USD", label: "$ USD" },
  { code: "INR", label: "₹ INR" },
  { code: "BDT", label: "৳ BDT" },
];

export default function Header() {
  const pathname = usePathname();
  const [mobileOpen, setMobileOpen] = useState(false);
  const [currencyOpen, setCurrencyOpen] = useState(false);
  const { currency, setCurrency } = useCurrency();
  const currencyRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    function onClick(e: MouseEvent) {
      if (currencyRef.current && !currencyRef.current.contains(e.target as Node)) {
        setCurrencyOpen(false);
      }
    }
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, []);

  const isActive = (href: string) =>
    href === "/" ? pathname === "/" : pathname.startsWith(href.replace(/\/$/, ""));

  return (
    <header className="sticky top-0 z-50 border-b border-slate-100 bg-white/90 backdrop-blur-md">
      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
        <Link href="/" className="flex shrink-0 items-center" aria-label={site.shortName}>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={site.logo} alt={`${site.shortName} — Best Group Buy SEO Tools Provider`} className="w-36 md:w-44" />
        </Link>

        <nav className="hidden items-center gap-1 lg:flex">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              className={`rounded-lg px-3 py-2 text-sm font-medium transition-colors ${
                isActive(link.href)
                  ? "text-brand-600"
                  : "text-slate-600 hover:bg-slate-50 hover:text-slate-900"
              }`}
            >
              {link.label}
            </Link>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <div className="relative hidden sm:block" ref={currencyRef}>
            <button
              onClick={() => setCurrencyOpen((v) => !v)}
              className="flex items-center gap-1 rounded-lg border border-slate-200 px-3 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:bg-slate-50"
            >
              {currencies.find((c) => c.code === currency)?.label}
              <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
              </svg>
            </button>
            {currencyOpen && (
              <div className="absolute right-0 top-full mt-2 w-28 overflow-hidden rounded-xl border border-slate-100 bg-white shadow-lg">
                {currencies.map((c) => (
                  <button
                    key={c.code}
                    onClick={() => {
                      setCurrency(c.code);
                      setCurrencyOpen(false);
                    }}
                    className={`block w-full px-4 py-2 text-left text-sm transition-colors hover:bg-slate-50 ${
                      c.code === currency ? "font-semibold text-brand-600" : "text-slate-600"
                    }`}
                  >
                    {c.label}
                  </button>
                ))}
              </div>
            )}
          </div>

          <Link
            href="/login/"
            className="hidden rounded-lg px-3 py-1.5 text-sm font-semibold text-slate-700 transition-colors hover:text-brand-600 md:block"
          >
            Login
          </Link>
          <Link
            href="/signup/"
            className="hidden rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-brand-700 md:block"
          >
            Sign Up
          </Link>

          <button
            onClick={() => setMobileOpen((v) => !v)}
            className="rounded-lg p-2 text-slate-600 hover:bg-slate-50 lg:hidden"
            aria-label="Toggle menu"
          >
            {mobileOpen ? (
              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            ) : (
              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            )}
          </button>
        </div>
      </div>

      {mobileOpen && (
        <nav className="border-t border-slate-100 bg-white px-4 py-3 lg:hidden">
          {navLinks.map((link) => (
            <Link
              key={link.href}
              href={link.href}
              onClick={() => setMobileOpen(false)}
              className={`block rounded-lg px-3 py-2.5 text-sm font-medium ${
                isActive(link.href) ? "bg-brand-50 text-brand-600" : "text-slate-600 hover:bg-slate-50"
              }`}
            >
              {link.label}
            </Link>
          ))}
          <div className="mt-3 flex items-center gap-2 border-t border-slate-100 pt-3">
            {currencies.map((c) => (
              <button
                key={c.code}
                onClick={() => setCurrency(c.code)}
                className={`rounded-lg border px-3 py-1.5 text-sm ${
                  c.code === currency
                    ? "border-brand-600 font-semibold text-brand-600"
                    : "border-slate-200 text-slate-600"
                }`}
              >
                {c.label}
              </button>
            ))}
          </div>
          <div className="mt-3 flex gap-2">
            <Link
              href="/login/"
              onClick={() => setMobileOpen(false)}
              className="flex-1 rounded-lg border border-slate-200 px-4 py-2 text-center text-sm font-semibold text-slate-700"
            >
              Login
            </Link>
            <Link
              href="/signup/"
              onClick={() => setMobileOpen(false)}
              className="flex-1 rounded-lg bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white"
            >
              Sign Up
            </Link>
          </div>
        </nav>
      )}
    </header>
  );
}