'use client';

import clsx from 'clsx';
import React, { ReactNode } from 'react';
import { twMerge } from 'tailwind-merge';

import { ButtonVariant } from '@/components/button/Button';
import Modal from '@/components/modal/Modal';
import { isMobileBrowser } from '@/utils/device';

import CloseButton from '../button/CloseButton';

const DEFAULT_AURA_IMAGE = 'https://cdn-o.suno.com/auras-v2/Aura-1-Hero.jpg';

export interface AuraModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title?: string;
  icon?: React.ReactElement;
  iconClassName?: string;
  children: ReactNode;
  className?: string;
  closeButtonClasses?: string;
  contentWrapperClasses?: string;
  auraImage?: string;
  textAlign?: 'center' | 'left' | 'right';
  titleClassName?: string;
  contentInnerClassName?: string;
  hideCloseButton?: boolean;
}

export default function AuraModal({
  open,
  onOpenChange,
  title,
  icon,
  iconClassName,
  children,
  className,
  closeButtonClasses,
  contentWrapperClasses,
  auraImage = DEFAULT_AURA_IMAGE,
  textAlign = 'center',
  titleClassName = '',
  contentInnerClassName = '',
  hideCloseButton = false,
}: AuraModalProps) {
  const isMobile = isMobileBrowser();
  if (!open) return null;
  const wrapperClasses = clsx('mb-0 overflow-y-auto', {
    'max-h-[400px] rounded-[32px]': isMobile,
  });

  return (
    <Modal
      onClose={() => onOpenChange(false)}
      className={className}
      showCloseButton={false}
      disablePadding
      wrapperClasses={wrapperClasses}
      contentWrapperClasses={twMerge(
        'w-full max-w-[500px] rounded-[32px] border border-border-primary',
        contentWrapperClasses
      )}
    >
      <div className='relative flex h-full w-full flex-col rounded-[32px]'>
        <div className='absolute top-0 left-0 h-full w-full overflow-hidden rounded-[32px]'>
          <img src={auraImage} alt='' className='h-full w-full object-cover' />
          <div
            className='absolute inset-0'
            style={{
              background:
                'linear-gradient(rgba(14, 8, 8, 0) -69.77%, #0E0808 53.4%)',
            }}
          />
        </div>

        <div
          className={twMerge(
            clsx(
              'relative z-10 flex h-full w-full flex-col rounded-[32px] p-6 text-white',
              {
                'text-center': textAlign === 'center',
                'text-left': textAlign === 'left',
                'text-right': textAlign === 'right',
              }
            ),
            contentInnerClassName
          )}
        >
          {!hideCloseButton && (
            <div className='absolute top-4 right-4 z-10'>
              <CloseButton
                variant={ButtonVariant.Tertiary}
                className={closeButtonClasses}
                onClick={() => onOpenChange(false)}
              />
            </div>
          )}

          {icon && (
            <span
              className={twMerge(
                'inline-flex items-center justify-center rounded-full bg-foreground-primary/10 p-4',
                iconClassName
              )}
            >
              {icon}
            </span>
          )}

          <div className='flex flex-shrink-0 items-center justify-center pb-4'>
            <h2
              className={twMerge(
                'max-w-full font-serif text-[40px] font-light',
                titleClassName,
                !title && 'sr-only'
              )}
            >
              {title || 'Modal'}
            </h2>
          </div>
          <div className='mb-2'>{children}</div>
        </div>
      </div>
    </Modal>
  );
}