'use client';

import type { CardUIType } from '@/types/car-card.type';
import Image from 'next/image';
import { UILink } from '../../components/ui';
import useEmblaCarousel from 'embla-carousel-react';
import { useEffect, useState } from 'react';
import { cn } from '@/lib/cn';
import { ChevronLeft, ChevronRight } from 'lucide-react';
import { motion } from 'framer-motion';
interface Props {
  car: CardUIType;
}
export const CarCard = ({ car }: Props) => {
  const [selectedIndex, setSelectedIndex] = useState(0);
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: true,
  });

  useEffect(() => {
    if (!emblaApi) return;

    const onSelect = () => {
      setSelectedIndex(emblaApi.selectedScrollSnap());
    };

    emblaApi.on('select', onSelect);

    onSelect();

    return () => {
      emblaApi.off('select', onSelect);
    };
  }, [emblaApi]);

  const scrollPrev = () => emblaApi?.scrollPrev();
  const scrollNext = () => emblaApi?.scrollNext();

  const arrowsButtonClasses = cn(
    'transition-all duration-300 cursor-pointer',
    'text-white/60 fill-white/60',
    'hover:text-white hover:fill-white',
  );

  return (
    <motion.article
      initial={{ scale: 1, y: 0 }}
      whileHover={{
        scale: 1.05, // Escala ligeramente
        y: -8, // Se levanta hacia arriba
        boxShadow: '0px 10px 30px rgba(0,0,0,0.15)',
        borderColor: '#f4f4f2',
        transition: {
          type: 'spring', // Efecto elástico suave
          stiffness: 300,
          damping: 20,
        },
      }}
      whileTap={{ scale: 0.99 }}
      className="border-text-secondary relative min-h-131.25 w-75 border bg-white"
      aria-labelledby={`car-${car.slug}`}
    >
      <div className="relative h-52 w-full overflow-hidden" ref={emblaRef}>
        <div className="flex h-full">
          {car.carImage.map((image, index) => (
            <div key={image} className="relative h-full min-w-0 flex-[0_0_100%]">
              <Image
                src={image}
                alt={`${car.carName} - imagen ${index + 1}`}
                fill
                className="object-cover"
              />
            </div>
          ))}
        </div>
        {car.carImage.length > 1 && (
          <div className="absolute bottom-1 left-1/2 flex -translate-x-1/2 items-center gap-2">
            <button
              type="button"
              onClick={scrollPrev}
              aria-label="Imagen anterior"
              className={cn('mr-4', arrowsButtonClasses)}
            >
              <ChevronLeft className="h-5 w-5" />
            </button>

            {car.carImage.map((_, index) => (
              <button
                key={index}
                onClick={() => emblaApi?.scrollTo(index)}
                aria-label={`Ir al slide ${index + 1}`}
                className={cn(
                  'h-1 w-8 cursor-pointer transition-all duration-300',
                  selectedIndex === index ? 'bg-white' : 'bg-white/50',
                )}
              />
            ))}

            <button
              type="button"
              onClick={scrollNext}
              aria-label="Imagen siguiente"
              className={cn(arrowsButtonClasses, 'ml-4')}
            >
              <ChevronRight className="h-5 w-5" />
            </button>
          </div>
        )}
      </div>
      <div className="flex h-78 flex-col justify-between px-6 pt-2.5 pb-2">
        <div className="space-y-1.5">
          <span className="text-text-secondary text-xs">
            {car.year} - {car.km}KM
          </span>
          <h4 className="text-text-primary text-xl uppercase" id={`car-${car.slug}`}>
            {car.carName}
          </h4>
          <p className="text-text-primary text-sm">
            {car.price ? `${car.price}` : 'Precio negociable'}{' '}
          </p>
        </div>
        <dl className="space-y-3">
          <div>
            <dt className="text-text-secondary text-xs">Potencia</dt>
            <dd className="text-text-primary text-sm">{car.power}</dd>
          </div>

          <div>
            <dt className="text-text-secondary text-xs">Motorización</dt>
            <dd className="text-text-primary text-sm">{car.motor}</dd>
          </div>
        </dl>

        <div className="flex w-full items-center justify-center gap-3 text-xs">
          <UILink
            className="group border-text-primary flex h-11 w-full items-center justify-center border bg-transparent"
            href={`/modelos/${car.slug}`}
          >
            <span className="transition-transform duration-300 group-hover:-translate-x-1">
              VER MÁS
            </span>

            <ChevronRight
              className="h-5 w-5 -translate-x-2 opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
              aria-hidden="true"
            />
          </UILink>
        </div>
      </div>
    </motion.article>
  );
};