"use client";
import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { Trash2 } from "lucide-react";
import { deleteImage } from "@/app/actions/bulk";
import { useUndoDeleteToast } from "@/components/select/UndoDeleteToast";
import { useSettings } from "@/components/settings/SettingsProvider";

export function DetailDeleteButton({ id }: { id: number }) {
  const [pending, start] = useTransition();
  const router = useRouter();
  const { show: showUndo } = useUndoDeleteToast();
  const { settings } = useSettings();

  const onClick = (e: React.MouseEvent) => {
    const permanent = e.shiftKey || !settings.useRecycleBin;
    if (permanent && !confirm("Permanently delete this cover? Cannot be undone.")) return;
    start(async () => {
      await deleteImage(id, permanent ? { permanent: true } : undefined);
      if (!permanent) showUndo([id]);
      router.push("/");
    });
  };

  return (
    <button
      onClick={onClick}
      disabled={pending}
      title={settings.useRecycleBin ? "Send to trash · Shift-click for permanent delete" : "Delete permanently"}
      className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium border border-[var(--color-coral)]/40 bg-[var(--color-coral)]/10 text-[var(--color-coral)] hover:bg-[var(--color-coral)]/20 transition-colors whitespace-nowrap disabled:opacity-50"
    >
      <Trash2 className="w-3.5 h-3.5" />
      {pending ? "Deleting…" : "Delete"}
    </button>
  );
}