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

import BusinessGridMobile from "@/sections/home/Business/BusinessGridMobile";
import type { HomePageData } from "@/utils/strapi";

import { getStrapiImageUrl } from "@/utils/getStrapiUrl";
import styles from "./business-grid-unit.module.css";

// Helper function to get image URL
const getImageUrl = (imageData: any, fallback: string): string => {
  if (!imageData) return fallback;
  const imageUrl = imageData.url || imageData.data?.attributes?.url;
  if (!imageUrl) return fallback;
  return getStrapiImageUrl(imageUrl) || fallback;
};

interface BusinessGridUnitProps {
  homePageData?: HomePageData | null;
}

const BusinessGridUnit: React.FC<BusinessGridUnitProps> = ({ homePageData }) => {
  // Only show logos from API; no fallback when API has no items
  const logos = useMemo(() => {
    const businessUnits = homePageData?.businessUnits || [];
    const fallbackSrc = "/images/business/navana_battery.png";

    if (businessUnits.length === 0) return [];

    return businessUnits.map((item) => ({
      id: item.id,
      src: item.logoUrl || getImageUrl(item.logo, fallbackSrc),
      alt: item.altText || item.companyName || "Business Logo",
      company: item.companyName || "",
      link: item.link,
    }));
  }, [homePageData]);

  // Don't render the section if API returned no business units
  if (logos.length === 0) return null;
  
  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}>
                      {logo.link ? (
                        <a
                          href={logo.link}
                          target="_blank"
                          rel="noopener noreferrer"
                          aria-label={logo.alt}
                          className={styles.image}
                        >
                          <img
                            src={logo.src}
                            alt={logo.alt}
                            className={`${styles.logoImage} grayscale`}
                          />
                        </a>
                      ) : (
                        <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 logos={logos} />
      </div>
    </section>
  );
};

export default BusinessGridUnit;