'use client';

import React, { useState } from 'react';

import AnimatedLogo from '@/components/image/AnimatedLogo';
import SlideCarousel from '@/components/slideCarousel/SlideCarousel';

interface VideoPlaceholderOverlayProps {
  className?: string;
  height?: string;
}

function VideoPlaceholderOverlay({
  className,
  height = 'calc(100% - 28px)',
}: VideoPlaceholderOverlayProps) {
  return (
    <div
      className={`absolute top-1/2 left-[60%] z-0 -translate-y-1/2 transform ${className || 'right-[-20px]'}`}
      style={{
        height: height,
      }}
    >
      <VideoPlaceholder />
    </div>
  );
}

function VideoPlaceholder() {
  const tracks = [
    { color: 'bg-purple-500', content: 'bg-pink-500 h-20' },
    {
      color: 'bg-yellow-400',
      content:
        'bg-gradient-to-r from-red-500 via-pink-500 to-orange-400 h-16 flex items-center justify-between px-4',
    },
    { color: 'bg-pink-500', content: 'bg-orange-500 h-12' },
    { color: 'bg-green-500', content: 'grid grid-cols-2 gap-2 h-20' },
    { color: 'bg-blue-500', content: 'bg-yellow-400 h-16' },
    { color: 'bg-orange-500', content: '' },
  ];

  return (
    <div className='mx-auto w-full max-w-6xl rounded-2xl bg-black p-4'>
      <div className='flex gap-1'>
        <div className='w-80 space-y-1'>
          {tracks.map((track, i) => (
            <div key={i} className='flex rounded bg-gray-900'>
              <div className={`w-1 ${track.color} rounded-l`} />
              <div className='flex flex-1 items-center gap-3 p-3'>
                <div className={`h-8 w-8 rounded ${track.color}`} />
                <span className='text-sm text-gray-400'>S</span>
                <div className='h-6 w-6 rounded bg-gray-700' />
              </div>
            </div>
          ))}
        </div>

        <div className='flex-1 space-y-1'>
          <div className='h-20 rounded bg-pink-500' />

          <div className='h-16 rounded bg-gradient-to-r from-red-500 via-pink-500 to-orange-400' />

          <div className='flex gap-2'>
            <div className='h-12 flex-1 rounded bg-gray-900' />
            <div className='h-12 w-32 rounded bg-orange-500' />
          </div>

          <div className='grid h-20 grid-cols-2 gap-6'>
            <div className='rounded bg-blue-500' />
            <div className='rounded bg-blue-500' />
          </div>

          <div className='h-16 rounded bg-yellow-400' />
        </div>
      </div>
    </div>
  );
}

