import type { GitStatus, MaimaiVersion, PluginInfo, PluginLoadProgress, PluginStatsData } from './types'
import { PluginCard } from './PluginCard'

interface MarketplaceTabProps {
  plugins: PluginInfo[]
  searchQuery: string
  categoryFilter: string
  showCompatibleOnly: boolean
  gitStatus: GitStatus | null
  maimaiVersion: MaimaiVersion | null
  pluginStats: Record<string, PluginStatsData>
  loadProgress: PluginLoadProgress | null
  onInstall: (plugin: PluginInfo) => void
  onUpdate: (plugin: PluginInfo) => void
  onUninstall: (plugin: PluginInfo) => void
  checkPluginCompatibility: (plugin: PluginInfo) => boolean
  needsUpdate: (plugin: PluginInfo) => boolean
  getStatusBadge: (plugin: PluginInfo) => React.JSX.Element | null
  getIncompatibleReason: (plugin: PluginInfo) => string | null
}

export function MarketplaceTab({
  plugins,
  searchQuery,
  categoryFilter,
  showCompatibleOnly,
  gitStatus,
  maimaiVersion,
  pluginStats,
  loadProgress,
  onInstall,
  onUpdate,
  onUninstall,
  checkPluginCompatibility,
  needsUpdate,
  getStatusBadge,
  getIncompatibleReason,
}: MarketplaceTabProps) {
  // 过滤插件
  const filteredPlugins = plugins.filter(plugin => {
    // 跳过没有 manifest 的插件
    if (!plugin.manifest) {
      console.warn('[过滤] 跳过无 manifest 的插件:', plugin.id)
      return false
    }

    // 全部插件只展示 plugin-repo 中存在的市场插件，本地独有插件只在“已安装”显示。
    if (plugin.source === 'local') {
      return false
    }
    
    // 搜索过滤
    const matchesSearch = searchQuery === '' ||
      plugin.manifest.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      plugin.manifest.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (plugin.manifest.keywords && plugin.manifest.keywords.some(k => k.toLowerCase().includes(searchQuery.toLowerCase())))
    
    // 分类过滤
    const matchesCategory = categoryFilter === 'all' ||
      (plugin.manifest.categories && plugin.manifest.categories.includes(categoryFilter))
    
    // 兼容性过滤
    const matchesCompatibility = !showCompatibleOnly || 
      !maimaiVersion || 
      checkPluginCompatibility(plugin)
    
    return matchesSearch && matchesCategory && matchesCompatibility
  })

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-5">
      {filteredPlugins.map((plugin) => (
        <PluginCard
          key={plugin.id}
          plugin={plugin}
          gitStatus={gitStatus}
          maimaiVersion={maimaiVersion}
          pluginStats={pluginStats}
          loadProgress={loadProgress}
          onInstall={onInstall}
          onUpdate={onUpdate}
          onUninstall={onUninstall}
          checkPluginCompatibility={checkPluginCompatibility}
          needsUpdate={needsUpdate}
          getStatusBadge={getStatusBadge}
          getIncompatibleReason={getIncompatibleReason}
        />
      ))}
    </div>
  )
}