// "use client";

// import { motion, AnimatePresence } from "framer-motion";
// import { ChevronRight } from "lucide-react";
// import { products, services, projects } from "./data";
// import Link from "next/link";
// import { usePathname } from "next/navigation";

// interface MobileMenuProps {
//   isOpen: boolean;
//   expandedSection: string | null;
//   toggleSection: (section: string) => void;
// }

// const mobileMenuVariants = {
//   closed: {
//     opacity: 0,
//     x: "100%",
//     transition: {
//       type: "spring",
//       stiffness: 400,
//       damping: 40,
//     },
//   },
//   open: {
//     opacity: 1,
//     x: "0%",
//     transition: {
//       type: "spring",
//       stiffness: 400,
//       damping: 40,
//     },
//   },
// };

// const contentVariants = {
//   collapsed: {
//     height: 0,
//     opacity: 0,
//     transition: {
//       duration: 0.2,
//       ease: "easeInOut",
//     },
//   },
//   expanded: {
//     height: "auto",
//     opacity: 1,
//     transition: {
//       duration: 0.2,
//       ease: "easeInOut",
//     },
//   },
// };

// interface MobileSectionProps {
//   title: string;
//   isExpanded: boolean;
//   onToggle: () => void;
//   children: React.ReactNode;
// }

// function MobileSection({
//   title,
//   isExpanded,
//   onToggle,
//   children,
// }: MobileSectionProps) {
//   return (
//     <div className="border-b border-gray-200 py-4">
//       <motion.button
//         whileTap={{ scale: 0.98 }}
//         onClick={onToggle}
//         className="flex items-center justify-between w-full"
//       >
//         <span className="text-lg font-medium text-gray-900">{title}</span>
//         <motion.div
//           animate={{ rotate: isExpanded ? 180 : 0 }}
//           transition={{ duration: 0.2 }}
//         >
//           <ChevronRight className="w-5 h-5 text-gray-500" />
//         </motion.div>
//       </motion.button>
//       <AnimatePresence initial={false}>
//         {isExpanded && (
//           <motion.div
//             initial="collapsed"
//             animate="expanded"
//             exit="collapsed"
//             variants={contentVariants}
//             className="overflow-hidden"
//           >
//             <div className="pt-4 pl-4">{children}</div>
//           </motion.div>
//         )}
//       </AnimatePresence>
//     </div>
//   );
// }

// export function MobileMenu({
//   isOpen,
//   expandedSection,
//   toggleSection,
// }: MobileMenuProps) {
//   const pathname = usePathname();

//   return (
//     <AnimatePresence>
//       {isOpen && (
//         <motion.div
//           initial="closed"
//           animate="open"
//           exit="closed"
//           variants={mobileMenuVariants}
//           className="fixed inset-y-0 right-0 w-full bg-white shadow-xl lg:hidden overflow-y-auto"
//         >
//           <div className="px-4 py-6">
//             {/* Main Navigation Links */}
//             <div className="space-y-4 mb-6">
//               <Link
//                 href="/"
//                 className={`block text-lg ${
//                   pathname === "/"
//                     ? "text-orange-600 font-medium"
//                     : "text-gray-900"
//                 }`}
//               >
//                 Home
//               </Link>
//               <Link
//                 href="/about"
//                 className={`block text-lg ${
//                   pathname === "/about"
//                     ? "text-orange-600 font-medium"
//                     : "text-gray-900"
//                 }`}
//               >
//                 About
//               </Link>
//               <Link
//                 href="/blogs"
//                 className={`block text-lg ${
//                   pathname === "/blogs"
//                     ? "text-orange-600 font-medium"
//                     : "text-gray-900"
//                 }`}
//               >
//                 Blogs
//               </Link>
//             </div>

//             {/* Products Section */}
//             <MobileSection
//               title="Products"
//               isExpanded={expandedSection === "Products"}
//               onToggle={() => toggleSection("Products")}
//             >
//               {products.categories.map((category) => (
//                 <div key={category.name} className="mb-4">
//                   <h4 className="text-sm font-semibold text-gray-500 mb-2">
//                     {category.name}
//                   </h4>
//                   <ul className="space-y-2">
//                     {category.items.map((item) => (
//                       <motion.li key={item.name} whileTap={{ scale: 0.98 }}>
//                         <Link
//                           href={item.href}
//                           className="flex items-center space-x-2 text-gray-600 hover:text-orange-600"
//                         >
//                           <ChevronRight className="h-4 w-4" />
//                           <span className="text-sm">{item.name}</span>
//                         </Link>
//                       </motion.li>
//                     ))}
//                   </ul>
//                 </div>
//               ))}
//             </MobileSection>

