import { useCallback } from "react";
import { platform } from "@/lib/platform";
import { useAutoplayPayloadStore } from "@/stores/autoplay-payload-store";
import { AutoplayCardContent } from "@/components/autoplay-card-content";

/**
 * Bottom-right floating autoplay card used on the web client. The desktop
 * client uses a separate BrowserWindow (`src/autoplay_window/`), so this
 * component renders nothing on Electron.
 */
export function InAppAutoplayCard() {
  const payload = useAutoplayPayloadStore((s) => s.payload);
  const setPayload = useAutoplayPayloadStore((s) => s.setPayload);
  const setPendingNav = useAutoplayPayloadStore((s) => s.setPendingNav);

  const handleDismiss = useCallback(() => setPayload(null), [setPayload]);

  const handleNavigate = useCallback(() => {
    if (!payload) return;
    setPayload(null);
    setPendingNav({ networkId: payload.networkId, streamId: payload.streamId });
  }, [payload, setPayload, setPendingNav]);

  if (platform.kind !== "web") return null;
  if (!payload) return null;

  const isVideo = payload.mimeType.startsWith("video/");

  return (
    <div
      className="fixed bottom-4 right-4 z-50 w-80 overflow-hidden rounded-lg shadow-lg"
      style={{ height: isVideo ? 180 : 64 }}
    >
      <AutoplayCardContent
        payload={payload}
        onDismiss={handleDismiss}
        onNavigate={handleNavigate}
        onEnded={handleDismiss}
      />
    </div>
  );
}
