// src/views/Community/components/HeroPanel.js
// 顶部说明面板组件：事件中心 + 沪深指数K线图 + 热门概念3D动画
// 交易时间内自动更新指数行情（每分钟一次）

import React, { useEffect, useState, useMemo, useCallback, useRef } from 'react';
import {
  Box,
  Card,
  CardBody,
  Flex,
  VStack,
  HStack,
  Text,
  Heading,
  useColorModeValue,
  useDisclosure,
  Icon,
  Spinner,
  Center,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  Tooltip,
} from '@chakra-ui/react';
import { AlertCircle, Clock, TrendingUp, Info, RefreshCw } from 'lucide-react';
import ReactECharts from 'echarts-for-react';
import { logger } from '@utils/logger';
import { getApiBase } from '@utils/apiConfig';
import { useIndexQuote } from '@hooks/useIndexQuote';
import conceptStaticService from '@services/conceptStaticService';

// 定义动画
const animations = `
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
  }
  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  @keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
`;

// 注入样式
if (typeof document !== 'undefined') {
  const styleId = 'hero-panel-animations';
  if (!document.getElementById(styleId)) {
    const styleSheet = document.createElement('style');
    styleSheet.id = styleId;
    styleSheet.innerText = animations;
    document.head.appendChild(styleSheet);
  }
}

/**
 * 获取指数行情数据（日线数据）
 */
const fetchIndexKline = async (indexCode) => {
  try {
    const response = await fetch(`${getApiBase()}/api/index/${indexCode}/kline?type=daily`);
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    const data = await response.json();
    return data;
  } catch (error) {
    logger.error('HeroPanel', 'fetchIndexKline error', { indexCode, error: error.message });
    return null;
  }
};

/**
 * 获取热门概念数据（使用静态文件）
 */
const fetchPopularConcepts = async () => {
  try {
    const result = await conceptStaticService.fetchPopularConcepts();
    if (result.success && result.data?.results?.length > 0) {
      return result.data.results.map(item => ({
        name: item.concept,
        change_pct: item.price_info?.avg_change_pct || 0,
      }));
    }
    return [];
  } catch (error) {
    logger.error('HeroPanel', 'fetchPopularConcepts error', error);
    return [];
  }
};

/**
 * 判断当前是否在交易时间内
 */
const isInTradingTime = () => {
  const now = new Date();
  const timeInMinutes = now.getHours() * 60 + now.getMinutes();
  return timeInMinutes >= 570 && timeInMinutes <= 900;
};

/**
 * 精美K线指数卡片 - 类似 KLineChartModal 风格
 * 交易时间内自动更新实时行情（每分钟一次）
 */
