// src/views/Community/components/DynamicNews/EventScrollList.js
// 事件列表组件

import React, { useRef, useCallback } from "react";
import { Box, useColorModeValue } from "@chakra-ui/react";
import MainlineTimelineView from "./layouts/MainlineTimelineView";
import VerticalModeLayout from "./layouts/VerticalModeLayout";

/**
 * 事件列表组件 - 支持纵向、主线两种展示模式
 * @param {Array} events - 当前页的事件列表（服务端已分页）
 * @param {Object} filters - 筛选条件（主线模式用）
 * @param {Function} onMainlineEventClick - 主线模式事件点击回调（打开弹窗）
 * @param {Object} selectedEvent - 当前选中的事件
 * @param {Function} onEventSelect - 事件选择回调
 * @param {string} borderColor - 边框颜色
 * @param {number} currentPage - 当前页码
 * @param {number} totalPages - 总页数（由服务端返回）
 * @param {Function} onPageChange - 页码改变回调
 * @param {boolean} loading - 全局加载状态
 * @param {Object} error - 错误状态
 * @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'mainline'（主线时间轴）
 * @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
 * @param {Function} onToggleFollow - 关注按钮回调
 * @param {React.Ref} mainlineRef - MainlineTimelineView 的 ref
 */
const EventScrollList = React.memo(
  ({
    events,
    filters = {},
    onMainlineEventClick,
    selectedEvent,
    onEventSelect,
    borderColor,
    currentPage,
    totalPages,
    onPageChange,
    loading = false,
    error,
    mode = "vertical",
    eventFollowStatus = {},
    onToggleFollow,
    mainlineRef,
  }) => {
    const scrollContainerRef = useRef(null);

    // 所有 useColorModeValue 必须在组件顶层调用
    const timelineBg = useColorModeValue("gray.50", "gray.700");
    const timelineBorderColor = useColorModeValue("gray.400", "gray.500");
    const timelineTextColor = useColorModeValue("blue.600", "blue.400");

    const getTimelineBoxStyle = () => {
      return {
        bg: timelineBg,
        borderColor: timelineBorderColor,
        borderWidth: "2px",
        textColor: timelineTextColor,
        boxShadow: "sm",
      };
    };

    return (
      <Box
        ref={scrollContainerRef}
        overflow="hidden"
        h="100%"
        pt={0}
        pb={mode === "mainline" ? 0 : 4}
        px={mode === "mainline" ? 0 : { base: 0, md: 2 }}
        position="relative"
        data-scroll-container="true"
      >
        {/* 主线时间轴模式 - 按 lv2 概念分组，调用独立 API */}
        <MainlineTimelineView
          ref={mode === "mainline" ? mainlineRef : null}
          display={mode === "mainline" ? "block" : "none"}
          filters={filters}
          selectedEvent={selectedEvent}
          onEventSelect={onMainlineEventClick}
          eventFollowStatus={eventFollowStatus}
          onToggleFollow={onToggleFollow}
          borderColor={borderColor}
        />

        {/* 纵向分栏模式 */}
        <VerticalModeLayout
          display={mode === "vertical" ? "flex" : "none"}
          events={events}
          selectedEvent={selectedEvent}
          onEventSelect={onEventSelect}
          eventFollowStatus={eventFollowStatus}
          onToggleFollow={onToggleFollow}
          getTimelineBoxStyle={getTimelineBoxStyle}
          borderColor={borderColor}
          currentPage={currentPage}
          totalPages={totalPages}
          onPageChange={onPageChange}
        />
      </Box>
    );
  }
);

export default EventScrollList;