//             {/* Services Section */}
//             <MobileSection
//               title="Services"
//               isExpanded={expandedSection === "Services"}
//               onToggle={() => toggleSection("Services")}
//             >
//               <ul className="space-y-4">
//                 {services.map((service) => (
//                   <motion.li key={service.name} whileTap={{ scale: 0.98 }}>
//                     <Link
//                       href={service.href}
//                       className="flex items-start space-x-3 text-gray-600 hover:text-orange-600"
//                     >
//                       <ChevronRight className="h-5 w-5 mt-1" />
//                       <div>
//                         <p className="text-sm font-medium">{service.name}</p>
//                         <p className="text-xs text-gray-500 mt-1">
//                           {service.description}
//                         </p>
//                       </div>
//                     </Link>
//                   </motion.li>
//                 ))}
//               </ul>
//             </MobileSection>

//             {/* Projects Section */}
//             <MobileSection
//               title="Projects"
//               isExpanded={expandedSection === "Projects"}
//               onToggle={() => toggleSection("Projects")}
//             >
//               <ul className="space-y-4">
//                 {projects.map((project) => (
//                   <motion.li key={project.name} whileTap={{ scale: 0.98 }}>
//                     <Link
//                       href={project.href}
//                       className="flex items-start space-x-3 text-gray-600 hover:text-orange-600"
//                     >
//                       <ChevronRight className="h-5 w-5 mt-1" />
//                       <div>
//                         <p className="text-sm font-medium">{project.name}</p>
//                         <p className="text-xs text-gray-500 mt-1">
//                           {project.description}
//                         </p>
//                       </div>
//                     </Link>
//                   </motion.li>
//                 ))}
//               </ul>
//             </MobileSection>

//             {/* Contact Button */}
//             <div className="mt-6">
//               <Link href="/contact">
//                 <motion.button
//                   whileHover={{ scale: 1.02 }}
//                   whileTap={{ scale: 0.98 }}
//                   className="w-full flex items-center justify-center px-4 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white btn-primary"
//                 >
//                   Contact Us
//                 </motion.button>
//               </Link>
//             </div>
//           </div>
//         </motion.div>
//       )}
//     </AnimatePresence>
//   );
// }

"use client";

import { motion, AnimatePresence } from "framer-motion";
import { ChevronRight, X } from "lucide-react"; // Import X icon for the close button
// import { products, services, projects } from "./data";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { getProjectCategories, getServices } from "@/lib/api";
// import { SearchToggle } from "../search-toggle";
import SearchBar from "../search-bar";
import { Spinner } from "../animation/spinner";

interface MobileMenuProps {
  isOpen: boolean;
  expandedSection: string | null;
  toggleSection: (section: string) => void;
  onClose: () => void; // Add onClose prop for closing the menu
}

const mobileMenuVariants = {
  closed: {
    opacity: 0,
    x: "100%",
    transition: {
      type: "spring",
      stiffness: 400,
      damping: 40,
    },
  },
  open: {
    opacity: 1,
    x: "0%",
    transition: {
      type: "spring",
      stiffness: 400,
      damping: 40,
    },
  },
};

const contentVariants = {
  collapsed: {
    height: 0,
    opacity: 0,
    transition: {
      duration: 0.2,
      ease: "easeInOut",
    },
  },
  expanded: {
    height: "auto",
    opacity: 1,
    transition: {
      duration: 0.2,
      ease: "easeInOut",
    },
  },
};

interface MobileSectionProps {
  title: string;
  isExpanded: boolean;
  onToggle: () => void;
  children: React.ReactNode;
}

