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-800">
        <select
          value={accountFilter}
          onChange={(e) => setAccountFilter(e.target.value)}
          className="h-8 rounded-md border border-zinc-800 bg-zinc-900 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-800 bg-zinc-900 px-2 text-xs"
        >
          <option value="">全部类型</option>
          <option value="image">图片</option>
          <option value="video">视频</option>
        </select>
        <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-500 text-sm text-center mt-8">加载中...</p>
        ) : assets.length === 0 ? (
          <p className="text-zinc-600 text-sm text-center mt-8">暂无资产，点击"扫描"导入</p>
        ) : (
          <div className="grid grid-cols-4 gap-3">
            {assets.map((asset) => (
              <div
                key={asset.id}
                className="group relative aspect-[9/16] bg-zinc-900 rounded-lg overflow-hidden cursor-pointer border border-zinc-800 hover:border-zinc-600 transition-colors"
                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-black/60 opacity-0 group-hover:opacity-100 transition-opacity"
                >
                  <Trash2 size={12} className="text-red-400" />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

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