// src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向滚动布局）

import React, {
  useState,
  useEffect,
  forwardRef,
  useImperativeHandle,
  useCallback,
  useMemo,
} from "react";
import {
  Box,
  VStack,
  HStack,
  Text,
  Badge,
  Flex,
  Icon,
  Spinner,
  Center,
  IconButton,
  Tooltip,
  Button,
} from "@chakra-ui/react";
import {
  ChevronDownIcon,
  ChevronUpIcon,
  RepeatIcon,
} from "@chakra-ui/icons";
import { FiTrendingUp, FiZap } from "react-icons/fi";
import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
import { getApiBase } from "@utils/apiConfig";

// 固定深色主题颜色
const COLORS = {
  containerBg: "#1a1d24",
  cardBg: "#252a34",
  cardBorderColor: "#3a3f4b",
  headerHoverBg: "#2d323e",
  textColor: "#e2e8f0",
  secondaryTextColor: "#a0aec0",
  timelineLineColor: "#4299e1",
  timelineDotBg: "#63b3ed",
  scrollbarTrackBg: "#1a1d24",
  scrollbarThumbBg: "#4a5568",
  scrollbarThumbHoverBg: "#718096",
  statBarBg: "#252a34",
};

// 每次加载的事件数量
const EVENTS_PER_LOAD = 10;

/**
 * 单个主线卡片组件 - 支持懒加载
 */
