"use client";

import React, { useContext } from "react";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import Link from "next/link";
import ProductContext from "@/app/contexts/productContext";
import { backendUrl } from "@/utils/axios";
import Image from "next/image";
import { motion } from "framer-motion";
import { ArrowRight } from "lucide-react";

const EnhancedSlider = () => {
  const { category, products } = useContext(ProductContext);

  const selectedCategories = category?.slice(0, 2);
  const categorizedProducts = selectedCategories?.map((cat) => ({
    category: cat,
    products: products
      ?.filter((product) => product.product_category?.id === cat.id)
      .slice(0, 3),
  }));

  return (
    <section className="bg-gradient-to-b from-background to-secondary/10 py-16 md:py-24">
      <div className="container mx-auto px-4">
        {categorizedProducts?.map((catData, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: index * 0.2 }}
            className="mb-20 last:mb-0"
          >
            <div className="flex flex-col md:flex-row items-center justify-between mb-8">
              <div className="text-center md:text-left mb-6 md:mb-0">
                <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
                  Best-Selling {catData.category?.category_name}
                </h2>
                <Link
                  href={`/collections/${catData.category?.id}`}
                  className="inline-flex items-center text-primary hover:text-primary/80 transition-colors"
                >
                  <span className="text-lg font-medium">
                    Explore Collection
                  </span>
                  <ArrowRight className="ml-2 h-5 w-5" />
                </Link>
              </div>
            </div>

            <Carousel
              opts={{
                align: "start",
              }}
              className="w-full "
            >
              <CarouselContent className="-ml-2 md:-ml-4 p-10">
                {catData.products?.map((product, idx) => (
                  <CarouselItem
                    key={idx}
                    className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/6"
                  >
                    <Link href={`/products/${product.id}`}>
                      <motion.div
                        whileHover={{ y: -5 }}
                        className="group rounded-lg overflow-hidden bg-card shadow-lg transition-shadow hover:shadow-xl"
                      >
                        <div className="aspect-square relative overflow-hidden max-h-[50%]">
                          <Image
                            src={`${backendUrl}${
                              product.images[0]?.image || "/placeholder.jpg"
                            }`}
                            alt={product.product_name}
                            layout="fill"
                            objectFit="cover"
                            className="transition-transform duration-300 group-hover:scale-110"
                          />
                        </div>
                        <div className="p-4">
                          <h3 className="text-lg font-semibold text-foreground group-hover:text-primary transition-colors">
                            {product.product_name}
                          </h3>
                          <p className="text-sm text-muted-foreground mt-2">
                            {product.short_description ||
                              "Discover more about this product"}
                          </p>
                        </div>
                      </motion.div>
                    </Link>
                  </CarouselItem>
                ))}
              </CarouselContent>
              <CarouselPrevious className="hidden md:flex -left-4 bg-background/50 hover:bg-background text-foreground" />
              <CarouselNext className="hidden md:flex -right-4 bg-background/50 hover:bg-background text-foreground" />
            </Carousel>
          </motion.div>
        ))}
      </div>
    </section>
  );
};

export default EnhancedSlider;