'use client';

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

import type { GenerationCarouselItem } from '@/hooks/useSongModal';
import { SparklesIcon } from '@/icons';

import { GenerationHistoryEntity } from './GenerationHistoryEntity';
import { MediaType } from './generationHistoryTypes';
import { useGenerationHistory } from './useGenerationHistory';

interface GenerationHistoryModalProps {
  clipId: string;
  setImageToVideoPrompt: (prompt: string) => void;
  setMediaType: (mediaType: MediaType) => void;
  handleUploadImage: (file: File) => void;
  navigateToGenerationCarousel: (
    items: GenerationCarouselItem[],
    initialIndex: number
  ) => void;
}

export const GenerationHistoryModalContent = observer(
  ({
    clipId,
    setImageToVideoPrompt,
    setMediaType,
    handleUploadImage,
    navigateToGenerationCarousel,
  }: GenerationHistoryModalProps) => {
    const { history, toggleFavorite, query } = useGenerationHistory(clipId);

    // Sort and filter history for display
    const displayHistory = useMemo(() => {
      return history.sort(
        (a, b) =>
          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
      );
    }, [history]);

    // Flatten all items across all entities for carousel navigation
    // Only include completed items with URLs (excludes processing and error items)
    const allCarouselItems = useMemo(() => {
      return displayHistory.flatMap((entity) =>
        entity.items
          .filter((item) => item.status === 'complete' && item.url)
          .map((item) => ({
            id: item.id,
            clipId: item.clipId,
            title: entity.title,
            createdAt: entity.createdAt,
            url: item.url!,
            prompt: entity.prompt,
            videoModelDisplayName: entity.videoModelDisplayName,
            type: entity.type === 'image-to-video' ? 'video' : entity.type,
            isLiked: item.isLiked,
            videoUploadId: item.videoUploadId,
          }))
      );
    }, [displayHistory]);

    return (
      <div className='flex h-full max-h-[300px] w-full flex-col overflow-hidden'>
        <div className='flex max-h-[300px] min-h-[200px] flex-1 flex-col gap-4 overflow-y-auto px-4'>
          {query.isLoading ? (
            <div className='flex flex-1 items-center justify-center'>
              <SparklesIcon className='h-10 w-10 animate-pulse text-foreground-inactive' />
            </div>
          ) : displayHistory.length === 0 ? (
            <div className='flex flex-1 flex-col items-center justify-center gap-2 text-foreground-inactive'>
              <SparklesIcon className='h-15 w-15' />
              <div>Your generations will appear here.</div>
            </div>
          ) : (
            displayHistory.map((entity) => (
              <GenerationHistoryEntity
                key={entity.batchId}
                setImageToVideoPrompt={setImageToVideoPrompt}
                setMediaType={setMediaType}
                handleUploadImage={handleUploadImage}
                entity={entity}
                onToggleFavorite={toggleFavorite}
                navigateToGenerationCarousel={navigateToGenerationCarousel}
                allCarouselItems={allCarouselItems}
              />
            ))
          )}
        </div>
      </div>
    );
  }
);

export default GenerationHistoryModalContent;