'use client';

import * as Dialog from '@radix-ui/react-dialog';
import React from 'react';
import { twMerge } from 'tailwind-merge';

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

export interface ModelLaunchModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onUpgrade: () => void;
  backgroundImageUrl: string;
  badgeText: string;
  title: string;
  description: string;
  buttonText?: string;
  buttonHref?: string;
  closeButtonClassName?: string;
  contentWrapperClassName?: string; // or maybe just contentClassName?
  className?: string;
}

export const ModelLaunchModal = ({
  open,
  onOpenChange,
  onUpgrade,
  backgroundImageUrl,
  badgeText,
  title,
  description,
  buttonText = 'Upgrade for access',
  buttonHref,
  className,
  closeButtonClassName,
  contentWrapperClassName,
}: ModelLaunchModalProps) => {
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay
          className={twMerge('fixed inset-0 z-[9999] bg-black/60', className)}
        />
        <Dialog.Content
          className={twMerge(
            'fixed top-1/2 left-1/2 z-[9999] h-[520px] w-[280px] -translate-x-1/2 -translate-y-1/2 overflow-clip rounded-[24px] border border-white/15 bg-cover bg-center bg-no-repeat sm:h-[650px] sm:w-[360px] sm:rounded-[32px]',
            contentWrapperClassName
          )}
          style={{
            backgroundImage: `url(${backgroundImageUrl})`,
          }}
        >
          <div className='relative h-[520px] w-[280px] sm:h-[650px] sm:w-[360px]'>
            <div className='relative z-10 h-[520px] w-[280px] p-4 text-center text-white sm:h-[650px] sm:w-[360px] sm:p-6'>
              {/* Close Button */}
              <div className='absolute top-4 right-4 z-10 sm:top-6 sm:right-6'>
                <CloseButton
                  variant={ButtonVariant.Tertiary}
                  className={`bg-white text-black hover:bg-white/90 ${closeButtonClassName}`}
                  onClick={() => onOpenChange(false)}
                />
              </div>

              {/* NEW MODEL Badge */}
              <div className='absolute top-4 left-4 z-10 sm:top-6 sm:left-6'>
                <div className='inline-flex items-center rounded-full bg-strawberry-600 px-2 py-1 text-xs font-medium text-black uppercase sm:px-3 sm:text-sm'>
                  {badgeText}
                </div>
              </div>

              {/* Content */}
              <div className='flex h-[calc(520px-32px)] flex-col items-center justify-end pb-1 sm:h-[calc(650px-48px)]'>
                {/* Title */}
                <Dialog.Title className='mb-3 max-w-full font-serif text-[24px] leading-tight font-light text-white/90 sm:text-[29px]'>
                  {title.split('\n').map((line, index) => (
                    <React.Fragment key={index}>
                      {line}
                      {index < title.split('\n').length - 1 && <br />}
                    </React.Fragment>
                  ))}
                </Dialog.Title>

                {/* Description */}
                <p className='mb-4 max-w-[240px] text-sm leading-snug text-white sm:mb-6 sm:max-w-[300px] sm:text-base'>
                  {description.split('\n').map((line, index) => (
                    <React.Fragment key={index}>
                      {line}
                      {index < description.split('\n').length - 1 && <br />}
                    </React.Fragment>
                  ))}
                </p>

                {/* Upgrade Button */}
                <Button
                  variant={ButtonVariant.Primary}
                  size={ButtonSize.Large}
                  shape={ButtonShape.Pill}
                  onClick={onUpgrade}
                  href={buttonHref}
                  className='mt-2 bg-white px-3 py-2 text-sm font-medium text-black hover:bg-white/90 sm:px-4 sm:py-3 sm:text-[15px]'
                >
                  {buttonText}
                </Button>
              </div>
            </div>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default ModelLaunchModal;