// Full-screen image slideshow — auto-advances, no scroll-jacking.
const {
  useEffect: useBackgroundEffect,
  useRef: useBackgroundRef,
  useState: useBackgroundState,
} = React;

const BACKGROUND_TIMELINE_IMAGES = [
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image May 1, 2026, 01_06_52 PM.png',
    alt: 'Glass office dual monitor workstation with analytics and code',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 08_53_28 PM.png',
    alt: 'Green-screen terminal with paper stacks and server racks',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 09_02_47 PM.png',
    alt: '90s Windows workstation with bar charts and pie charts',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 08_51_24 PM.png',
    alt: 'Westlaw terminal in a wood-panelled law library',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 08_48_12 PM.png',
    alt: 'University computer lab with early IBM workstations',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 08_49_52 PM.png',
    alt: 'Vintage office workstation with monitors',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 08_52_23 PM.png',
    alt: 'Classic computer workstation in a professional office',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 08_56_50 PM.png',
    alt: 'Healthcare data workstation with monitors',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 08_59_20 PM.png',
    alt: 'Analytics workstation with multiple screens',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 09_02_21 PM.png',
    alt: 'Professional data workstation environment',
  },
  {
    src: 'Background Timeline Images/remastered/ChatGPT Image Apr 30, 2026, 09_02_35 PM.png',
    alt: 'Modern office workstation with analytics dashboard',
  },
];

const SLIDE_INTERVAL = 4000;

function BackgroundTimeline({ heroMode = false }) {
  const [activeIdx, setActiveIdx] = useBackgroundState(0);
  const [reducedMotion, setReducedMotion] = useBackgroundState(false);
  const timerRef = useBackgroundRef(null);
  const total = BACKGROUND_TIMELINE_IMAGES.length;

  useBackgroundEffect(() => {
    const query = window.matchMedia('(prefers-reduced-motion: reduce)');
    const sync = () => setReducedMotion(query.matches);
    sync();
    if (query.addEventListener) {
      query.addEventListener('change', sync);
      return () => query.removeEventListener('change', sync);
    }
    query.addListener(sync);
    return () => query.removeListener(sync);
  }, []);

  const startTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => {
      setActiveIdx(i => (i + 1) % total);
    }, SLIDE_INTERVAL);
  };

  useBackgroundEffect(() => {
    if (reducedMotion) return;
    startTimer();
    return () => clearInterval(timerRef.current);
  }, [reducedMotion, total]);

  const goTo = (i) => {
    setActiveIdx(i);
    startTimer(); // reset auto-advance on manual nav
  };

  if (heroMode) {
    return (
      <div className="bg-timeline-stage bg-timeline-hero-bg" aria-hidden="true">
        {BACKGROUND_TIMELINE_IMAGES.map((image, i) => {
          const isActive = i === activeIdx;
          const isPast = i < activeIdx;
          const inactiveScale = reducedMotion ? 1 : (isPast ? 1.75 : 1.0);
          const style = isActive
            ? { opacity: 1, zIndex: 2 }
            : { opacity: 0, zIndex: 1, transform: `scale(${inactiveScale})` };
          return (
            <img key={image.src}
              className={`bg-timeline-image ${isActive ? 'active' : ''}`}
              src={image.src} alt=""
              style={style}
            />
          );
        })}
        <div className="bg-timeline-shade" />
      </div>
    );
  }

  return (
    <section
      id="background-timeline"
      className="bg-timeline"
      aria-label="Full-screen visual timeline"
    >
      <div className="bg-timeline-stage">
        {BACKGROUND_TIMELINE_IMAGES.map((image, i) => {
          const isActive = i === activeIdx;
          const isPast = i < activeIdx;
          const inactiveScale = reducedMotion ? 1 : (isPast ? 1.75 : 1.0);
          const style = isActive
            ? { opacity: 1, zIndex: 2 }
            : { opacity: 0, zIndex: 1, transform: `scale(${inactiveScale})` };

          return (
            <img
              key={image.src}
              className={`bg-timeline-image ${isActive ? 'active' : ''}`}
              src={image.src}
              alt={image.alt}
              style={style}
            />
          );
        })}

        <div className="bg-timeline-shade" />

        <div className="bg-timeline-overlay">
          <div>
            <div className="label">
              <span className="label-accent">&bull;</span> 01 &mdash; VISUAL TIMELINE
            </div>
            <h2>A career through <em>systems.</em></h2>
          </div>
          <div className="bg-timeline-count">
            {String(activeIdx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')}
          </div>
        </div>

        <div className="bg-timeline-progress" aria-hidden="true">
          {BACKGROUND_TIMELINE_IMAGES.map((_, i) => (
            <span
              key={i}
              className={`bg-timeline-progress-bar ${i < activeIdx ? 'done' : ''} ${i === activeIdx ? 'active' : ''}`}
              onClick={() => goTo(i)}
              style={{ cursor: 'pointer' }}
            >
              <span />
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.BackgroundTimeline = BackgroundTimeline;