export const VideoCarousel = () => {
  const [carouselIndex, setCarouselIndex] = useState(0);

  return (
    <>
      {/* Middle row - commenting out to have single video for now */}
      <div className='flex w-full justify-center'>
        {/* Mobile: Slide Carousel */}
        <div className='w-full sm:hidden'>
          <SlideCarousel
            index={carouselIndex}
            onIndexChange={setCarouselIndex}
            slides={{
              card1: (
                <div className='relative mx-4 flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
                  <div className='relative flex-1'>
                    <div className='absolute top-[calc(25%-12px)] left-0'>
                      <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                        Video 1
                      </h3>
                    </div>
                  </div>
                  <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
                    <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
                    <span className='text-[24px] leading-none font-bold text-black'>
                      Studio
                    </span>
                  </div>
                  <VideoPlaceholderOverlay className='right-[-16px]' />
                </div>
              ),
              card2: (
                <div className='relative mx-4 flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
                  <div className='relative flex-1'>
                    <div className='absolute top-[calc(25%-12px)] left-0'>
                      <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                        Video 5
                      </h3>
                    </div>
                  </div>
                  <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
                    <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
                    <span className='text-[24px] leading-none font-bold text-black'>
                      Studio
                    </span>
                  </div>
                  <VideoPlaceholderOverlay className='right-[-16px]' />
                </div>
              ),
              card3: (
                <div className='relative mx-4 flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
                  <div className='relative flex-1'>
                    <div className='absolute top-[calc(25%-12px)] left-0'>
                      <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                        Video 3
                      </h3>
                    </div>
                  </div>
                  <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
                    <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
                    <span className='text-[24px] leading-none font-bold text-black'>
                      Studio
                    </span>
                  </div>
                  <VideoPlaceholderOverlay className='right-[-16px]' />
                </div>
              ),
              card4: (
                <div className='relative mx-4 flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
                  <div className='relative flex-1'>
                    <div className='absolute top-[calc(25%-12px)] left-0'>
                      <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                        Video 4
                      </h3>
                    </div>
                  </div>
                  <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
                    <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
                    <span className='text-[24px] leading-none font-bold text-black'>
                      Studio
                    </span>
                  </div>
                  <VideoPlaceholderOverlay className='right-[-16px]' />
                </div>
              ),
              card5: (
                <div className='relative mx-4 flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
                  <div className='relative flex-1'>
                    <div className='absolute top-[calc(25%-12px)] left-0'>
                      <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                        Video 5
                      </h3>
                    </div>
                  </div>
                  <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
                    <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
                    <span className='text-[24px] leading-none font-bold text-black'>
                      Studio
                    </span>
                  </div>
                  <VideoPlaceholderOverlay className='right-[-16px]' />
                </div>
              ),
              card6: (
                <div className='relative mx-4 flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
                  <div className='relative flex-1'>
                    <div className='absolute top-[calc(25%-12px)] left-0'>
                      <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                        Video 6
                      </h3>
                    </div>
                  </div>
                  <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
                    <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
                    <span className='text-[24px] leading-none font-bold text-black'>
                      Studio
                    </span>
                  </div>
                  <VideoPlaceholderOverlay className='right-[-16px]' />
                </div>
              ),
            }}
            slideOrder={['card1', 'card2', 'card3', 'card4', 'card5', 'card6']}
            showIndicators={false}
            loop={false}
            className='h-[250px]'
          />
          {/* Custom indicators */}
          <div className='mt-4 flex justify-center'>
            <div className='flex gap-2'>
              {[0, 1, 2, 3, 4, 5].map((index) => (
                <button
                  key={index}
                  onClick={() => setCarouselIndex(index)}
                  className={`h-2 w-2 cursor-pointer rounded-full ${
                    carouselIndex === index ? 'bg-gray-800' : 'bg-gray-400'
                  }`}
                  aria-label={`Go to slide ${index + 1}`}
                />
              ))}
            </div>
          </div>
        </div>

        {/* Desktop: Grid Layout */}
        <div className='hidden w-full max-w-[1440px] gap-5 gap-y-[88px] sm:grid sm:grid-cols-2 lg:grid-cols-3'>
          <div className='relative flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
            <div className='relative flex-1'>
              <div className='absolute top-[calc(25%-12px)] left-0'>
                <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                  Video 1
                </h3>
              </div>
            </div>
            <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
              <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
              <span className='text-[24px] leading-none font-bold text-black'>
                Studio
              </span>
            </div>
            <VideoPlaceholderOverlay />
          </div>
          <div className='relative flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
            <div className='relative flex-1'>
              <div className='absolute top-[calc(25%-12px)] left-0'>
                <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                  Video 2
                </h3>
              </div>
            </div>
            <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
              <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
              <span className='text-[24px] leading-none font-bold text-black'>
                Studio
              </span>
            </div>
            <VideoPlaceholderOverlay />
          </div>
          <div className='relative flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
            <div className='relative flex-1'>
              <div className='absolute top-[calc(25%-12px)] left-0'>
                <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                  Video 3
                </h3>
              </div>
            </div>
            <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
              <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
              <span className='text-[24px] leading-none font-bold text-black'>
                Studio
              </span>
            </div>
            <VideoPlaceholderOverlay />
          </div>

          {/* Second row of cards */}
          <div className='relative flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
            <div className='relative flex-1'>
              <div className='absolute top-[calc(25%-12px)] left-0'>
                <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                  Video 4
                </h3>
              </div>
            </div>
            <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
              <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
              <span className='text-[24px] leading-none font-bold text-black'>
                Studio
              </span>
            </div>
            <VideoPlaceholderOverlay />
          </div>
          <div className='relative flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
            <div className='relative flex-1'>
              <div className='absolute top-[calc(25%-12px)] left-0'>
                <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                  Video 5
                </h3>
              </div>
            </div>
            <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
              <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
              <span className='text-[24px] leading-none font-bold text-black'>
                Studio
              </span>
            </div>
            <VideoPlaceholderOverlay />
          </div>
          <div className='relative flex h-[250px] flex-col justify-between overflow-hidden rounded-[20px] border-[0.5px] border-black/50 p-[14px]'>
            <div className='relative flex-1'>
              <div className='absolute top-[calc(25%-12px)] left-0'>
                <h3 className='text-left text-[24px] font-medium text-black md:text-[32px]'>
                  Video 6
                </h3>
              </div>
            </div>
            <div className='relative z-10 flex w-1/2 max-w-[100px] items-center gap-2'>
              <AnimatedLogo className='pointer-events-auto h-[18px] w-auto flex-shrink-0 text-black' />
              <span className='text-[24px] leading-none font-bold text-black'>
                Studio
              </span>
            </div>
            <VideoPlaceholderOverlay />
          </div>
        </div>
      </div>
    </>
  );
};