import { useEffect, useState, useMemo } from 'react'
import { getRecentAssets } from '../api/generate'
import type { RecentAssetItem } from '../api/types'

const ASSET_TYPE_LABELS: Record<string, string> = {
  sprite: '精灵',
  background: '背景',
  ui: 'UI',
  animation: '动画',
}

const CATEGORIES = [
  { key: 'all', label: '全部' },
  { key: 'spritesheet', label: '精灵表' },
  { key: 'frame', label: '帧' },
  { key: 'tileset', label: '场景瓦片' },
  { key: 'background', label: '背景' },
  { key: 'ui', label: 'UI' },
]

function matchCategory(item: RecentAssetItem, cat: string): boolean {
  switch (cat) {
    case 'all':
      return true
    case 'spritesheet':
      return item.metaType === 'spritesheet'
    case 'frame':
      return item.metaType === 'frame' || item.metaType === 'preview' || item.format === 'gif'
    case 'tileset':
      return item.assetType === 'sprite' && item.metaType === 'spritesheet'
    case 'background':
      return item.assetType === 'background'
    case 'ui':
      return item.assetType === 'ui'
    default:
      return true
  }
}

export default function AssetGallery() {
  const [assets, setAssets] = useState<RecentAssetItem[]>([])
  const [loading, setLoading] = useState(true)
  const [activeCat, setActiveCat] = useState('all')

  useEffect(() => {
    getRecentAssets()
      .then(setAssets)
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [])

  const filtered = useMemo(
    () => assets.filter(item => matchCategory(item, activeCat)),
    [assets, activeCat]
  )

  if (loading) return null
  if (assets.length === 0) return null

  return (
    <section style={{ marginBottom: 32 }}>
      <h2 style={{ fontSize: 18, marginBottom: 12 }}>最近生成</h2>

      {/* 分类标签 */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
        {CATEGORIES.map(cat => (
          <button
            key={cat.key}
            type="button"
            onClick={() => setActiveCat(cat.key)}
            style={{
              fontSize: 13,
              padding: '4px 14px',
              borderRadius: 999,
              border: `1px solid ${activeCat === cat.key ? 'var(--accent)' : 'var(--border)'}`,
              background: activeCat === cat.key ? 'var(--accent-dim)' : 'transparent',
              color: activeCat === cat.key ? 'var(--accent)' : 'var(--text-secondary)',
              cursor: 'pointer',
              fontWeight: activeCat === cat.key ? 600 : 400,
            }}
          >
            {cat.label}
          </button>
        ))}
      </div>

      {/* 素材网格 */}
      {filtered.length === 0 ? (
        <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>暂无此类素材</p>
      ) : (
        <div
          style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
            gap: 12,
          }}
        >
          {filtered.map((item, i) => (
            <div
              key={`${item.taskId}-${i}`}
              className="card"
              style={{ padding: 8 }}
            >
              <div
                style={{
                  width: '100%',
                  aspectRatio: '1',
                  overflow: 'hidden',
                  borderRadius: 'var(--radius)',
                  background: 'var(--bg-input)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                <img
                  src={item.url}
                  alt={item.prompt}
                  loading="lazy"
                  style={{
                    maxWidth: '100%',
                    maxHeight: '100%',
                    objectFit: 'contain',
                  }}
                />
              </div>
              <div style={{ marginTop: 6 }}>
                <span
                  style={{
                    fontSize: 11,
                    padding: '1px 6px',
                    borderRadius: 999,
                    background: 'var(--accent-dim)',
                    color: 'var(--accent)',
                  }}
                >
                  {ASSET_TYPE_LABELS[item.assetType] || item.assetType}
                </span>
              </div>
              <p
                style={{
                  fontSize: 12,
                  color: 'var(--text-secondary)',
                  marginTop: 4,
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  whiteSpace: 'nowrap',
                }}
              >
                {item.prompt}
              </p>
            </div>
          ))}
        </div>
      )}
    </section>
  )
}