'use client';

import React, { useRef, useEffect } from 'react';

interface AutoScrollRowProps {
  speed?: number;
  className?: string;
  ariaLabel?: string;
  children: React.ReactNode;
}

export default function AutoScrollRow({
  speed = 0.35,
  className = '',
  ariaLabel,
  children,
}: AutoScrollRowProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const targetEl = containerRef.current;
    if (!targetEl) return;
    const track = targetEl.firstElementChild as HTMLElement;
    if (!track) return;

    // Remove any previously added clones if re-running
    track.querySelectorAll('[data-clone="true"]').forEach((cl) => cl.remove());

    const items = Array.from(track.children) as HTMLElement[];
    if (!items.length) return;

    // Clone items for infinite marquee loop
    items.forEach((n) => {
      const c = n.cloneNode(true) as HTMLElement;
      c.setAttribute('aria-hidden', 'true');
      c.setAttribute('data-clone', 'true');
      c.tabIndex = -1;
      c.querySelectorAll('a, button').forEach((x) => ((x as HTMLElement).tabIndex = -1));
      track.appendChild(c);
    });

    const period = () => {
      if (track.children.length > items.length) {
        const offset =
          (track.children[items.length] as HTMLElement).offsetLeft -
          (track.children[0] as HTMLElement).offsetLeft;
        if (offset > 0) return offset;
      }
      return track.scrollWidth / 2;
    };

    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let stop = false;
    let pos = targetEl.scrollLeft || 0;
    let paused = false;
    let resumeTimer: ReturnType<typeof setTimeout> | undefined;

    function tick() {
      if (stop || !targetEl) return;
      if (!paused && !reduce) {
        const p = period();
        if (p > 0) {
          pos += speed;
          if (pos >= p) pos -= p;
          targetEl.scrollLeft = pos;
        }
      }
      requestAnimationFrame(tick);
    }
    const animId = requestAnimationFrame(tick);

    const pause = () => {
      paused = true;
      if (resumeTimer) clearTimeout(resumeTimer);
    };

    const resume = (d = 1800) => {
      if (resumeTimer) clearTimeout(resumeTimer);
      resumeTimer = setTimeout(() => {
        if (targetEl) {
          pos = targetEl.scrollLeft;
        }
        paused = false;
      }, d);
    };

    targetEl.addEventListener('pointerenter', pause);
    targetEl.addEventListener('pointerleave', () => resume(600));
    targetEl.addEventListener('touchstart', pause, { passive: true });
    targetEl.addEventListener('touchend', () => resume(), { passive: true });
    targetEl.addEventListener('focusin', pause);
    targetEl.addEventListener('focusout', () => resume());
    targetEl.addEventListener(
      'wheel',
      () => {
        pause();
        resume();
      },
      { passive: true }
    );
    targetEl.addEventListener(
      'scroll',
      () => {
        if (!paused || !targetEl) return;
        const p = period();
        if (p > 0) {
          if (targetEl.scrollLeft >= p) targetEl.scrollLeft -= p;
          else if (targetEl.scrollLeft <= 0) targetEl.scrollLeft += p;
        }
      },
      { passive: true }
    );

    return () => {
      stop = true;
      cancelAnimationFrame(animId);
      if (resumeTimer) clearTimeout(resumeTimer);
    };
  }, [speed]);

  return (
    <div
      ref={containerRef}
      className={`auto ${className}`.trim()}
      aria-label={ariaLabel}
      data-speed={speed}
    >
      {children}
    </div>
  );
}