"use client";

import React, { forwardRef, useState } from "react";
import Image from "next/image";
import { useImageParallax } from "@/hooks/use-image-parallax";
import { cn } from "@/lib/utils";

export interface ImageParallaxProps {
  src: string;
  alt: string;
  speed?: number;
  direction?: "up" | "down" | "left" | "right";
  className?: string;
  imageClassName?: string;
  containerClassName?: string;
  width?: number;
  height?: number;
  quality?: number;
  priority?: boolean;
  overlay?: boolean;
  scaleOnHover?: boolean;
  blurDataURL?: string;
  placeholder?: "blur" | "empty";
  shouldPause?: boolean;
  onLoad?: () => void;
  onProgress?: (progress: number) => void;
}

export const ImageParallax = forwardRef<HTMLDivElement, ImageParallaxProps>(
  (
    {
      src,
      alt,
      speed = 0.5,
      direction = "down",
      className = "",
      imageClassName = "",
      containerClassName = "",
      width,
      height,
      quality = 90,
      priority = false,
      overlay = false,
      scaleOnHover = false,
      blurDataURL,
      placeholder,
      shouldPause = false,
      onLoad,
      onProgress,
    },
    ref
  ) => {
    const [isLoaded, setIsLoaded] = useState(false);
    const { imageRef } = useImageParallax({
      speed,
      direction,
      shouldPause,
      onProgress,
    });

    const handleLoad = () => {
      setIsLoaded(true);
      onLoad?.();
    };

    return (
      <div
        ref={ref}
        className={cn(
          "image-parallax-container",
          "relative overflow-hidden",
          containerClassName
        )}
      >
        <div
          className={cn(
            "image-parallax-wrapper",
            "relative w-full h-full",
            className
          )}
        >
          <div
            ref={imageRef as React.RefObject<HTMLDivElement>}
            className={cn(
              "image-parallax-inner",
              "will-change-transform",
              scaleOnHover &&
                "hover:scale-105 transition-transform duration-700 ease-out",
              imageClassName
            )}
          >
            <Image
              src={src}
              alt={alt}
              width={width}
              height={height}
              quality={quality}
              priority={priority}
              placeholder={placeholder}
              blurDataURL={blurDataURL}
              className={cn(
                "image-parallax",
                "w-full h-full object-cover",
                "transition-opacity duration-500",
                isLoaded ? "opacity-100" : "opacity-0"
              )}
              onLoad={handleLoad}
              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
            />

            {/* Loading overlay */}
            {!isLoaded && (
              <div className="absolute inset-0 bg-gray-200 animate-pulse flex items-center justify-center">
                <div className="w-8 h-8 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" />
              </div>
            )}
          </div>

          {/* Optional overlay */}
          {overlay && (
            <div className="absolute inset-0 bg-black/20 pointer-events-none" />
          )}
        </div>
      </div>
    );
  }
);

ImageParallax.displayName = "ImageParallax";