video-create/web/client/src/components/assets/AssetGallery.tsx

import { useState, useEffect } from 'react';
import { Trash2, RefreshCw } from 'lucide-react';
import { useAssets } from '@/hooks/useAssets';
import { AssetPreview } from './AssetPreview';
import { Button } from '@/components/ui/button';
import type { Asset } from '@/types';

export function AssetGallery() {
  const [accountFilter, setAccountFilter] = useState('');
  const [typeFilter, setTypeFilter] = useState<string>('');
  const [accounts, setAccounts] = useState<{ id: string; name: string }[]>([]);
  const { assets, loading, remove } = useAssets({
    accountId: accountFilter || undefined,
    type: typeFilter || undefined,
  });
  const [previewAsset, setPreviewAsset] = useState<Asset | null>(null);

  useEffect(() => {
    fetch('/api/accounts').then((r) => r.json()).then(setAccounts).catch(() => {});
  }, []);

  const handleScan = async () => {
    await fetch('/api/assets/scan', { method: 'POST' });
    window.location.reload();
  };

  return (
    <div className="flex flex-col h-full">
      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-200 bg-white">
        <select
          value={accountFilter}
          onChange={(e) => setAccountFilter(e.target.value)}
          className="h-8 rounded-md border border-zinc-200 bg-zinc-50 px-2 text-xs"
        >
          <option value="">全部账号</option>
          {accounts.map((a) => (
            <option key={a.id} value={a.id}>{a.name}</option>
          ))}
        </select>
        <select
          value={typeFilter}
          onChange={(e) => setTypeFilter(e.target.value)}
          className="h-8 rounded-md border border-zinc-200 bg-zinc-50 px-2 text-xs"
        >
          <option value="">全部类型</option>
          <option value="image">图片</option>
          <option value="video">视频</option>
        </select>
        <div className="flex-1" />
        <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleScan}>
          <RefreshCw size={12} className="mr-1" />
          扫描
        </Button>
      </div>

      <div className="flex-1 overflow-auto p-4">
        {loading ? (
          <p className="text-zinc-400 text-sm text-center mt-8">加载中...</p>
        ) : assets.length === 0 ? (
          <div className="flex flex-col items-center justify-center mt-16 text-zinc-400">
            <p className="text-sm">暂无资产</p>
            <p className="text-xs mt-1">点击"扫描"从 output 目录导入</p>
          </div>
        ) : (
          <div className="grid grid-cols-6 gap-2">
            {assets.map((asset) => (
              <div
                key={asset.id}
                className="group relative aspect-square bg-zinc-100 rounded-lg overflow-hidden cursor-pointer border border-zinc-200 hover:border-indigo-300 hover:shadow-sm transition-all"
                onClick={() => setPreviewAsset(asset)}
              >
                {asset.type === 'image' ? (
                  <img
                    src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
                    alt=""
                    className="w-full h-full object-cover"
                    loading="lazy"
                  />
                ) : (
                  <video
                    src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
                    className="w-full h-full object-cover"
                    muted
                  />
                )}
                <button
                  onClick={(e) => { e.stopPropagation(); remove(asset.id); }}
                  className="absolute top-1 right-1 p-1 rounded bg-white/80 opacity-0 group-hover:opacity-100 transition-opacity shadow-sm"
                >
                  <Trash2 size={12} className="text-red-500" />
                </button>
                <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/40 to-transparent p-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
                  <div className="flex items-center justify-between">
                    <span className="text-[9px] text-white font-medium">
                      {asset.type === 'image' ? '🖼' : '🎬'} #{asset.shot_index || '?'}
                    </span>
                    <span className="text-[8px] text-white/70">
                      {asset.created_at ? new Date(asset.created_at).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }) : ''}
                    </span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {previewAsset && <AssetPreview asset={previewAsset} onClose={() => setPreviewAsset(null)} />}
    </div>
  );
}