'use client';

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

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import CloseButton from '@/components/button/CloseButton';
import Avatar from '@/components/image/Avatar';
import ImageWithFallback from '@/components/image/ImageWithFallback';
import { useParentClip } from '@/hooks/useParentClip';
import { RemixIcon } from '@/icons';
import { SMALL_IMAGE } from '@/utils/constants';

interface ContestShareModalProps {
  clipId: string;
  onShare: () => void;
  onClose: () => void;
  className?: string;
  imageUrl: string;
}

export const ContestShareModal: React.FC<ContestShareModalProps> = ({
  clipId,
  onShare,
  onClose,
  className,
  imageUrl,
}) => {
  const { parentClip } = useParentClip({ clipId });
  const parentClipUserImageUrl = parentClip?.user_avatar_image_url;

  return (
    <div
      className={twMerge(
        'relative h-full w-full max-w-2xl',
        'rounded-3xl bg-background-primary',
        'py-12 md:py-7',
        'flex flex-col items-center gap-8',
        className
      )}
    >
      <CloseButton
        onClick={onClose}
        className='absolute top-3 right-4 z-10 md:top-6 md:right-6'
      />
      {/* Background blur effect with clip image */}
      {imageUrl && (
        <div className='absolute inset-0'>
          <ImageWithFallback
            src={imageUrl}
            alt=''
            className='h-5/6 w-full object-cover opacity-30 blur-3xl'
          />
        </div>
      )}

      {/* Main clip image */}
      <div className='relative flex flex-col items-center'>
        <div className='overflow-hidden rounded-2xl border border-border-secondary'>
          <ImageWithFallback
            src={imageUrl || ''}
            alt='Contest Submission'
            className='h-96 w-64 object-cover'
          />
        </div>

        {/* Remix attribution overlay */}
        {parentClip && (
          <div className='absolute -right-4 -bottom-2 -left-4'>
            <div className='rounded-xl bg-background-glass-thin p-2 backdrop-blur-xl'>
              <div className='text-md flex items-center justify-center gap-2'>
                <RemixIcon className='h-4 w-4 text-foreground-primary' />
                <span className='font-medium text-foreground-primary'>
                  Remix of
                </span>
                {parentClipUserImageUrl && (
                  <Avatar
                    className='h-5 w-5'
                    src={parentClipUserImageUrl || null}
                    imageSize={SMALL_IMAGE}
                    alt='Profile avatar'
                  />
                )}
                <span className='font-medium text-foreground-primary'>
                  {parentClip?.user_display_name || 'Unknown'}
                </span>
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Modal Text Content */}
      <div className='relative space-y-2.5 text-center'>
        <div className='flex items-center justify-center'>
          <RemixIcon className='h-10 w-10 text-foreground-primary' />
        </div>

        <div className='space-y-1'>
          <h2 className='text-3xl font-normal text-foreground-primary'>
            Your Remix was submitted!
          </h2>
          <p className='text-lg text-foreground-secondary'>
            Share it to increase your chances of winning
          </p>
        </div>

        <Button
          onClick={onShare}
          variant={ButtonVariant.Primary}
          shape={ButtonShape.Pill}
          size={ButtonSize.Medium}
          className={'w-full font-medium'}
        >
          Share
        </Button>
      </div>
    </div>
  );
};

export default ContestShareModal;