// src/views/Community/components/EventTimelineCard.js
// 事件时间轴卡片组件（整合Header + Search + List）

import React, { forwardRef } from 'react';
import {
  Card,
  CardHeader,
  CardBody,
  Box,
  useColorModeValue
} from '@chakra-ui/react';
import EventTimelineHeader from './EventTimelineHeader';
import UnifiedSearchBox from './UnifiedSearchBox';
import EventListSection from './EventListSection';

/**
 * 事件时间轴卡片组件
 * @param {Array} events - 事件列表
 * @param {boolean} loading - 加载状态
 * @param {Object} pagination - 分页信息
 * @param {Object} filters - 筛选条件
 * @param {Array} popularKeywords - 热门关键词
 * @param {Date} lastUpdateTime - 最后更新时间
 * @param {Function} onSearch - 搜索回调
 * @param {Function} onSearchFocus - 搜索框获得焦点回调
 * @param {Function} onPageChange - 分页变化回调
 * @param {Function} onEventClick - 事件点击回调
 * @param {Function} onViewDetail - 查看详情回调
 * @param {Object} ref - 用于滚动的ref
 */
const EventTimelineCard = forwardRef(({
  events,
  loading,
  pagination,
  filters,
  popularKeywords,
  lastUpdateTime,
  onSearch,
  onSearchFocus,
  onPageChange,
  onEventClick,
  onViewDetail,
  ...rest
}, ref) => {
  const cardBg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');

  return (
    <Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
      {/* 标题部分 */}
      <CardHeader>
        <EventTimelineHeader lastUpdateTime={lastUpdateTime} />
      </CardHeader>

      {/* 主体内容 */}
      <CardBody>
        {/* 统一搜索组件（整合了话题、股票、行业、日期、排序、重要性、热门概念、筛选标签） */}
        <Box mb={4}>
          <UnifiedSearchBox
            onSearch={onSearch}
            onSearchFocus={onSearchFocus}
            popularKeywords={popularKeywords}
            filters={filters}
          />
        </Box>

        {/* 事件列表（包含Loading、Empty、List三种状态） */}
        <EventListSection
          loading={loading}
          events={events}
          pagination={pagination}
          onPageChange={onPageChange}
          onEventClick={onEventClick}
          onViewDetail={onViewDetail}
        />
      </CardBody>
    </Card>
  );
});

EventTimelineCard.displayName = 'EventTimelineCard';

export default EventTimelineCard;