'use client';

import { useState, useEffect, useRef, useCallback } from 'react';
import { MatrixCapture, type CaptureState } from '@/components/dot-matrix/capture-entry';

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 CaptureExample() {
  const [state, setState] = useState<CaptureState>('idle');
  const [elapsed, setElapsed] = useState(0);
  const advance = useCallback((dt: number) => setElapsed(t => t + dt), []);
  const pause = useCallback(() => setState(s => s === 'recording' ? 'paused' : s), []);
  const frame = usePreviewClock(state === 'recording', advance, pause);
  return <div ref={frame} style={{ width: '100%', display: 'grid', justifyItems: 'center' }}>
    <MatrixCapture state={state} elapsed={elapsed}
      onStart={() => { setElapsed(0); setState('recording'); }}
      onPause={pause} onResume={() => setState('recording')}
      onFinish={() => setState('saved')}
      onDiscard={() => { setState('idle'); setElapsed(0); }} />
  </div>;
}