'use client'

import React, { useEffect, useRef, forwardRef } from 'react'

interface LoadMoreTriggerProps {
  hasMore: boolean
  isLoading: boolean
  disabled?: boolean
  onLoadMore: () => void
  themeColor?: string
  displayedCount?: number  // 当前显示数量
  totalCount?: number      // 已加载总数量
  showEndMessage?: boolean // 是否显示到底提示
}

/**
 * 加载更多触发器组件
 * 使用 IntersectionObserver 实现无限滚动
 */
const LoadMoreTrigger = forwardRef<HTMLDivElement, LoadMoreTriggerProps>(function LoadMoreTrigger({
  hasMore,
  isLoading,
  disabled = false,
  onLoadMore,
  themeColor = '#1f2937',
  displayedCount,
  totalCount,
  showEndMessage = true,
}, ref) {
  const internalRef = useRef<HTMLDivElement>(null)
  const loadMoreRef = ref || internalRef

  // 判断是否需要显示加载更多
  const shouldShowLoadMore = hasMore || (displayedCount !== undefined && totalCount !== undefined && displayedCount < totalCount)

  useEffect(() => {
    const element = typeof loadMoreRef === 'function' ? null : loadMoreRef.current
    if (!element) return
    if (disabled) return
    if (isLoading) return
    if (!shouldShowLoadMore) return

    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !isLoading) {
          onLoadMore()
        }
      },
      { threshold: 0.1, rootMargin: '100px' }
    )

    observer.observe(element)

    return () => observer.disconnect()
  }, [loadMoreRef, hasMore, isLoading, disabled, onLoadMore, shouldShowLoadMore])

  // 显示加载更多
  if (shouldShowLoadMore) {
    return (
      <div 
        ref={typeof loadMoreRef === 'function' ? undefined : loadMoreRef} 
        className="w-full h-20 flex items-center justify-center mt-8"
      >
        {isLoading ? (
          <div className="text-[#6b7075] text-sm flex items-center gap-2">
            <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
            加载中...
          </div>
        ) : (
          <p className="text-[#86898e] text-sm">
            向下滚动加载更多
          </p>
        )}
      </div>
    )
  }

  // 显示到底提示
  if (showEndMessage && !hasMore && (displayedCount === undefined || displayedCount >= (totalCount || 0))) {
    return (
      <div className="w-full py-6 text-center text-sm text-[#86898e] mt-8">
        已经到底啦～
      </div>
    )
  }

  return null
})

export default LoadMoreTrigger