"use client";

import { useState, useCallback, useMemo } from "react";
import Link from "next/link";
import { GiHamburgerMenu } from "react-icons/gi";
import { IoArrowBack } from "react-icons/io5";

// Type definitions
type NavItem = {
  title: string;
  icon: string;
  href?: string;
  subItems?: NavItem[];
};

type CategoryViewProps = {
  category: NavItem;
  onBack: () => void;
  onSelect?: (category: NavItem) => void;
  level?: number;
};

type MainMenuProps = {
  items: NavItem[];
  onCategorySelect: (category: NavItem) => void;
};

// Constants for navigation items (unchanged)
const NAV_ITEMS: NavItem[] = [
  // ... unchanged content from previous definition
];

const CategoryView = ({ category, onBack, onSelect, level = 1 }: CategoryViewProps) => {
  const hasSubItems = category.subItems && category.subItems.length > 0;

  return (
    <>
      {level >= 1 && (
        <div className="pt-3 pb-3 pl-2 mt-12 border-b-2 border-gray-200 hover:bg-gray-200 rounded-md">
          <button
            className="flex items-center"
            onClick={onBack}
            aria-label="Return to previous menu"
          >
            <IoArrowBack className="w-4 h-4 mr-1" />
            <span className="font-[600] text-[16px] text-gray-800">
              {level === 1 ? "Main Menu" : "Back"}
            </span>
          </button>
        </div>
      )}

      <h2 className="text-[18px] font-[700] mb-3 text-gray-800 pt-3">{category.title}</h2>

      <ul className="space-y-2">
        {category.subItems?.map((sub) => (
          <li key={`${sub.title}-${sub.href}`}>
            {sub.subItems ? (
              <button
                onClick={() => onSelect?.(sub)}
                className="w-full flex justify-between items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 text-[16px] font-[400]"
              >
                {sub.title}
                <span aria-hidden="true">›</span>
              </button>
            ) : (
              <Link
                href={sub.href || "#"}
                className="block p-2 rounded-lg text-gray-900 hover:bg-gray-100"
              >
                {sub.title}
              </Link>
            )}
          </li>
        ))}
      </ul>
    </>
  );
};

const MainMenu = ({ items, onCategorySelect }: MainMenuProps) => {
  return (
    <ul className="space-y-2">
      <p className="text-[18px] font-[700] text-gray-800 pt-16 pb-2 pl-2">Shop by Category</p>
      {items.map((item) => (
        <li key={item.title}>
          {item.subItems ? (
            <button
              onClick={() => onCategorySelect(item)}
              className="w-full flex justify-between items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100 text-[16px] font-[400]"
            >
              {item.title}
              <span aria-hidden="true">›</span>
            </button>
          ) : (
            <Link
              href={item.href || "#"}
              className="flex justify-between items-center p-2 text-gray-900 rounded-lg hover:bg-gray-100"
            >
              <span>{item.title}</span>
            </Link>
          )}
        </li>
      ))}
    </ul>
  );
};

export default function MobileMenu() {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
  const [categoryStack, setCategoryStack] = useState<NavItem[]>([]);

  const navItems = useMemo(() => NAV_ITEMS, []);
  const currentCategory = categoryStack.length > 0 ? categoryStack[categoryStack.length - 1] : null;

  const toggleSidebar = useCallback(() => {
    setIsSidebarOpen((prev) => !prev);
    if (isSidebarOpen) setCategoryStack([]);
  }, [isSidebarOpen]);

  const goBack = useCallback(() => {
    setCategoryStack((prev) => prev.slice(0, -1));
  }, []);

  const handleCategorySelect = useCallback((category: NavItem) => {
    setCategoryStack((prev) => [...prev, category]);
  }, []);

  return (
    <div className="relative">
      <button
        onClick={toggleSidebar}
        className="inline-flex items-center p-2 my-1 ml-3 text-sm text-white rounded-md hover:bg-secondary focus:outline-none"
        aria-label="Toggle sidebar"
        aria-expanded={isSidebarOpen}
      >
        <GiHamburgerMenu className="w-6 h-6" />
      </button>

      <aside
        className={`fixed top-0 left-0 z-40 w-64 h-screen bg-white border-r border-gray-200 transform transition-transform ${
          isSidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
        aria-hidden={!isSidebarOpen}
      >
        <hr className="mt-2 h-0.5 border-t-0 bg-neutral-100" />
        <div className="pt-2 px-4 h-full overflow-y-auto">
          {currentCategory ? (
            <CategoryView
              category={currentCategory}
              onBack={goBack}
              onSelect={handleCategorySelect}
              level={categoryStack.length}
            />
          ) : (
            <MainMenu items={navItems} onCategorySelect={handleCategorySelect} />
          )}
        </div>
      </aside>

      {isSidebarOpen && (
        <div
          className="fixed inset-0 bg-black opacity-50 z-30"
          onClick={toggleSidebar}
          role="presentation"
        ></div>
      )}
    </div>
  );
}