"use client";

import Link from "next/link";
import { useState } from "react";
import {
  refreshAllChannelSnapshotsAction,
  type RefreshAllResult,
} from "../actions";

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

export function RefreshAllReportsButton() {
  const [status, setStatus] = useState<Status>({ kind: "idle" });

  async function handleClick() {
    setStatus({ kind: "running" });
    try {
      const result = await refreshAllChannelSnapshotsAction();
      setStatus({ kind: "done", result });
    } catch (e) {
      setStatus({ kind: "error", message: (e as Error).message });
    }
  }

  const running = status.kind === "running";
  return (
    // See SyncAllChannelsButton: an outline, and a result span that wraps to
    // its own line rather than stretching the header cluster.
    <div className="flex flex-wrap items-center justify-end gap-2">
      <button
        type="button"
        onClick={handleClick}
        disabled={running}
        aria-label="update all reports"
        className="h-8 rounded-md border border-border bg-transparent px-3 text-xs font-medium hover:bg-accent disabled:opacity-50"
      >
        {running ? "Updating…" : "Update all reports"}
      </button>
      {status.kind === "done" && (
        <span
          aria-label="update all reports result"
          className="text-xs text-muted-foreground"
          title={
            status.result.skipped.length === 0
              ? undefined
              : status.result.skipped
                  .map((s) => `${s.slug}: ${s.reason}`)
                  .join("\n")
          }
        >
          Queued {status.result.queued.length} · skipped{" "}
          {status.result.skipped.length} ·{" "}
          <Link
            href="/jobs"
            className="underline hover:text-foreground"
          >
            view jobs
          </Link>
        </span>
      )}
      {status.kind === "error" && (
        <span
          role="alert"
          aria-label="update all reports error"
          className="text-xs text-destructive"
        >
          {status.message}
        </span>
      )}
    </div>
  );
}