import { useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import { useUserProfileStore } from "../context/zustand-store/userStore";
import { getFaPermissions } from "../utils/getFaPermissions";
import { motion, AnimatePresence } from "framer-motion";
import {
  ChevronDownIcon,
  GlobeAsiaAustraliaIcon,
} from "@heroicons/react/24/outline";
import { getInspectionMenuItems } from "../config/menuItems";

export const Menu = () => {
  const { profile } = useUserProfileStore();
  const navigate = useNavigate();
  const menuItems = getInspectionMenuItems(profile?.permissions || []);
  const [openIndex, setOpenIndex] = useState<number | null>(null);

  const toggleSubmenu = (index: number) => {
    setOpenIndex((prev) => (prev === index ? null : index));
  };

  const currentPath = window.location.pathname;

  return (
    <div className="p-4 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
        منو
      </h1>

      <div className="mb-4">
        <button
          onClick={() => navigate({ to: "/" })}
          className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-primary-500 hover:bg-primary-600 cursor-pointer dark:bg-primary-800 dark:hover:bg-primary-700 text-white font-semibold text-sm transition-all duration-200 shadow-md hover:shadow-lg"
        >
          <GlobeAsiaAustraliaIcon className="w-5 h-5" />
          <span>مشاهده نقشه</span>
        </button>
      </div>

      <div className="space-y-2">
        {menuItems.map(({ fa, icon: Icon, subItems }, index) => (
          <div
            key={index}
            className="bg-white dark:bg-dark-700 rounded-lg shadow-sm border border-gray-200 dark:border-dark-600 overflow-hidden"
          >
            <button
              onClick={() => toggleSubmenu(index)}
              className="w-full flex justify-between items-center px-4 py-3 text-right hover:bg-gray-50 dark:hover:bg-dark-600 transition-colors"
            >
              <div className="flex items-center gap-3">
                <div className="text-gray-600 dark:text-primary-100">
                  <Icon />
                </div>
                <span className="text-gray-900 dark:text-white font-semibold">
                  {fa}
                </span>
              </div>
              <ChevronDownIcon
                className={`w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-300 ${
                  openIndex === index ? "rotate-180" : ""
                }`}
              />
            </button>

            <AnimatePresence>
              {openIndex === index && (
                <motion.div
                  initial={{ height: 0, opacity: 0 }}
                  animate={{ height: "auto", opacity: 1 }}
                  exit={{ height: 0, opacity: 0 }}
                  transition={{ duration: 0.2 }}
                  className="overflow-hidden"
                >
                  <div className="px-4 pb-2 space-y-1 border-t border-gray-200 dark:border-dark-600">
                    {subItems
                      .filter((item) => !item?.path.includes("$"))
                      .map((sub, subIndex) => (
                        <button
                          key={subIndex}
                          onClick={() => navigate({ to: sub.path })}
                          className={`w-full text-right px-3 py-2 rounded-lg text-sm transition-colors ${
                            currentPath === sub.path
                              ? "bg-primary-100 dark:bg-dark-500 text-primary-700 dark:text-primary-300"
                              : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
                          }`}
                        >
                          {getFaPermissions(sub.name)}
                        </button>
                      ))}
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        ))}
      </div>
    </div>
  );
};
