"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { buttonVariants } from "@/components/ui/button";

// Copy the manifest into revisions/ with an optional label. The page re-renders
// on success, so the new snapshot appears in the list with its (empty) diff.
export default function SnapshotButton({ project }: { project: string }) {
  const router = useRouter();
  const [label, setLabel] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  return (
    <span className="flex flex-wrap items-center gap-1.5">
      <input
        value={label}
        onChange={(e) => setLabel(e.target.value)}
        placeholder="label (optional)"
        aria-label="snapshot label"
        data-snapshot-label
        className="w-36 rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]"
      />
      <button
        type="button"
        data-action="snapshot"
        disabled={busy}
        className={buttonVariants({ size: "sm" })}
        onClick={async () => {
          setBusy(true);
          setError(null);
          try {
            const r = await fetch("/api/report/snapshot", {
              method: "POST",
              headers: { "content-type": "application/json" },
              body: JSON.stringify({ project, label: label.trim() || null }),
            });
            const j = (await r.json()) as { error?: string };
            if (!r.ok) throw new Error(j.error ?? String(r.status));
            setLabel("");
            router.refresh();
          } catch (e) {
            setError(e instanceof Error ? e.message : String(e));
          } finally {
            setBusy(false);
          }
        }}
      >
        snapshot
      </button>
      {error && <span className="text-[11px] text-[var(--color-bad)]">{error}</span>}
    </span>
  );
}