pinkudex/components/trash/TrashPanel.tsx

"use client";
import { useEffect, useRef } from "react";
import { Trash2, X } from "lucide-react";
import { useTrashPanel } from "./TrashPanelProvider";
import { TrashGrid } from "./TrashGrid";
import { EmptyTrashButton } from "./EmptyTrashButton";
import { useClickOutside } from "@/lib/hooks/useClickOutside";
import type { TrashCardImage } from "./TrashCard";

interface PanelData {
  images: TrashCardImage[];
  retentionDays: number;
}

export function TrashPanel({ data }: { data: PanelData }) {
  const { open, close } = useTrashPanel();
  const ref = useRef<HTMLDivElement>(null);
  useClickOutside(ref, close, open);

  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") close(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, close]);

  if (!open) return null;

  const { images, retentionDays } = data;

  return (
    <div
      className="fixed inset-0 z-50 backdrop-blur-sm grid place-items-center p-4 sm:p-8"
      style={{ background: "color-mix(in oklch, var(--color-bg-0) 65%, transparent)" }}
    >
      <div
        ref={ref}
        className="w-full max-w-[1400px] h-[min(900px,calc(100vh-4rem))] flex flex-col rounded-2xl border border-[var(--color-glass-border-strong)] backdrop-blur-2xl overflow-hidden shadow-2xl"
        style={{ background: "color-mix(in oklch, var(--color-bg-0) 96%, transparent)" }}
      >
        <header className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-glass-border)]">
          <div>
            <div className="flex items-center gap-2">
              <Trash2 className="w-5 h-5 text-[var(--color-coral)]" />
              <h2 className="text-xl font-semibold tracking-tight">Recycle Bin</h2>
            </div>
            <p className="text-xs text-[var(--color-fg-dim)] mt-1">
              {images.length} image{images.length === 1 ? "" : "s"}
              {retentionDays > 0 && images.length > 0 && (
                <span className="text-[var(--color-fg-muted)]"> · auto-purged after {retentionDays} day{retentionDays === 1 ? "" : "s"}</span>
              )}
            </p>
          </div>
          <div className="flex items-center gap-2">
            <EmptyTrashButton count={images.length} />
            <button
              onClick={close}
              aria-label="Close trash"
              className="w-8 h-8 grid place-items-center rounded-lg text-[var(--color-fg-dim)] hover:text-[var(--color-fg)] hover:bg-[var(--color-glass)]"
            >
              <X className="w-4 h-4" />
            </button>
          </div>
        </header>

        <div className="flex-1 overflow-y-auto p-6">
          {images.length === 0 ? (
            <div className="glass rounded-2xl p-card text-center max-w-md mx-auto">
              <Trash2 className="w-10 h-10 mx-auto text-[var(--color-fg-dim)] mb-label" />
              <h3 className="text-xl font-medium">Trash Is Empty</h3>
              <p className="text-[var(--color-fg-dim)] mt-1 text-sm">
                Deleted images appear here for {retentionDays > 0 ? `${retentionDays} day${retentionDays === 1 ? "" : "s"}` : "as long as you keep them"} before they&rsquo;re gone for good.
              </p>
            </div>
          ) : (
            <TrashGrid images={images} />
          )}
        </div>
      </div>
    </div>
  );
}