import React from 'react';
import { cn } from '@/utils';
import { SecureImage } from '@/components/common/SecureImage';
import { Clapperboard, Image as ImageIcon, LayoutGrid } from 'lucide-react';

interface SidebarCardProps {
  item: any;
  type: 'storyboard' | 'asset' | 'general';
  activeItemId: string | null;
  onNavigate: (id: string, type: 'storyboard' | 'asset' | 'general') => void;
  onContextMenu?: (e: React.MouseEvent, item: any, type: 'storyboard' | 'asset' | 'general') => void;
}

export const SidebarCard = ({
  item,
  type,
  activeItemId,
  onNavigate,
  onContextMenu
}: SidebarCardProps) => {
  const isActive = activeItemId === item.id;
  
  let imageUrl = null;
  if (type === 'storyboard') {
    imageUrl = item.imageUrls?.[0] || item.videoUrls?.[0];
  } else if (type === 'asset') {
    imageUrl = item.imageUrl || item.imageUrls?.[0] || item.videoUrls?.[0];
  }
  // General canvas has no image yet

  const title = type === 'storyboard' ? item.shot : item.name;

  // Aspect ratio: Storyboards are 16:9, Assets are square-ish, General is landscape
  const aspectRatio = type === 'storyboard' ? 'aspect-video' : type === 'general' ? 'aspect-video' : 'aspect-square';

  return (
      <div 
          onClick={() => onNavigate(item.id, type)}
          onContextMenu={(e) => onContextMenu?.(e, item, type)}
          className={cn(
              `group relative w-full ${aspectRatio} bg-black/20 backdrop-blur-sm rounded-xl border cursor-pointer overflow-hidden transition-all duration-300 hover:scale-105 active:scale-95 hover:shadow-xl hover:shadow-cyan-500/20`,
              isActive ? "border-cyan-500 shadow-[0_0_10px_rgba(6,182,212,0.3)] ring-1 ring-cyan-500/50" : "border-white/5 hover:border-cyan-500/50"
          )}
      >
          {imageUrl ? (
              <SecureImage 
                  src={imageUrl} 
                  alt={title} 
                  className="w-full h-full object-cover opacity-80 group-hover:opacity-100 transition-opacity duration-300" 
              />
          ) : (
              <div className="w-full h-full flex items-center justify-center text-white/20">
                  {type === 'storyboard' ? <Clapperboard size={20} /> : type === 'general' ? <LayoutGrid size={24} /> : <ImageIcon size={20} />}
              </div>
          )}
          
          <div className="absolute top-1 right-1 px-1.5 py-0.5 rounded-full bg-black/60 backdrop-blur-md text-[8px] font-bold text-white/70 opacity-0 group-hover:opacity-100 transition-opacity">
               {type === 'storyboard' ? 'SHOT' : type === 'general' ? 'CANVAS' : (item.type === 'video' ? 'MOV' : 'IMG')}
          </div>

          <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
          
          <div className="absolute bottom-0 left-0 w-full p-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              <span className="text-[9px] font-bold text-white/90 truncate block tracking-wide shadow-sm">
                  {title}
              </span>
          </div>
      </div>
  );
};
