import React, { useCallback, useEffect, useRef, useState } from "react";

import BusinessGridMobile from "./BusinessGridMobile";
import { logos } from "./constants";

import styles from "./logo-grid.module.css";

const BusinessUnit: React.FC = () => {
  const [hoveredLogo, setHoveredLogo] = useState<number | null>(null);
  const logoRefs = useRef<{ [key: number]: HTMLDivElement | null }>({});
  const logoGridRef = useRef<HTMLDivElement>(null);
  const animationFrameRef = useRef<number | undefined>(undefined);


  const handleLogoGridMouseMove = useCallback(
    (event: React.MouseEvent) => {
      // Use requestAnimationFrame to throttle gradient updates
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }

      animationFrameRef.current = requestAnimationFrame(() => {
        if (logoGridRef.current) {
          const rect = logoGridRef.current.getBoundingClientRect();
          const x = event.clientX - rect.left;
          const y = event.clientY - rect.top;

          // Update CSS custom properties for gradient positioning on the logoGrid
          logoGridRef.current.style.setProperty("--mouse-x", `${x}px`);
          logoGridRef.current.style.setProperty("--mouse-y", `${y}px`);
        }
      });
    },
    [animationFrameRef]
  );

  const handleLogoHover = useCallback(
    (logoId: number, event: React.MouseEvent) => {
      setHoveredLogo(logoId);

      // Calculate mouse position relative to the logo element
      const logoElement = logoRefs.current[logoId];
      if (logoElement) {
        const rect = logoElement.getBoundingClientRect();
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        // Set CSS custom properties for the radial gradient center
        logoElement.style.setProperty("--logo-mouse-x", `${x}px`);
        logoElement.style.setProperty("--logo-mouse-y", `${y}px`);
      }
    },
    []
  );

  const handleLogoMouseMove = useCallback(
    (logoId: number, event: React.MouseEvent) => {
      // Only update mouse position if this logo is currently hovered
      if (hoveredLogo === logoId) {
        const logoElement = logoRefs.current[logoId];
        if (logoElement) {
          const rect = logoElement.getBoundingClientRect();
          const x = event.clientX - rect.left;
          const y = event.clientY - rect.top;

          // Update CSS custom properties for smooth gradient movement
          logoElement.style.setProperty("--logo-mouse-x", `${x}px`);
          logoElement.style.setProperty("--logo-mouse-y", `${y}px`);
        }
      }
    },
    [hoveredLogo]
  );

  const handleLogoLeave = useCallback(() => {
    setHoveredLogo(null);
  }, []);

  // Cleanup animation frame on unmount
  useEffect(() => {
    return () => {
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
    };
  }, []);

  return (
    <section className="business-section overflow-hidden">
      {/* Only visible on Desktop device*/}
      <div className="hidden xl:block relative translate-y-[13.5dvh] 2xl:translate-y-0">
        <div className={styles.logoGridWrapper}>
          <div
            ref={logoGridRef}
            className={`${styles.logoGrid}`}
            onMouseMove={handleLogoGridMouseMove}
          >
            {logos.map((logo, index) => (
              <div
                key={logo.id}
                ref={(el) => {
                  logoRefs.current[logo.id] = el;
                }}
                className={`${styles.logo} ${
                  hoveredLogo === logo.id ? styles.hovered : ""
                }`}
                style={{ zIndex: logos.length - index }}
                onMouseEnter={(e) => handleLogoHover(logo.id, e)}
                onMouseMove={(e) => handleLogoMouseMove(logo.id, e)}
                onMouseLeave={handleLogoLeave}
              >
                {/* Visual Dividers - Only visible on desktop */}
                <div
                  className={`${styles.blockVisualDivider} ${styles.horizontal}`}
                ></div>
                <div
                  className={`${styles.blockVisualDivider} ${styles.verticalTop}`}
                ></div>
                <div
                  className={`${styles.blockVisualDivider} ${styles.verticalBottom}`}
                ></div>
                {/* Additional divider classes for CSS targeting */}
                <div
                  className={`${styles.blockVisualDivider} ${styles.topLeft}`}
                ></div>
                <div
                  className={`${styles.blockVisualDivider} ${styles.topRight}`}
                ></div>
                <div
                  className={`${styles.blockVisualDivider} ${styles.bottomLeft}`}
                ></div>
                <div
                  className={`${styles.blockVisualDivider} ${styles.bottomRight}`}
                ></div>

                {/* Border Wrapper */}
                <div className={styles.borderWrapper}>
                  <div className={styles.overflowWrapper}>
                    {/* Border Background Elements */}
                    <div className={styles.borderBgV}></div>
                    <div className={styles.borderBgH}></div>

                    {/* Border Holder with Gradient */}
                    <div className={styles.borderHolder}></div>

                    {/* Background Holder */}
                    <div className={`${styles.backgroundHolder}`}></div>

                    {/* Slot Wrapper for Logo Image */}
                    <div className={styles.slotWrapper}>
                      <picture className={styles.image}>
                        <img
                          src={logo.src}
                          alt={logo.alt}
                          className={`${styles.logoImage} grayscale`}
                        />
                      </picture>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* Only visible on Mobile device*/}
      <div className="block xl:hidden pb-20">
        <BusinessGridMobile />
      </div>
    </section>
  );
};

export default BusinessUnit;