crush-level-web/src/components/ui/infinite-scroll-list.tsx

import React, { ReactNode } from 'react'
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
import { cn } from '@/lib/utils'

interface InfiniteScrollListProps<T> {
  /**
   * 数据项数组
   */
  items: T[]
  /**
   * 渲染每个数据项的函数
   */
  renderItem: (item: T, index: number) => ReactNode
  /**
   * 获取每个数据项的唯一key
   */
  getItemKey: (item: T, index: number) => string | number
  /**
   * 是否有更多数据可以加载
   */
  hasNextPage: boolean
  /**
   * 是否正在加载
   */
  isLoading: boolean
  /**
   * 加载下一页的函数
   */
  fetchNextPage: () => void
  /**
   * 列表容器的className
   */
  className?: string
  /**
   * 网格列数（支持响应式）
   */
  columns?:
    | {
        default: number
        sm?: number
        md?: number
        lg?: number
        xl?: number
      }
    | number
  /**
   * 网格间距
   */
  gap?: number
  /**
   * 加载状态的骨架屏组件
   */
  LoadingSkeleton?: React.ComponentType
  /**
   * 加载更多时显示的组件
   */
  LoadingMore?: React.ComponentType
  /**
   * 空状态组件
   */
  EmptyComponent?: React.ComponentType
  /**
   * 错误状态组件
   */
  ErrorComponent?: React.ComponentType<{ onRetry: () => void }>
  /**
   * 是否有错误
   */
  hasError?: boolean
  /**
   * 重试函数
   */
  onRetry?: () => void
  /**
   * 触发加载的阈值(px)
   */
  threshold?: number
  /**
   * 是否启用无限滚动
   */
  enabled?: boolean
}

/**
 * 通用的无限滚动列表组件
 * 支持网格布局、骨架屏、错误状态等功能
 */
export function InfiniteScrollList<T>({
  items,
  renderItem,
  getItemKey,
  hasNextPage,
  isLoading,
  fetchNextPage,
  className,
  columns = 4,
  gap = 4,
  LoadingSkeleton,
  LoadingMore,
  EmptyComponent,
  ErrorComponent,
  hasError = false,
  onRetry,
  threshold = 200,
  enabled = true,
}: InfiniteScrollListProps<T>) {
  const { loadMoreRef, isFetching } = useInfiniteScroll({
    hasNextPage,
    isLoading,
    fetchNextPage,
    threshold,
    enabled,
    isError: hasError,
  })

  // 生成网格列数的CSS类名映射
  const getGridColsClass = () => {
    if (typeof columns === 'number') {
      const gridClassMap: Record<number, string> = {
        1: 'grid-cols-1',
        2: 'grid-cols-2',
        3: 'grid-cols-3',
        4: 'grid-cols-4',
        5: 'grid-cols-5',
        6: 'grid-cols-6',
      }
      return gridClassMap[columns] || 'grid-cols-4'
    }

    const classes = []
    const colsClassMap: Record<number, string> = {
      1: 'grid-cols-1',
      2: 'grid-cols-2',
      3: 'grid-cols-3',
      4: 'grid-cols-4',
      5: 'grid-cols-5',
      6: 'grid-cols-6',
    }

    classes.push(colsClassMap[columns.default] || 'grid-cols-4')
    if (columns.sm) classes.push(`sm:${colsClassMap[columns.sm]}`)
    if (columns.md) classes.push(`md:${colsClassMap[columns.md]}`)
    if (columns.lg) classes.push(`lg:${colsClassMap[columns.lg]}`)
    if (columns.xl) classes.push(`xl:${colsClassMap[columns.xl]}`)

    return classes.join(' ')
  }

  // 生成间距类名
  const getGapClass = () => {
    const gapClassMap: Record<number, string> = {
      1: 'gap-1',
      2: 'gap-2',
      3: 'gap-3',
      4: 'gap-4',
      5: 'gap-5',
      6: 'gap-6',
      8: 'gap-8',
    }
    return gapClassMap[gap] || 'gap-4'
  }

  // 错误状态
  if (hasError && ErrorComponent && onRetry) {
    return <ErrorComponent onRetry={onRetry} />
  }

  // 首次加载状态
  if (isLoading && items.length === 0) {
    if (LoadingSkeleton) {
      return (
        <div className={cn('grid', getGridColsClass(), getGapClass(), className)}>
          {Array.from({ length: 8 }).map((_, index) => (
            <LoadingSkeleton key={index} />
          ))}
        </div>
      )
    }

    return (
      <div className={cn('grid', getGridColsClass(), getGapClass(), className)}>
        {Array.from({ length: 8 }).map((_, index) => (
          <div
            key={index}
            className="bg-surface-nest-normal aspect-[3/4] animate-pulse rounded-2xl"
          />
        ))}
      </div>
    )
  }

  // 空状态
  if (items.length === 0 && EmptyComponent) {
    return <EmptyComponent />
  }

  return (
    <div className="w-full">
      {/* 主要内容 */}
      <div className={cn('grid', getGridColsClass(), getGapClass(), className)}>
        {items.map((item, index) => (
          <React.Fragment key={getItemKey(item, index)}>{renderItem(item, index)}</React.Fragment>
        ))}
      </div>

      {/* 加载更多触发器 - 只在没有错误时显示 */}
      {hasNextPage && !hasError && (
        <div ref={loadMoreRef} className="mt-8 flex justify-center">
          {LoadingMore ? (
            <LoadingMore />
          ) : (
            <div className="flex items-center gap-2">
              {(isFetching || isLoading) && (
                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/20 border-t-white" />
              )}
              <span className="text-txt-tertiary-normal txt-label-s">
                {isFetching || isLoading ? 'Loading...' : ''}
              </span>
            </div>
          )}
        </div>
      )}
    </div>
  )
}