'use client';

/* eslint jsx-a11y/click-events-have-key-events: warn */
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import { useCallback } from 'react';

import SimpleBannerCarousel from '@/components/carousel/SimpleBannerCarousel';
import DiscoverSongCard from '@/components/carousel/carouselCards/DiscoverSongCard';
import SpinnerSVG from '@/components/svg/SpinnerSVG';
import { useClipById } from '@/hooks/useClipById';
import { ContextType } from '@/logging/contextTypes';
// import logWebUserEvent from '@/logging/logWebUserEvent';
import { ClipEntity } from '@/state/clipStore';
import {
  BannerGraphicCardTile,
  BannerSongCardTile,
  BannerTile,
} from '@/types/bannerTypes';

interface BannerTilesProps {
  tiles: BannerTile[];
}

interface GraphicCardTileProps {
  tile: BannerGraphicCardTile;
}

const GraphicCardTile: React.FC<GraphicCardTileProps> = ({ tile }) => {
  const router = useRouter();

  const handleClick = () => {
    if (tile.url) {
      // logWebUserEvent({
      //   actionName: 'BannerGraphicCardClicked',
      //   principalObjectType: 'banner_tile',
      //   principalObjectValue: tile.url,
      // });

      if (tile.url.startsWith('http')) {
        window.open(tile.url, '_blank');
      } else {
        router.push(tile.url);
      }
    }
  };

  return (
    <div
      className='flex h-[286px] w-[264px] flex-col overflow-hidden rounded-2xl'
      onClick={handleClick}
      role={tile.url ? 'button' : undefined}
      tabIndex={tile.url ? 0 : undefined}
    >
      {/* Background */}
      <div className='relative h-[210px] w-full'>
        {tile.backgroundMp4 ? (
          <video
            className='h-full w-full object-cover'
            autoPlay
            muted
            loop
            playsInline
          >
            <source src={tile.backgroundMp4} type='video/mp4' />
            {tile.backgroundImage && (
              <Image
                src={tile.backgroundImage}
                alt=''
                fill
                className='object-cover'
              />
            )}
          </video>
        ) : (
          tile.backgroundImage && (
            <Image
              src={tile.backgroundImage}
              alt=''
              fill
              className='object-cover'
            />
          )
        )}
      </div>

      {/* Text Overlay */}
      {(tile.textTitle || tile.textSubtitle) && (
        <div
          className='flex h-[76px] flex-col justify-center px-4 py-3'
          style={{
            backgroundColor: tile.textBackgroundColor || 'rgb(247, 244, 239)',
          }}
        >
          {tile.textTitle && (
            <h3 className='mb-2 font-sans text-[16px] leading-[20px] font-medium text-foreground-primary-on-dark'>
              {tile.textTitle.text}
            </h3>
          )}
          {tile.textSubtitle && (
            <p className='font-sans text-[14px] leading-[16px] font-medium text-foreground-tertiary-on-dark'>
              {tile.textSubtitle.text}
            </p>
          )}
        </div>
      )}
    </div>
  );
};

interface SongCardTileProps {
  tile: BannerSongCardTile;
}

const SongCardTile: React.FC<SongCardTileProps> = ({ tile }) => {
  const { data: clipData, isLoading, isError } = useClipById(tile.songId);

  if (isLoading) {
    return (
      <div className='flex h-[286px] flex-col items-center justify-center'>
        <SpinnerSVG />
      </div>
    );
  }

  if (isError || !clipData) {
    return (
      <div className='flex h-[286px] flex-col items-center justify-center'>
        <p className='text-foreground-tertiary'>Song not found</p>
      </div>
    );
  }

  return (
    <DiscoverSongCard
      clip={clipData as ClipEntity}
      index={0}
      className='h-[286px]'
      contextType={ContextType.Banner}
      contextId={tile.songId}
    />
  );
};

export const BannerTiles: React.FC<BannerTilesProps> = ({ tiles }) => {
  const renderTile = (tile: BannerTile, index: number) => {
    switch (tile.type) {
      case 'song_card':
        return <SongCardTile key={`song-${index}`} tile={tile} />;
      case 'graphic_card':
        return <GraphicCardTile key={`graphic-${index}`} tile={tile} />;
      default:
        return null;
    }
  };

  const renderCarouselItem = useCallback((tile: BannerTile) => {
    switch (tile.type) {
      case 'song_card':
        return <SongCardTile tile={tile} />;
      case 'graphic_card':
        return <GraphicCardTile tile={tile} />;
      default:
        return null;
    }
  }, []);

  if (tiles.length === 0) {
    return null;
  }

  return (
    <>
      {/* Mobile: Swipeable carousel for individual tiles */}
      <div className='flex justify-center 2xl:hidden'>
        <SimpleBannerCarousel
          items={tiles}
          renderItem={renderCarouselItem}
          className='w-[264px]'
          autoPlay={true}
          autoPlayDelay={7000}
        />
      </div>

      {/* Desktop: All tiles in a row */}
      <div className='hidden 2xl:flex 2xl:gap-4'>
        {tiles.map((tile, index) => renderTile(tile, index))}
      </div>
    </>
  );
};