import { Trash2, Film, Image as ImageIcon } from 'lucide-react';
import type { Asset } from '@/types';

interface Props {
  title: string;
  subtitle?: string;
  assets: Asset[];
  onPreview: (asset: Asset) => void;
  onDelete: (id: string) => void;
}

export function AssetProjectGroup({ title, subtitle, assets, onPreview, onDelete }: Props) {
  const images = assets.filter((a) => a.type === 'image');
  const videos = assets.filter((a) => a.type === 'video');

  return (
    <div className="mb-6">
      {/* Group header */}
      <div className="flex items-center gap-3 mb-3">
        <h3 className="text-sm font-semibold text-zinc-700 truncate">{title}</h3>
        {subtitle && <span className="text-[10px] text-zinc-400">{subtitle}</span>}
        <div className="flex items-center gap-2 ml-auto text-[10px] text-zinc-400">
          {images.length > 0 && (
            <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-blue-50/60 text-blue-500">
              <ImageIcon size={10} /> {images.length}
            </span>
          )}
          {videos.length > 0 && (
            <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-violet-50/60 text-violet-500">
              <Film size={10} /> {videos.length}
            </span>
          )}
        </div>
      </div>

      {/* Asset strip */}
      <div className="flex gap-2.5 overflow-x-auto pb-2">
        {assets.map((asset) => (
          <div
            key={asset.id}
            className="group relative flex-shrink-0 w-28 h-28 bg-zinc-100 rounded-xl overflow-hidden cursor-pointer border border-zinc-100 hover:shadow-lg hover:shadow-zinc-200/60 hover:-translate-y-0.5 transition-all duration-200"
            onClick={() => onPreview(asset)}
          >
            {asset.type === 'image' ? (
              <img
                src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
                alt=""
                className="w-full h-full object-cover"
                loading="lazy"
              />
            ) : (
              <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-zinc-800 to-zinc-900">
                <Film size={20} className="text-zinc-500" />
                <video
                  src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
                  className="absolute inset-0 w-full h-full object-cover"
                  muted
                  preload="none"
                />
              </div>
            )}
            <button
              onClick={(e) => { e.stopPropagation(); if (confirm('确定删除这个资产？')) onDelete(asset.id); }}
              className="absolute top-1.5 right-1.5 p-1 rounded-lg bg-white/90 opacity-0 group-hover:opacity-100 transition-all duration-200 shadow-sm hover:bg-red-50"
            >
              <Trash2 size={10} className="text-red-500" />
            </button>
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/50 to-transparent px-1.5 py-1">
              <span className="text-[9px] text-white/80 font-medium">
                {asset.type === 'image' ? 'IMG' : 'VID'} #{asset.shot_index ?? '?'}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
