import { Trash2 } from 'lucide-react';
import { TRASH_RETENTION_DAYS } from '@family-wishlist/shared';
import { WishCard } from '@/components/WishCard/WishCard';
import { useRestoreWish, useWishes } from '@/features/wishes/wishes.hooks';
import { daysLeftUntil } from '@/lib/format';

export function TrashPage() {
  const { data, isLoading } = useWishes('deleted');
  const restore = useRestoreWish();

  return (
    <div className="grid gap-6">
      <section>
        <h1 className="font-display text-3xl">Trash</h1>
        <p className="text-sm text-muted">
          Deleted wishes are kept for {TRASH_RETENTION_DAYS} days, then permanently removed.
        </p>
      </section>

      {isLoading && <div className="text-muted">Loading...</div>}

      {!isLoading && data && data.length === 0 && (
        <div className="flex flex-col items-center gap-2 rounded-xl border border-border bg-surface/80 p-10 text-center shadow-card">
          <Trash2 className="h-10 w-10 text-muted" />
          <h2 className="text-xl font-semibold">Trash is empty</h2>
          <p className="text-sm text-muted">Deleted wishes will appear here for 30 days.</p>
        </div>
      )}

      {data && data.length > 0 && (
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {data.map((wish) => {
            const left = wish.deletedAt
              ? daysLeftUntil(wish.deletedAt, TRASH_RETENTION_DAYS)
              : TRASH_RETENTION_DAYS;
            return (
              <WishCard
                key={wish.id}
                wish={wish}
                view="owner"
                onRestore={() => restore.mutate(wish.id)}
                footer={
                  <p className="mt-2 text-xs font-medium text-warning">
                    Auto-removes in {left} day{left === 1 ? '' : 's'}
                  </p>
                }
              />
            );
          })}
        </div>
      )}
    </div>
  );
}