"use client";
import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { RotateCcw, Trash2 } from "lucide-react";
import { restoreImages, purgeFromTrash } from "@/app/actions/trash";
import { relativeTime } from "@/lib/utils";
import { thumbUrl } from "@/lib/assetUrls";

export interface TrashCardImage {
  id: number;
  thumbPath: string;
  width: number;
  height: number;
  code: string | null;
  title: string | null;
  rating: number | null;
  watched: boolean;
  studioName: string | null;
  deletedAt: number;
}

export function TrashCard({ image }: { image: TrashCardImage }) {
  const [pending, start] = useTransition();
  const router = useRouter();

  const onRestore = () => {
    start(async () => {
      await restoreImages([image.id]);
      router.refresh();
    });
  };
  const onPurge = () => {
    if (!confirm("Permanently delete this cover? Cannot be undone.")) return;
    start(async () => {
      await purgeFromTrash([image.id]);
      router.refresh();
    });
  };

  return (
    <div className="group relative block rounded-2xl overflow-hidden glass" style={{ breakInside: "avoid" }}>
      <div className="relative">
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          src={thumbUrl({ thumbPath: image.thumbPath, code: image.code, id: image.id })}
          alt={image.title ?? image.code ?? ""}
          loading="lazy"
          width={image.width}
          height={image.height}
          className="w-full h-auto block opacity-70"
        />
        {image.code && (
          <span className="absolute top-3 left-3 text-[10px] uppercase tracking-wider font-mono px-2 py-0.5 rounded-full glass-strong text-[var(--color-cyan)]">
            {image.code}
          </span>
        )}
        <span className="absolute top-3 right-3 text-[10px] uppercase tracking-wider font-mono px-2 py-0.5 rounded-full backdrop-blur-md border border-[var(--color-coral)]/30 text-[var(--color-coral)] bg-[var(--color-coral)]/10">
          deleted {relativeTime(image.deletedAt)}
        </span>

        <div className="absolute inset-x-0 bottom-0 p-3 bg-gradient-to-t from-black/85 via-black/55 to-transparent flex items-center gap-2">
          <button
            onClick={onRestore}
            disabled={pending}
            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-[var(--color-cyan)]/20 text-[var(--color-cyan)] border border-[var(--color-cyan)]/40 hover:bg-[var(--color-cyan)]/30 disabled:opacity-50"
          >
            <RotateCcw className="w-3.5 h-3.5" /> Restore
          </button>
          <button
            onClick={onPurge}
            disabled={pending}
            className="flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-lg bg-[var(--color-coral)]/15 text-[var(--color-coral)] border border-[var(--color-coral)]/40 hover:bg-[var(--color-coral)]/25 disabled:opacity-50"
          >
            <Trash2 className="w-3.5 h-3.5" /> Delete forever
          </button>
        </div>
      </div>
    </div>
  );
}