import clsx from 'clsx';
import { usePathname, useRouter } from 'next/navigation';
import { useContext, useEffect, useState } from 'react';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { ExtendRightIcon, RemixIcon } from '@/icons';
import logWebUserEvent from '@/logging/logWebUserEvent';
import { AudioUploadStatus } from '@/state/createV2Store';
import {
  handleRemixCoverAction,
  handleRemixExtendAction,
} from '@/utils/remixUtils';

import { AudioUpload } from '../createV2/AudioSectionNew';
import { AudioActions } from '../v2/types';
import UploadStateContext from './UploadStateContext';
import { Footer, MainContent, Wrapper } from './components';

type Props = {
  selected: boolean;
  icon: React.FC<any>;
  title: string;
  description: string;
  onClick: () => void;
};

const InfoButton = ({ selected, icon, title, description, onClick }: Props) => {
  const IconComponent = icon;
  return (
    <Button
      className={clsx(
        'h-auto w-full border-border-primary md:h-[200px] md:w-[150px]',
        {
          'border-2 bg-background-secondary': selected,
        }
      )}
      variant={ButtonVariant.Standard}
      shape={ButtonShape.Rounded}
      onClick={onClick}
    >
      <div className='justify-left flex flex-row items-center gap-2 md:flex-col md:justify-center'>
        <IconComponent className='h-6 w-6' />
        <span className='text-xl font-medium'>{title}</span>
        <span className='text-sm'>{description}</span>
      </div>
    </Button>
  );
};

const Finalize = ({ hideActions = false }: { hideActions?: boolean }) => {
  const { attemptClose, setInitializationCondition, setUploadStatus } =
    useContext(UploadStateContext);
  const [audioAction, setAudioAction] = useState<AudioActions>(
    AudioActions.SAVE
  );
  const pathname = usePathname();
  const router = useRouter();

  useEffect(() => {
    setInitializationCondition(null);
  }, []);

  const handleContinue = () => {
    logWebUserEvent({
      actionName: 'AudioUploadAction',
      context: {
        action: audioAction,
      },
    });

    const audioActionFn: any = {
      [AudioActions.COVER]: handleRemixCoverAction,
      [AudioActions.EXTEND]: handleRemixExtendAction,
      [AudioActions.SAVE]: null,
    }[audioAction ?? AudioActions.SAVE];

    if (!!audioActionFn) {
      setInitializationCondition(audioAction);
    }

    if (
      pathname !== '/create' &&
      pathname !== '/create/v2' &&
      pathname !== '/studio'
    ) {
      router.push('/create');
    }
    attemptClose();
  };

  return (
    <Wrapper>
      <MainContent
        className={clsx({
          'flex h-auto items-center justify-center py-8': hideActions,
        })}
      >
        <div
          className={clsx(
            'flex flex-row items-center gap-2 text-foreground-primary',
            {
              'w-full': hideActions,
            }
          )}
        >
          <AudioUpload
            onCancel={() => {
              setUploadStatus(AudioUploadStatus.CANCELLED);
              attemptClose();
            }}
          />
        </div>
        {!hideActions && (
          <>
            <div className='flex w-full flex-row justify-center py-8 text-foreground-primary'>
              <span className='text-xl'>Make something with your audio</span>
            </div>
            <div className='flex h-auto w-full flex-row flex-wrap gap-2'>
              <InfoButton
                selected={audioAction === AudioActions.COVER}
                icon={RemixIcon}
                title='Cover'
                description='Cover audio in any song style'
                onClick={() => {
                  setAudioAction(AudioActions.COVER);
                }}
              />
              <InfoButton
                selected={audioAction === AudioActions.EXTEND}
                icon={ExtendRightIcon}
                title='Extend'
                description='Make your audio longer'
                onClick={() => {
                  setAudioAction(AudioActions.EXTEND);
                }}
              />
              <InfoButton
                selected={audioAction === AudioActions.SAVE}
                icon={RemixIcon}
                title='Save to Library'
                description='Use this audio for later'
                onClick={() => {
                  setAudioAction(AudioActions.SAVE);
                }}
              />
            </div>
          </>
        )}
      </MainContent>
      {!hideActions && (
        <Footer>
          <Button
            className={clsx('w-full', {
              'bg-background-fog-thin': audioAction === null,
            })}
            variant={
              audioAction !== null
                ? ButtonVariant.Primary
                : ButtonVariant.Standard
            }
            shape={ButtonShape.Pill}
            size={ButtonSize.Large}
            onClick={handleContinue} // Use the new handler
          >
            Continue
          </Button>
        </Footer>
      )}
    </Wrapper>
  );
};

export default Finalize;