"use client";
import React, { useState, useEffect, useRef } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

type MenuItem = {
  label: string;
  slug: string;
  bcount: number;
};

export default function DropdownMenu() {
  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const pathname = usePathname(); // 👈 Get current route

  // Load local JSON menu
  useEffect(() => {
    const fetchMenu = async () => {
      const res = await fetch("/data/common/navLinkData.json");
      const data = await res.json();
      setMenuItems(data);
    };
    fetchMenu();
  }, []);

  // Close dropdown on outside click
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setIsOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <>
      <div className="flex w-full md:hidden">
        <div className="relative flex w-full flex-col" ref={menuRef}>
          <button
            onClick={() => setIsOpen((prev) => !prev)}
            className="mob-noise flex w-full items-center justify-center border-1 border-gray-950/25 bg-teal-100 p-3 align-middle text-sm font-medium tracking-wider uppercase"
          >
            Dashboard Menu
          </button>

          {isOpen && (
            <div className="absolute top-12 z-10 flex w-full flex-col border bg-white">
              <ul className="flex max-h-160 w-full flex-col gap-1 overflow-hidden overflow-y-auto p-5">
                {menuItems.map((item, index) => {
                  const isActive = pathname === item.slug;
                  return (
                    <li
                      key={index}
                      className="flex w-full flex-row items-center justify-between align-middle"
                    >
                      <Link
                        href={item.slug}
                        onClick={() => setIsOpen(false)} // <- CLOSE ON CLICK
                        className={`flex font-bogart capitalize w-full items-center justify-between px-4 py-2 align-middle hover:bg-gray-100 ${
                          isActive ? "bg-teal-100/50 font-medium" : ""
                        }`}
                      >
                        {item.label}
                        {item.bcount >= 1 && (
                          <span className="tex-xs/3 py-.25 flex items-center justify-center rounded-full border-1 border-dashed border-gray-950/50 px-2 align-middle font-mono font-medium text-gray-950">
                            {item.bcount}
                          </span>
                        )}
                      </Link>
                    </li>
                  );
                })}
              </ul>
            </div>
          )}
        </div>
      </div>
      <div className="hidden w-full md:flex">
        <div className="flex w-full flex-col bg-white p-5">
          <ul className="flex w-full flex-col gap-1">
            {menuItems.map((item, index) => {
              const isActive = pathname === item.slug;
              return (
                <li key={index}>
                  <Link
                    href={item.slug}
                    className={`flex w-full font-bogart capitalize items-center justify-between px-4 py-2 align-middle hover:bg-teal-100/50 ${
                      isActive ? "bg-teal-100/50 font-medium" : ""
                    }`}
                  >
                    {item.label}
                    {item.bcount >= 1 && (
                      <span className="tex-xs/3 py-.25 flex items-center justify-center rounded-full border-1 border-dashed border-gray-950/50 px-2 align-middle font-mono font-medium text-gray-950">
                        {item.bcount}
                      </span>
                    )}
                  </Link>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </>
  );
}