"use client";

import { useState } from "react";

// Put something on the clipboard, and fall back visibly when that is not
// allowed.
//
// navigator.clipboard needs a secure context. localhost counts, so the happy
// path is the normal one here -- but a copy that silently does nothing is the
// worst possible failure for a button whose entire job is "now paste this
// somewhere else". So on failure the text is shown in a selectable box instead
// of an error, which is still one keystroke from done.

type Props = {
  /** Literal text, or a URL to fetch it from (used for the big digests). */
  text?: string;
  url?: string;
  label?: string;
  title?: string;
  className?: string;
};

export default function CopyButton({ text, url, label = "copy", title, className }: Props) {
  const [state, setState] = useState<"idle" | "busy" | "done" | "failed">("idle");
  const [fallback, setFallback] = useState<string | null>(null);

  const run = async () => {
    setState("busy");
    setFallback(null);
    try {
      let body = text ?? "";
      if (url) {
        const r = await fetch(url, { cache: "no-store" });
        if (!r.ok) throw new Error(await r.text());
        body = await r.text();
      }
      await navigator.clipboard.writeText(body);
      setState("done");
      setTimeout(() => setState("idle"), 1600);
    } catch {
      // Re-fetch is cheap and avoids holding a large digest in state for the
      // whole page life just in case this path is taken.
      try {
        const body = url ? await (await fetch(url, { cache: "no-store" })).text() : (text ?? "");
        setFallback(body);
      } catch {
        setFallback(null);
      }
      setState("failed");
    }
  };

  return (
    <>
      <button
        type="button"
        onClick={run}
        title={title}
        data-copy
        data-state={state}
        className={
          className ??
          "rounded border border-[var(--color-line)] px-2 py-0.5 text-[11px] text-[var(--color-dim)] hover:border-[var(--color-sel)] hover:text-[var(--color-sel)]"
        }
      >
        {state === "done" ? "copied" : state === "busy" ? "…" : label}
      </button>
      {fallback !== null && (
        <div className="mt-1 w-full">
          <p className="text-[10px] text-[var(--color-dim)]">
            the clipboard was refused — select and copy:
          </p>
          <textarea
            readOnly
            autoFocus
            onFocus={(e) => e.currentTarget.select()}
            value={fallback}
            rows={8}
            className="w-full rounded border border-[var(--color-line)] bg-[var(--color-ink)] p-2 font-mono text-[11px] text-[var(--color-text)]"
          />
        </div>
      )}
    </>
  );
}