'use client';

import { useTranslations } from 'next-intl';

import { Trash2 } from 'lucide-react';

import Section from '@/components/common/Section';
import CreationCard from '@/components/creations/CreationCard';
import CreatorCard from '@/components/creators/CreatorCard';
import SectionHeader from '@/components/home/components/SectionHeader';
import { Button } from '@/components/ui/button';
import { ToastAction } from '@/components/ui/toast';
import { Text } from '@/components/ui/typography';
import { useToast } from '@/hooks/use-toast';
import { useFavorites } from '@/hooks/useFavorites';
import type { FavoriteItem } from '@/utils/favorites';

import { Link } from '@/i18n/navigation';

const FavoritesClient = () => {
  const t = useTranslations('favorites.page');
  const tActions = useTranslations('favorites.actions');
  const { toast } = useToast();
  const { addFavorite, count, creations, creators, isReady, removeFavorite } = useFavorites();
  const isEmpty = isReady && count === 0;

  const handleRemoveFavorite = (favorite: FavoriteItem) => {
    const removed = removeFavorite(favorite.kind, favorite.id);
    if (!removed) return;

    toast({
      title: favorite.kind === 'creator' ? tActions('creatorRemoved') : tActions('creationRemoved'),
      action: (
        <ToastAction altText={tActions('undo')} onClick={() => addFavorite(favorite)}>
          {tActions('undo')}
        </ToastAction>
      ),
    });
  };

  return (
    <div className="w-full pb-page">
      <Section surface="white" spacing="compact">
        <SectionHeader
          eyebrow={t('eyebrow')}
          title={t('title')}
          description={isReady ? t('description', { count }) : t('loading')}
          maxWidth
        />

        {!isReady && (
          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            {Array.from({ length: 5 }).map((_, index) => (
              <div
                key={index}
                className="aspect-square animate-pulse bg-white/70 shadow-sm"
                aria-hidden="true"
              />
            ))}
          </div>
        )}

        {isEmpty && (
          <div className="max-w-xl space-y-5 border border-[#151720]/10 bg-white/70 p-6 shadow-sm">
            <Text tone="muted">{t('empty')}</Text>
            <Button asChild>
              <Link href="/alkotasok">{t('browseCreations')}</Link>
            </Button>
          </div>
        )}

        {isReady && creators.length > 0 && (
          <section className="space-y-4">
            <Text as="div" variant="eyebrow" tone="soft">
              {t('creatorsTitle', { count: creators.length })}
            </Text>
            <div className="grid grid-cols-2 gap-x-4 gap-y-7 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
              {creators.map((favorite) => (
                <div key={`creator-${favorite.id}`} className="group/favorite relative min-w-0">
                  <CreatorCard creator={favorite.item} />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    aria-label={tActions('removeCreator')}
                    onClick={() => handleRemoveFavorite(favorite)}
                    className="absolute right-1 top-1 h-8 w-8 border border-white/80 bg-white/90 text-[#151720]/70 opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-red-50 hover:text-red-600 group-hover/favorite:opacity-100 focus-visible:opacity-100 focus-visible:ring-red-500/30"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          </section>
        )}

        {isReady && creations.length > 0 && (
          <section className="space-y-4">
            <Text as="div" variant="eyebrow" tone="soft">
              {t('creationsTitle', { count: creations.length })}
            </Text>
            <div className="grid grid-cols-2 gap-x-4 gap-y-7 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-6">
              {creations.map((favorite) => (
                <div key={`creation-${favorite.id}`} className="group/favorite relative min-w-0">
                  <CreationCard data={favorite.item} vertical />
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    aria-label={tActions('removeCreation')}
                    onClick={() => handleRemoveFavorite(favorite)}
                    className="absolute right-1 top-1 h-8 w-8 border border-white/80 bg-white/90 text-[#151720]/70 opacity-0 shadow-sm backdrop-blur transition-opacity hover:bg-red-50 hover:text-red-600 group-hover/favorite:opacity-100 focus-visible:opacity-100 focus-visible:ring-red-500/30"
                  >
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          </section>
        )}
      </Section>
    </div>
  );
};

export default FavoritesClient;