"use client";

import { useState } from "react";
import { checkAvailabilityAction } from "../[slug]/availabilityActions";

type Status =
  | { kind: "idle" }
  | { kind: "running"; jobId?: string }
  | { kind: "done"; jobId: string }
  | { kind: "error"; message: string };

export function ChannelAvailabilityButton({
  slug,
  disabled,
}: {
  slug: string;
  disabled?: boolean;
}) {
  const [status, setStatus] = useState<Status>({ kind: "idle" });

  async function handleClick() {
    setStatus({ kind: "running" });
    try {
      // No queueKey override → server picks platformQueueKey(channel) by
      // default, matching the channel-detail page's availability buttons and
      // sharing the rate-limit budget with Sync.
      const result = await checkAvailabilityAction(slug, "resume");
      if (!result.ok) {
        setStatus({ kind: "error", message: result.error });
        return;
      }
      setStatus({ kind: "running", jobId: result.jobId });
      const reader = result.stream.getReader();
      while (true) {
        const { done } = await reader.read();
        if (done) break;
      }
      setStatus({ kind: "done", jobId: result.jobId });
    } catch (e) {
      setStatus({ kind: "error", message: (e as Error).message });
    }
  }

  const running = status.kind === "running";
  return (
    <div className="flex items-center gap-2">
      <button
        type="button"
        onClick={handleClick}
        disabled={running || disabled}
        aria-label={`check availability ${slug}`}
        className="px-2 py-1 rounded-md bg-muted text-foreground text-xs font-medium hover:opacity-90 disabled:opacity-50"
      >
        {running ? "Checking…" : "Check availability"}
      </button>
      {status.kind === "error" && (
        <span
          role="alert"
          aria-label={`check availability ${slug} error`}
          className="text-xs text-destructive"
        >
          {status.message}
        </span>
      )}
      {status.kind === "running" && status.jobId && (
        <span
          aria-label={`check availability ${slug} job`}
          className="text-xs text-muted-foreground font-mono"
        >
          job {status.jobId}
        </span>
      )}
      {status.kind === "done" && (
        <span
          aria-label={`check availability ${slug} done`}
          className="text-xs text-muted-foreground"
        >
          done (job {status.jobId})
        </span>
      )}
    </div>
  );
}