'use client';

import { useEffect, useRef } from 'react';

export type PartnerLogo = {
  name: string;
  logo: string;
};

/**
 * Infinite partner-logo strip under the partnership heading.
 * Always loops (duplicated track); hover left/right steers like the brand LogoScroll.
 */
export default function PartnerLogoStrip({ logos }: { logos: PartnerLogo[] }) {
  const areaRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const setRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const area = areaRef.current;
    const track = trackRef.current;
    const set = setRef.current;
    if (!area || !track || !set || !logos.length) return;

    const idle = 0.45;
    const steer = (idle * 5) / 3;
    let x = 0;
    let direction = -1;
    let speed = idle;
    let isHover = false;
    let setWidth = set.getBoundingClientRect().width;
    let frame = 0;

    const onResize = () => {
      setWidth = set.getBoundingClientRect().width;
      if (setWidth > 0) {
        while (x <= -setWidth) x += setWidth;
        while (x >= 0) x -= setWidth;
      }
    };
    const onEnter = () => {
      isHover = true;
    };
    const onLeave = () => {
      isHover = false;
      direction = -1;
      speed = idle;
    };
    const onMove = (e: MouseEvent) => {
      const rect = area.getBoundingClientRect();
      const percent = (e.clientX - rect.left) / rect.width;
      if (percent < 0.35) {
        direction = -1;
        speed = steer;
      } else if (percent > 0.65) {
        direction = 1;
        speed = steer;
      } else {
        speed = 0;
      }
    };
    const tick = () => {
      if (!isHover) {
        direction = -1;
        speed = idle;
      }
      if (setWidth > 0) {
        x += direction * speed;
        if (x <= -setWidth) x += setWidth;
        if (x >= 0) x -= setWidth;
        track.style.transform = `translate3d(${x}px, 0, 0)`;
      }
      frame = requestAnimationFrame(tick);
    };

    // Images may load after mount and change set width.
    const observer = new ResizeObserver(onResize);
    observer.observe(set);
    onResize();

    window.addEventListener('resize', onResize);
    area.addEventListener('mouseenter', onEnter);
    area.addEventListener('mouseleave', onLeave);
    area.addEventListener('mousemove', onMove);
    tick();

    return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      window.removeEventListener('resize', onResize);
      area.removeEventListener('mouseenter', onEnter);
      area.removeEventListener('mouseleave', onLeave);
      area.removeEventListener('mousemove', onMove);
    };
  }, [logos]);

  if (!logos.length) return null;

  const items = (hidden: boolean) =>
    logos.map((logo, i) => (
      <div className="home-partner-logo-item" key={`${logo.logo}-${i}`}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={logo.logo} alt={hidden ? '' : logo.name} />
      </div>
    ));

  return (
    <div className="home-partner-logos home-partner-logos-scroll" ref={areaRef}>
      <div className="home-partner-logo-track" ref={trackRef}>
        <div className="home-partner-logo-set" ref={setRef}>
          {items(false)}
        </div>
        <div className="home-partner-logo-set" aria-hidden="true">
          {items(true)}
        </div>
      </div>
    </div>
  );
}