"use client";

import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { CATEGORIES } from "@/data/gunbuilderParts";
import type { Category } from "@/types/gunbuilder";

type BuilderNavProps = {
  activeCategoryId?: string | null;
};

// Helper to group categories for the dropdowns
function groupCategories(group: "lower" | "upper" | "accessories"): Category[] {
  return CATEGORIES.filter((c) => c.group === group);
}

export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
  const searchParams = useSearchParams();

  const lower = groupCategories("lower");
  const upper = groupCategories("upper");
  const accessories = groupCategories("accessories");

  const currentCategory =
    activeCategoryId ?? searchParams.get("category") ?? undefined;

  const baseHref = "/builder";

  const renderDropdown = (label: string, items: Category[]) => {
    if (!items.length) return null;

    return (
      <div className="relative group">
        <button
          type="button"
          className={`inline-flex items-center gap-1 font-medium tracking-wide transition-colors uppercase text-[11px] ${
            items.some(cat => cat.id === currentCategory)
              ? "text-white"
              : "text-neutral-200 hover:text-white"
          }`}
        >
          {label}
          <span className="text-[9px]">▾</span>
        </button>

        <div className="invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-all absolute left-0 mt-2 rounded-md border border-neutral-800 bg-black/95 shadow-xl z-40 min-w-[220px]">
          <ul className="py-2 text-sm">
            {items.map((cat) => {
              const isActive = currentCategory === cat.id;
              return (
                <li key={cat.id}>
                  <Link
                    href={`${baseHref}/${cat.id}`}
                    className={[
                      "block w-full px-3 py-1.5 text-left text-sm transition-colors",
                      isActive
                        ? "bg-neutral-800 text-white"
                        : "text-neutral-300 hover:bg-neutral-800 hover:text-white",
                    ].join(" ")}
                  >
                    {cat.name}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    );
  };

  return (
    <div className="max-w-6xl mx-auto w-full">   {/* ← aligns with topnav */}
      <nav className="flex items-center gap-6 border-b border-neutral-900 px-6 py-3 text-sm bg-black/95 backdrop-blur-sm">
        {/* Primary builder link */}
        <Link
          href={baseHref}
          className="font-semibold text-neutral-100 hover:text-white tracking-[0.25em] uppercase text-[11px]"
        >
          Builder
        </Link>

        {renderDropdown("Lower Parts", lower)}
        {renderDropdown("Upper Parts", upper)}
        {renderDropdown("Accessories", accessories)}

        <Link
          href="/builds"
          className="font-medium text-neutral-300 hover:text-white tracking-[0.25em] uppercase text-[11px]"
        >
          Builds
        </Link>

        {/* Right → Current filter */}
        {currentCategory && (
          <div className="ml-auto flex items-center gap-2 text-neutral-400 text-xs">
            <span className="uppercase tracking-wide text-[10px]">Viewing</span>
            <span className="font-medium text-neutral-100">
              {CATEGORIES.find((c) => c.id === currentCategory)?.name ??
                currentCategory}
            </span>
            <Link
              href={baseHref}
              className="rounded border border-neutral-700 px-2 py-0.5 text-[10px] uppercase tracking-wide hover:bg-neutral-800 hover:text-white"
            >
              Clear
            </Link>
          </div>
        )}
      </nav>
    </div>
  );
}

export default BuilderNav;