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 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';

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(() => {});
  }, []);

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

  // Group filtered assets by manifest_path
  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(' · ');
  };

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

  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-200 bg-white flex-shrink-0">
        {/* Type tabs */}
        <div className="flex rounded-lg border border-zinc-200 overflow-hidden">
          {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-colors
                ${typeTab === key
                  ? 'bg-indigo-50 text-indigo-700 border-r border-zinc-200 last:border-r-0'
                  : 'bg-white text-zinc-500 hover:bg-zinc-50 border-r border-zinc-200 last:border-r-0'}`}
            >
              <Icon size={13} />
              {label}
              <span className={`text-[10px] px-1 rounded-full ${typeTab === key ? 'bg-indigo-100 text-indigo-600' : 'bg-zinc-100 text-zinc-400'}`}>
                {count}
              </span>
            </button>
          ))}
        </div>

        <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>

        <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">{typeTab === 'all' ? '暂无资产' : `暂无${typeTab === 'image' ? '图片' : '视频'}`}</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} allAssets={filtered} onClose={() => setPreviewAsset(null)} onNavigate={setPreviewAsset} />}
    </div>
  );
}