function MobileSection({
  title,
  isExpanded,
  onToggle,
  children,
}: MobileSectionProps) {
  return (
    <div className="border-b border-gray-200 py-4">
      <motion.button
        whileTap={{ scale: 0.98 }}
        onClick={onToggle}
        className="flex items-center justify-between w-full"
      >
        <span className="text-lg font-medium text-gray-900">{title}</span>
        <motion.div
          animate={{ rotate: isExpanded ? 180 : 0 }}
          transition={{ duration: 0.2 }}
        >
          <ChevronRight className="w-5 h-5 text-gray-500" />
        </motion.div>
      </motion.button>
      <AnimatePresence initial={false}>
        {isExpanded && (
          <motion.div
            initial="collapsed"
            animate="expanded"
            exit="collapsed"
            variants={contentVariants}
            className="overflow-hidden"
          >
            <div className="pt-4 pl-4">{children}</div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

interface Service {
  id: number;
  name: string;
  description: string;
  banner: string;
}

interface ProjectMenuProps {
  name: string;
  description: string;
  slug: string;
}

export function MobileMenu({
  isOpen,
  expandedSection,
  toggleSection,
  onClose, // Pass the onClose function
}: MobileMenuProps) {
  const pathname = usePathname();

  const [services, setServices] = useState<Service[] | undefined>(undefined);

  function truncateText(
    text: string,
    maxLength: number,
    ellipsis: string = "...",
  ): string {
    // Check if the text is already shorter than the max length
    if (text.length <= maxLength) {
      return text;
    }

    // Truncate the text and add the ellipsis
    return text.slice(0, maxLength) + ellipsis;
  }
  useEffect(() => {
    async function fetchServices() {
      const resp = await getServices();
      setServices(resp[0].services);
    }
    fetchServices();
  }, []);

  const [projects, setProjects] = useState<ProjectMenuProps[] | undefined>(
    undefined,
  );
  useEffect(() => {
    const fetchProjects = async () => {
      const response = await getProjectCategories(1, 8);
      setProjects(response.data);
    };
    fetchProjects();
  }, []);
  console.log(projects);

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial="closed"
          animate="open"
          exit="closed"
          variants={mobileMenuVariants}
          className="fixed inset-y-0 right-0 w-full bg-white shadow-xl lg:hidden overflow-y-auto"
        >
          {/* Close Button */}
          <motion.button
            whileHover={{ scale: 1.1 }}
            whileTap={{ scale: 0.9 }}
            onClick={onClose}
            className="absolute top-4 right-4 p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
            aria-label="Close menu"
          >
            <X className="w-6 h-6 text-gray-700" />
          </motion.button>

          <div className="px-4 py-6">
            <div className="w-full">
              <div className="max-w-4xl mt-8 mx-auto">
                <SearchBar
                  variant="large"
                  placeholder="Search for product name, description, or category..."
                  className="px-0"
                />
              </div>
            </div>
            {/* Main Navigation Links */}
            <div className="space-y-4 mb-1">
              <Link
                href="/"
                className={`block text-lg ${
                  pathname === "/"
                    ? "text-orange-600 font-medium"
                    : "text-gray-900"
                }`}
              >
                Home
              </Link>
              <Link
                href="/about"
                className={`block text-lg ${
                  pathname === "/about"
                    ? "text-orange-600 font-medium"
                    : "text-gray-900"
                }`}
              >
                About
              </Link>
              <Link
                href="/products"
                className={`block text-lg ${
                  pathname === "/products"
                    ? "text-orange-600 font-medium"
                    : "text-gray-900"
                }`}
              >
                Products
              </Link>
              <Link
                href="/blogs"
                className={`block text-lg ${
                  pathname === "/blogs"
                    ? "text-orange-600 font-medium"
                    : "text-gray-900"
                }`}
              >
                Blogs
              </Link>
            </div>

            {/* Services Section */}
            <MobileSection
              title="Services"
              isExpanded={expandedSection === "Services"}
              onToggle={() => toggleSection("Services")}
            >
              <ul className="space-y-4">
                {services ? (
                  services.map((service) => (
                    <motion.li key={service.name} whileTap={{ scale: 0.98 }}>
                      <Link
                        href={`/services/${service.id.toString()}`}
                        className="flex items-start space-x-3 text-gray-600 hover:text-orange-600"
                      >
                        <ChevronRight className="h-5 w-5 mt-1" />
                        <div>
                          <p className="text-sm font-medium">{service.name}</p>
                          <p className="text-xs text-gray-500 mt-1">
                            {truncateText(service.description, 70)}
                          </p>
                        </div>
                      </Link>
                    </motion.li>
                  ))
                ) : (
                  <Spinner />
                )}
              </ul>
            </MobileSection>

            {/* Projects Section */}
            <MobileSection
              title="Projects"
              isExpanded={expandedSection === "Projects"}
              onToggle={() => toggleSection("Projects")}
            >
              <ul className="space-y-4">
                {projects ? (
                  projects.map((project) => (
                    <motion.li key={project.name} whileTap={{ scale: 0.98 }}>
                      <Link
                        href={`/projects/${project.slug}`}
                        className="flex items-start space-x-3 text-gray-600 hover:text-orange-600"
                      >
                        <ChevronRight className="h-5 w-5 mt-1" />
                        <div>
                          <p className="text-sm font-medium">{project.name}</p>
                          <p className="text-xs text-gray-500 mt-1">
                            {project.description}
                          </p>
                        </div>
                      </Link>
                    </motion.li>
                  ))
                ) : (
                  <Spinner />
                )}
              </ul>
            </MobileSection>

            {/* Contact Button */}
            <div className="mt-6">
              <Link href="/contact">
                <motion.button
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  className="w-full flex items-center justify-center px-4 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white btn-primary"
                >
                  Contact Us
                </motion.button>
              </Link>
            </div>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}