"use client";

import { useState } from "react";
import { Link } from "@heroui/react";
import {
  navCategories,
  navCategoryOrder,
  navCategoryLabels,
  type NavSubcategory,
} from "@/lib/shop/navCategories";

const primaryLinks = navCategoryOrder.map((key) => ({
  key,
  label: navCategoryLabels[key],
  href: `/shop/${navCategories[key].slug}`,
  hasDropdown: true,
}));

const highlightedLinks = [
  { label: "Special Offers", href: "/shop/sale" },
  { label: "Tips & Tricks", href: "/tips" },
];

function ChevronDown({ open }: { open?: boolean }) {
  return (
    <svg
      width="11"
      height="11"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}
    >
      <polyline points="6 9 12 15 18 9" />
    </svg>
  );
}

function NavDropdown({
  label,
  href,
  categorySlug,
  subcategories,
  isOpen,
  onOpen,
  onClose,
}: {
  label: string;
  href: string;
  categorySlug: string;
  subcategories: NavSubcategory[];
  isOpen: boolean;
  onOpen: () => void;
  onClose: () => void;
}) {
  const colCount =
    subcategories.length <= 6 ? 2 : subcategories.length <= 12 ? 3 : 4;

  return (
    <div className="relative" onMouseEnter={onOpen} onMouseLeave={onClose}>
      <button
        className={`flex items-center gap-1.5 rounded-lg px-4 py-3 text-sm font-medium transition-colors ${
          isOpen
            ? "bg-[#e8f7f6] text-[#236f6b]"
            : "text-[#3d5554] hover:bg-[#e8f7f6] hover:text-[#236f6b]"
        }`}
      >
        <span>{label}</span>
        <ChevronDown open={isOpen} />
      </button>

      <div
        className={`absolute left-0 top-full z-50 pt-1 transition-all duration-150 ${
          isOpen
            ? "pointer-events-auto visible translate-y-0 opacity-100"
            : "pointer-events-none invisible -translate-y-1 opacity-0"
        }`}
      >
        <div className="w-max rounded-xl border border-[#e8f7f6] bg-white px-5 pb-4 pt-5 shadow-xl">
          <div
            className="grid gap-x-5"
            style={{
              gridTemplateColumns: `repeat(${colCount}, max-content)`,
            }}
          >
            {subcategories.map((sub) => (
              <Link
                key={sub.slug}
                href={`/shop/${categorySlug}/${sub.slug}`}
                className="whitespace-nowrap rounded-md px-2.5 py-1.5 text-sm text-[#3d5554] no-underline transition-colors hover:bg-[#e8f7f6] hover:text-[#236f6b]"
              >
                {sub.name}
              </Link>
            ))}
          </div>

          <div className="mt-3.5 border-t border-[#e8f7f6] pt-3">
            <Link
              href={href}
              className="inline-flex items-center gap-1.5 text-sm font-medium text-[#236f6b] no-underline transition-colors hover:text-[#38a99f]"
            >
              Browse all {label}
              <Link.Icon />
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

export function BottomNav() {
  const [openMenu, setOpenMenu] = useState<string | null>(null);

  return (
    <nav className="relative w-full border-b border-[#e8f7f6] bg-white">
      <div className="mx-auto flex max-w-[1400px] items-center justify-between px-6">
        <ul className="flex items-center gap-1">
          {primaryLinks.map((link) => {
            const category = navCategories[link.key];
            const subcategories = category.subcategories;

            return (
              <li key={link.key}>
                <NavDropdown
                  label={link.label}
                  href={link.href}
                  categorySlug={category.slug}
                  subcategories={subcategories}
                  isOpen={openMenu === link.key}
                  onOpen={() => setOpenMenu(link.key)}
                  onClose={() => setOpenMenu(null)}
                />
              </li>
            );
          })}
        </ul>

        <ul className="flex items-center gap-1">
          {highlightedLinks.map((link) => (
            <li key={link.label}>
              <a
                href={link.href}
                className="flex items-center gap-1.5 rounded-lg px-4 py-3 text-sm font-medium text-[#f2705a] transition-colors hover:bg-[#fce0da]/50"
              >
                {link.label === "Special Offers" && (
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <polyline points="20 12 20 22 4 22 4 12" />
                    <rect x="2" y="7" width="20" height="5" />
                    <line x1="12" y1="22" x2="12" y2="7" />
                    <path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z" />
                    <path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z" />
                  </svg>
                )}
                {link.label === "Tips & Tricks" && (
                  <svg
                    width="14"
                    height="14"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="M9 18h6" />
                    <path d="M10 22h4" />
                    <path d="M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z" />
                  </svg>
                )}
                <span>{link.label}</span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </nav>
  );
}
