"use client";

import { useState, useTransition } from "react";
import {
  refreshChannelSnapshotAction,
  type RefreshSnapshotResult,
} from "../../actions";

// THE CHANNEL'S "Refresh report". The regeneration runs on the serial
// refresh-report queue (release 17), so the action answers within ~15 s either
// way: nothing (the report is on disk; the page re-renders), `{ error }` (the
// walk could not run — an unmounted drive's sentence), or `{ notice }` (still
// queued: "Queued behind N report regenerations — …, job …"). Both are drawn
// under the button; they used to be dropped, so a refusal showed nothing.
export function RefreshSnapshotButton({ slug }: { slug: string }) {
  const [pending, startTransition] = useTransition();
  const [result, setResult] = useState<RefreshSnapshotResult>(undefined);
  return (
    <div className="flex flex-col items-start gap-1">
      <button
        type="button"
        onClick={() =>
          startTransition(async () => {
            setResult(undefined);
            setResult(await refreshChannelSnapshotAction(slug));
          })
        }
        disabled={pending}
        aria-label="refresh channel report"
        className="self-start px-3 py-1 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
      >
        {pending ? "Refreshing…" : "Refresh report"}
      </button>
      {result && "error" in result && (
        <span
          role="alert"
          aria-label="refresh report error"
          className="text-xs text-destructive"
        >
          {result.error}
        </span>
      )}
      {result && "notice" in result && (
        <span
          role="status"
          aria-label="refresh report notice"
          className="text-xs text-muted-foreground"
        >
          {result.notice}
        </span>
      )}
    </div>
  );
}