const CompactIndexCard = ({ indexCode, indexName }) => {
  const [chartData, setChartData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [latestData, setLatestData] = useState(null);

  const upColor = '#ef5350';   // 涨 - 红色
  const downColor = '#26a69a'; // 跌 - 绿色

  // 使用实时行情 Hook - 交易时间内每分钟自动更新
  const { quote, isTrading, refresh: refreshQuote } = useIndexQuote(indexCode, {
    refreshInterval: 60000, // 1分钟
    autoRefresh: true,
  });

  // 加载日K线图数据
  const loadChartData = useCallback(async () => {
    const data = await fetchIndexKline(indexCode);
    if (data?.data?.length > 0) {
      const recentData = data.data.slice(-60); // 最近60天
      setChartData({
        dates: recentData.map(item => item.time),
        klineData: recentData.map(item => [item.open, item.close, item.low, item.high]),
        volumes: recentData.map(item => item.volume || 0),
        rawData: recentData
      });

      // 如果没有实时行情，使用日线数据的最新值
      if (!quote) {
        const latest = data.data[data.data.length - 1];
        const prevClose = latest.prev_close || data.data[data.data.length - 2]?.close || latest.open;
        const changeAmount = latest.close - prevClose;
        const changePct = prevClose ? ((changeAmount / prevClose) * 100) : 0;

        setLatestData({
          close: latest.close,
          open: latest.open,
          high: latest.high,
          low: latest.low,
          changeAmount: changeAmount,
          changePct: changePct,
          isPositive: changeAmount >= 0
        });
      }
    }
    setLoading(false);
  }, [indexCode, quote]);

  // 初始加载日K数据
  useEffect(() => {
    loadChartData();
  }, [loadChartData]);

  // 当实时行情更新时，更新 latestData
  useEffect(() => {
    if (quote) {
      setLatestData({
        close: quote.price,
        open: quote.open,
        high: quote.high,
        low: quote.low,
        changeAmount: quote.change,
        changePct: quote.change_pct,
        isPositive: quote.change >= 0,
        updateTime: quote.update_time,
        isRealtime: true,
      });
    }
  }, [quote]);

  const chartOption = useMemo(() => {
    if (!chartData) return {};
    return {
      backgroundColor: 'transparent',
      grid: [
        { left: 0, right: 0, top: 8, bottom: 28, containLabel: false },
        { left: 0, right: 0, top: '75%', bottom: 4, containLabel: false }
      ],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: { color: 'rgba(255, 215, 0, 0.6)', width: 1 },
          lineStyle: { color: 'rgba(255, 215, 0, 0.4)', width: 1, type: 'dashed' }
        },
        backgroundColor: 'rgba(15, 15, 25, 0.98)',
        borderColor: 'rgba(255, 215, 0, 0.5)',
        borderWidth: 1,
        borderRadius: 8,
        padding: [12, 16],
        textStyle: { color: '#e0e0e0', fontSize: 12 },
        extraCssText: 'box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);',
        formatter: (params) => {
          const idx = params[0]?.dataIndex;
          if (idx === undefined) return '';

          const raw = chartData.rawData[idx];
          if (!raw) return '';

          // 安全格式化数字
          const safeFixed = (val, digits = 2) => (val != null && !isNaN(val)) ? val.toFixed(digits) : '-';

          // 计算涨跌
          const prevClose = raw.prev_close || (idx > 0 ? chartData.rawData[idx - 1]?.close : raw.open) || raw.open;
          const changeAmount = (raw.close != null && prevClose != null) ? (raw.close - prevClose) : 0;
          const changePct = prevClose ? ((changeAmount / prevClose) * 100) : 0;
          const isUp = changeAmount >= 0;
          const color = isUp ? '#ef5350' : '#26a69a';
          const sign = isUp ? '+' : '';

          return `
            <div style="min-width: 180px;">
              <div style="font-weight: bold; color: #FFD700; margin-bottom: 10px; font-size: 13px; border-bottom: 1px solid rgba(255,215,0,0.2); padding-bottom: 8px;">
                📅 ${raw.time || '-'}
              </div>
              <div style="display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12px;">
                <span style="color: #999;">开盘</span>
                <span style="text-align: right; font-family: monospace;">${safeFixed(raw.open)}</span>
                <span style="color: #999;">收盘</span>
                <span style="text-align: right; font-weight: bold; color: ${color}; font-family: monospace;">${safeFixed(raw.close)}</span>
                <span style="color: #999;">最高</span>
                <span style="text-align: right; color: #ef5350; font-family: monospace;">${safeFixed(raw.high)}</span>
                <span style="color: #999;">最低</span>
                <span style="text-align: right; color: #26a69a; font-family: monospace;">${safeFixed(raw.low)}</span>
              </div>
              <div style="margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center;">
                <span style="color: #999; font-size: 11px;">涨跌幅</span>
                <span style="color: ${color}; font-weight: bold; font-size: 14px; font-family: monospace;">
                  ${sign}${safeFixed(changeAmount)} (${sign}${safeFixed(changePct)}%)
                </span>
              </div>
            </div>
          `;
        }
      },
      xAxis: [
        {
          type: 'category',
          data: chartData.dates,
          gridIndex: 0,
          show: false,
          boundaryGap: true
        },
        {
          type: 'category',
          data: chartData.dates,
          gridIndex: 1,
          show: false,
          boundaryGap: true
        }
      ],
      yAxis: [
        {
          type: 'value',
          gridIndex: 0,
          show: false,
          scale: true
        },
        {
          type: 'value',
          gridIndex: 1,
          show: false,
          scale: true
        }
      ],
      dataZoom: [{
        type: 'inside',
        xAxisIndex: [0, 1],
        start: 50,
        end: 100,
        zoomOnMouseWheel: true,
        moveOnMouseMove: true
      }],
      series: [
        {
          name: 'K线',
          type: 'candlestick',
          data: chartData.klineData,
          xAxisIndex: 0,
          yAxisIndex: 0,
          itemStyle: {
            color: upColor,
            color0: downColor,
            borderColor: upColor,
            borderColor0: downColor,
            borderWidth: 1
          },
          barWidth: '65%'
        },
        {
          name: '成交量',
          type: 'bar',
          data: chartData.volumes,
          xAxisIndex: 1,
          yAxisIndex: 1,
          itemStyle: {
            color: (params) => {
              const idx = params.dataIndex;
              const raw = chartData.rawData[idx];
              return raw && raw.close >= raw.open ? 'rgba(239,83,80,0.5)' : 'rgba(38,166,154,0.5)';
            }
          },
          barWidth: '65%'
        }
      ]
    };
  }, [chartData, upColor, downColor]);

  if (loading) {
    return (
      <Center h="210px">
        <VStack spacing={2}>
          <Spinner size="sm" color="gold" thickness="2px" />
          <Text fontSize="10px" color="whiteAlpha.500">加载{indexName}...</Text>
        </VStack>
      </Center>
    );
  }

  return (
    <Flex direction="column" h="210px">
      {/* 顶部：指数名称和数据 */}
      <Flex justify="space-between" align="center" mb={1}>
        <HStack spacing={2}>
          <Box
            w="3px"
            h="14px"
            borderRadius="full"
            bg={latestData?.isPositive ? '#ef5350' : '#26a69a'}
          />
          <Text fontSize="sm" color="whiteAlpha.800" fontWeight="semibold">
            {indexName}
          </Text>
          {/* 实时状态指示 */}
          {isTrading && latestData?.isRealtime && (
            <Tooltip label="实时行情，每分钟更新" placement="top">
              <HStack
                spacing={1}
                px={1.5}
                py={0.5}
                bg="rgba(0,218,60,0.1)"
                borderRadius="full"
                border="1px solid rgba(0,218,60,0.3)"
              >
                <Box
                  w="5px"
                  h="5px"
                  borderRadius="full"
                  bg="#00da3c"
                  animation="pulse 1.5s infinite"
                />
                <Text fontSize="9px" color="#00da3c" fontWeight="bold">
                  实时
                </Text>
              </HStack>
            </Tooltip>
          )}
        </HStack>
        <HStack spacing={3}>
          <Text fontSize="lg" fontWeight="bold" color="white" fontFamily="monospace">
            {latestData?.close?.toFixed(2)}
          </Text>
          <Box
            px={2}
            py={0.5}
            borderRadius="md"
            bg={latestData?.isPositive ? 'rgba(239,83,80,0.15)' : 'rgba(38,166,154,0.15)'}
            border="1px solid"
            borderColor={latestData?.isPositive ? 'rgba(239,83,80,0.3)' : 'rgba(38,166,154,0.3)'}
          >
            <Text
              fontSize="sm"
              fontWeight="bold"
              fontFamily="monospace"
              color={latestData?.isPositive ? '#ef5350' : '#26a69a'}
            >
              {latestData?.isPositive ? '▲' : '▼'} {latestData?.isPositive ? '+' : ''}{latestData?.changePct?.toFixed(2)}%
            </Text>
          </Box>
        </HStack>
      </Flex>

      {/* K线图区域 */}
      <Box flex="1" position="relative">
        <ReactECharts
          option={chartOption}
          style={{ height: '100%', width: '100%' }}
          opts={{ renderer: 'canvas' }}
        />
        {/* 底部提示 - 显示更新时间 */}
        <HStack
          position="absolute"
          bottom={0}
          right={1}
          spacing={2}
        >
          {latestData?.updateTime && (
            <Text fontSize="9px" color="whiteAlpha.400">
              {latestData.updateTime}
            </Text>
          )}
          <Text fontSize="9px" color="whiteAlpha.300">
            滚轮缩放 · 拖动查看
          </Text>
        </HStack>
      </Box>
    </Flex>
  );
};

