"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;
};
type GroupedMenu = {
  group: string;
  items: MenuItem[];
};

export default function DashboardMenuItem() {

  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);
  const [menuGroups, setMenuGroups] = useState<GroupedMenu[]>([]);
  const [isOpen, setIsOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const pathname = usePathname(); // 👈 Get current route

  // Load menu from API
  useEffect(() => {
    const fetchMenu = async () => {
      try {
        const response = await fetch('/api/menu/sidebar', {
          method: 'GET',
          credentials: 'include',
        });
        const data = await response.json();

        console.log('📊 API Response Status:', response.status);
        console.log('📊 Full Response:', data);
        console.log('📊 data.success:', data.success);
        console.log('📊 data.data:', data.data);
        console.log('📊 Type of data.data:', Array.isArray(data.data) ? 'Array' : typeof data.data);
        
        if (data.success && data.data) {
          console.log('✅ Setting menuGroups with:', data.data);
          setMenuGroups(data.data);
        } else {
          console.log('❌ Failed condition check - success:', data.success, '| has data:', !!data.data);
          console.log('❌ Error message:', data.message);
          // Set empty array if no data to prevent UI issues
          setMenuGroups([]);
        }
      } catch (error) {
        console.error('❌ Failed to fetch sidebar menu:', error);
        setMenuGroups([]);
      }
    };
    fetchMenu();
  }, []);

  // Debug: Log menuGroups changes
  useEffect(() => {
    console.log('🔄 menuGroups updated:', menuGroups);
    console.log('🔄 menuGroups length:', menuGroups.length);
  }, [menuGroups]);

  // 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-90 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">
                {menuGroups.map((group, gIdx) => (
                  <div key={gIdx} className="mb-2">
                    <p className="px-4 py-2 text-xs font-medium text-gray-950 uppercase">
                      {group.group}
                    </p>
                    {group.items.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)}
                            className={`font-bogart flex w-full items-center justify-between px-4 py-2 align-middle capitalize 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>
                      );
                    })}
                  </div>
                ))}
              </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">
            {menuGroups.map((group, gIdx) => (
              <div key={gIdx} className="mb-5">
                <p className="ml-2 py-2 text-sm font-semibold font-macropolo tracking-widest text-gray-950/75 uppercase border-t-1 border-gray-950/10">
                  {group.group}
                </p>
                {group.items.map((item, index) => {
                  const isActive = pathname === item.slug;
                  return (
                    <li key={index}>
                      <Link
                        href={item.slug}
                        className={`text-sm -tracking-wider font-medium flex w-full items-center justify-between px-4 py-2 align-middle capitalize hover:bg-teal-100/50 ${
                          isActive ? "bg-teal-100/50 font-medium" : ""
                        }`}
                      >
                        {item.label}
                        {item.bcount >= 1 && (
                          <span className="text-[11px]/4 py-.25 flex items-center justify-center rounded-full border-1 border-dashed border-gray-950/50 px-2 align-middle font-medium text-gray-950">
                            {item.bcount}
                          </span>
                        )}
                      </Link>
                    </li>
                  );
                })}
              </div>
            ))}
          </ul>
        </div>
      </div>
    </>
  );
}