const MainlineCard = React.memo(({
  mainline,
  colorScheme,
  isExpanded,
  onToggle,
  selectedEvent,
  onEventSelect,
  eventFollowStatus,
  onToggleFollow,
  borderColor,
}) => {
  // 懒加载状态
  const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
  const [isLoadingMore, setIsLoadingMore] = useState(false);

  // 重置显示数量当折叠时
  useEffect(() => {
    if (!isExpanded) {
      setDisplayCount(EVENTS_PER_LOAD);
    }
  }, [isExpanded]);

  // 当前显示的事件
  const displayedEvents = useMemo(() => {
    return mainline.events.slice(0, displayCount);
  }, [mainline.events, displayCount]);

  // 是否还有更多
  const hasMore = displayCount < mainline.events.length;

  // 加载更多
  const loadMore = useCallback(() => {
    setIsLoadingMore(true);
    // 使用 setTimeout 模拟异步，避免 UI 卡顿
    setTimeout(() => {
      setDisplayCount(prev => Math.min(prev + EVENTS_PER_LOAD, mainline.events.length));
      setIsLoadingMore(false);
    }, 50);
  }, [mainline.events.length]);

  return (
    <Box
      bg={COLORS.cardBg}
      borderRadius="lg"
      borderWidth="1px"
      borderColor={COLORS.cardBorderColor}
      borderTopWidth="3px"
      borderTopColor={`${colorScheme}.500`}
      minW={isExpanded ? "320px" : "200px"}
      maxW={isExpanded ? "380px" : "240px"}
      h="100%"
      display="flex"
      flexDirection="column"
      transition="all 0.3s ease"
      flexShrink={0}
      _hover={{
        borderColor: `${colorScheme}.400`,
        boxShadow: "lg"
      }}
    >
      {/* 卡片头部 */}
      <Flex
        align="center"
        justify="space-between"
        px={3}
        py={2}
        cursor="pointer"
        onClick={onToggle}
        _hover={{ bg: COLORS.headerHoverBg }}
        transition="all 0.15s"
        borderBottomWidth="1px"
        borderBottomColor={COLORS.cardBorderColor}
        flexShrink={0}
      >
        <VStack align="start" spacing={0} flex={1} minW={0}>
          <HStack spacing={2} w="100%">
            <Text
              fontWeight="bold"
              fontSize="sm"
              color={COLORS.textColor}
              noOfLines={1}
              flex={1}
            >
              {mainline.lv2_name || "其他"}
            </Text>
            <Badge
              colorScheme={colorScheme}
              fontSize="xs"
              borderRadius="full"
              px={2}
              flexShrink={0}
            >
              {mainline.event_count}
            </Badge>
          </HStack>
          {mainline.lv1_name && (
            <Text fontSize="xs" color={COLORS.secondaryTextColor} noOfLines={1}>
              {mainline.lv1_name}
            </Text>
          )}
        </VStack>
        <Icon
          as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
          boxSize={4}
          color={COLORS.secondaryTextColor}
          ml={2}
          flexShrink={0}
        />
      </Flex>

      {/* 事件列表区域 */}
      {isExpanded ? (
        <Box
          px={3}
          py={2}
          flex={1}
          overflowY="auto"
          position="relative"
          css={{
            "&::-webkit-scrollbar": { width: "4px" },
            "&::-webkit-scrollbar-track": {
              background: COLORS.scrollbarTrackBg,
            },
            "&::-webkit-scrollbar-thumb": {
              background: COLORS.scrollbarThumbBg,
              borderRadius: "2px",
            },
          }}
        >
          {/* 时间轴线 */}
          <Box
            position="absolute"
            left="11px"
            top="8px"
            bottom="8px"
            w="2px"
            bg={COLORS.timelineLineColor}
            opacity={0.3}
            borderRadius="full"
          />

          {/* 事件列表 */}
          <VStack spacing={2} align="stretch" pl={5}>
            {displayedEvents.map((event, eventIndex) => (
              <Box key={event.id} position="relative">
                {/* 时间轴圆点 */}
                <Box
                  position="absolute"
                  left="-19px"
                  top="12px"
                  w="8px"
                  h="8px"
                  borderRadius="full"
                  bg={COLORS.timelineDotBg}
                  border="2px solid"
                  borderColor={COLORS.cardBg}
                  zIndex={1}
                />
                {/* 事件卡片 */}
                <DynamicNewsEventCard
                  event={event}
                  index={eventIndex}
                  isFollowing={
                    eventFollowStatus[event.id]?.isFollowing || false
                  }
                  followerCount={
                    eventFollowStatus[event.id]?.followerCount ||
                    event.follower_count ||
                    0
                  }
                  isSelected={selectedEvent?.id === event.id}
                  onEventClick={(clickedEvent) => {
                    onEventSelect?.(clickedEvent);
                  }}
                  onTitleClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    onEventSelect?.(event);
                  }}
                  onToggleFollow={() => onToggleFollow?.(event.id)}
                  borderColor={borderColor}
                  compact
                />
              </Box>
            ))}

            {/* 加载更多按钮 */}
            {hasMore && (
              <Button
                size="sm"
                variant="ghost"
                color={COLORS.secondaryTextColor}
                onClick={loadMore}
                isLoading={isLoadingMore}
                loadingText="加载中..."
                w="100%"
                _hover={{ bg: COLORS.headerHoverBg }}
              >
                加载更多 ({mainline.events.length - displayCount} 条)
              </Button>
            )}
          </VStack>
        </Box>
      ) : (
        /* 折叠时显示简要信息 */
        <Box px={3} py={2} flex={1} overflow="hidden">
          <VStack spacing={1} align="stretch">
            {mainline.events.slice(0, 3).map((event) => (
              <Text
                key={event.id}
                fontSize="xs"
                color={COLORS.secondaryTextColor}
                noOfLines={1}
                cursor="pointer"
                _hover={{ color: COLORS.textColor }}
                onClick={(e) => {
                  e.stopPropagation();
                  onEventSelect?.(event);
                }}
              >
                • {event.title}
              </Text>
            ))}
            {mainline.events.length > 3 && (
              <Text fontSize="xs" color={COLORS.secondaryTextColor}>
                ... 还有 {mainline.events.length - 3} 条
              </Text>
            )}
          </VStack>
        </Box>
      )}
    </Box>
  );
});

MainlineCard.displayName = "MainlineCard";

/**
 * 主线时间轴布局组件
 */
