"use client";

import { motion } from "framer-motion";
import { useInView } from "framer-motion";
import { useRef } from "react";
import { useRouter } from "next/navigation";
import { useGetTenderCategoriesQuery } from "@/redux/apis/tenderApi";
import { sortCategories } from "@/lib/constants/categoryOrder";

export default function Categories() {
  const ref = useRef(null);
  const router = useRouter();
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  const { data: categoriesData, isLoading } = useGetTenderCategoriesQuery({});

  const iconMap: Record<string, string> = {
    "EPC Tenders": "🏗️",
    "Supply Tenders": "📦",
    "Residence EPC Tenders": "🏠",
    "Commercial EPC Tenders": "🏢",
    "Industrial EPC Tenders": "🏭",
    "Street Light EPC Tenders": "💡",
    "O & M Tenders": "🔧",
    "Solar Water Hiter Tenders": "🚿",
    "Manpower Supply Tenders": "👥",
    "Machinery Supply Tenders": "⚙️",
    "JV Tenders": "🤝",
    "Finance Tenders": "💰",
    "EV Charger": "⚡",
    "EV Battery": "🔋",
    "Sub-Tenders": "📋"
  };

  // Define sorting for both names and full objects
  const sortedNames = sortCategories(categoriesData?.data?.map(c => c.name) || []);

  const finalCategories = sortedNames.map(name => {
    const original = categoriesData?.data?.find(c => c.name === name);
    return {
      name: name,
      count: original?.tenderCount || 0,
      icon: iconMap[name] || "📄",
      description: original?.description
    };
  });

  const handleCategoryClick = (categoryName: string) => {
    router.push(`/tenders?category=${encodeURIComponent(categoryName)}`);
  };

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 30, scale: 0.9 },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      transition: {
        type: "spring",
        stiffness: 100,
      },
    },
  };

  return (
    <section id="categories" ref={ref} className="py-10 bg-white relative">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <motion.span
            initial={{ opacity: 0 }}
            animate={isInView ? { opacity: 1 } : {}}
            transition={{ delay: 0.2 }}
            className="text-green-600 font-semibold"
          >
            EXPLORE
          </motion.span>
          <motion.h3
            initial={{ opacity: 0, y: 10 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ delay: 0.3 }}
            className="text-3xl font-bold text-gray-800 mt-2"
          >
            Browse by Category
          </motion.h3>
          <motion.p
            initial={{ opacity: 0 }}
            animate={isInView ? { opacity: 1 } : {}}
            transition={{ delay: 0.4 }}
            className="text-gray-600 mt-2"
          >
            Find tenders that match your business expertise
          </motion.p>
        </motion.div>

        <motion.div
          variants={containerVariants}
          initial="hidden"
          animate={isInView ? "visible" : "hidden"}
          className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3"
        >
          {finalCategories.map((category, index) => (
            <motion.div
              key={index}
              variants={itemVariants}
              whileHover={{ y: -5, scale: 1.02 }}
              onClick={() => handleCategoryClick(category.name)}
              className="p-2 sm:p-3 bg-white border border-gray-200 rounded-lg hover:border-green-500 hover:shadow-lg transition-all cursor-pointer group flex flex-col items-center text-center"
            >
              <div className="w-10 h-10 rounded-lg bg-gray-50 flex items-center justify-center text-xl mb-2 group-hover:bg-green-50 transition-colors">
                {category.icon}
              </div>
              <h4 className="font-bold text-gray-800 group-hover:text-green-600 transition-colors text-xs leading-tight mb-2 h-8 flex items-center justify-center">
                {category.name}
              </h4>
              <div className="mt-auto">
                <p className="text-gray-500 text-[10px] font-medium uppercase tracking-wider group-hover:text-green-600 transition-colors">
                  {category.count} Tenders
                </p>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}