"use client";

import { useState, useTransition } from "react";
import {
  moveReportAction,
  publishReportAction,
  unpublishReportAction,
  type ReportsActionResult,
} from "../lib/reportsActions";

// One report's buttons on the Reports tab: Publish for a draft; Up, Down and
// Unpublish for a published report. Each is one write of site.json `reports`
// (lib/reportsActions.ts); the action revalidates the tab, which re-renders
// with the list as written.
export function ReportRowActions({
  siteId,
  reportId,
  position,
  publishedCount,
  publishable,
}: {
  siteId: string;
  reportId: string;
  // Its place in the published list, or null for a draft.
  position: number | null;
  publishedCount: number;
  // Why it may not be published, or null when it may.
  publishable: string | null;
}) {
  const [pending, start] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const run = (fn: () => Promise<ReportsActionResult>) => {
    setError(null);
    start(async () => {
      const res = await fn();
      if (!res.ok) setError(res.error);
    });
  };
  const btn =
    "rounded border border-border px-2 py-1 text-xs hover:bg-muted disabled:opacity-50";

  return (
    <span className="flex flex-wrap items-center gap-2">
      {position === null ? (
        <button
          type="button"
          disabled={pending || publishable !== null}
          title={publishable ?? undefined}
          aria-label={`Publish report ${reportId}`}
          onClick={() => run(() => publishReportAction(siteId, reportId))}
          className={btn}
        >
          {pending ? "Publishing…" : "Publish"}
        </button>
      ) : (
        <>
          <button
            type="button"
            disabled={pending || position === 0}
            aria-label={`Move report ${reportId} up`}
            onClick={() => run(() => moveReportAction(siteId, reportId, -1))}
            className={btn}
          >
            ↑
          </button>
          <button
            type="button"
            disabled={pending || position >= publishedCount - 1}
            aria-label={`Move report ${reportId} down`}
            onClick={() => run(() => moveReportAction(siteId, reportId, 1))}
            className={btn}
          >
            ↓
          </button>
          <button
            type="button"
            disabled={pending}
            aria-label={`Unpublish report ${reportId}`}
            onClick={() => run(() => unpublishReportAction(siteId, reportId))}
            className={btn}
          >
            Unpublish
          </button>
        </>
      )}
      {error && (
        <span role="alert" className="text-xs text-destructive">
          {error}
        </span>
      )}
    </span>
  );
}