'use client';

/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import React from 'react';
import { createPortal } from 'react-dom';

import Button, { ButtonShape, ButtonSize } from '@/components/button/Button';
import CloseButton from '@/components/button/CloseButton';
import { CheckIcon } from '@/icons';

interface DownloadSuccessModalProps {
  onClose: () => void;
  onDownload: () => void;
  title: string;
  message?: string;
  subMessage?: string;
  songTitle?: string;
}

const DownloadSuccessModal: React.FC<DownloadSuccessModalProps> = ({
  onClose,
  onDownload,
  title,
  message = "You've just grabbed your track, nice work!",
  subMessage = "It's all yours to enjoy, share in your next big project.",
  songTitle = '[Song name]',
}) => {
  return typeof window !== 'undefined'
    ? createPortal(
        <div
          className='modal-overlay fixed inset-0 z-[100000] flex items-center justify-center bg-black/60'
          onClick={onClose}
        >
          <div
            className='relative mx-4 w-full max-w-[480px] rounded-[32px] bg-background-secondary text-center text-white'
            onClick={(e) => e.stopPropagation()}
          >
            {/* Close button */}
            <div className='absolute top-4 right-4'>
              <CloseButton onClick={onClose} />
            </div>

            {/* Success content */}
            <div className='flex flex-col items-center px-6 py-8 pb-6 text-center'>
              <div className='mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-accent-success'>
                <CheckIcon className='h-8 w-8 text-white' />
              </div>

              <h2 className='m-0 mb-4 font-serif text-3xl font-light text-white'>
                {title}
              </h2>

              <p className='m-0 mb-2 text-base leading-relaxed text-foreground-secondary'>
                {message}
              </p>
              <p className='m-0 mb-8 text-base leading-relaxed text-foreground-secondary'>
                {subMessage}
              </p>

              <Button
                shape={ButtonShape.Pill}
                size={ButtonSize.Medium}
                onClick={onDownload}
                className='w-full border-none bg-background-tertiary text-lg font-medium text-white'
              >
                Download &ldquo;{songTitle}&rdquo;
              </Button>
            </div>
          </div>
        </div>,
        document.body
      )
    : null;
};

export default DownloadSuccessModal;