const MainlineTimelineViewComponent = forwardRef(
  (
    {
      display = "block",
      filters = {},
      selectedEvent,
      onEventSelect,
      eventFollowStatus = {},
      onToggleFollow,
      borderColor,
    },
    ref
  ) => {
    // 状态
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [mainlineData, setMainlineData] = useState(null);
    const [expandedGroups, setExpandedGroups] = useState({});

    // 根据主线类型获取配色
    const getColorScheme = useCallback((lv2Name) => {
      if (!lv2Name) return "gray";
      const name = lv2Name.toLowerCase();

      if (
        name.includes("ai") ||
        name.includes("人工智能") ||
        name.includes("算力") ||
        name.includes("大模型")
      )
        return "purple";
      if (
        name.includes("半导体") ||
        name.includes("芯片") ||
        name.includes("光刻")
      )
        return "blue";
      if (name.includes("机器人") || name.includes("人形")) return "pink";
      if (
        name.includes("消费电子") ||
        name.includes("手机") ||
        name.includes("xr")
      )
        return "cyan";
      if (
        name.includes("汽车") ||
        name.includes("驾驶") ||
        name.includes("新能源车")
      )
        return "teal";
      if (
        name.includes("新能源") ||
        name.includes("电力") ||
        name.includes("光伏") ||
        name.includes("储能")
      )
        return "green";
      if (
        name.includes("低空") ||
        name.includes("航天") ||
        name.includes("卫星")
      )
        return "orange";
      if (name.includes("军工") || name.includes("国防")) return "red";
      if (
        name.includes("医药") ||
        name.includes("医疗") ||
        name.includes("生物")
      )
        return "messenger";
      if (
        name.includes("消费") ||
        name.includes("食品") ||
        name.includes("白酒")
      )
        return "yellow";
      if (
        name.includes("煤炭") ||
        name.includes("石油") ||
        name.includes("钢铁")
      )
        return "blackAlpha";
      if (
        name.includes("金融") ||
        name.includes("银行") ||
        name.includes("券商")
      )
        return "linkedin";
      return "gray";
    }, []);

    // 加载主线数据
    const fetchMainlineData = useCallback(async () => {
      if (display === "none") return;

      setLoading(true);
      setError(null);

      try {
        const apiBase = getApiBase();
        const params = new URLSearchParams();

        // 添加筛选参数
        if (filters.recent_days)
          params.append("recent_days", filters.recent_days);
        if (filters.importance && filters.importance !== "all")
          params.append("importance", filters.importance);

        const url = `${apiBase}/api/events/mainline?${params.toString()}`;
        console.log("[MainlineTimelineView] 🔄 请求主线数据:", url);

        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const result = await response.json();
        console.log("[MainlineTimelineView] 📦 响应数据:", {
          success: result.success,
          mainlineCount: result.data?.mainlines?.length,
          totalEvents: result.data?.total_events,
        });

        if (result.success) {
          // 按事件数量从多到少排序
          const sortedMainlines = [...(result.data.mainlines || [])].sort(
            (a, b) => b.event_count - a.event_count
          );

          setMainlineData({
            ...result.data,
            mainlines: sortedMainlines,
          });

          // 初始化展开状态（默认全部折叠）
          const initialExpanded = {};
          sortedMainlines.forEach((mainline) => {
            initialExpanded[mainline.lv2_id] = false;
          });
          setExpandedGroups(initialExpanded);
        } else {
          throw new Error(result.error || "获取数据失败");
        }
      } catch (err) {
        console.error("[MainlineTimelineView] ❌ 请求失败:", err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }, [display, filters.recent_days, filters.importance]);

    // 初始加载 & 筛选变化时刷新
    useEffect(() => {
      fetchMainlineData();
    }, [fetchMainlineData]);

    // 暴露方法给父组件
    useImperativeHandle(
      ref,
      () => ({
        refresh: fetchMainlineData,
        getScrollPosition: () => null,
      }),
      [fetchMainlineData]
    );

    // 切换分组展开/折叠
    const toggleGroup = useCallback((lv2Id) => {
      setExpandedGroups((prev) => ({
        ...prev,
        [lv2Id]: !prev[lv2Id],
      }));
    }, []);

    // 全部展开/折叠
    const toggleAll = useCallback(
      (expand) => {
        if (!mainlineData?.mainlines) return;
        const newState = {};
        mainlineData.mainlines.forEach((mainline) => {
          newState[mainline.lv2_id] = expand;
        });
        setExpandedGroups(newState);
      },
      [mainlineData]
    );

    // 渲染加载状态
    if (loading) {
      return (
        <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
          <Center h="400px">
            <VStack spacing={4}>
              <Spinner size="xl" color="blue.500" thickness="4px" />
              <Text color={COLORS.secondaryTextColor}>正在加载主线数据...</Text>
            </VStack>
          </Center>
        </Box>
      );
    }

    // 渲染错误状态
    if (error) {
      return (
        <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
          <Center h="400px">
            <VStack spacing={4}>
              <Text color="red.500">加载失败: {error}</Text>
              <IconButton
                icon={<RepeatIcon />}
                colorScheme="blue"
                onClick={fetchMainlineData}
                aria-label="重试"
              />
            </VStack>
          </Center>
        </Box>
      );
    }

    // 渲染空状态
    if (!mainlineData?.mainlines?.length) {
      return (
        <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
          <Center h="400px">
            <VStack spacing={4}>
              <Icon as={FiZap} boxSize={12} color="gray.400" />
              <Text color={COLORS.secondaryTextColor}>暂无主线数据</Text>
              <Text fontSize="sm" color={COLORS.secondaryTextColor}>
                尝试调整筛选条件
              </Text>
            </VStack>
          </Center>
        </Box>
      );
    }

    const {
      mainlines,
      total_events,
      mainline_count,
      ungrouped_count,
    } = mainlineData;

    return (
      <Box
        display={display}
        h="100%"
        w="100%"
        bg={COLORS.containerBg}
        overflow="hidden"
      >
        {/* 顶部统计栏 */}
        <Flex
          justify="space-between"
          align="center"
          px={4}
          py={2}
          bg={COLORS.statBarBg}
          borderBottomWidth="1px"
          borderBottomColor={COLORS.cardBorderColor}
        >
          <HStack spacing={4}>
            <HStack spacing={2}>
              <Icon as={FiTrendingUp} color="blue.400" />
              <Text fontWeight="bold" color={COLORS.textColor} fontSize="sm">
                {mainline_count} 条主线
              </Text>
            </HStack>
            <Text fontSize="sm" color={COLORS.secondaryTextColor}>
              共 {total_events} 个事件
            </Text>
            {ungrouped_count > 0 && (
              <Badge colorScheme="orange" fontSize="xs">
                {ungrouped_count} 个未归类
              </Badge>
            )}
          </HStack>

          <HStack spacing={1}>
            <Tooltip label="全部展开">
              <IconButton
                icon={<ChevronDownIcon />}
                size="sm"
                variant="ghost"
                color={COLORS.secondaryTextColor}
                onClick={() => toggleAll(true)}
                aria-label="全部展开"
                _hover={{ bg: COLORS.headerHoverBg }}
              />
            </Tooltip>
            <Tooltip label="全部折叠">
              <IconButton
                icon={<ChevronUpIcon />}
                size="sm"
                variant="ghost"
                color={COLORS.secondaryTextColor}
                onClick={() => toggleAll(false)}
                aria-label="全部折叠"
                _hover={{ bg: COLORS.headerHoverBg }}
              />
            </Tooltip>
            <Tooltip label="刷新">
              <IconButton
                icon={<RepeatIcon />}
                size="sm"
                variant="ghost"
                color={COLORS.secondaryTextColor}
                onClick={fetchMainlineData}
                aria-label="刷新"
                _hover={{ bg: COLORS.headerHoverBg }}
              />
            </Tooltip>
          </HStack>
        </Flex>

        {/* 主线卡片横向滚动容器 */}
        <Box
          overflowX="auto"
          overflowY="hidden"
          h="calc(100% - 44px)"
          css={{
            "&::-webkit-scrollbar": { height: "8px" },
            "&::-webkit-scrollbar-track": {
              background: COLORS.scrollbarTrackBg,
            },
            "&::-webkit-scrollbar-thumb": {
              background: COLORS.scrollbarThumbBg,
              borderRadius: "4px",
            },
            "&::-webkit-scrollbar-thumb:hover": {
              background: COLORS.scrollbarThumbHoverBg,
            },
          }}
        >
          <HStack
            spacing={3}
            p={3}
            align="stretch"
            h="100%"
            minW="max-content"
          >
            {mainlines.map((mainline) => (
              <MainlineCard
                key={mainline.lv2_id || "ungrouped"}
                mainline={mainline}
                colorScheme={getColorScheme(mainline.lv2_name)}
                isExpanded={expandedGroups[mainline.lv2_id]}
                onToggle={() => toggleGroup(mainline.lv2_id)}
                selectedEvent={selectedEvent}
                onEventSelect={onEventSelect}
                eventFollowStatus={eventFollowStatus}
                onToggleFollow={onToggleFollow}
                borderColor={borderColor}
              />
            ))}
          </HStack>
        </Box>
      </Box>
    );
  }
);

MainlineTimelineViewComponent.displayName = "MainlineTimelineView";

const MainlineTimelineView = React.memo(MainlineTimelineViewComponent);

export default MainlineTimelineView;