"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { useGetTenderCategoriesQuery } from "@/redux/apis/tenderApi";
import { sortCategories } from "@/lib/constants/categoryOrder";
import UnifiedSearchBar from "./UnifiedSearchBar";

interface HeroProps {
  searchQuery: string;
  setSearchQuery: (value: string) => void;
  selectedState: string;
  setSelectedState: (value: string) => void;
  states: string[];
  selectedDistrict: string;
  setSelectedDistrict: (value: string) => void;
  districts: string[];
}

const carouselImages = [
  "/gallery/carousel-images/flipkart-1.webp",
  "/gallery/carousel-images/flipkart-2.webp",
  "/gallery/carousel-images/carousel-image-3.png",
  "/gallery/carousel-images/mobile-screen-3.png",
  "/gallery/carousel-images/mobile-screen-4.png",
];

// Hardcoded categories moved inside component as fallback if needed or replaced by API data

export default function Hero({
  searchQuery,
  setSearchQuery,
  selectedState,
  setSelectedState,
  states,
  selectedDistrict,
  setSelectedDistrict,
  districts,
}: HeroProps) {
  const router = useRouter();
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const { data: categoriesData } = useGetTenderCategoriesQuery({});
  const [selectedCategory, setSelectedCategory] = useState("All Categories");
  const [showAdvanced, setShowAdvanced] = useState(false);

  const categories = ["All Categories", ...sortCategories(categoriesData?.data?.map(c => c.name) || [])];

  // Auto-advance carousel
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImageIndex((prev) => (prev + 1) % carouselImages.length);
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  const nextImage = () => {
    setCurrentImageIndex((prev) => (prev + 1) % carouselImages.length);
  };

  const prevImage = () => {
    setCurrentImageIndex((prev) => (prev - 1 + carouselImages.length) % carouselImages.length);
  };

  // Handle Search - Navigate to tenders page with filters
  const handleSearch = () => {
    const params = new URLSearchParams();

    if (searchQuery.trim()) params.set("search", searchQuery);
    if (selectedDistrict && selectedDistrict !== "All Districts") params.set("district", selectedDistrict);
    if (selectedState) params.set("state", selectedState);
    if (selectedCategory && selectedCategory !== "All Categories") params.set("category", selectedCategory);

    // Navigate to tenders page with query parameters
    router.push(`/tenders?${params.toString()}`);
  };

  return (
    <section className="relative w-full overflow-x-hidden">
      {/* Carousel Background */}
      <div className="relative w-full h-[200px] sm:h-[240px] md:h-[280px] overflow-hidden">
        <AnimatePresence mode="wait">
          <motion.div
            key={currentImageIndex}
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.5 }}
            className="absolute inset-0"
          >
            <Image
              src={carouselImages[currentImageIndex]}
              alt={`Carousel ${currentImageIndex + 1}`}
              fill
              className="object-cover"
              priority={currentImageIndex === 0}
            />
          </motion.div>
        </AnimatePresence>

        {/* Carousel Navigation */}
        <button
          onClick={prevImage}
          className="absolute left-2 sm:left-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 hover:bg-white rounded-full shadow-lg transition-all"
          aria-label="Previous image"
        >
          <ChevronLeft className="w-5 h-5 sm:w-6 sm:h-6 text-gray-800" />
        </button>
        <button
          onClick={nextImage}
          className="absolute right-2 sm:right-4 top-1/2 -translate-y-1/2 z-10 p-2 bg-white/80 hover:bg-white rounded-full shadow-lg transition-all"
          aria-label="Next image"
        >
          <ChevronRight className="w-5 h-5 sm:w-6 sm:h-6 text-gray-800" />
        </button>

        {/* Carousel Indicators */}
        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-2">
          {carouselImages.map((_, index) => (
            <button
              key={index}
              onClick={() => setCurrentImageIndex(index)}
              className={`w-2 h-2 rounded-full transition-all ${index === currentImageIndex ? "bg-white w-8" : "bg-white/50"
                }`}
              aria-label={`Go to image ${index + 1}`}
            />
          ))}
        </div>
      </div>

      {/* Content Below Carousel */}
      <div className="relative bg-gradient-to-b from-gray-50 to-white py-8 sm:py-12 overflow-hidden">
        {/* Background Pattern */}
        <div className="absolute inset-0 opacity-5 pointer-events-none">
          <div className="absolute inset-0" style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}></div>
        </div>

        <div className="relative z-10 max-w-6xl mx-auto px-3 sm:px-4 md:px-6 w-full">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="text-center mb-6 sm:mb-8 px-2"
          >
            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.5 }}
              className="text-xl sm:text-2xl md:text-3xl font-bold text-gray-900 mb-2 leading-tight"
            >
              Find Solar Tenders Across India
            </motion.h2>
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.6 }}
              className="text-xs sm:text-sm md:text-base text-gray-600 max-w-2xl mx-auto px-2"
            >
              Discover government solar energy tenders for installation, maintenance, and supply
              across all states and districts of India.
            </motion.p>
          </motion.div>

          {/* Advanced Search Box */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.7 }}
            className="max-w-4xl mx-auto flex flex-col items-center"
          >
            <UnifiedSearchBar
              searchQuery={searchQuery}
              setSearchQuery={setSearchQuery}
              selectedState={selectedState}
              setSelectedState={setSelectedState}
              states={states}
              selectedDistrict={selectedDistrict}
              setSelectedDistrict={setSelectedDistrict}
              districts={districts}
              selectedCategory={selectedCategory}
              setSelectedCategory={setSelectedCategory}
              categories={categories}
              onSearch={handleSearch}
              onAdvanceToggle={() => router.push("/advance-search")}
            />



            {/* Breadcrumbs and Previous Searches */}
            <div className="w-full mt-4 pl-1">
              <div className="flex flex-wrap items-center gap-1 text-xs text-gray-500 mb-1">
                <span>Home</span>
                <span>&rsaquo;</span>
                <span>Tenders</span>
                <span>&rsaquo;</span>
                <span>{selectedState || "Indian Tenders"}</span>
                {searchQuery && (
                  <>
                    <span>&rsaquo;</span>
                    <span className="text-blue-600 font-medium">{searchQuery} Tenders</span>
                  </>
                )}
              </div>
              <div className="text-sm flex items-center gap-2">
                <span className="text-gray-600">Previous Searches :- </span>
                <button
                  onClick={() => setSearchQuery("Solar Power Plant")}
                  className="text-green-600 hover:underline hover:text-green-700 transition-colors"
                >
                  Solar Power Plant
                </button>
              </div>
            </div>
          </motion.div>

          {/* Scroll Indicator */}
          <motion.div
            initial={{ opacity: 0, y: -20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 1, duration: 0.6 }}
            className="mt-8 sm:mt-12 flex flex-col items-center gap-2"
          >
            <motion.div
              animate={{
                y: [0, 10, 0],
              }}
              transition={{
                duration: 1.5,
                repeat: Infinity,
                ease: "easeInOut",
              }}
              className="flex flex-col items-center gap-2"
            >
              <div className="flex items-center gap-2 px-4 py-2 bg-white rounded-full shadow-lg border border-green-200">
                <motion.div
                  animate={{ scale: [1, 1.2, 1] }}
                  transition={{ duration: 1, repeat: Infinity }}
                  className="w-2 h-2 bg-green-600 rounded-full"
                />
                <span className="text-xs sm:text-sm font-semibold text-gray-700">Tenders Below</span>
                <motion.div
                  animate={{ scale: [1, 1.2, 1] }}
                  transition={{ duration: 1, repeat: Infinity, delay: 0.3 }}
                  className="w-2 h-2 bg-green-600 rounded-full"
                />
              </div>
              <motion.svg
                animate={{ y: [0, 8, 0] }}
                transition={{ duration: 1.2, repeat: Infinity, ease: "easeInOut" }}
                className="w-6 h-6 text-green-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
              </motion.svg>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section >
  );
}