/* eslint-disable @next/next/no-img-element */
import Link from "next/link";
import React, { useEffect, useRef, useState } from "react";

interface PropertyCategoryCardProps {
  image: string;
  imageSequence?: string[];
  title: string;
  extraClass?: string;
  cardRef?: (el: HTMLDivElement | null) => void;
  frameInterval?: number; // Time between image changes (in milliseconds) - THIS controls when next image appears
  transitionDuration?: number; // How smooth the transition is (in milliseconds) - THIS controls the fade effect
  enableHoverAnimation?: boolean;
}

const PropertyCategoryCard: React.FC<PropertyCategoryCardProps> = ({
  image,
  imageSequence,
  title,
  extraClass = "",
  frameInterval = 100, // Default 200ms between images (controls timing)
  transitionDuration = 300, // Default 300ms for smooth transition (controls smoothness)
  enableHoverAnimation = true,
}) => {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const animationRef = useRef<NodeJS.Timeout | null>(null);

  // Use provided imageSequence or fallback to generated sequence
  const sequence = imageSequence || [
    image,
    image.replace(".jpg", "-2.jpg"),
    image.replace(".jpg", "-3.jpg"),
    image.replace(".jpg", "-4.jpg"),
  ];

  // Fallback to original image if sequence images don't exist
  const getImageSrc = (index: number) => {
    return sequence[index] || image;
  };

  const startAnimation = () => {
    if (animationRef.current) {
      clearInterval(animationRef.current);
    }

    animationRef.current = setInterval(() => {
      setCurrentImageIndex((prev) => {
        if (prev >= sequence.length - 1) {
          clearInterval(animationRef.current!);
          return 0; // Settle on first image when animation ends
        }
        return prev + 1;
      });
    }, frameInterval); // This controls WHEN the next image appears
  };

  const handleMouseEnter = () => {
    if (enableHoverAnimation) startAnimation();
  };

  const handleMouseLeave = () => {
    if (animationRef.current) {
      clearInterval(animationRef.current);
    }
    // Reset to first image when mouse leaves
    setCurrentImageIndex(0);
  };

  // Cleanup intervals on unmount
  useEffect(() => {
    return () => {
      if (animationRef.current) {
        clearInterval(animationRef.current);
      }
    };
  }, []);

  return (
    <Link
      href="/properties"
      aria-label={`View ${title} properties`}
      className={`${extraClass} card-item`}
      onMouseEnter={enableHoverAnimation ? handleMouseEnter : undefined}
      onMouseLeave={enableHoverAnimation ? handleMouseLeave : undefined}
    >
      <div className="max-w-[364px] relative">
        <div className="group overflow-hidden">
          <img
            src={getImageSrc(currentImageIndex)}
            alt={title}
            className="w-full h-full object-cover transition-all ease-in-out cursor-pointer"
            style={{
              clipPath:
                "polygon(0% 0%, 70% 0%, 100% 30%, 100% 100%, 30% 100%, 0% 70%)",
              transitionDuration: `${transitionDuration}ms`,
            }}
          />
        </div>

        <div className="absolute left-1/2 bottom-0 translate-y-[calc(100%+16px)] -translate-x-1/3">
          <h1 className="text-[#333333] leading-[1.1] tracking-[0.38em] font-normal text-xl uppercase">
            {title}
          </h1>
        </div>
      </div>
    </Link>
  );
};

export default PropertyCategoryCard;