"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useMotionValue, useSpring, useTransform } from "motion/react";

const useTilt = () => {
  const totalImages = 3;
  const [loadedCount, setLoadedCount] = useState(0);
  const [isLoaded, setIsLoaded] = useState(false);

  const xRaw = useMotionValue(0);
  const yRaw = useMotionValue(0);

  const x = useSpring(xRaw, {
    stiffness: isLoaded ? 80 : 500,
    damping: isLoaded ? 15 : 40,
    mass: 1,
  });

  const y = useSpring(yRaw, {
    stiffness: isLoaded ? 80 : 500,
    damping: isLoaded ? 15 : 40,
    mass: 1,
  });

  const handleImageLoad = useCallback(() => {
    setLoadedCount((prev) => prev + 1);
  }, []);

  useEffect(() => {
    if (loadedCount === totalImages) {
      setIsLoaded(true);
    }
  }, [loadedCount]);

  const ref = useRef<HTMLDivElement>(null);

  const bgX = useTransform(x, [-0.5, 0.5], [20, -20]);
  const bgY = useTransform(y, [-0.5, 0.5], [10, -10]);

  const logoX = useTransform(x, [-0.5, 0.5], [-5, 30]);
  const logoY = useTransform(y, [-0.5, 0.5], [-10, 5]);
  const logoRotateY = useTransform(y, [-0.5, 0.5], [-10, 10]);

  const subjectX = useTransform(x, [-0.5, 0.5], [15, -15]);
  const subjectY = useTransform(y, [-0.5, 0.5], [20, 0]);

  const titleX = useTransform(x, [-0.5, 0.5], [2, -2]);
  const titleY = useTransform(y, [-0.5, 0.5], [1, -1]);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    const move = (event: MouseEvent) => {
      const rect = element.getBoundingClientRect();
      const offsetX = event.clientX / rect.width - 0.5;
      const offsetY = event.clientY / rect.height - 0.5;
      xRaw.set(offsetX);
      yRaw.set(offsetY);
    };

    const leave = () => {
      xRaw.set(0);
      yRaw.set(0);
    };

    element.addEventListener("mousemove", move);
    element.addEventListener("mouseleave", leave);

    return () => {
      element.removeEventListener("mousemove", move);
      element.removeEventListener("mouseleave", leave);
    };
  }, [xRaw, yRaw]);

  useEffect(() => {
    const scroll = () => {
      const offset = (window.scrollY / window.innerHeight) * 0.5;
      yRaw.set(offset - 0.25);
    };

    const orientation = (event: DeviceOrientationEvent) => {
      if (event.gamma != null && event.beta != null) {
        xRaw.set(event.gamma / 180);
        yRaw.set(event.beta / 180);
      }
    };

    window.addEventListener("scroll", scroll, { passive: true });
    window.addEventListener("deviceorientation", orientation, { passive: true });

    return () => {
      window.removeEventListener("scroll", scroll);
      window.removeEventListener("deviceorientation", orientation);
    };
  }, [xRaw, yRaw]);

  return {
    ref,
    isLoaded,
    handleImageLoad,
    bgX,
    bgY,
    logoX,
    logoY,
    logoRotateY,
    subjectX,
    subjectY,
    titleX,
    titleY,
  };
};

export default useTilt;