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

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

interface ManifestGroup {
  manifest_path: string;
  account_id: string;
  image_count: number;
  video_count: number;
  latest_at: string;
}

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

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

  // Group assets by manifest_path
  const grouped = useMemo(() => {
    const map = new Map<string, Asset[]>();
    for (const asset of assets) {
      const key = asset.manifest_path || 'ungrouped';
      if (!map.has(key)) map.set(key, []);
      map.get(key)!.push(asset);
    }
    return map;
  }, [assets]);

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

  const getGroupName = (manifestPath: string) => {
    const parts = manifestPath.replace(/\\/g, '/').split('/');
    // output/<name>/manifest.json → <name>
    const dir = parts.length >= 2 ? parts[parts.length - 2] : manifestPath;
    return dir;
  };

  const getGroupSubtitle = (manifestPath: string) => {
    const m = manifests.find((m) => m.manifest_path === manifestPath);
    if (!m) return '';
    const parts: string[] = [];
    if (m.image_count) parts.push(`${m.image_count} 图`);
    if (m.video_count) parts.push(`${m.video_count} 视频`);
    const acc = accounts.find((a) => a.id === m.account_id);
    if (acc) parts.push(acc.name);
    return parts.join(' · ');
  };

  // Filter manifests by account
  const filteredGroups = useMemo(() => {
    if (!accountFilter) return [...grouped.entries()];
    return [...grouped.entries()].filter(([key]) => {
      if (key === 'ungrouped') return true;
      const m = manifests.find((m) => m.manifest_path === key);
      return m?.account_id === accountFilter;
    });
  }, [grouped, manifests, accountFilter]);

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-200 bg-white flex-shrink-0">
        <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>
        <span className="text-[10px] text-zinc-400">{assets.length} 个资产</span>
        <div className="flex-1" />
        <Button size="sm" variant="outline" className="h-8 text-xs" onClick={handleScan}>
          <RefreshCw size={12} className="mr-1" />
          扫描
        </Button>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-4">
        {loading ? (
          <p className="text-zinc-400 text-sm text-center mt-8">加载中...</p>
        ) : filteredGroups.length === 0 ? (
          <div className="flex flex-col items-center justify-center mt-16 text-zinc-400">
            <FolderOpen size={28} className="mb-2 opacity-40" />
            <p className="text-sm">暂无资产</p>
            <p className="text-xs mt-1">点击"扫描"从 output 目录导入</p>
          </div>
        ) : (
          filteredGroups.map(([manifestPath, groupAssets]) => (
            <AssetProjectGroup
              key={manifestPath}
              title={getGroupName(manifestPath)}
              subtitle={getGroupSubtitle(manifestPath)}
              assets={groupAssets}
              onPreview={setPreviewAsset}
              onDelete={remove}
            />
          ))
        )}
      </div>

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