import React from 'react';
import { Storyboard } from '@/types';
import { Badge } from "@/components/ui/badge";
import { Film, Clock, Users, Box, MapPin } from 'lucide-react';
import Image from 'next/image';

interface StoryboardRowProps {
  sb: Storyboard;
  onClick: () => void;
}

export const StoryboardRow: React.FC<StoryboardRowProps> = ({ sb, onClick }) => (
  <div 
    className="flex gap-4 p-3 border rounded-xl hover:bg-muted/40 transition-all cursor-pointer group bg-card"
    onClick={onClick}
  >
    <div className="w-32 aspect-video bg-muted rounded-lg overflow-hidden flex-shrink-0 relative border">
      {sb.imageUrls && sb.imageUrls.length > 0 ? (
        <Image src={sb.imageUrls[0]} alt={sb.shot} fill className="object-cover" />
      ) : (
        <div className="w-full h-full flex items-center justify-center text-muted-foreground">
          <Film className="w-6 h-6 opacity-20" />
        </div>
      )}
      <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity">
         <span className="text-[10px] text-white font-medium bg-black/50 px-2 py-1 rounded-full backdrop-blur-sm">查看</span>
      </div>
    </div>
    <div className="flex-1 min-w-0 flex flex-col justify-center gap-1.5">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <Badge variant="outline" className="text-[10px] font-normal bg-background">镜头 {sb.shot}</Badge>
          <span className="text-[10px] text-muted-foreground flex items-center gap-1 bg-muted/50 px-1.5 py-0.5 rounded-sm">
            <Clock className="w-3 h-3" /> {sb.duration}
          </span>
        </div>
        
        {/* Resource Indicators */}
        <div className="flex items-center gap-2">
          {sb.sceneId && (
            <div className="flex items-center gap-1 text-[10px] text-muted-foreground bg-muted/30 px-1.5 py-0.5 rounded-full" title="已关联场景">
              <MapPin className="w-3 h-3" />
              <span>1</span>
            </div>
          )}
          {sb.characterIds && sb.characterIds.length > 0 && (
            <div className="flex items-center gap-1 text-[10px] text-muted-foreground bg-muted/30 px-1.5 py-0.5 rounded-full" title="关联角色数">
              <Users className="w-3 h-3" />
              <span>{sb.characterIds.length}</span>
            </div>
          )}
          {sb.propIds && sb.propIds.length > 0 && (
            <div className="flex items-center gap-1 text-[10px] text-muted-foreground bg-muted/30 px-1.5 py-0.5 rounded-full" title="关联道具数">
              <Box className="w-3 h-3" />
              <span>{sb.propIds.length}</span>
            </div>
          )}
        </div>
      </div>
      
      <p className="text-xs line-clamp-2 text-foreground/90 leading-relaxed">{sb.desc}</p>
    </div>
  </div>
);