/**
 * 流动式热门概念组件 - HeroUI 风格
 * 特点：
 * 1. 三行横向滚动，每行方向不同
 * 2. 卡片式设计，带渐变边框
 * 3. 悬停时暂停滚动，放大效果
 * 4. 流光动画效果
 */
const FlowingConcepts = () => {
  const [concepts, setConcepts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [hoveredIdx, setHoveredIdx] = useState(null);
  const [isPaused, setIsPaused] = useState(false);

  useEffect(() => {
    const load = async () => {
      const data = await fetchPopularConcepts();
      setConcepts(data.slice(0, 30)); // 取30个概念
      setLoading(false);
    };
    load();
  }, []);

  const getColor = (pct) => {
    if (pct > 5) return { bg: 'rgba(255,23,68,0.15)', border: '#ff1744', text: '#ff1744', glow: 'rgba(255,23,68,0.4)' };
    if (pct > 2) return { bg: 'rgba(255,82,82,0.12)', border: '#ff5252', text: '#ff5252', glow: 'rgba(255,82,82,0.3)' };
    if (pct > 0) return { bg: 'rgba(255,138,128,0.1)', border: '#ff8a80', text: '#ff8a80', glow: 'rgba(255,138,128,0.25)' };
    if (pct === 0) return { bg: 'rgba(255,215,0,0.1)', border: '#FFD700', text: '#FFD700', glow: 'rgba(255,215,0,0.25)' };
    if (pct > -2) return { bg: 'rgba(105,240,174,0.1)', border: '#69f0ae', text: '#69f0ae', glow: 'rgba(105,240,174,0.25)' };
    if (pct > -5) return { bg: 'rgba(0,230,118,0.12)', border: '#00e676', text: '#00e676', glow: 'rgba(0,230,118,0.3)' };
    return { bg: 'rgba(0,200,83,0.15)', border: '#00c853', text: '#00c853', glow: 'rgba(0,200,83,0.4)' };
  };

  const handleClick = (name) => {
    window.open(`https://valuefrontier.cn/htmls/${name}.html`, '_blank');
  };

  if (loading) {
    return (
      <Center h="100%">
        <VStack spacing={2}>
          <Spinner size="md" color="gold" thickness="3px" />
          <Text fontSize="xs" color="whiteAlpha.500">加载热门概念...</Text>
        </VStack>
      </Center>
    );
  }

  // 将概念分成三行
  const row1 = concepts.slice(0, 10);
  const row2 = concepts.slice(10, 20);
  const row3 = concepts.slice(20, 30);

  // 渲染单个概念卡片
  const renderConceptCard = (concept, globalIdx, uniqueIdx) => {
    const colors = getColor(concept.change_pct);
    const isActive = hoveredIdx === globalIdx;

    return (
      <Box
        key={`${globalIdx}-${uniqueIdx}`}
        flexShrink={0}
        px={3}
        py={2}
        mx={2}
        bg={isActive ? colors.bg : 'rgba(255,255,255,0.03)'}
        border="1px solid"
        borderColor={isActive ? colors.border : 'rgba(255,255,255,0.08)'}
        borderRadius="xl"
        cursor="pointer"
        transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
        transform={isActive ? 'scale(1.1) translateY(-4px)' : 'scale(1)'}
        boxShadow={isActive
          ? `0 8px 32px ${colors.glow}, 0 0 0 1px ${colors.border}40, inset 0 1px 0 rgba(255,255,255,0.1)`
          : '0 2px 8px rgba(0,0,0,0.2)'
        }
        onClick={() => handleClick(concept.name)}
        onMouseEnter={() => {
          setHoveredIdx(globalIdx);
          setIsPaused(true);
        }}
        onMouseLeave={() => {
          setHoveredIdx(null);
          setIsPaused(false);
        }}
        position="relative"
        overflow="hidden"
        _before={isActive ? {
          content: '""',
          position: 'absolute',
          top: 0,
          left: '-100%',
          width: '200%',
          height: '100%',
          background: `linear-gradient(90deg, transparent, ${colors.glow}, transparent)`,
          animation: 'shimmer 1.5s infinite',
        } : {}}
      >
        <HStack spacing={2}>
          <Text
            fontSize="sm"
            fontWeight={isActive ? 'bold' : 'semibold'}
            color={isActive ? colors.text : 'whiteAlpha.900'}
            whiteSpace="nowrap"
            textShadow={isActive ? `0 0 10px ${colors.glow}` : 'none'}
          >
            {concept.name}
          </Text>
          <Text
            fontSize="xs"
            fontWeight="bold"
            color={colors.text}
            whiteSpace="nowrap"
          >
            {concept.change_pct > 0 ? '+' : ''}{concept.change_pct?.toFixed(2) ?? '-'}%
          </Text>
        </HStack>
      </Box>
    );
  };

  // 渲染滚动行
  const renderScrollRow = (items, direction, startIdx, duration) => {
    const animationName = direction === 'left' ? 'scrollLeft' : 'scrollRight';

    return (
      <Box
        overflow="hidden"
        position="relative"
        py={1}
        _before={{
          content: '""',
          position: 'absolute',
          left: 0,
          top: 0,
          bottom: 0,
          width: '60px',
          background: 'linear-gradient(90deg, rgba(10,10,20,1) 0%, transparent 100%)',
          zIndex: 2,
          pointerEvents: 'none',
        }}
        _after={{
          content: '""',
          position: 'absolute',
          right: 0,
          top: 0,
          bottom: 0,
          width: '60px',
          background: 'linear-gradient(90deg, transparent 0%, rgba(10,10,20,1) 100%)',
          zIndex: 2,
          pointerEvents: 'none',
        }}
      >
        <Flex
          animation={`${animationName} ${duration}s linear infinite`}
          sx={{
            animationPlayState: isPaused ? 'paused' : 'running',
            [`@keyframes ${animationName}`]: direction === 'left' ? {
              '0%': { transform: 'translateX(0)' },
              '100%': { transform: 'translateX(-50%)' },
            } : {
              '0%': { transform: 'translateX(-50%)' },
              '100%': { transform: 'translateX(0)' },
            },
          }}
        >
          {/* 复制两份实现无缝滚动 */}
          {[...items, ...items].map((concept, idx) =>
            renderConceptCard(concept, startIdx + (idx % items.length), idx)
          )}
        </Flex>
      </Box>
    );
  };

  return (
    <Box h="100%" w="100%" py={2}>
      <VStack spacing={2} h="100%" justify="center">
        {renderScrollRow(row1, 'left', 0, 35)}
        {renderScrollRow(row2, 'right', 10, 40)}
        {renderScrollRow(row3, 'left', 20, 32)}
      </VStack>
    </Box>
  );
};

/**
 * 使用说明弹窗组件
 */
const InfoModal = () => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      {/* 触发按钮 */}
      <HStack
        spacing={1.5}
        px={2.5}
        py={1}
        bg="rgba(255,215,0,0.08)"
        border="1px solid rgba(255,215,0,0.2)"
        borderRadius="full"
        cursor="pointer"
        transition="all 0.2s"
        _hover={{
          bg: 'rgba(255,215,0,0.15)',
          borderColor: 'rgba(255,215,0,0.4)',
          transform: 'scale(1.02)',
        }}
        onClick={onOpen}
      >
        <Icon as={Info} color="gold" boxSize={3} />
        <Text fontSize="xs" color="gold" fontWeight="medium">
          使用说明
        </Text>
      </HStack>

      {/* 弹窗 */}
      <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered motionPreset="slideInBottom">
        <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(8px)" />
        <ModalContent
          bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
          border="1px solid rgba(255,215,0,0.3)"
          borderRadius="2xl"
          boxShadow="0 25px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,215,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1)"
          maxW="500px"
          mx={4}
        >
          <ModalHeader
            borderBottom="1px solid rgba(255,215,0,0.2)"
            pb={4}
          >
            <HStack spacing={3}>
              <Box
                p={2}
                bg="rgba(255,215,0,0.15)"
                borderRadius="lg"
                border="1px solid rgba(255,215,0,0.3)"
              >
                <Icon as={Info} color="gold" boxSize={5} />
              </Box>
              <Text
                fontSize="lg"
                fontWeight="bold"
                bgGradient="linear(to-r, #FFD700, #FFA500)"
                bgClip="text"
              >
                事件中心使用指南
              </Text>
            </HStack>
          </ModalHeader>
          <ModalCloseButton color="whiteAlpha.600" _hover={{ color: 'white' }} />

          <ModalBody py={5} px={6}>
            <VStack align="stretch" spacing={5}>
              {/* 1. SABC重要度说明 */}
              <Box>
                <HStack mb={2}>
                  <Text fontSize="sm" fontWeight="bold" color="whiteAlpha.900">
                    1️⃣ 重要度等级 (SABC)
                  </Text>
                </HStack>
                <Box pl={4} borderLeft="3px solid rgba(255,215,0,0.4)" py={2}>
                  <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
                    重要度由<Text as="span" color="cyan.300" fontWeight="bold"> AI大模型 </Text>
                    基于<Text as="span" color="gold" fontWeight="bold">事件本身的影响范围和重大程度</Text>来判定，
                    <Text as="span" color="orange.300" fontWeight="bold">并非收益率预测策略</Text>。
                    S级表示影响范围广、关注度高的重大事件，C级表示影响较小的普通事件。
                  </Text>
                </Box>
              </Box>

              {/* 2. 利好利空并存说明 */}
              <Box>
                <HStack mb={2}>
                  <Text fontSize="sm" fontWeight="bold" color="whiteAlpha.900">
                    2️⃣ 事件筛选机制
                  </Text>
                </HStack>
                <Box pl={4} borderLeft="3px solid rgba(255,215,0,0.4)" py={2}>
                  <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
                    事件列表中<Text as="span" color="#ef5350" fontWeight="bold">利好</Text>和
                    <Text as="span" color="#26a69a" fontWeight="bold">利空</Text>并存，需自行判断。
                    建议在<Text as="span" color="purple.300" fontWeight="bold">「历史相关事件」</Text>中查看：
                  </Text>
                  <VStack align="stretch" spacing={1} mt={2} pl={3}>
                    <Text fontSize="12px" color="whiteAlpha.600">• 历史上类似事件的市场反应</Text>
                    <Text fontSize="12px" color="whiteAlpha.600">• 事件的超预期程度</Text>
                    <Text fontSize="12px" color="whiteAlpha.600">• 综合判断事件的投资价值</Text>
                  </VStack>
                </Box>
              </Box>

              {/* 3. 数据延迟提醒 */}
              <Box
                p={4}
                bg="rgba(255,100,0,0.1)"
                border="1px solid rgba(255,100,0,0.3)"
                borderRadius="xl"
              >
                <HStack mb={2}>
                  <Icon as={Clock} color="orange.400" boxSize={5} />
                  <Text fontSize="sm" fontWeight="bold" color="orange.300">
                    3️⃣ 数据延迟提醒
                  </Text>
                </HStack>
                <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
                  由于模型需要通过算法检索和分析历史数据，事件结果和发生时间会有
                  <Text as="span" color="orange.300" fontWeight="bold"> 2-3分钟 </Text>左右的延迟。
                  <Text as="span" color="#ef5350" fontWeight="bold"> 切勿追高！</Text>
                </Text>
              </Box>

              {/* 4. 盘前新闻经验 */}
              <Box
                p={4}
                bg="rgba(59,130,246,0.1)"
                border="1px solid rgba(59,130,246,0.3)"
                borderRadius="xl"
              >
                <HStack mb={2}>
                  <Icon as={AlertCircle} color="blue.400" boxSize={5} />
                  <Text fontSize="sm" fontWeight="bold" color="blue.300">
                    4️⃣ 实用经验分享
                  </Text>
                </HStack>
                <Text fontSize="13px" color="whiteAlpha.800" lineHeight="1.7">
                  一个比较有效的经验是在
                  <Text as="span" color="blue.300" fontWeight="bold"> 9:20左右 </Text>
                  研究<Text as="span" color="gold" fontWeight="bold">上一交易日收盘后至盘前</Text>的新闻事件，
                  往往能发现一些<Text as="span" color="cyan.300" fontWeight="bold">当日主线题材</Text>。
                </Text>
              </Box>

              {/* 操作提示 */}
              <Box
                pt={3}
                mt={2}
                borderTop="1px solid rgba(255,215,0,0.2)"
              >
                <Text fontSize="12px" color="yellow.300" textAlign="center" fontWeight="medium">
                  💡 点击事件卡片查看详情 · K线图支持滚轮缩放和拖动
                </Text>
              </Box>
            </VStack>
          </ModalBody>
        </ModalContent>
      </Modal>
    </>
  );
};

