"use client";

import { useState, useTransition } from "react";
import { prioritizeChannelDownloadAction } from "../../operations/actions";

// One-click "Top of queue": prepend this channel to the auto-download policy and
// start the runner (prioritizeChannelDownloadAction).
export function PrioritizeButton({ slug }: { slug: string }) {
  const [pending, startTransition] = useTransition();
  const [done, setDone] = useState(false);
  const [error, setError] = useState<string | null>(null);

  function handleClick() {
    setError(null);
    startTransition(async () => {
      const res = await prioritizeChannelDownloadAction(slug);
      if (res.ok) setDone(true);
      else setError(res.error);
    });
  }

  return (
    <span className="inline-flex items-center gap-1.5">
      <button
        type="button"
        onClick={handleClick}
        disabled={pending || done}
        aria-label={`prioritize ${slug} for download`}
        title="Prepend to the auto-download queue and start the runner"
        className="px-2 py-1 rounded-md border border-border text-xs hover:bg-muted disabled:opacity-50 whitespace-nowrap"
      >
        {done ? "Queued ↑" : pending ? "…" : "Top of queue"}
      </button>
      {error && (
        <span role="alert" className="text-xs text-destructive">
          {error}
        </span>
      )}
    </span>
  );
}