'use client';

import { observer } from 'mobx-react-lite';
import { useCallback, useMemo } from 'react';

import ModalHeader from '@/components/modal/publishSong/ModalHeader';
import useLogOnMount from '@/hooks/useLogOnMount';
import type { GenerationCarouselItem } from '@/hooks/useSongModal';
import { SparklesIcon } from '@/icons';

import { GenerationHistoryItem } from './GenerationHistoryItem';
import { useVideoGenerationFavorites } from './useVideoGenerationFavorites';

interface GenerationFavoritesModalProps {
  onClose: () => void;
  onBack: () => void;
  navigateToGenerationCarousel?: (
    items: GenerationCarouselItem[],
    initialIndex: number
  ) => void;
}

export const GenerationFavoritesModalContent = observer(
  ({
    onClose,
    onBack,
    navigateToGenerationCarousel,
  }: GenerationFavoritesModalProps) => {
    // Track modal view
    useLogOnMount({
      actionName: 'GenerateCoverArtFavoritesModalViewed',
    });

    const { favorites, toggleFavorite, query } = useVideoGenerationFavorites();

    // Transform favorites into GenerationCarouselItem format
    const allCarouselItems: GenerationCarouselItem[] = useMemo(() => {
      return favorites.map((favorite) => ({
        id: favorite.id,
        clipId: favorite.clipId,
        title: favorite.title,
        createdAt: favorite.createdAt,
        url: favorite.url || '',
        prompt: favorite.prompt,
        type: favorite.type === 'image-to-video' ? 'video' : favorite.type,
        isLiked: favorite.isLiked,
        videoUploadId: favorite.videoUploadId,
      }));
    }, [favorites]);

    // Handle clicking on a generation item to open carousel
    const handleItemClick = useCallback(
      (itemId: string) => {
        if (navigateToGenerationCarousel) {
          const initialIndex = allCarouselItems.findIndex(
            (i) => i.id === itemId
          );
          navigateToGenerationCarousel(allCarouselItems, initialIndex);
        }
      },
      [allCarouselItems, navigateToGenerationCarousel]
    );

    return (
      <div className='flex h-full w-full flex-col'>
        <ModalHeader title='Favorites' onBack={onBack} onClose={onClose} />

        <div className='flex min-h-[500px] flex-1 flex-col gap-4 overflow-y-auto px-6 py-6'>
          {query.isLoading ? (
            <div className='flex flex-1 items-center justify-center'>
              <SparklesIcon className='h-10 w-10 animate-pulse text-foreground-inactive' />
            </div>
          ) : favorites.length === 0 ? (
            <div className='flex flex-1 items-center justify-center'>
              <p className='text-foreground-inactive'>No favorites yet</p>
            </div>
          ) : (
            <div className='flex flex-wrap gap-2'>
              {favorites.map((item) => (
                <div key={item.id} className='flex-shrink-0'>
                  <GenerationHistoryItem
                    item={item}
                    onToggleFavorite={toggleFavorite}
                    onClick={() => handleItemClick(item.id)}
                  />
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  }
);

export default GenerationFavoritesModalContent;