'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { MatrixPlayback } from '@/components/dot-matrix/playback-entry';

// Illustrative samples and clock. Connect these values to your audio engine.
const waveform = Array.from({ length: 96 }, (_, i) => .18 + .72 * Math.abs(Math.sin(i * .37) * Math.cos(i * .13)));

function usePreviewClock(running: boolean, advance: (seconds: number) => void, pause: () => void) {
  const frame = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (!running) return;
    const stopWhenHidden = () => { if (document.hidden) pause(); };
    const observer = new IntersectionObserver(([entry]) => { if (!entry.isIntersecting) pause(); });
    if (frame.current) observer.observe(frame.current);
    document.addEventListener('visibilitychange', stopWhenHidden);
    window.addEventListener('blur', pause);
    let last = performance.now();
    const timer = window.setInterval(() => {
      const now = performance.now();
      if (!document.hidden) advance((now - last) / 1000);
      last = now;
    }, 100);
    return () => {
      clearInterval(timer); observer.disconnect();
      document.removeEventListener('visibilitychange', stopWhenHidden);
      window.removeEventListener('blur', pause);
    };
  }, [running, advance, pause]);
  return frame;
}

export default function PlaybackExample() {
  const [playing, setPlaying] = useState(false);
  const [elapsed, setElapsed] = useState(24);
  const [scrubbing, setScrubbing] = useState(false);
  const advance = useCallback((dt: number) => setElapsed(t => Math.min(144, t + dt)), []);
  const pause = useCallback(() => setPlaying(false), []);
  const frame = usePreviewClock(playing && !scrubbing && elapsed < 144, advance, pause);
  return <div ref={frame} style={{ width: '100%' }}>
    <MatrixPlayback playing={playing && elapsed < 144} elapsed={elapsed} duration={144}
      title="Coastal recording" subtitle="Notes from the coast" waveform={waveform}
      onToggle={() => { if (elapsed >= 144) { setElapsed(0); setPlaying(true); } else setPlaying(p => !p); }}
      onSeek={setElapsed} onScrubChange={setScrubbing} />
  </div>;
}