"use client";

import { CategoryItem, MenuDataItem } from "@/lib/types/models";
import Image from "next/image";
import Link from "next/link";
import { useState } from "react";

type MenuItemListProps = {
  data: MenuDataItem[];
};

export default function Page(props: MenuItemListProps) {
  const { data = [] } = props;
  const [activeMenu, setActiveMenu] = useState<MenuDataItem>(data[0]);
  const [activeSubcategory, setActiveSubcategory] = useState(
    activeMenu.menu[0]
  );
  if (!Array.isArray(data) || data.length === 0) return null;
  return (
    <div className="flex flex-col md:flex-row gap-6">
      {data.length > 0 && (
        <aside className="hidden md:block w-60 border-r border-gray-200 pr-2">
          <ul className="space-y-1">
            {data.map((item: MenuDataItem, i: number) => (
              <li
                key={i}
                className="group relative"
                onMouseEnter={() => {
                  setActiveMenu(item);
                  setActiveSubcategory(item.menu[0]);
                }}
              >
                <Link href={`/${item?.slug}`}>
                  <button
                    type="button"
                    className={`w-full text-left px-3 py-2 rounded-full font-medium transition ${activeMenu.name === item.name
                      ? "bg-primary/10 text-black border-primary/60"
                      : "bg-white border-gray-300 text-gray-700 hover:text-black hover:bg-primary/10 hover:border-primary/60"
                      }`}
                  >
                    {item.name}
                  </button>
                </Link>
              </li>
            ))}
          </ul>
        </aside>
      )}

      <div className="flex-1 flex flex-col transition-all duration-300">
        {activeMenu.menu.length > 0 && (
          <div className="flex flex-wrap gap-3">
            {activeMenu.menu.map((submenu: CategoryItem, j: number) =>
              !submenu?.includeInNav && submenu?.title ? (
                <button
                  key={j}
                  onClick={() => {
                    setActiveSubcategory(submenu);
                  }}
                  className={`mb-2 px-4 py-2 text-sm font-medium rounded-full border transition-all duration-300 ${activeSubcategory === submenu
                    ? "bg-primary/10 text-black border-primary/60"
                    : "bg-white border-gray-300 text-gray-600 hover:text-black hover:bg-primary/10 hover:border-primary/60"
                    }`}
                >
                  {submenu.title}
                </button>
              ) : null
            )}
          </div>
        )}

        {activeSubcategory?.menu?.length &&
          activeSubcategory?.menu?.length > 0 && (
            <div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 pb-4">
              {activeSubcategory.menu.map((product: CategoryItem) => (
                <Link
                  href={`/${activeMenu?.slug}/${product.slug}`}
                  key={product._id}
                >
                  <div className="flex  flex-col items-center bg-white p-3 transition">
                    <div className="relative rounded-lg bg-[#f4f4f4] p-4 w-[140px] h-[140px] sm:w-[160px] sm:h-[160px] flex items-center justify-center">
                      {product.promotionalText && (
                        <span className="absolute top-0 right-0 text-[10px] uppercase bg-primary text-white rounded-tr-lg rounded-bl-lg py-[2px] px-[8px]">
                          {product.promotionalText}
                        </span>
                      )}{" "}
                      <Image
                        src={product.image}
                        alt={product.name}
                        width={160}
                        height={160}
                        className="object-cover w-full h-full rounded-lg"
                      />
                    </div>
                    <p className="mt-3 text-center font-semibold text-gray-800 text-sm sm:text-base">
                      {product.name}
                    </p>
                  </div>
                </Link>
              ))}
            </div>
          )}
      </div>
    </div>
  );
}