import { WishCard } from '@/components/WishCard/WishCard';
import {
  useDeleteWish,
  useRestoreWish,
  useWishes,
} from '@/features/wishes/wishes.hooks';
import { Archive } from 'lucide-react';
import { useI18n } from '@/i18n/i18n';

export function ArchivePage() {
  const { t } = useI18n();
  const { data, isLoading } = useWishes('archived');
  const restore = useRestoreWish();
  const remove = useDeleteWish();

  return (
    <div className="grid gap-6">
      <section>
        <h1 className="font-display text-3xl">{t('archive.title')}</h1>
        <p className="text-sm text-muted">
          {t('archive.description')}
        </p>
      </section>

      {isLoading && <div className="text-muted">{t('common.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">
          <Archive className="h-10 w-10 text-muted" />
          <h2 className="text-xl font-semibold">{t('archive.emptyTitle')}</h2>
          <p className="text-sm text-muted">{t('archive.emptyText')}</p>
        </div>
      )}

      {data && data.length > 0 && (
        <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {data.map((wish) => (
            <WishCard
              key={wish.id}
              wish={wish}
              view="owner"
              onRestore={() => restore.mutate(wish.id)}
              onDelete={() => remove.mutate(wish.id)}
            />
          ))}
        </div>
      )}
    </div>
  );
}