pinkudex/components/settings/RegenThumbnailsButton.tsx

"use client";
import { useState, useTransition } from "react";
import { ImageIcon, Loader2, CheckCircle2 } from "lucide-react";
import { previewRegenThumbnails, regenerateThumbnails } from "@/app/actions/maintenance";

type State =
  | { kind: "idle" }
  | { kind: "scanning" }
  | { kind: "preview"; total: number; missing: number; staleNames: number }
  | { kind: "running" }
  | { kind: "done"; regenerated: number; renamed: number; skipped: number; errors: number };

export function RegenThumbnailsButton() {
  const [state, setState] = useState<State>({ kind: "idle" });
  const [pending, start] = useTransition();

  const scan = () => {
    setState({ kind: "scanning" });
    start(async () => {
      const r = await previewRegenThumbnails();
      setState({ kind: "preview", total: r.total, missing: r.missing, staleNames: r.staleNames });
    });
  };

  const run = (force: boolean) => {
    if (state.kind !== "preview") return;
    const count = force ? state.total : state.missing + state.staleNames;
    const verb = force ? "Re-encode" : "Regenerate missing + rename stale";
    if (!confirm(`${verb} for ${count} thumbnail${count === 1 ? "" : "s"}? Reads each cover from library/ when it needs encoding and renames legacy files in place when possible. Cannot be undone.`)) return;
    setState({ kind: "running" });
    start(async () => {
      const r = await regenerateThumbnails({ force });
      setState({ kind: "done", ...r });
    });
  };

  return (
    <div className="flex items-start justify-between gap-4 py-2">
      <div className="min-w-0">
        <div className="text-sm font-medium">Regenerate Thumbnails</div>
        <div className="text-xs text-[var(--color-fg-muted)] mt-0.5">
          Rebuild the grid-preview WebP files in <code className="font-mono">data/thumbs/</code> from the
          originals in <code className="font-mono">library/</code>, and rename legacy <code className="font-mono">&lt;sha&gt;.webp</code>
          files to the new <code className="font-mono">&lt;CODE&gt;-&lt;sha&gt;.webp</code> format. Use this if your thumbs folder
          was wiped, restored from an incomplete backup, or you upgraded to the code-prefix naming.
        </div>
        {state.kind === "preview" && (
          <div className="text-xs mt-2 text-[var(--color-fg-dim)] space-y-0.5">
            <div>
              <span className="font-mono text-[var(--color-cyan)]">{state.missing}</span> missing on disk
              {" · "}
              <span className="font-mono text-[var(--color-cyan)]">{state.staleNames}</span> with legacy filename
              {" · "}of {state.total} total
            </div>
          </div>
        )}
        {state.kind === "done" && (
          <div className="flex items-center gap-1.5 text-xs text-[var(--color-mint)] mt-2 flex-wrap">
            <CheckCircle2 className="w-3.5 h-3.5" />
            <span>Encoded {state.regenerated} · renamed {state.renamed} · skipped {state.skipped}</span>
            {state.errors > 0 && <span className="text-[var(--color-coral)]">· {state.errors} error{state.errors === 1 ? "" : "s"}</span>}
          </div>
        )}
      </div>
      <div className="flex-shrink-0 flex items-center gap-2">
        {state.kind === "idle" && (
          <button
            onClick={scan}
            disabled={pending}
            className="inline-flex items-center justify-center gap-1.5 min-w-[100px] text-xs px-3 py-1.5 rounded-lg glass glass-hover text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] whitespace-nowrap"
          >
            Scan
          </button>
        )}
        {(state.kind === "scanning" || state.kind === "running") && (
          <span className="flex items-center gap-1.5 text-xs text-[var(--color-fg-dim)]">
            <Loader2 className="w-3.5 h-3.5 animate-spin" />
            {state.kind === "scanning" ? "Scanning…" : "Regenerating…"}
          </span>
        )}
        {state.kind === "preview" && (
          <>
            <button
              onClick={() => setState({ kind: "idle" })}
              className="inline-flex items-center justify-center min-w-[80px] text-xs px-3 py-1.5 rounded-lg text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]"
            >
              Cancel
            </button>
            {(state.missing > 0 || state.staleNames > 0) && (
              <button
                onClick={() => run(false)}
                disabled={pending}
                className="inline-flex items-center justify-center gap-1.5 min-w-[100px] text-xs px-3 py-1.5 rounded-lg bg-[var(--color-cyan)]/15 text-[var(--color-cyan)] border border-[var(--color-cyan)]/40 hover:bg-[var(--color-cyan)]/25 disabled:opacity-40 whitespace-nowrap"
              >
                <ImageIcon className="w-3.5 h-3.5" /> Fix {state.missing + state.staleNames}
              </button>
            )}
            <button
              onClick={() => run(true)}
              disabled={pending}
              className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg border border-[var(--color-glass-border-strong)] text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)] disabled:opacity-40 whitespace-nowrap"
              title="Re-encode all thumbnails, replacing existing files. Useful after changing sharp/quality settings."
            >
              Re-encode all
            </button>
          </>
        )}
        {state.kind === "done" && (
          <button
            onClick={() => setState({ kind: "idle" })}
            className="inline-flex items-center justify-center min-w-[80px] text-xs px-3 py-1.5 rounded-lg text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]"
          >
            Done
          </button>
        )}
      </div>
    </div>
  );
}