"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { GiHamburgerMenu } from "react-icons/gi";
import { IoArrowBack } from "react-icons/io5";

export default function Sidebar() {
  const [categories, setCategories] = useState<CategoryType[]>([]);
  const [currentCategoryType, setCurrentCategoryType] = useState("MAIN_CATEGORY");
  const [parentCategories, setParentCategories] = useState<CategoryType[]>([]);
  const [grandParentCategories, setGrandParentCategories] = useState<CategoryType[]>([]);
  const [highlightedCategories, setHighlightedCategories] = useState<CategoryType[]>([]);

  const fetchCategories = async () => {
    const res = await fetch("/api/categories", { cache: "no-store" });
    if (res.status !== 200) {
      console.error("Failed to fetch categories", res.statusText);
      throw new Error("Failed to fetch categories data");
    }
    const data = await res.json();
    setCategories(data.data);
    setHighlightedCategories(data.data.slice(0, 14)); // allow up to 15
    setMenuStack(data.data);
  };

  useEffect(() => {
    fetchCategories();
  }, []);

  const [isOpen, setIsOpen] = useState(false);
  const [menuStack, setMenuStack] = useState<CategoryType[]>([]);

  const toggleSidebar = () => {
    setIsOpen(!isOpen);
    setMenuStack(categories);
    setCurrentCategoryType("MAIN_CATEGORY");
  };

  const goToSubmenu = (item: CategoryType) => {
    if (item.children) {
      setGrandParentCategories(parentCategories);
      setParentCategories(menuStack);
      setMenuStack(item.children);

      setCurrentCategoryType(item.children[0]?.category_type);
    }
  };

  const goBack = () => {
    setMenuStack(parentCategories);
    setParentCategories(grandParentCategories);
    setCurrentCategoryType(parentCategories[0]?.category_type);
  };

  return (
    <div className="pt-2 flex flex-row w-full shadow-md">
      {/* Topbar */}
      <div className="flex items-center gap-3 px-4 py-2 w-[60px]">
        <button onClick={toggleSidebar} className="rounded">
          <GiHamburgerMenu size={24} />
        </button>
      </div>

      {/* Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 z-40"
          onClick={toggleSidebar}
        />
      )}

      {/* Sidebar */}
      <div
        className={`fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-50 transition-transform duration-300 ease-in-out
        ${isOpen ? "translate-x-0" : "-translate-x-full"}`}
      >
        <div className="p-4 h-full overflow-y-auto">
          {currentCategoryType !== "MAIN_CATEGORY" && (
            <button
              onClick={goBack}
              className="flex items-center mb-4 text-blue-600"
            >
              <IoArrowBack className="mr-1" />
              Back
            </button>
          )}

          <h2 className="text-xl font-bold mb-4">
            {currentCategoryType === "MAIN_CATEGORY"
              ? "Shop Categories"
              : menuStack[menuStack.length - 1]?.name}
          </h2>

          <ul className="space-y-2">
            {menuStack?.map((item) => (
              <li
                key={item.name}
                className="flex justify-between items-center"
              >
                <Link
                  href={`/${item.name}`}
                  className="flex-1 p-2 hover:bg-gray-100 rounded text-left"
                  onClick={() => setIsOpen(false)}
                >
                  {item.name}
                </Link>
                {item.children?.length > 0 && (
                  <button
                    onClick={() => goToSubmenu(item)}
                    className="p-2 text-gray-600 hover:text-gray-900"
                    aria-label={`Expand ${item.name}`}
                  >
                    →
                  </button>
                )}
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Highlighted Categories (Mobile scrollable) */}
      <nav className="w-full border-t border-gray-200">
        <div
          className="
            flex gap-5 items-center 
            px-4 py-3 
            overflow-none whitespace-nowrap 
            scrollbar-hide
          "
        >
          {highlightedCategories?.map((category) => (
            <Link
              key={category.name}
              href={`/${category.name}`}
              className="relative px-[5px] cursor-pointer group flex-shrink-0"
            >
              <span className="text-sm font-semibold hover:text-primary">{category.name}</span>
            </Link>
          ))}
        </div>
      </nav>
    </div>
  );
}