import { useCallback, useEffect, useState } from 'react';
import type { AutoplayPayload } from '@/lib/autoplay-ipc';
import { AutoplayCardContent } from '@/components/autoplay-card-content';

export function AutoplayApp() {
  const [payload, setPayload] = useState<AutoplayPayload | null>(null);

  useEffect(() => {
    return window.electronAutoplay.onPlay((p) => setPayload(p));
  }, []);

  useEffect(() => {
    return window.electronAutoplay.onStop(() => setPayload(null));
  }, []);

  const handleDismiss = useCallback(() => {
    setPayload(null);
    window.electronAutoplay.dismiss();
  }, []);

  const handleNavigate = useCallback(() => {
    if (!payload) return;
    window.electronAutoplay.navigate({
      networkId: payload.networkId,
      streamId: payload.streamId,
    });
  }, [payload]);

  if (!payload) {
    return <div className="h-screen w-screen" />;
  }

  return (
    <div className="h-screen w-screen">
      <AutoplayCardContent
        payload={payload}
        onDismiss={handleDismiss}
        onNavigate={handleNavigate}
        onEnded={handleDismiss}
      />
    </div>
  );
}