"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { drainJobAction } from "../actions";

type Props = {
  jobId: string;
  draining?: boolean;
};

export function DrainJobButton({ jobId, draining }: Props) {
  const [busy, setBusy] = useState(false);
  const router = useRouter();
  if (draining) {
    return (
      <span className="px-2 py-1 rounded border border-warning/30 text-xs font-medium text-warning">
        Draining…
      </span>
    );
  }
  return (
    <button
      type="button"
      onClick={async () => {
        setBusy(true);
        try {
          await drainJobAction(jobId);
          router.refresh();
        } finally {
          setBusy(false);
        }
      }}
      disabled={busy}
      title="Finish the in-flight operations, start no new ones, then release the queue"
      className="px-2 py-1 rounded border border-warning/30 text-xs font-medium text-warning hover:bg-warning-soft disabled:opacity-50"
    >
      {busy ? "Draining…" : "Drain"}
    </button>
  );
}