/**
 * 顶部说明面板主组件
 */
const HeroPanel = () => {
  const gradientBg = 'linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 25%, #16213e 50%, #1a1a2e 75%, #0a0a0a 100%)';
  const borderColor = useColorModeValue('rgba(255, 215, 0, 0.3)', 'rgba(255, 215, 0, 0.25)');

  return (
    <Card
      bg={gradientBg}
      borderColor={borderColor}
      borderWidth="1px"
      boxShadow="0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,215,0,0.1) inset"
      mb={6}
      overflow="hidden"
      position="relative"
    >
      {/* 装饰性光晕 */}
      <Box
        position="absolute"
        top="-50%"
        right="-30%"
        width="600px"
        height="600px"
        borderRadius="full"
        bg="radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%)"
        pointerEvents="none"
        filter="blur(40px)"
      />
      <Box
        position="absolute"
        bottom="-40%"
        left="-20%"
        width="400px"
        height="400px"
        borderRadius="full"
        bg="radial-gradient(circle, rgba(100,150,255,0.05) 0%, transparent 70%)"
        pointerEvents="none"
        filter="blur(50px)"
      />

      <CardBody p={{ base: 4, md: 5 }}>
        {/* 标题行：标题 + 使用说明 + 交易状态 */}
        <Flex align="center" justify="space-between" mb={4} wrap="wrap" gap={2}>
          <HStack spacing={3}>
            <Heading size="lg">
              <Text
                bgGradient="linear(to-r, #FFD700, #FFA500, #FFD700)"
                bgClip="text"
                backgroundSize="200% 100%"
                animation="shimmer 3s linear infinite"
                fontWeight="extrabold"
              >
                事件中心
              </Text>
            </Heading>
            {/* 使用说明 - 弹窗 */}
            <InfoModal />
          </HStack>

          {/* 右侧：交易状态 */}
          {isInTradingTime() && (
            <HStack
              spacing={1.5}
              px={2.5}
              py={1}
              borderRadius="full"
              bg="rgba(0,218,60,0.1)"
              border="1px solid rgba(0,218,60,0.3)"
            >
              <Box
                w="6px"
                h="6px"
                borderRadius="full"
                bg="#00da3c"
                animation="pulse 1.5s infinite"
                boxShadow="0 0 8px #00da3c"
              />
              <Text fontSize="xs" color="#00da3c" fontWeight="bold">
                交易中
              </Text>
            </HStack>
          )}
        </Flex>

        {/* 内容区：指数 + 概念 */}
        <Flex
          direction={{ base: 'column', lg: 'row' }}
          gap={4}
        >
          {/* 左侧：双指数横向排列 */}
          <Flex
            direction={{ base: 'column', md: 'row' }}
            gap={4}
            flex={{ lg: '0 0 58%' }}
          >
            {/* 上证指数 */}
            <Box
              flex="1"
              p={4}
              minH="240px"
              bg="rgba(255,255,255,0.03)"
              borderRadius="xl"
              border="1px solid rgba(255,255,255,0.08)"
              transition="all 0.3s"
              _hover={{
                bg: 'rgba(255,255,255,0.05)',
                borderColor: 'rgba(239,83,80,0.4)',
                boxShadow: '0 4px 20px rgba(239,83,80,0.15)',
              }}
            >
              <CompactIndexCard indexCode="000001" indexName="上证指数" />
            </Box>

            {/* 深证成指 */}
            <Box
              flex="1"
              p={4}
              minH="240px"
              bg="rgba(255,255,255,0.03)"
              borderRadius="xl"
              border="1px solid rgba(255,255,255,0.08)"
              transition="all 0.3s"
              _hover={{
                bg: 'rgba(255,255,255,0.05)',
                borderColor: 'rgba(38,166,154,0.4)',
                boxShadow: '0 4px 20px rgba(38,166,154,0.15)',
              }}
            >
              <CompactIndexCard indexCode="399001" indexName="深证成指" />
            </Box>
          </Flex>

          {/* 右侧：热门概念 - 流动式设计 */}
          <Box
            flex={{ lg: '1' }}
            minH={{ base: '270px', lg: '240px' }}
            bg="linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(20,20,40,0.3) 50%, rgba(0,0,0,0.4) 100%)"
            borderRadius="2xl"
            border="1px solid"
            borderColor="rgba(255,215,0,0.15)"
            overflow="hidden"
            position="relative"
            boxShadow="inset 0 2px 20px rgba(0,0,0,0.3), 0 4px 30px rgba(0,0,0,0.2)"
            _before={{
              content: '""',
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              height: '1px',
              background: 'linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent)',
            }}
          >
            {/* 标题栏 - 更精致的设计 */}
            <Flex
              position="absolute"
              top={0}
              left={0}
              right={0}
              px={4}
              py={2}
              bg="rgba(0,0,0,0.3)"
              backdropFilter="blur(10px)"
              borderBottom="1px solid rgba(255,255,255,0.05)"
              justify="space-between"
              align="center"
              zIndex={10}
            >
              <HStack spacing={2}>
                <Box
                  p={1.5}
                  bg="rgba(255,215,0,0.15)"
                  borderRadius="lg"
                  border="1px solid rgba(255,215,0,0.2)"
                >
                  <Icon as={TrendingUp} color="gold" boxSize={4} />
                </Box>
                <VStack align="start" spacing={0}>
                  <Text fontSize="sm" fontWeight="bold" color="gold">
                    热门概念
                  </Text>
                  <Text fontSize="10px" color="whiteAlpha.500">
                    实时涨跌排行
                  </Text>
                </VStack>
              </HStack>
            </Flex>

            {/* 流动式概念展示 */}
            <Box pt="52px" h="100%">
              <FlowingConcepts />
            </Box>
          </Box>
        </Flex>
      </CardBody>
    </Card>
  );
};

export default HeroPanel;