'use client';

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

import DiscoverCard from '@/components/card/DiscoverCard';
import SimpleVideoPlayer from '@/components/video/SimpleVideoPlayer';

import type { MediaType } from './generationHistoryTypes';

interface MediaCardWithOverlayProps {
  type: MediaType;
  mediaUrl: string;
  id: string;
  onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
  overlayButtons?: ReactNode;
  bottomButton?: ReactNode;
  className?: string;
}

/**
 * Shared component for displaying media cards with overlay buttons.
 * Supports both images (using DiscoverCard) and videos.
 * Used for both saved generation history items and temporary/unsaved media.
 */
export const MediaCardWithOverlay = ({
  type,
  mediaUrl,
  id,
  onClick,
  overlayButtons,
  bottomButton,
  className = '',
}: MediaCardWithOverlayProps) => {
  if (type === 'video') {
    return (
      <div
        className={twMerge(
          'relative h-[200px] w-[117px] overflow-clip rounded-2xl border border-border-secondary',
          onClick && 'cursor-pointer',
          className
        )}
        onClick={onClick}
        onKeyDown={
          onClick
            ? (e: React.KeyboardEvent) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  e.preventDefault();
                  onClick(e);
                }
              }
            : undefined
        }
        role={onClick ? 'button' : undefined}
        tabIndex={onClick ? 0 : undefined}
        aria-label={onClick ? 'View video details' : undefined}
      >
        <SimpleVideoPlayer
          key={id}
          url={mediaUrl}
          playing={true}
          muted={true}
          className='h-full w-full object-cover'
          loop
          playsInline={true}
        />
        {overlayButtons}
      </div>
    );
  }

  // Image type
  return (
    <div
      className={twMerge(
        'relative h-[200px] w-[117px]',
        onClick && 'cursor-pointer',
        className
      )}
      onClick={onClick}
      onKeyDown={
        onClick
          ? (e: React.KeyboardEvent) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                onClick(e);
              }
            }
          : undefined
      }
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      aria-label={onClick ? 'View image details' : undefined}
    >
      <DiscoverCard
        backgroundContent={[mediaUrl, null]}
        className='h-full w-full'
      />
      {overlayButtons}
      {bottomButton && (
        <div className='absolute right-2 bottom-2 left-2'>{bottomButton}</div>
      )}
    </div>
  );
};