// components/parallax/TiltParallax.tsx
"use client";

import React, { useRef, useEffect, useState } from "react";
import Image from "next/image";
import { cn } from "@/lib/utils";

interface TiltParallaxProps {
  src: string;
  alt: string;
  intensity?: number;
  scaleOnHover?: number;
  className?: string;
  imageClassName?: string;
  width?: number;
  height?: number;
  quality?: number;
  blurDataURL?: string;
  perspective?: number;
}

export const TiltParallax: React.FC<TiltParallaxProps> = ({
  src,
  alt,
  intensity = 10,
  scaleOnHover = 1.05,
  className = "",
  imageClassName = "",
  width,
  height,
  quality = 90,
  blurDataURL,
  perspective = 1000,
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const imageRef = useRef<HTMLDivElement>(null);
  const [isHovering, setIsHovering] = useState(false);
  const [tilt, setTilt] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (!containerRef.current || !isHovering) return;

      const rect = containerRef.current.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      const centerX = rect.width / 2;
      const centerY = rect.height / 2;

      const rotateY = ((x - centerX) / centerX) * intensity;
      const rotateX = ((centerY - y) / centerY) * intensity;

      setTilt({ x: rotateX, y: rotateY });
    };

    const handleMouseLeave = () => {
      setIsHovering(false);
      setTilt({ x: 0, y: 0 });
    };

    const container = containerRef.current;
    if (container) {
      container.addEventListener("mousemove", handleMouseMove);
      container.addEventListener("mouseleave", handleMouseLeave);
      container.addEventListener("mouseenter", () => setIsHovering(true));
    }

    return () => {
      if (container) {
        container.removeEventListener("mousemove", handleMouseMove);
        container.removeEventListener("mouseleave", handleMouseLeave);
      }
    };
  }, [intensity, isHovering]);

  return (
    <div
      ref={containerRef}
      className={cn(
        "tilt-parallax",
        "relative overflow-hidden cursor-pointer",
        "transition-transform duration-300 ease-out",
        isHovering && `scale-${scaleOnHover}`,
        className
      )}
      style={{
        perspective: `${perspective}px`,
        transformStyle: "preserve-3d",
      }}
    >
      <div
        ref={imageRef}
        className={cn(
          "tilt-parallax-content",
          "w-full h-full transition-transform duration-300 ease-out",
          "will-change-transform"
        )}
        style={{
          transform: `
            rotateX(${tilt.x}deg)
            rotateY(${tilt.y}deg)
            scale(${isHovering ? scaleOnHover : 1})
          `,
        }}
      >
        <Image
          src={src}
          alt={alt}
          width={width}
          height={height}
          quality={quality}
          blurDataURL={blurDataURL}
          className={cn("w-full h-full object-cover", imageClassName)}
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
        />
      </div>

      {/* Gradient overlay for depth */}
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background: `
            linear-gradient(
              135deg,
              rgba(255,255,255,0.1) 0%,
              transparent 50%,
              rgba(0,0,0,0.1) 100%
            )
          `,
        }}
      />
    </div>
  );
};