import {
  Modal,
  ModalContent,
  ModalOverlay,
  Stack,
  Text,
} from '@chakra-ui/react';
import { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { toast } from '@/components/toast/Toast';
import { WarningIcon } from '@/icons';

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

interface CopyrightFlagModalProps {
  isOpen: boolean;
  onClose: () => void;
  clipId: string;
}

const CopyrightFlagModal: React.FC<CopyrightFlagModalProps> = ({
  isOpen,
  onClose,
  clipId,
}) => {
  const [isAcknowledging, setIsAcknowledging] = useState(false);
  const { apiClient } = useStores();

  const handleAcknowledge = async () => {
    setIsAcknowledging(true);
    try {
      await (apiClient.POST as any)('/api/moderation/ack-copyright-warning', {
        body: { clipId },
      });
      toast({
        title: 'Acknowledged',
        status: 'info',
        duration: 2000,
      });
      onClose();
    } catch (error) {
      toast({
        title: 'Error acknowledging warning',
        status: 'error',
        duration: 2000,
      });
    }
    setIsAcknowledging(false);
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} isCentered size='xl'>
      <ModalOverlay />
      <ModalContent
        bg='var(--color-background-primary)'
        color='var(--color-foreground-primary)'
        borderRadius='32px'
      >
        <Stack spacing={6} p={6} align='center'>
          <WarningIcon className='size-12 text-foreground-primary' />
          <Text fontSize='2xl' fontWeight='bold' textAlign='center'>
            Copyright Infringement Warning
          </Text>
          <p className='text-center text-foreground-primary'>
            A song from your profile has been removed for violating copyright
            infringement, which violates our{' '}
            <a
              href='https://suno.com/community-guidelines'
              target='_blank'
              rel='noopener noreferrer'
              className='text-accent-pink-on-primary underline'
            >
              community guidelines
            </a>
            .
            <br />
            <br />
            Future abuse may result in restricted access (suspension) and/or
            account deletion for additional offenses. Actions taken by Suno,
            including removing content and potential account termination, are
            outlined within our{' '}
            <a
              href='https://suno.com/terms'
              target='_blank'
              rel='noopener noreferrer'
              className='text-accent-pink-on-primary underline'
            >
              Terms of Service
            </a>
            .
          </p>
          <Button
            onClick={handleAcknowledge}
            disabled={isAcknowledging}
            variant={ButtonVariant.Primary}
          >
            I understand
          </Button>
        </Stack>
      </ModalContent>
    </Modal>
  );
};

export default CopyrightFlagModal;