'use client';

import { Modal, ModalContent, ModalOverlay } from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import { useCallback, useEffect, useState } from 'react';

import { useGenerationNotifications } from '@/app/(root)/videogen/GenerationNotificationProvider';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import GenerateCoverArtModalContent from '@/components/modal/editClipMetadata/GenerateCoverArtModalContent';
import GenerationFavoritesModalContent from '@/components/modal/editClipMetadata/GenerateFavoritesModalContent';
import GenerationCarouselModalContent from '@/components/modal/editClipMetadata/GenerationCarouselModalContent';
import { useModalContext } from '@/context/ModalContext';
import ModalErrorBoundary from '@/error-boundaries/ModalErrorBoundary';
import SongModalContext, {
  type GenerationCarouselState,
  useSongModal,
} from '@/hooks/useSongModal';

export const DEFAULT_CAROUSEL_STATE: GenerationCarouselState = {
  items: [],
  initialIndex: 0,
  previousScreen: 'main',
};
const GenerateCoverArtModal = observer(() => {
  const { closeModal, isModalOpen, getModalData } = useModalContext();

  const { enablePendingToasts } = useGenerationNotifications();
  const isOpen = isModalOpen(ModalTypes.GENERATE_COVER_ART);
  const modalData = getModalData(ModalTypes.GENERATE_COVER_ART);

  // Create song modal context for navigation support
  const songModalContextValue = useSongModal({
    modalType: ModalTypes.GENERATE_COVER_ART,
  });

  const [initialImageURLForVideoGen, setInitialImageURLForVideoGen] = useState<
    string | null
  >(null);
  const [isViewingGenerationFavorites, setIsViewingGenerationFavorites] =
    useState(false);

  const { currentScreen, navigateTo, navigationState, setNavigationState } =
    songModalContextValue;

  // Update current screen based on modal states
  useEffect(() => {
    if (isOpen && isViewingGenerationFavorites) {
      navigateTo('generationFavorites');
    }
  }, [isViewingGenerationFavorites, isOpen, navigateTo]);

  const handleClose = useCallback(() => {
    setInitialImageURLForVideoGen(null);
    setIsViewingGenerationFavorites(false);
    setNavigationState({
      generationCarousel: DEFAULT_CAROUSEL_STATE,
    });
    closeModal(ModalTypes.GENERATE_COVER_ART);
  }, [closeModal, setNavigationState]);

  const navigateToGenerationCarousel = useCallback(
    (state: GenerationCarouselState) => {
      navigateTo('generationCarousel', {
        generationCarousel: state,
      });
    },
    [navigateTo]
  );

  // Guard: ensure modalData and clipId are defined
  if (!isOpen || !modalData?.clipId) {
    return null;
  }

  const clipId = modalData.clipId;
  const useClipCoverImage = modalData.useClipCoverImage;
  // Render content based on current screen
  const renderScreenContent = () => {
    switch (currentScreen) {
      case 'generationCarousel': {
        const carouselState =
          navigationState.generationCarousel ?? DEFAULT_CAROUSEL_STATE;
        return (
          <GenerationCarouselModalContent
            onClose={handleClose}
            onBack={() => {
              setNavigationState({
                generationCarousel: DEFAULT_CAROUSEL_STATE,
              });
              // Navigate back to the previous screen
              navigateTo(carouselState.previousScreen);
            }}
            onBackToMain={() => {
              setNavigationState({
                generationCarousel: DEFAULT_CAROUSEL_STATE,
              });
              navigateTo('main');
            }}
            initialState={carouselState}
            clipId={clipId}
          />
        );
      }
      case 'generationFavorites':
        return (
          <GenerationFavoritesModalContent
            onClose={handleClose}
            onBack={() => {
              setIsViewingGenerationFavorites(false);
              navigateTo('main');
            }}
            navigateToGenerationCarousel={(items, initialIndex) => {
              setIsViewingGenerationFavorites(false);
              navigateToGenerationCarousel({
                items,
                initialIndex,
                previousScreen: 'generationFavorites',
              });
            }}
          />
        );
      default:
        // Main screen - the generate cover art content
        return (
          <GenerateCoverArtModalContent
            onClose={handleClose}
            clipId={clipId}
            onViewFavorites={() => {
              setIsViewingGenerationFavorites(true);
            }}
            onGenerate={() => {
              enablePendingToasts();
            }}
            initialImageURLForVideoGen={initialImageURLForVideoGen || undefined}
            setInitialImageURLForVideoGen={setInitialImageURLForVideoGen}
            navigateToGenerationCarousel={navigateToGenerationCarousel}
            useClipCoverImage={!!useClipCoverImage}
          />
        );
    }
  };

  return (
    <SongModalContext.Provider value={songModalContextValue}>
      <Modal
        isOpen={true}
        onClose={handleClose}
        data-qaid='modal-generate-cover-art'
        isCentered
        blockScrollOnMount={false}
      >
        <ModalOverlay />
        <ModalContent
          borderRadius='32px'
          maxW={{ base: '90%', md: '600px' }}
          position='relative'
          overflow='auto'
          className='max-h-[100vh] bg-background-secondary! text-foreground-primary'
        >
          <ModalErrorBoundary>
            <div className='relative h-full w-full'>
              {renderScreenContent()}
            </div>
          </ModalErrorBoundary>
        </ModalContent>
      </Modal>
    </SongModalContext.Provider>
  );
});

export default GenerateCoverArtModal;