import {
  Flex,
  Modal,
  ModalBody,
  ModalContent,
  ModalOverlay,
  Text,
  VStack,
} from '@chakra-ui/react';
import { observer } from 'mobx-react-lite';
import { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { toast } from '@/components/toast/Toast';
import { Playlist } from '@/state/clipStore';

// import DevModeInputs from '../section/DevModeInputs';
import Button, { ButtonVariant } from '../button/Button';
import CloseButton from '../button/CloseButton';
import ModelSelect from '../select/ModelSelect';
import SpinnerSVG from '../svg/SpinnerSVG';

const RegeneratePlaylistModal = observer(
  ({
    isOpen,
    onClose,
  }: {
    playlist: Playlist;
    isOpen: boolean;
    onClose: () => void;
  }) => {
    const { genForm, library, playlist: playlistStore } = useStores();
    const [isRegenerating, setIsRegenerating] = useState(false);
    const state = { configurations: {} };
    // const setConfiguration = (field: string, value: any) => {
    //   state.configurations = {
    //     ...state.configurations,
    //     [field]: value,
    //   };
    // };

    const handleRegenerate = async () => {
      setIsRegenerating(true);

      try {
        if (library.activePlaylist) {
          const response = await playlistStore.regeneratePlaylist(
            library.activePlaylist.id,
            genForm.mv,
            state.configurations
          );
          if (response.status === 200) {
            toast({
              title: 'Playlist regenerated',
              description: 'Your playlist has been successfully regenerated.',
              status: 'info',
              duration: 5000,
              isClosable: true,
            });
          } else {
            toast({
              title: 'Error',
              description: 'Failed to regenerate playlist.',
              status: 'error',
              duration: 5000,
              isClosable: true,
            });
          }
        } else {
          throw new Error('No active playlist');
        }
        onClose();
      } catch (error) {
        toast({
          title: 'Error',
          description: 'Failed to regenerate playlist. Please try again.',
          status: 'error',
          duration: 5000,
          isClosable: true,
        });
      } finally {
        setIsRegenerating(false);
      }
    };

    // TODO (FY): Make this hover state better
    return (
      <Modal isOpen={isOpen} onClose={onClose} isCentered>
        <ModalOverlay />
        <ModalContent
          sx={{ bg: '#252020' }}
          borderRadius='32px'
          className='pb-4'
        >
          <Flex justifyContent='space-between' alignItems='center' px={3}>
            <Text className='pt-8 pl-4 font-serif text-3xl'>
              Regenerate Playlist
            </Text>
            <CloseButton onClick={onClose} />
          </Flex>
          <ModalBody>
            <VStack spacing={4} align='stretch'>
              <ModelSelect state={genForm} />
              {/* <DevModeInputs
                  state={state}
                  setConfiguration={setConfiguration}
                /> */}
              <Button
                variant={ButtonVariant.Primary}
                onClick={handleRegenerate}
                icon={isRegenerating && <SpinnerSVG />}
              >
                Regenerate Playlist
              </Button>
            </VStack>
          </ModalBody>
        </ModalContent>
      </Modal>
    );
  }
);

export default RegeneratePlaylistModal;