"use client";

import { useState } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import { QueueControl } from "../../../../../components/QueueControl";
import { cancelJobAction } from "../../../../../jobs/actions";
import { refreshVideoMetadataAction } from "../videoActions";

// "Refresh metadata": re-read this video's metadata.info.json from its source,
// with no subtitles and no media — for a source that changed after the first
// fetch, like a livestream VOD that gains its processed formats and captions
// hours after it ends. It sits under the header's metadata (and its history),
// which is what it rewrites. The job's log ends with what the source now says;
// the rewrite appears in the history above as `refresh`.
export function RefreshMetadataControl({
  slug,
  videoId,
  defaultQueueKey,
  existingQueues,
}: {
  slug: string;
  videoId: string;
  defaultQueueKey: string;
  existingQueues: string[];
}) {
  const [queueKey, setQueueKey] = useState(defaultQueueKey);
  const actionLabel = `Refresh metadata for ${videoId}`;
  return (
    <StreamActionLog
      trigger={() => refreshVideoMetadataAction(slug, videoId, queueKey)}
      cancelAction={cancelJobAction}
      buttonLabel="Refresh metadata"
      runningLabel="Refreshing metadata…"
      label={actionLabel}
      extraControls={
        <QueueControl
          value={queueKey}
          onChange={setQueueKey}
          defaultQueueKey={defaultQueueKey}
          existingQueues={existingQueues}
          actionLabel={actionLabel}
        />
      }
    />
  );
}