import { AnimatePresence, motion } from 'framer-motion';
import { observer } from 'mobx-react-lite';
import React from 'react';

import { SectionViewLogger } from '../HomePageClient';
import { SongPreviewCardContainer } from '../components/SongPreviewCardContainer';
import { SongPreviewSectionProps } from '../utils/songPreviewTypes';

const SongPreviewSection: React.FC<SongPreviewSectionProps> = observer(
  ({
    clip,
    isLoading,
    onCreateRedirect,
    songsAlmostReady = 'Your song is being made',
    songsReadyText = 'A preview of your first song is ready',
    signUpToListen = 'Sign up for free to listen',
    loadingSubtext = 'This should only take about 30 seconds.',
    readySubtext = 'Sign up for free to hear the full version and create more songs.',
    requireSignUp = false,
  }) => {
    // Use isLoading directly if provided, otherwise let SongPreviewCard handle its own loading state
    const songsReady = isLoading !== undefined ? !isLoading : undefined;

    return (
      <AnimatePresence mode='wait'>
        <motion.section
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{
            type: 'tween',
            duration: 0.5,
            ease: 'easeInOut',
          }}
        >
          <div className='relative flex min-h-[100vh] flex-col items-center justify-center px-4'>
            <SectionViewLogger sectionName='SongPreview' />

            {/* Header Text */}
            <div className='mb-8 w-full max-w-[984px]'>
              <AnimatePresence mode='wait'>
                <motion.h1
                  key={songsReady ? 'ready' : 'almost-ready'}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  transition={{ duration: 0.4 }}
                  className='max-w-[725px] text-center font-sans text-[32px] leading-[40px] font-normal text-white not-italic md:text-left md:text-[48px] md:leading-[64px]'
                >
                  {songsReady ? songsReadyText : songsAlmostReady}
                </motion.h1>
              </AnimatePresence>

              <AnimatePresence mode='wait'>
                <motion.p
                  key={songsReady ? 'ready-subtext' : 'loading-subtext'}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -20 }}
                  transition={{ duration: 0.4, delay: 0.2 }}
                  className='mt-4 max-w-[725px] text-center font-sans text-[18px] leading-normal font-normal text-white md:text-left'
                >
                  {songsReady ? readySubtext : loadingSubtext}
                </motion.p>
              </AnimatePresence>
            </div>

            <SongPreviewCardContainer
              clip={clip}
              isLoading={isLoading}
              onSignUp={onCreateRedirect}
              signUpToListen={signUpToListen}
              requireSignUp={requireSignUp}
            />
          </div>
        </motion.section>
      </AnimatePresence>
    );
  }
);

export default SongPreviewSection;