import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import Link from '@/components/link/Link';
import { RemixIcon } from '@/icons';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '../button/Button';
import Modal from './Modal';

interface RemixPermissionModalProps {
  isOpen: boolean;
  onClose: () => void;
}

const RemixPermissionModal: React.FC<RemixPermissionModalProps> = observer(
  ({ isOpen, onClose }) => {
    const { session, clips } = useStores();
    const [isLoading, setIsLoading] = useState(false);
    const [loadingButton, setLoadingButton] = useState<'allow' | 'keep' | null>(
      null
    );

    if (session.hasSetRemixPerm) {
      return null;
    }

    if (!isOpen) {
      return null;
    }

    const handleAllowRemixing = async () => {
      try {
        setIsLoading(true);
        setLoadingButton('allow');
        await clips.setAllRemixPermissions(true);
        session.hasSetRemixPerm = true;
        onClose();
      } catch (error) {
        console.error('Failed to update remix permissions:', error);
      } finally {
        setIsLoading(false);
        setLoadingButton(null);
      }
    };

    const handleKeepNonRemixable = async () => {
      try {
        setIsLoading(true);
        setLoadingButton('keep');
        await clips.setAllRemixPermissions(false);
        session.hasSetRemixPerm = true;
        onClose();
      } catch (error) {
        console.error('Failed to update remix permissions:', error);
      } finally {
        setIsLoading(false);
        setLoadingButton(null);
      }
    };

    return (
      <Modal
        title='Introducing Remixing'
        onClose={onClose}
        contentWrapperClasses='text-white min-h-[550px] max-w-md mx-auto flex flex-col justify-center p-4 rounded-3xl'
        wrapperClasses='overflow-y-visible'
        titleWrapperClasses='flex justify-center items-center w-full relative z-10'
        titleClassName='text-4xl font-serif text-center'
        disableOutsideClick={true}
        closeButtonProps={{ style: { display: 'none' } }}
        renderIcon={() => (
          <div className='relative z-20 rounded-full bg-secondary/10 p-4'>
            <RemixIcon className='h-8 w-8' />
            <div className='absolute -top-1 -right-1 rounded bg-accent-brand px-1 text-xs font-bold text-dumbo-50'>
              NEW
            </div>
          </div>
        )}
      >
        <div className='absolute top-0 left-0 h-full w-full overflow-hidden rounded-3xl'>
          <div
            className='absolute top-0 left-0 h-full w-full bg-cover bg-center opacity-40'
            style={{
              backgroundImage: `url(https://cdn-o.suno.com/auras-v2/Aura-Remix.png)`,
            }}
          ></div>
          <div className='absolute top-0 left-0 h-full w-full bg-linear-to-b from-blue-600/98 from-0% via-purple-600/98 via-40% to-tertiary to-100% opacity-100'></div>
          <div className='absolute bottom-0 left-0 h-[85%] w-full bg-linear-to-t from-tertiary from-15% via-tertiary via-40% to-transparent to-100%'></div>
        </div>

        <div className='relative z-10 text-center'>
          <p className='mb-6 text-white/90'>
            Remix lets you put your own spin on your favorite Suno songs, not
            just your own!
          </p>

          <p className='mb-6'>
            <span className='font-medium text-white'>New songs</span>{' '}
            <span className='text-white/90'>
              you create will have &apos;Allow Remixes&apos; on by default, but
            </span>{' '}
            <span className='text-white/90 underline'>
              <Link
                href='https://help.suno.com/en/articles/5675265'
                target='_blank'
              >
                you can change this
              </Link>
            </span>{' '}
            <span className='text-white/90'>at any time.</span>
          </p>

          <p className='mb-8 text-white/90'>
            <span className='font-medium text-white'>Your existing songs</span>{' '}
            have &apos;Allow Remixes&apos; off. Do you want to make your
            existing Public songs Remixable?
          </p>

          <div className='mt-6 flex flex-col gap-3'>
            <Button
              variant={ButtonVariant.Primary}
              shape={ButtonShape.Pill}
              size={ButtonSize.Medium}
              className='flex h-14 items-center justify-center py-4 text-xl font-medium text-dumbo-50'
              onClick={handleAllowRemixing}
              disabled={isLoading}
            >
              {loadingButton === 'allow' ? 'Processing...' : "Yes, I'm in!"}
            </Button>

            <Button
              onClick={handleKeepNonRemixable}
              variant={ButtonVariant.Tertiary}
              shape={ButtonShape.Pill}
              size={ButtonSize.Medium}
              className='flex h-14 items-center justify-center py-4 text-white'
              disabled={isLoading}
            >
              {loadingButton === 'keep' ? 'Processing...' : 'Not now'}
            </Button>
          </div>
        </div>
      </Modal>
    );
  }
);

export default RemixPermissionModal;