"use client";

import { useState, MouseEvent, useEffect, useRef } from "react";
import { Heart } from "lucide-react";
import { toast } from "sonner";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
  type CarouselApi,
} from "@/components/ui/carousel";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { useToggleFavorite, useIsFavorite } from "@/lib/hooks";

type ProductCardProps = {
  id: number;
  name: string;
  price: number | null;
  struct_price_text: string;
  discount?: number | null;
  discount_text?: string | null;
  images: string[];
  labels?: { text: string; bg_color: string }[];
  price_color?: string;
  height?: number;
  width?: number;
};

export default function ProductCard({
  id,
  name,
  price,
  struct_price_text,
  discount,
  discount_text,
  images,
  labels = [],
  price_color = "#005bff",
  height = 360,
  width = 280,
}: ProductCardProps) {
  const { isFavorite, isLoading: isFavoriteLoading } = useIsFavorite(id);
  const { mutate: toggleFavorite, isPending } = useToggleFavorite();

  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);
  const autoplayRef = useRef<NodeJS.Timeout | null>(null);

  const hasMultipleImages = images.length > 1;

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

    setCurrent(api.selectedScrollSnap());
    api.on("select", () => {
      setCurrent(api.selectedScrollSnap());
    });
  }, [api]);

  useEffect(() => {
    if (!api || !hasMultipleImages) return;

    const startAutoplay = () => {
      autoplayRef.current = setInterval(() => {
        if (api.canScrollNext()) {
          api.scrollNext();
        } else {
          api.scrollTo(0);
        }
      }, 3000);
    };

    const stopAutoplay = () => {
      if (autoplayRef.current) {
        clearInterval(autoplayRef.current);
        autoplayRef.current = null;
      }
    };

    startAutoplay();
    return () => stopAutoplay();
  }, [api, hasMultipleImages]);

  const handleFavorite = (e: MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();
    e.stopPropagation();

    toggleFavorite(
      { productId: id, isFavorite },
      {
        onSuccess: (data) => {
          toast.success(
            data.wasAdded
              ? "Товар добавлен в избранное"
              : "Товар удален из избранного"
          );
        },
        onError: () => {
          toast.error("Ошибка. Попробуйте снова");
        },
      }
    );
  };

  const handleCardClick = (e: MouseEvent<HTMLAnchorElement>) => {
    const target = e.target as HTMLElement;
    if (
      target.closest("button") ||
      target.closest('[data-carousel-control="true"]')
    ) {
      e.preventDefault();
    }
  };

  const handleNavClick = (e: MouseEvent, action: () => void) => {
    e.preventDefault();
    e.stopPropagation();
    action();
  };

  return (
    <a
      href={`/product/${id}`}
      className="no-underline flex justify-center"
      onClick={handleCardClick}
    >
      <Card
        className="relative gap-2 border-none shadow-none p-0 w-full overflow-hidden rounded-2xl cursor-pointer"
        style={{ height, maxWidth: width }}
      >
        <div className="relative w-full h-[260px] group">
          <Carousel
            opts={{
              align: "start",
              loop: true,
              watchDrag: false,
            }}
            setApi={setApi}
            className="w-full h-full"
          >
            <CarouselContent className="h-[260px] ml-0">
              {images.map((image, index) => (
                <CarouselItem key={index} className="h-[260px] pl-0">
                  <div className="h-full flex items-center justify-center">
                    <img
                      src={image}
                      alt={`${name} - ${index + 1}`}
                      className="max-w-full max-h-full object-contain"
                      draggable="false"
                    />
                  </div>
                </CarouselItem>
              ))}
            </CarouselContent>

            {hasMultipleImages && (
              <>
                <CarouselPrevious
                  data-carousel-control="true"
                  className="absolute left-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
                  onClick={(e) => handleNavClick(e, () => api?.scrollPrev())}
                />
                <CarouselNext
                  data-carousel-control="true"
                  className="absolute right-2 opacity-0 group-hover:opacity-100 transition-opacity z-20"
                  onClick={(e) => handleNavClick(e, () => api?.scrollNext())}
                />
              </>
            )}
          </Carousel>

          {/* Favorite button - show skeleton while loading favorites */}
          <button
            onClick={handleFavorite}
            disabled={isPending || isFavoriteLoading}
            className="absolute top-3 right-3 z-10 rounded-full bg-white/80 p-2 hover:bg-white transition-all disabled:opacity-50"
          >
            {isFavoriteLoading ? (
              <div className="w-5 h-5 border-2 border-gray-300 border-t-gray-600 rounded-full animate-spin" />
            ) : isFavorite ? (
              <Heart className="w-5 h-5 text-red-500 fill-red-500" />
            ) : (
              <Heart className="w-5 h-5 text-gray-700" />
            )}
          </button>

          {hasMultipleImages && (
            <div className="absolute bottom-2 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
              {images.map((_, index) => (
                <button
                  key={index}
                  data-carousel-control="true"
                  onClick={(e) => handleNavClick(e, () => api?.scrollTo(index))}
                  className={`h-1.5 rounded-full transition-all ${
                    index === current ? "w-6 bg-white" : "w-1.5 bg-white/60"
                  }`}
                />
              ))}
            </div>
          )}

          {labels?.length > 0 && (
            <div className="absolute top-2 left-2 flex flex-col gap-1 z-10">
              {labels.map((label, idx) => (
                <Badge
                  key={idx}
                  className="text-white text-[10px] font-bold uppercase rounded-r-md"
                  style={{ backgroundColor: label.bg_color }}
                >
                  {label.text}
                </Badge>
              ))}
            </div>
          )}
        </div>

        <CardContent className="p-0 space-y-1">
          <p
            className="text-sm mx-2 font-medium"
            style={{ color: price_color }}
          >
            {struct_price_text}
          </p>
          <p className="text-black text-sm font-semibold leading-normal truncate mx-2">
            {name}
          </p>
        </CardContent>
      </Card>
    </a>
  );
}