import {
  Checkbox,
  FormControl,
  FormErrorMessage,
  Input,
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalOverlay,
  Radio,
  RadioGroup,
  Stack,
  Text,
  Textarea,
} from '@chakra-ui/react';
import { useState } from 'react';

import { useStores } from '@/app/(root)/AppProviders';
import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { toast } from '@/components/toast/Toast';
import { useModalContext } from '@/context/ModalContext';

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

const CopyrightFlagModal: React.FC = () => {
  const { closeModal, getModalData } = useModalContext();
  const { clips } = useStores();
  const [ownershipType, setOwnershipType] = useState('mine');
  const [originalLink, setOriginalLink] = useState('');
  const [description, setDescription] = useState('');
  const [hasConfirmedContent, setHasConfirmedContent] = useState(false);
  const [hasAcknowledgedPenalty, setHasAcknowledgedPenalty] = useState(false);
  const [isFlagging, setIsFlagging] = useState(false);
  const [isLinkTouched, setIsLinkTouched] = useState(false);

  const modalData = getModalData(ModalTypes.COPYRIGHT_FLAG);
  const clipId = modalData?.clipId || '';

  const resetForm = () => {
    setOwnershipType('mine');
    setOriginalLink('');
    setDescription('');
    setHasConfirmedContent(false);
    setHasAcknowledgedPenalty(false);
    setIsFlagging(false);
    setIsLinkTouched(false);
  };

  const handleClose = () => {
    resetForm();
    closeModal(ModalTypes.COPYRIGHT_FLAG);
  };

  const isValidUrl = (urlString: string) => {
    try {
      const url = new URL(urlString);
      return url.protocol === 'http:' || url.protocol === 'https:';
    } catch {
      return false;
    }
  };

  const isLinkValid = originalLink.trim() === '' || isValidUrl(originalLink);
  const showLinkError = !isLinkValid && isLinkTouched;

  const handleSubmit = async () => {
    if (!isValidUrl(originalLink)) {
      return;
    }

    setIsFlagging(true);
    try {
      await clips.flagClip(clipId, 'flag_copyright', {
        ownershipType,
        originalLink,
        description,
        hasConfirmedContent,
        hasAcknowledgedPenalty,
      });
      handleClose();
      toast({
        title: 'Copyright claim submitted',
        status: 'info',
        duration: 3000,
      });
    } catch (error) {
      toast({
        title: 'Error submitting claim',
        status: 'error',
        duration: 3000,
      });
    }
    setIsFlagging(false);
  };

  return (
    <Modal isOpen={true} onClose={handleClose} isCentered size='xl'>
      <ModalOverlay />
      <ModalContent
        bg='var(--color-background-primary)'
        color='var(--color-foreground-primary)'
        borderRadius='32px'
      >
        <Stack spacing={6} p={6}>
          <div className='flex items-center justify-between'>
            <span className='font-serif text-2xl'>
              Report Copyright Infringement
            </span>
            <CloseButton onClick={handleClose} className='focus:shadow-none' />
          </div>

          <ModalBody p={0}>
            <Stack spacing={6}>
              <div>
                <Text mb={2}>Song URL</Text>
                <Input
                  value={`https://suno.com/song/${clipId}`}
                  readOnly
                  bg='#252020'
                  border='none'
                />
              </div>

              <div>
                <Text mb={2}>
                  Is this infringing your work or someone else&apos;s?
                </Text>
                <RadioGroup
                  value={ownershipType}
                  onChange={setOwnershipType}
                  sx={{
                    '& .chakra-radio__control': {
                      _checked: {
                        bg: `var(--color-accent-pink)`,
                        borderColor: `var(--color-accent-pink)`,
                      },
                    },
                  }}
                >
                  <Stack>
                    <Radio value='mine'>This is my copyrighted work</Radio>
                    <Radio value='other'>
                      This is someone else&apos;s copyrighted work
                    </Radio>
                  </Stack>
                </RadioGroup>
              </div>

              <FormControl isInvalid={showLinkError}>
                <Text mb={2}>Link to original work</Text>
                <Input
                  placeholder='https://'
                  value={originalLink}
                  onChange={(e) => {
                    setOriginalLink(e.target.value);
                    setIsLinkTouched(true);
                  }}
                  onBlur={() => setIsLinkTouched(true)}
                  bg='#252020'
                  border='none'
                />
                <FormErrorMessage>Please enter a valid URL</FormErrorMessage>
              </FormControl>

              <div>
                <Text mb={2}>
                  Describe the specific copyrighted content that appears in this
                  song
                </Text>
                <Textarea
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder='E.g., melody from [song title] at 0:45, lyrics from chorus of [song title], etc'
                  bg='#252020'
                  border='none'
                  rows={2}
                />
              </div>

              <Checkbox
                isChecked={hasConfirmedContent}
                onChange={(e) => setHasConfirmedContent(e.target.checked)}
                spacing='5'
                sx={{
                  '& .chakra-checkbox__control': {
                    _checked: {
                      bg: `var(--color-accent-pink)`,
                      borderColor: `var(--color-accent-pink)`,
                    },
                  },
                }}
              >
                I confirm that this song contains the copyrighted content
              </Checkbox>

              <Checkbox
                isChecked={hasAcknowledgedPenalty}
                onChange={(e) => setHasAcknowledgedPenalty(e.target.checked)}
                spacing='5'
                sx={{
                  '& .chakra-checkbox__control': {
                    _checked: {
                      bg: `var(--color-accent-pink)`,
                      borderColor: `var(--color-accent-pink)`,
                    },
                  },
                }}
              >
                I understand that submitting false copyright claims may result
                in <br />
                account penalties
              </Checkbox>
            </Stack>
          </ModalBody>

          <ModalFooter px={0} pb={0}>
            <Button
              onClick={handleClose}
              variant={ButtonVariant.Secondary}
              className='mr-2 bg-[#2F2A2A]!'
            >
              Cancel
            </Button>
            <Button
              onClick={handleSubmit}
              disabled={
                !isValidUrl(originalLink) ||
                !hasConfirmedContent ||
                !hasAcknowledgedPenalty ||
                isFlagging
              }
              icon={isFlagging ? <SpinnerSVG /> : undefined}
              variant={ButtonVariant.Primary}
              className='bg-white! text-black!'
            >
              Submit
            </Button>
          </ModalFooter>
        </Stack>
      </ModalContent>
    </Modal>
  );
};

export default CopyrightFlagModal;