'use client';

import { useState } from 'react';
import { Play, X } from 'lucide-react';

import { cn } from '@/utils/cn';
import { ImagePlaceholder } from '../misc/image-placeholder';
import Image from 'next/image';

type AnimationStyle =
  | 'from-bottom'
  | 'from-center'
  | 'from-top'
  | 'from-left'
  | 'from-right'
  | 'fade'
  | 'top-in-bottom-out'
  | 'left-in-right-out';

type HeroVideoDialogProps = {
  animationStyle?: AnimationStyle;
  videoSrc: string;
  thumbnailSrc?: string | null;
  thumbnailAlt?: string;
  className?: string;
};

const animationTransforms: Record<AnimationStyle, string> = {
  'from-bottom': 'translateY(40px) scale(0.98)',
  'from-center': 'scale(0.86)',
  'from-top': 'translateY(-40px) scale(0.98)',
  'from-left': 'translateX(-40px) scale(0.98)',
  'from-right': 'translateX(40px) scale(0.98)',
  fade: 'scale(1)',
  'top-in-bottom-out': 'translateY(-48px) scale(0.98)',
  'left-in-right-out': 'translateX(-48px) scale(0.98)',
};

export default function HeroVideoDialog({
  animationStyle = 'from-center',
  videoSrc,
  thumbnailSrc = null,
  thumbnailAlt = 'Video thumbnail',
  className,
}: HeroVideoDialogProps) {
  const [isVideoOpen, setIsVideoOpen] = useState(false);

  return (
    <div className={cn('relative', className)}>
      <button
        type='button'
        className='group focus-visible:ring-primary-base focus-visible:ring-offset-bg-white-0 relative block w-full cursor-pointer overflow-hidden rounded-2xl text-left outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
        onClick={() => setIsVideoOpen(true)}
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        {thumbnailSrc ? (
          <Image
            src={thumbnailSrc}
            alt={thumbnailAlt}
            width={1920}
            height={1080}
            className='border-white-alpha/16 h-auto w-full rounded-2xl border object-cover transition duration-300 group-hover:brightness-90'
          />
        ) : (
          <ImagePlaceholder className='h-auto w-full rounded-2xl' />
        )}
        <span className='absolute inset-0 flex scale-95 items-center justify-center rounded-2xl transition duration-300 group-hover:scale-100'>
          <span className='bg-blue-alpha/10 flex size-24 items-center justify-center rounded-full backdrop-blur-md lg:size-28'>
            <span className='shadow-regular-md flex size-16 items-center justify-center rounded-full bg-linear-to-b from-blue-400 to-blue-600 transition duration-300 group-hover:scale-110 lg:size-20'>
              <Play className='fill-static-white text-static-white ml-1 size-7 lg:size-8' />
            </span>
          </span>
        </span>
      </button>

      {isVideoOpen ? (
        <div
          className='bg-static-black/60 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md'
          onClick={() => setIsVideoOpen(false)}
        >
          <div
            style={
              {
                '--video-dialog-from': animationTransforms[animationStyle],
              } as React.CSSProperties
            }
            className='animate-video-dialog-enter relative aspect-video w-full max-w-6xl'
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type='button'
              aria-label='Close video'
              onClick={() => setIsVideoOpen(false)}
              className='border-stroke-soft-200 bg-bg-white-0 text-text-strong-950 shadow-regular-xs absolute -top-14 right-0 flex size-10 items-center justify-center rounded-full border'
            >
              <X className='size-5' />
            </button>
            <div className='border-stroke-sub-300 bg-bg-strong-950 size-full overflow-hidden rounded-2xl border'>
              <iframe
                src={videoSrc}
                className='size-full rounded-2xl'
                allowFullScreen
                allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
                title='Video player'
              />
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}