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

import { useState, useEffect, useMemo } from 'react';
import { RefreshCw, FolderOpen, Image as ImageIcon, Film } from 'lucide-react';
import { useAssets } from '@/hooks/useAssets';
import { AssetProjectGroup } from './AssetProjectGroup';
import { AssetPreview } from './AssetPreview';
import { Button } from '@/components/ui/button';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
import type { Asset } from '@/types';

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

type TypeTab = 'all' | 'image' | 'video';

function AssetGroupSkeleton() {
  return (
    <div className="mb-6">
      <div className="flex items-center gap-3 mb-3">
        <div className="skeleton h-4 w-28" />
        <div className="skeleton h-3 w-20" />
      </div>
      <div className="flex gap-2.5">
        {Array.from({ length: 4 }).map((_, i) => (
          <div key={i} className="w-28 h-28 rounded-xl skeleton" />
        ))}
      </div>
    </div>
  );
}

export function AssetGallery() {
  const [accountFilter, setAccountFilter] = useState('');
  const [typeTab, setTypeTab] = useState<TypeTab>('all');
  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(() => {});
  }, []);

  const filtered = useMemo(() => {
    if (typeTab === 'all') return assets;
    return assets.filter((a) => a.type === typeTab);
  }, [assets, typeTab]);

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

  const imageCount = assets.filter((a) => a.type === 'image').length;
  const videoCount = assets.filter((a) => a.type === 'video').length;

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

  const getGroupName = (manifestPath: string) => {
    const parts = manifestPath.replace(/\\/g, '/').split('/');
    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(' · ');
  };

  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]);

  const tabs: { key: TypeTab; label: string; icon: typeof ImageIcon; count: number }[] = [
    { key: 'all', label: '全部', icon: FolderOpen, count: assets.length },
    { key: 'image', label: '图片', icon: ImageIcon, count: imageCount },
    { key: 'video', label: '视频', icon: Film, count: videoCount },
  ];

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="flex items-center gap-3 px-4 py-3 border-b border-zinc-100 bg-white flex-shrink-0">
        <div className="flex rounded-lg border border-zinc-100 overflow-hidden bg-zinc-50/50">
          {tabs.map(({ key, label, icon: Icon, count }) => (
            <button
              key={key}
              onClick={() => setTypeTab(key)}
              className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-all duration-150
                ${typeTab === key
                  ? 'bg-white text-indigo-600 shadow-sm'
                  : 'text-zinc-400 hover:text-zinc-600'}`}
            >
              <Icon size={13} />
              {label}
              <span className={`text-[10px] px-1.5 rounded-full ${typeTab === key ? 'bg-indigo-50 text-indigo-500' : 'bg-zinc-100 text-zinc-400'}`}>
                {count}
              </span>
            </button>
          ))}
        </div>

        <Select value={accountFilter || 'all'} onValueChange={(v) => setAccountFilter(v === 'all' ? '' : v)}>
          <SelectTrigger className="h-8 w-auto min-w-[100px] text-xs border-zinc-100 bg-zinc-50/80 hover:border-zinc-200">
            <SelectValue placeholder="全部账号" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">全部账号</SelectItem>
            {accounts.map((a) => (
              <SelectItem key={a.id} value={a.id}>{a.name}</SelectItem>
            ))}
          </SelectContent>
        </Select>

        <div className="flex-1" />
        <Button size="sm" variant="outline" className="h-8 text-xs rounded-lg" onClick={handleScan}>
          <RefreshCw size={12} className="mr-1" />
          扫描
        </Button>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-4">
        {loading ? (
          <div>
            {Array.from({ length: 3 }).map((_, i) => <AssetGroupSkeleton key={i} />)}
          </div>
        ) : filteredGroups.length === 0 ? (
          <div className="flex flex-col items-center justify-center mt-16 text-zinc-300">
            <div className="w-16 h-16 rounded-2xl bg-zinc-50 flex items-center justify-center mb-4">
              <FolderOpen size={24} strokeWidth={1.5} className="text-zinc-300" />
            </div>
            <p className="text-sm text-zinc-400">{typeTab === 'all' ? '暂无资产' : `暂无${typeTab === 'image' ? '图片' : '视频'}`}</p>
            <p className="text-xs mt-1 text-zinc-300">点击「扫描」从 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} allAssets={filtered} onClose={() => setPreviewAsset(null)} onNavigate={setPreviewAsset} />}
    </div>
  );
}