// src/views/Company/FinancialPanorama.jsx
import React, { useState, useEffect, useMemo } from 'react';
import { logger } from '../../utils/logger';
import {
  Box,
  Container,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Heading,
  Text,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  TableContainer,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  SimpleGrid,
  Card,
  CardBody,
  CardHeader,
  Spinner,
  Center,
  Alert,
  AlertIcon,
  Badge,
  VStack,
  HStack,
  Divider,
  useColorModeValue,
  Select,
  Button,
  Tooltip,
  Progress,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Input,
  Flex,
  Tag,
  TagLabel,
  IconButton,
  useToast,
  Skeleton,
  SkeletonText,
  Grid,
  GridItem,
  ButtonGroup,
  Stack,
  Collapse,
  useColorMode,
} from '@chakra-ui/react';
import { 
  ChevronDownIcon, 
  ChevronUpIcon, 
  InfoIcon, 
  DownloadIcon,
  RepeatIcon,
  SearchIcon,
  ViewIcon,
  TimeIcon,
  ArrowUpIcon,
  ArrowDownIcon,
} from '@chakra-ui/icons';
import ReactECharts from 'echarts-for-react';
import { financialService, formatUtils, chartUtils } from '../../services/financialService';

const FinancialPanorama = ({ stockCode: propStockCode }) => {
  // 状态管理
  const [stockCode, setStockCode] = useState(propStockCode || '600000');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [selectedPeriods, setSelectedPeriods] = useState(8);
  const [activeTab, setActiveTab] = useState(0);
  
  // 财务数据状态
  const [stockInfo, setStockInfo] = useState(null);
  const [balanceSheet, setBalanceSheet] = useState([]);
  const [incomeStatement, setIncomeStatement] = useState([]);
  const [cashflow, setCashflow] = useState([]);
  const [financialMetrics, setFinancialMetrics] = useState([]);
  const [mainBusiness, setMainBusiness] = useState(null);
  const [forecast, setForecast] = useState(null);
  const [industryRank, setIndustryRank] = useState([]);
  const [comparison, setComparison] = useState([]);

  // UI状态
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [modalContent, setModalContent] = useState(null);
  const [expandedRows, setExpandedRows] = useState({});
  const toast = useToast();
  const { colorMode } = useColorMode();
  
  // 颜色配置（中国市场：红涨绿跌）
  const bgColor = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const hoverBg = useColorModeValue('gray.50', 'gray.700');
  const positiveColor = useColorModeValue('red.500', 'red.400');  // 红涨
  const negativeColor = useColorModeValue('green.500', 'green.400');  // 绿跌

  // 加载所有财务数据
  const loadFinancialData = async () => {
    if (!stockCode || stockCode.length !== 6) {
      logger.warn('FinancialPanorama', 'loadFinancialData', '无效的股票代码', { stockCode });
      toast({
        title: '请输入有效的6位股票代码',
        status: 'warning',
        duration: 3000,
      });
      return;
    }

    logger.debug('FinancialPanorama', '开始加载财务数据', { stockCode, selectedPeriods });
    setLoading(true);
    setError(null);

    try {
      // 并行加载所有数据
      const [
        stockInfoRes,
        balanceRes,
        incomeRes,
        cashflowRes,
        metricsRes,
        businessRes,
        forecastRes,
        rankRes,
        comparisonRes
      ] = await Promise.all([
        financialService.getStockInfo(stockCode),
        financialService.getBalanceSheet(stockCode, selectedPeriods),
        financialService.getIncomeStatement(stockCode, selectedPeriods),
        financialService.getCashflow(stockCode, selectedPeriods),
        financialService.getFinancialMetrics(stockCode, selectedPeriods),
        financialService.getMainBusiness(stockCode, 4),
        financialService.getForecast(stockCode),
        financialService.getIndustryRank(stockCode, 4),
        financialService.getPeriodComparison(stockCode, selectedPeriods)
      ]);

      // 设置数据
      if (stockInfoRes.success) setStockInfo(stockInfoRes.data);
      if (balanceRes.success) setBalanceSheet(balanceRes.data);
      if (incomeRes.success) setIncomeStatement(incomeRes.data);
      if (cashflowRes.success) setCashflow(cashflowRes.data);
      if (metricsRes.success) setFinancialMetrics(metricsRes.data);
      if (businessRes.success) setMainBusiness(businessRes.data);
      if (forecastRes.success) setForecast(forecastRes.data);
      if (rankRes.success) setIndustryRank(rankRes.data);
      if (comparisonRes.success) setComparison(comparisonRes.data);

      // ❌ 移除数据加载成功toast
      logger.info('FinancialPanorama', '财务数据加载成功', { stockCode });
    } catch (err) {
      setError(err.message);
      logger.error('FinancialPanorama', 'loadFinancialData', err, { stockCode, selectedPeriods });

      // ❌ 移除数据加载失败toast
      // toast({ title: '数据加载失败', description: err.message, status: 'error', duration: 5000 });
    } finally {
      setLoading(false);
    }
  };

  // 监听props中的stockCode变化
  useEffect(() => {
    if (propStockCode && propStockCode !== stockCode) {
      setStockCode(propStockCode);
    }
  }, [propStockCode]);

  // 初始加载
  useEffect(() => {
    if (stockCode) {
      loadFinancialData();
    }
  }, [stockCode, selectedPeriods]);

  // 计算同比变化率
  const calculateYoYChange = (currentValue, currentPeriod, allData, metricPath) => {
    if (!currentValue || !currentPeriod) return { change: 0, intensity: 0 };
    
    // 找到去年同期的数据
    const currentDate = new Date(currentPeriod);
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth() + 1;
    
    // 查找去年同期
    const lastYearSamePeriod = allData.find(item => {
      const itemDate = new Date(item.period);
      const itemYear = itemDate.getFullYear();
      const itemMonth = itemDate.getMonth() + 1;
      return itemYear === currentYear - 1 && itemMonth === currentMonth;
    });
    
    if (!lastYearSamePeriod) return { change: 0, intensity: 0 };
    
    const previousValue = metricPath.split('.').reduce((obj, key) => obj?.[key], lastYearSamePeriod);
    
    if (!previousValue || previousValue === 0) return { change: 0, intensity: 0 };
    
    const change = ((currentValue - previousValue) / Math.abs(previousValue)) * 100;
    const intensity = Math.min(Math.abs(change) / 50, 1); // 50%变化达到最大强度
    return { change, intensity };
  };

  // 获取单元格背景色（中国市场颜色）
  const getCellBackground = (change, intensity) => {
    if (change > 0) {
      return `rgba(239, 68, 68, ${intensity * 0.15})`; // 红色背景，涨
    } else if (change < 0) {
      return `rgba(34, 197, 94, ${intensity * 0.15})`; // 绿色背景，跌
    }
    return 'transparent';
  };

  // 点击指标行显示图表
  const showMetricChart = (metricName, metricKey, data, dataPath) => {
    const chartData = data.map(item => {
      const value = dataPath.split('.').reduce((obj, key) => obj?.[key], item);
      return {
        period: formatUtils.getReportType(item.period),
        date: item.period,
        value: value
      };
    }).reverse();

    const option = {
      title: {
        text: metricName,
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          const value = params[0].value;
          const formattedValue = value > 10000 ? 
            formatUtils.formatLargeNumber(value) : 
            value?.toFixed(2);
          return `${params[0].name}<br/>${metricName}: ${formattedValue}`;
        }
      },
      xAxis: {
        type: 'category',
        data: chartData.map(d => d.period),
        axisLabel: {
          rotate: 45
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: (value) => {
            if (Math.abs(value) >= 100000000) {
              return (value / 100000000).toFixed(0) + '亿';
            } else if (Math.abs(value) >= 10000) {
              return (value / 10000).toFixed(0) + '万';
            }
            return value.toFixed(0);
          }
        }
      },
      series: [{
        type: 'bar',
        data: chartData.map(d => d.value),
        itemStyle: {
          color: (params) => {
            const idx = params.dataIndex;
            if (idx === 0) return '#3182CE';
            const prevValue = chartData[idx - 1].value;
            const currValue = params.value;
            // 中国市场颜色：红涨绿跌
            return currValue >= prevValue ? '#EF4444' : '#10B981';
          }
        },
        label: {
          show: true,
          position: 'top',
          formatter: (params) => {
            const value = params.value;
            if (Math.abs(value) >= 100000000) {
              return (value / 100000000).toFixed(1) + '亿';
            } else if (Math.abs(value) >= 10000) {
              return (value / 10000).toFixed(1) + '万';
            } else if (Math.abs(value) >= 1) {
              return value.toFixed(1);
            }
            return value.toFixed(2);
          }
        }
      }]
    };

    setModalContent(
      <Box>
        <ReactECharts 
          option={option} 
          style={{ height: '400px', width: '100%' }}
        />
        <Divider my={4} />
        <TableContainer>
          <Table size="sm">
            <Thead>
              <Tr>
                <Th>报告期</Th>
                <Th isNumeric>数值</Th>
                <Th isNumeric>同比</Th>
                <Th isNumeric>环比</Th>
              </Tr>
            </Thead>
            <Tbody>
              {chartData.map((item, idx) => {
                // 计算环比
                const qoq = idx > 0 ? 
                  ((item.value - chartData[idx - 1].value) / Math.abs(chartData[idx - 1].value) * 100) : null;
                
                // 计算同比
                const currentDate = new Date(item.date);
                const lastYearItem = chartData.find(d => {
                  const date = new Date(d.date);
                  return date.getFullYear() === currentDate.getFullYear() - 1 && 
                         date.getMonth() === currentDate.getMonth();
                });
                const yoy = lastYearItem ? 
                  ((item.value - lastYearItem.value) / Math.abs(lastYearItem.value) * 100) : null;
                
                return (
                  <Tr key={idx}>
                    <Td>{item.period}</Td>
                    <Td isNumeric>{formatUtils.formatLargeNumber(item.value)}</Td>
                    <Td isNumeric color={yoy > 0 ? positiveColor : yoy < 0 ? negativeColor : 'gray.500'}>
                      {yoy ? `${yoy.toFixed(2)}%` : '-'}
                    </Td>
                    <Td isNumeric color={qoq > 0 ? positiveColor : qoq < 0 ? negativeColor : 'gray.500'}>
                      {qoq ? `${qoq.toFixed(2)}%` : '-'}
                    </Td>
                  </Tr>
                );
              })}
            </Tbody>
          </Table>
        </TableContainer>
      </Box>
    );
    onOpen();
  };

  // 资产负债表组件 - 完整版
  const BalanceSheetTable = () => {
    const [expandedSections, setExpandedSections] = useState({
      currentAssets: true,
      nonCurrentAssets: true,
      currentLiabilities: true,
      nonCurrentLiabilities: true,
      equity: true
    });

    const toggleSection = (section) => {
      setExpandedSections(prev => ({
        ...prev,
        [section]: !prev[section]
      }));
    };

    // 完整的资产负债表指标
    const assetSections = [
      {
        title: '流动资产',
        key: 'currentAssets',
        metrics: [
          { name: '货币资金', key: 'cash', path: 'assets.current_assets.cash', isCore: true },
          { name: '交易性金融资产', key: 'trading_financial_assets', path: 'assets.current_assets.trading_financial_assets' },
          { name: '应收票据', key: 'notes_receivable', path: 'assets.current_assets.notes_receivable' },
          { name: '应收账款', key: 'accounts_receivable', path: 'assets.current_assets.accounts_receivable', isCore: true },
          { name: '预付款项', key: 'prepayments', path: 'assets.current_assets.prepayments' },
          { name: '其他应收款', key: 'other_receivables', path: 'assets.current_assets.other_receivables' },
          { name: '存货', key: 'inventory', path: 'assets.current_assets.inventory', isCore: true },
          { name: '合同资产', key: 'contract_assets', path: 'assets.current_assets.contract_assets' },
          { name: '其他流动资产', key: 'other_current_assets', path: 'assets.current_assets.other_current_assets' },
          { name: '流动资产合计', key: 'total_current_assets', path: 'assets.current_assets.total', isTotal: true },
        ]
      },
      {
        title: '非流动资产',
        key: 'nonCurrentAssets',
        metrics: [
          { name: '长期股权投资', key: 'long_term_equity_investments', path: 'assets.non_current_assets.long_term_equity_investments' },
          { name: '投资性房地产', key: 'investment_property', path: 'assets.non_current_assets.investment_property' },
          { name: '固定资产', key: 'fixed_assets', path: 'assets.non_current_assets.fixed_assets', isCore: true },
          { name: '在建工程', key: 'construction_in_progress', path: 'assets.non_current_assets.construction_in_progress' },
          { name: '使用权资产', key: 'right_of_use_assets', path: 'assets.non_current_assets.right_of_use_assets' },
          { name: '无形资产', key: 'intangible_assets', path: 'assets.non_current_assets.intangible_assets', isCore: true },
          { name: '商誉', key: 'goodwill', path: 'assets.non_current_assets.goodwill', isCore: true },
          { name: '递延所得税资产', key: 'deferred_tax_assets', path: 'assets.non_current_assets.deferred_tax_assets' },
          { name: '其他非流动资产', key: 'other_non_current_assets', path: 'assets.non_current_assets.other_non_current_assets' },
          { name: '非流动资产合计', key: 'total_non_current_assets', path: 'assets.non_current_assets.total', isTotal: true },
        ]
      },
      {
        title: '资产总计',
        key: 'totalAssets',
        metrics: [
          { name: '资产总计', key: 'total_assets', path: 'assets.total', isTotal: true, isCore: true },
        ]
      }
    ];

    const liabilitySections = [
      {
        title: '流动负债',
        key: 'currentLiabilities',
        metrics: [
          { name: '短期借款', key: 'short_term_borrowings', path: 'liabilities.current_liabilities.short_term_borrowings', isCore: true },
          { name: '应付票据', key: 'notes_payable', path: 'liabilities.current_liabilities.notes_payable' },
          { name: '应付账款', key: 'accounts_payable', path: 'liabilities.current_liabilities.accounts_payable', isCore: true },
          { name: '预收款项', key: 'advance_receipts', path: 'liabilities.current_liabilities.advance_receipts' },
          { name: '合同负债', key: 'contract_liabilities', path: 'liabilities.current_liabilities.contract_liabilities' },
          { name: '应付职工薪酬', key: 'employee_compensation_payable', path: 'liabilities.current_liabilities.employee_compensation_payable' },
          { name: '应交税费', key: 'taxes_payable', path: 'liabilities.current_liabilities.taxes_payable' },
          { name: '其他应付款', key: 'other_payables', path: 'liabilities.current_liabilities.other_payables' },
          { name: '一年内到期的非流动负债', key: 'non_current_due_within_one_year', path: 'liabilities.current_liabilities.non_current_liabilities_due_within_one_year' },
          { name: '流动负债合计', key: 'total_current_liabilities', path: 'liabilities.current_liabilities.total', isTotal: true },
        ]
      },
      {
        title: '非流动负债',
        key: 'nonCurrentLiabilities',
        metrics: [
          { name: '长期借款', key: 'long_term_borrowings', path: 'liabilities.non_current_liabilities.long_term_borrowings', isCore: true },
          { name: '应付债券', key: 'bonds_payable', path: 'liabilities.non_current_liabilities.bonds_payable' },
          { name: '租赁负债', key: 'lease_liabilities', path: 'liabilities.non_current_liabilities.lease_liabilities' },
          { name: '递延所得税负债', key: 'deferred_tax_liabilities', path: 'liabilities.non_current_liabilities.deferred_tax_liabilities' },
          { name: '其他非流动负债', key: 'other_non_current_liabilities', path: 'liabilities.non_current_liabilities.other_non_current_liabilities' },
          { name: '非流动负债合计', key: 'total_non_current_liabilities', path: 'liabilities.non_current_liabilities.total', isTotal: true },
        ]
      },
      {
        title: '负债合计',
        key: 'totalLiabilities',
        metrics: [
          { name: '负债合计', key: 'total_liabilities', path: 'liabilities.total', isTotal: true, isCore: true },
        ]
      }
    ];

    const equitySections = [
      {
        title: '股东权益',
        key: 'equity',
        metrics: [
          { name: '股本', key: 'share_capital', path: 'equity.share_capital', isCore: true },
          { name: '资本公积', key: 'capital_reserve', path: 'equity.capital_reserve' },
          { name: '盈余公积', key: 'surplus_reserve', path: 'equity.surplus_reserve' },
          { name: '未分配利润', key: 'undistributed_profit', path: 'equity.undistributed_profit', isCore: true },
          { name: '库存股', key: 'treasury_stock', path: 'equity.treasury_stock' },
          { name: '其他综合收益', key: 'other_comprehensive_income', path: 'equity.other_comprehensive_income' },
          { name: '归属母公司股东权益', key: 'parent_company_equity', path: 'equity.parent_company_equity', isCore: true },
          { name: '少数股东权益', key: 'minority_interests', path: 'equity.minority_interests' },
          { name: '股东权益合计', key: 'total_equity', path: 'equity.total', isTotal: true, isCore: true },
        ]
      }
    ];

    // 数组安全检查
    if (!Array.isArray(balanceSheet) || balanceSheet.length === 0) {
      return (
        <Alert status="info">
          <AlertIcon />
          暂无资产负债表数据
        </Alert>
      );
    }

    const maxColumns = Math.min(balanceSheet.length, 6);
    const displayData = balanceSheet.slice(0, maxColumns);

    const renderSection = (sections, sectionType) => (
      <>
        {sections.map(section => (
          <React.Fragment key={section.key}>
            {section.title !== '资产总计' && section.title !== '负债合计' && (
              <Tr
                bg={useColorModeValue('gray.50', 'gray.700')}
                cursor="pointer"
                onClick={() => toggleSection(section.key)}
              >
                <Td colSpan={maxColumns + 2}>
                  <HStack>
                    {expandedSections[section.key] ? <ChevronUpIcon /> : <ChevronDownIcon />}
                    <Text fontWeight="bold">{section.title}</Text>
                  </HStack>
                </Td>
              </Tr>
            )}
            {(expandedSections[section.key] || section.title === '资产总计' || section.title === '负债合计' || section.title === '股东权益合计') && section.metrics.map(metric => {
              const rowData = balanceSheet.map(item => {
                const value = metric.path.split('.').reduce((obj, key) => obj?.[key], item);
                return value;
              });

              return (
                <Tr 
                  key={metric.key}
                  _hover={{ bg: hoverBg, cursor: 'pointer' }}
                  onClick={() => showMetricChart(metric.name, metric.key, balanceSheet, metric.path)}
                  bg={metric.isTotal ? useColorModeValue('blue.50', 'blue.900') : 'transparent'}
                >
                  <Td position="sticky" left={0} bg={bgColor} zIndex={1}>
                    <HStack spacing={2}>
                      {!metric.isTotal && <Box w={4} />}
                      <Text 
                        fontWeight={metric.isTotal ? 'bold' : 'medium'}
                        fontSize={metric.isTotal ? 'sm' : 'xs'}
                      >
                        {metric.name}
                      </Text>
                      {metric.isCore && <Badge size="xs" colorScheme="purple">核心</Badge>}
                    </HStack>
                  </Td>
                  {displayData.map((item, idx) => {
                    const value = rowData[idx];
                    const { change, intensity } = calculateYoYChange(
                      value, 
                      item.period, 
                      balanceSheet, 
                      metric.path
                    );
                    
                    return (
                      <Td 
                        key={idx} 
                        isNumeric
                        bg={getCellBackground(change, intensity)}
                        position="relative"
                      >
                        <Tooltip 
                          label={
                            <VStack align="start" spacing={0}>
                              <Text>数值: {formatUtils.formatLargeNumber(value)}</Text>
                              <Text>同比: {change.toFixed(2)}%</Text>
                            </VStack>
                          }
                          placement="top"
                        >
                          <Text fontSize="xs" fontWeight={metric.isTotal ? 'bold' : 'normal'}>
                            {formatUtils.formatLargeNumber(value, 0)}
                          </Text>
                        </Tooltip>
                        {Math.abs(change) > 30 && !metric.isTotal && (
                          <Text 
                            position="absolute" 
                            top="-1" 
                            right="0"
                            fontSize="2xs"
                            color={change > 0 ? positiveColor : negativeColor}
                            fontWeight="bold"
                          >
                            {change > 0 ? '↑' : '↓'}
                            {Math.abs(change).toFixed(0)}%
                          </Text>
                        )}
                      </Td>
                    );
                  })}
                  <Td>
                    <IconButton
                      size="xs"
                      icon={<ViewIcon />}
                      variant="ghost"
                      colorScheme="blue"
                      onClick={(e) => {
                        e.stopPropagation();
                        showMetricChart(metric.name, metric.key, balanceSheet, metric.path);
                      }}
                    />
                  </Td>
                </Tr>
              );
            })}
          </React.Fragment>
        ))}
      </>
    );

    return (
      <TableContainer>
        <Table size="sm" variant="simple">
          <Thead>
            <Tr>
              <Th position="sticky" left={0} bg={bgColor} zIndex={1} minW="200px">项目</Th>
              {displayData.map(item => (
                <Th key={item.period} isNumeric fontSize="xs" minW="120px">
                  <VStack spacing={0}>
                    <Text>{formatUtils.getReportType(item.period)}</Text>
                    <Text fontSize="2xs" color="gray.500">
                      {item.period.substring(0, 10)}
                    </Text>
                  </VStack>
                </Th>
              ))}
              <Th w="50px">操作</Th>
            </Tr>
          </Thead>
          <Tbody>
            {renderSection(assetSections, 'assets')}
            <Tr height={2} />
            {renderSection(liabilitySections, 'liabilities')}
            <Tr height={2} />
            {renderSection(equitySections, 'equity')}
          </Tbody>
        </Table>
      </TableContainer>
    );
  };

  // 利润表组件 - 完整版
  const IncomeStatementTable = () => {
    const [expandedSections, setExpandedSections] = useState({
      revenue: true,
      costs: true,
      profits: true,
      eps: true
    });

    const toggleSection = (section) => {
      setExpandedSections(prev => ({
        ...prev,
        [section]: !prev[section]
      }));
    };

    const sections = [
      {
        title: '营业收入',
        key: 'revenue',
        metrics: [
          { name: '营业总收入', key: 'total_revenue', path: 'revenue.total_operating_revenue', isCore: true },
          { name: '营业收入', key: 'revenue', path: 'revenue.operating_revenue', isCore: true },
          { name: '其他业务收入', key: 'other_income', path: 'revenue.other_income' },
        ]
      },
      {
        title: '营业成本与费用',
        key: 'costs',
        metrics: [
          { name: '营业总成本', key: 'total_cost', path: 'costs.total_operating_cost', isTotal: true },
          { name: '营业成本', key: 'cost', path: 'costs.operating_cost', isCore: true },
          { name: '税金及附加', key: 'taxes_and_surcharges', path: 'costs.taxes_and_surcharges' },
          { name: '销售费用', key: 'selling_expenses', path: 'costs.selling_expenses', isCore: true },
          { name: '管理费用', key: 'admin_expenses', path: 'costs.admin_expenses', isCore: true },
          { name: '研发费用', key: 'rd_expenses', path: 'costs.rd_expenses', isCore: true },
          { name: '财务费用', key: 'financial_expenses', path: 'costs.financial_expenses' },
          { name: '　其中：利息费用', key: 'interest_expense', path: 'costs.interest_expense' },
          { name: '　　　　利息收入', key: 'interest_income', path: 'costs.interest_income' },
          { name: '三费合计', key: 'three_expenses', path: 'costs.three_expenses_total', isSubtotal: true },
          { name: '四费合计（含研发）', key: 'four_expenses', path: 'costs.four_expenses_total', isSubtotal: true },
          { name: '资产减值损失', key: 'asset_impairment', path: 'costs.asset_impairment_loss' },
          { name: '信用减值损失', key: 'credit_impairment', path: 'costs.credit_impairment_loss' },
        ]
      },
      {
        title: '其他收益',
        key: 'otherGains',
        metrics: [
          { name: '公允价值变动收益', key: 'fair_value_change', path: 'other_gains.fair_value_change' },
          { name: '投资收益', key: 'investment_income', path: 'other_gains.investment_income', isCore: true },
          { name: '　其中：对联营企业和合营企业的投资收益', key: 'investment_income_associates', path: 'other_gains.investment_income_from_associates' },
          { name: '汇兑收益', key: 'exchange_income', path: 'other_gains.exchange_income' },
          { name: '资产处置收益', key: 'asset_disposal_income', path: 'other_gains.asset_disposal_income' },
        ]
      },
      {
        title: '利润',
        key: 'profits',
        metrics: [
          { name: '营业利润', key: 'operating_profit', path: 'profit.operating_profit', isCore: true, isTotal: true },
          { name: '加：营业外收入', key: 'non_operating_income', path: 'non_operating.non_operating_income' },
          { name: '减：营业外支出', key: 'non_operating_expenses', path: 'non_operating.non_operating_expenses' },
          { name: '利润总额', key: 'total_profit', path: 'profit.total_profit', isCore: true, isTotal: true },
          { name: '减：所得税费用', key: 'income_tax', path: 'profit.income_tax_expense' },
          { name: '净利润', key: 'net_profit', path: 'profit.net_profit', isCore: true, isTotal: true },
          { name: '　归属母公司所有者的净利润', key: 'parent_net_profit', path: 'profit.parent_net_profit', isCore: true },
          { name: '　少数股东损益', key: 'minority_profit', path: 'profit.minority_profit' },
          { name: '持续经营净利润', key: 'continuing_net_profit', path: 'profit.continuing_operations_net_profit' },
          { name: '终止经营净利润', key: 'discontinued_net_profit', path: 'profit.discontinued_operations_net_profit' },
        ]
      },
      {
        title: '每股收益',
        key: 'eps',
        metrics: [
          { name: '基本每股收益(元)', key: 'basic_eps', path: 'per_share.basic_eps', isCore: true },
          { name: '稀释每股收益(元)', key: 'diluted_eps', path: 'per_share.diluted_eps' },
        ]
      },
      {
        title: '综合收益',
        key: 'comprehensive',
        metrics: [
          { name: '其他综合收益（税后）', key: 'other_comprehensive_income', path: 'comprehensive_income.other_comprehensive_income' },
          { name: '综合收益总额', key: 'total_comprehensive_income', path: 'comprehensive_income.total_comprehensive_income', isTotal: true },
          { name: '　归属母公司', key: 'parent_comprehensive_income', path: 'comprehensive_income.parent_comprehensive_income' },
          { name: '　归属少数股东', key: 'minority_comprehensive_income', path: 'comprehensive_income.minority_comprehensive_income' },
        ]
      }
    ];

    // 数组安全检查
    if (!Array.isArray(incomeStatement) || incomeStatement.length === 0) {
      return (
        <Alert status="info">
          <AlertIcon />
          暂无利润表数据
        </Alert>
      );
    }

    const maxColumns = Math.min(incomeStatement.length, 6);
    const displayData = incomeStatement.slice(0, maxColumns);

    const renderSection = (section) => (
      <React.Fragment key={section.key}>
        <Tr
          bg={useColorModeValue('gray.50', 'gray.700')}
          cursor="pointer"
          onClick={() => toggleSection(section.key)}
        >
          <Td colSpan={maxColumns + 2}>
            <HStack>
              {expandedSections[section.key] ? <ChevronUpIcon /> : <ChevronDownIcon />}
              <Text fontWeight="bold">{section.title}</Text>
            </HStack>
          </Td>
        </Tr>
        {expandedSections[section.key] && section.metrics.map(metric => {
          const rowData = incomeStatement.map(item => {
            const value = metric.path.split('.').reduce((obj, key) => obj?.[key], item);
            return value;
          });

          return (
            <Tr 
              key={metric.key}
              _hover={{ bg: hoverBg, cursor: 'pointer' }}
              onClick={() => showMetricChart(metric.name, metric.key, incomeStatement, metric.path)}
              bg={metric.isTotal ? useColorModeValue('blue.50', 'blue.900') : 
                  metric.isSubtotal ? useColorModeValue('orange.50', 'orange.900') : 'transparent'}
            >
              <Td position="sticky" left={0} bg={bgColor} zIndex={1}>
                <HStack spacing={2}>
                  {!metric.isTotal && !metric.isSubtotal && <Box w={metric.name.startsWith('　') ? 8 : 4} />}
                  <Text 
                    fontWeight={metric.isTotal || metric.isSubtotal ? 'bold' : 'medium'}
                    fontSize={metric.isTotal ? 'sm' : 'xs'}
                  >
                    {metric.name}
                  </Text>
                  {metric.isCore && <Badge size="xs" colorScheme="purple">核心</Badge>}
                </HStack>
              </Td>
              {displayData.map((item, idx) => {
                const value = rowData[idx];
                const { change, intensity } = calculateYoYChange(
                  value, 
                  item.period, 
                  incomeStatement, 
                  metric.path
                );
                
                // 特殊处理：成本费用类负向指标，增长用绿色，减少用红色
                const isCostItem = metric.key.includes('cost') || metric.key.includes('expense') || 
                                 metric.key === 'income_tax' || metric.key.includes('impairment');
                const displayColor = isCostItem ? 
                  (change > 0 ? negativeColor : positiveColor) : 
                  (change > 0 ? positiveColor : negativeColor);
                
                return (
                  <Td 
                    key={idx} 
                    isNumeric
                    bg={getCellBackground(change, intensity)}
                    position="relative"
                  >
                    <Tooltip 
                      label={
                        <VStack align="start" spacing={0}>
                          <Text>
                            数值: {metric.key.includes('eps') ? 
                              value?.toFixed(3) : 
                              formatUtils.formatLargeNumber(value)}
                          </Text>
                          <Text>同比: {change.toFixed(2)}%</Text>
                        </VStack>
                      }
                      placement="top"
                    >
                      <Text 
                        fontSize="xs" 
                        fontWeight={metric.isTotal || metric.isSubtotal ? 'bold' : 'normal'}
                        color={value < 0 ? 'red.500' : 'inherit'}
                      >
                        {metric.key.includes('eps') ? 
                          value?.toFixed(3) : 
                          formatUtils.formatLargeNumber(value, 0)}
                      </Text>
                    </Tooltip>
                    {Math.abs(change) > 30 && !metric.isTotal && (
                      <Text 
                        position="absolute" 
                        top="-1" 
                        right="0"
                        fontSize="2xs"
                        color={displayColor}
                        fontWeight="bold"
                      >
                        {change > 0 ? '↑' : '↓'}
                        {Math.abs(change).toFixed(0)}%
                      </Text>
                    )}
                  </Td>
                );
              })}
              <Td>
                <IconButton
                  size="xs"
                  icon={<ViewIcon />}
                  variant="ghost"
                  colorScheme="blue"
                />
              </Td>
            </Tr>
          );
        })}
      </React.Fragment>
    );

    return (
      <TableContainer>
        <Table size="sm" variant="simple">
          <Thead>
            <Tr>
              <Th position="sticky" left={0} bg={bgColor} zIndex={1} minW="250px">项目</Th>
              {displayData.map(item => (
                <Th key={item.period} isNumeric fontSize="xs" minW="120px">
                  <VStack spacing={0}>
                    <Text>{formatUtils.getReportType(item.period)}</Text>
                    <Text fontSize="2xs" color="gray.500">
                      {item.period.substring(0, 10)}
                    </Text>
                  </VStack>
                </Th>
              ))}
              <Th w="50px">操作</Th>
            </Tr>
          </Thead>
          <Tbody>
            {sections.map(section => renderSection(section))}
          </Tbody>
        </Table>
      </TableContainer>
    );
  };

  // 现金流量表组件
  const CashflowTable = () => {
    const metrics = [
      { name: '经营现金流净额', key: 'operating_net', path: 'operating_activities.net_flow' },
      { name: '销售收现', key: 'cash_from_sales', path: 'operating_activities.inflow.cash_from_sales' },
      { name: '购买支付现金', key: 'cash_for_goods', path: 'operating_activities.outflow.cash_for_goods' },
      { name: '投资现金流净额', key: 'investment_net', path: 'investment_activities.net_flow' },
      { name: '筹资现金流净额', key: 'financing_net', path: 'financing_activities.net_flow' },
      { name: '现金净增加额', key: 'net_increase', path: 'cash_changes.net_increase' },
      { name: '期末现金余额', key: 'ending_balance', path: 'cash_changes.ending_balance' },
      { name: '自由现金流', key: 'free_cash_flow', path: 'key_metrics.free_cash_flow' },
    ];

    // 数组安全检查
    if (!Array.isArray(cashflow) || cashflow.length === 0) {
      return (
        <Alert status="info">
          <AlertIcon />
          暂无现金流量表数据
        </Alert>
      );
    }

    const maxColumns = Math.min(cashflow.length, 8);
    const displayData = cashflow.slice(0, maxColumns);

    return (
      <TableContainer>
        <Table size="sm" variant="simple">
          <Thead>
            <Tr>
              <Th position="sticky" left={0} bg={bgColor} zIndex={1}>项目</Th>
              {displayData.map(item => (
                <Th key={item.period} isNumeric fontSize="xs">
                  <VStack spacing={0}>
                    <Text>{formatUtils.getReportType(item.period)}</Text>
                    <Text fontSize="2xs" color="gray.500">
                      {item.period.substring(0, 10)}
                    </Text>
                  </VStack>
                </Th>
              ))}
              <Th>趋势</Th>
            </Tr>
          </Thead>
          <Tbody>
            {metrics.map(metric => {
              const rowData = cashflow.map(item => {
                const value = metric.path.split('.').reduce((obj, key) => obj?.[key], item);
                return value;
              });

              return (
                <Tr 
                  key={metric.key}
                  _hover={{ bg: hoverBg, cursor: 'pointer' }}
                  onClick={() => showMetricChart(metric.name, metric.key, cashflow, metric.path)}
                >
                  <Td position="sticky" left={0} bg={bgColor} zIndex={1}>
                    <HStack>
                      <Text fontWeight="medium">{metric.name}</Text>
                      {['operating_net', 'free_cash_flow'].includes(metric.key) && 
                        <Badge colorScheme="purple">核心</Badge>}
                    </HStack>
                  </Td>
                  {displayData.map((item, idx) => {
                    const value = rowData[idx];
                    const isNegative = value < 0;
                    const { change, intensity } = calculateYoYChange(
                      value, 
                      item.period, 
                      cashflow, 
                      metric.path
                    );
                    
                    return (
                      <Td 
                        key={idx} 
                        isNumeric
                        bg={getCellBackground(change, intensity)}
                        position="relative"
                      >
                        <Tooltip 
                          label={
                            <VStack align="start" spacing={0}>
                              <Text>数值: {formatUtils.formatLargeNumber(value)}</Text>
                              <Text>同比: {change.toFixed(2)}%</Text>
                            </VStack>
                          }
                          placement="top"
                        >
                          <Text 
                            fontSize="xs"
                            color={isNegative ? negativeColor : positiveColor}
                          >
                            {formatUtils.formatLargeNumber(value, 1)}
                          </Text>
                        </Tooltip>
                        {Math.abs(change) > 50 && (
                          <Text 
                            position="absolute" 
                            top="0" 
                            right="1"
                            fontSize="2xs"
                            color={change > 0 ? positiveColor : negativeColor}
                            fontWeight="bold"
                          >
                            {change > 0 ? '↑' : '↓'}
                          </Text>
                        )}
                      </Td>
                    );
                  })}
                  <Td>
                    <IconButton
                      size="xs"
                      icon={<ViewIcon />}
                      variant="ghost"
                      colorScheme="blue"
                    />
                  </Td>
                </Tr>
              );
            })}
          </Tbody>
        </Table>
      </TableContainer>
    );
  };

  // 财务指标表格组件 - 时间序列版
  const FinancialMetricsTable = () => {
    const [selectedCategory, setSelectedCategory] = useState('profitability');

    const metricsCategories = {
      profitability: {
        title: '盈利能力指标',
        metrics: [
          { name: '净资产收益率(ROE)%', key: 'roe', path: 'profitability.roe', isCore: true },
          { name: '净资产收益率(扣非)%', key: 'roe_deducted', path: 'profitability.roe_deducted' },
          { name: '净资产收益率(加权)%', key: 'roe_weighted', path: 'profitability.roe_weighted', isCore: true },
          { name: '总资产报酬率(ROA)%', key: 'roa', path: 'profitability.roa', isCore: true },
          { name: '毛利率%', key: 'gross_margin', path: 'profitability.gross_margin', isCore: true },
          { name: '净利率%', key: 'net_margin', path: 'profitability.net_profit_margin', isCore: true },
          { name: '营业利润率%', key: 'operating_margin', path: 'profitability.operating_profit_margin' },
          { name: '成本费用利润率%', key: 'cost_profit_ratio', path: 'profitability.cost_profit_ratio' },
          { name: 'EBIT', key: 'ebit', path: 'profitability.ebit' },
        ]
      },
      perShare: {
        title: '每股指标',
        metrics: [
          { name: '每股收益(EPS)', key: 'eps', path: 'per_share_metrics.eps', isCore: true },
          { name: '基本每股收益', key: 'basic_eps', path: 'per_share_metrics.basic_eps', isCore: true },
          { name: '稀释每股收益', key: 'diluted_eps', path: 'per_share_metrics.diluted_eps' },
          { name: '扣非每股收益', key: 'deducted_eps', path: 'per_share_metrics.deducted_eps', isCore: true },
          { name: '每股净资产', key: 'bvps', path: 'per_share_metrics.bvps', isCore: true },
          { name: '每股经营现金流', key: 'operating_cash_flow_ps', path: 'per_share_metrics.operating_cash_flow_ps' },
          { name: '每股资本公积', key: 'capital_reserve_ps', path: 'per_share_metrics.capital_reserve_ps' },
          { name: '每股未分配利润', key: 'undistributed_profit_ps', path: 'per_share_metrics.undistributed_profit_ps' },
        ]
      },
      growth: {
        title: '成长能力指标',
        metrics: [
          { name: '营收增长率%', key: 'revenue_growth', path: 'growth.revenue_growth', isCore: true },
          { name: '净利润增长率%', key: 'profit_growth', path: 'growth.net_profit_growth', isCore: true },
          { name: '扣非净利润增长率%', key: 'deducted_profit_growth', path: 'growth.deducted_profit_growth', isCore: true },
          { name: '归母净利润增长率%', key: 'parent_profit_growth', path: 'growth.parent_profit_growth' },
          { name: '经营现金流增长率%', key: 'operating_cash_flow_growth', path: 'growth.operating_cash_flow_growth' },
          { name: '总资产增长率%', key: 'asset_growth', path: 'growth.total_asset_growth' },
          { name: '净资产增长率%', key: 'equity_growth', path: 'growth.equity_growth' },
          { name: '固定资产增长率%', key: 'fixed_asset_growth', path: 'growth.fixed_asset_growth' },
        ]
      },
      operational: {
        title: '运营效率指标',
        metrics: [
          { name: '总资产周转率', key: 'asset_turnover', path: 'operational_efficiency.total_asset_turnover', isCore: true },
          { name: '固定资产周转率', key: 'fixed_asset_turnover', path: 'operational_efficiency.fixed_asset_turnover' },
          { name: '流动资产周转率', key: 'current_asset_turnover', path: 'operational_efficiency.current_asset_turnover' },
          { name: '应收账款周转率', key: 'receivable_turnover', path: 'operational_efficiency.receivable_turnover', isCore: true },
          { name: '应收账款周转天数', key: 'receivable_days', path: 'operational_efficiency.receivable_days', isCore: true },
          { name: '存货周转率', key: 'inventory_turnover', path: 'operational_efficiency.inventory_turnover', isCore: true },
          { name: '存货周转天数', key: 'inventory_days', path: 'operational_efficiency.inventory_days' },
          { name: '营运资金周转率', key: 'working_capital_turnover', path: 'operational_efficiency.working_capital_turnover' },
        ]
      },
      solvency: {
        title: '偿债能力指标',
        metrics: [
          { name: '流动比率', key: 'current_ratio', path: 'solvency.current_ratio', isCore: true },
          { name: '速动比率', key: 'quick_ratio', path: 'solvency.quick_ratio', isCore: true },
          { name: '现金比率', key: 'cash_ratio', path: 'solvency.cash_ratio' },
          { name: '保守速动比率', key: 'conservative_quick_ratio', path: 'solvency.conservative_quick_ratio' },
          { name: '资产负债率%', key: 'debt_ratio', path: 'solvency.asset_liability_ratio', isCore: true },
          { name: '利息保障倍数', key: 'interest_coverage', path: 'solvency.interest_coverage' },
          { name: '现金到期债务比', key: 'cash_to_maturity_debt', path: 'solvency.cash_to_maturity_debt_ratio' },
          { name: '有形资产净值债务率%', key: 'tangible_asset_debt_ratio', path: 'solvency.tangible_asset_debt_ratio' },
        ]
      },
      expense: {
        title: '费用率指标',
        metrics: [
          { name: '销售费用率%', key: 'selling_expense_ratio', path: 'expense_ratios.selling_expense_ratio', isCore: true },
          { name: '管理费用率%', key: 'admin_expense_ratio', path: 'expense_ratios.admin_expense_ratio', isCore: true },
          { name: '财务费用率%', key: 'financial_expense_ratio', path: 'expense_ratios.financial_expense_ratio' },
          { name: '研发费用率%', key: 'rd_expense_ratio', path: 'expense_ratios.rd_expense_ratio', isCore: true },
          { name: '三费费用率%', key: 'three_expense_ratio', path: 'expense_ratios.three_expense_ratio' },
          { name: '四费费用率%', key: 'four_expense_ratio', path: 'expense_ratios.four_expense_ratio' },
          { name: '营业成本率%', key: 'cost_ratio', path: 'expense_ratios.cost_ratio' },
        ]
      },
      cashflow: {
        title: '现金流量指标',
        metrics: [
          { name: '经营现金流/净利润', key: 'cash_to_profit', path: 'cash_flow_quality.operating_cash_to_profit_ratio', isCore: true },
          { name: '净利含金量', key: 'profit_cash_content', path: 'cash_flow_quality.cash_to_profit_ratio', isCore: true },
          { name: '营收现金含量', key: 'revenue_cash_content', path: 'cash_flow_quality.cash_revenue_ratio' },
          { name: '全部资产现金回收率%', key: 'cash_recovery_rate', path: 'cash_flow_quality.cash_recovery_rate' },
          { name: '经营现金流/短期债务', key: 'cash_to_short_debt', path: 'cash_flow_quality.operating_cash_to_short_debt' },
          { name: '经营现金流/总债务', key: 'cash_to_total_debt', path: 'cash_flow_quality.operating_cash_to_total_debt' },
        ]
      }
    };

    // 数组安全检查
    if (!Array.isArray(financialMetrics) || financialMetrics.length === 0) {
      return (
        <Alert status="info">
          <AlertIcon />
          暂无财务指标数据
        </Alert>
      );
    }

    const maxColumns = Math.min(financialMetrics.length, 6);
    const displayData = financialMetrics.slice(0, maxColumns);
    const currentCategory = metricsCategories[selectedCategory];

    return (
      <VStack spacing={4} align="stretch">
        {/* 分类选择器 */}
        <HStack spacing={2} wrap="wrap">
          {Object.entries(metricsCategories).map(([key, category]) => (
            <Button
              key={key}
              size="sm"
              variant={selectedCategory === key ? 'solid' : 'outline'}
              colorScheme="blue"
              onClick={() => setSelectedCategory(key)}
            >
              {category.title}
            </Button>
          ))}
        </HStack>

        {/* 指标表格 */}
        <TableContainer>
          <Table size="sm" variant="simple">
            <Thead>
              <Tr>
                <Th position="sticky" left={0} bg={bgColor} zIndex={1} minW="200px">
                  {currentCategory.title}
                </Th>
                {displayData.map(item => (
                  <Th key={item.period} isNumeric fontSize="xs" minW="100px">
                    <VStack spacing={0}>
                      <Text>{formatUtils.getReportType(item.period)}</Text>
                      <Text fontSize="2xs" color="gray.500">
                        {item.period.substring(0, 10)}
                      </Text>
                    </VStack>
                  </Th>
                ))}
                <Th w="50px">趋势</Th>
              </Tr>
            </Thead>
            <Tbody>
              {currentCategory.metrics.map(metric => {
                const rowData = financialMetrics.map(item => {
                  const value = metric.path.split('.').reduce((obj, key) => obj?.[key], item);
                  return value;
                });

                return (
                  <Tr 
                    key={metric.key}
                    _hover={{ bg: hoverBg, cursor: 'pointer' }}
                    onClick={() => showMetricChart(metric.name, metric.key, financialMetrics, metric.path)}
                  >
                    <Td position="sticky" left={0} bg={bgColor} zIndex={1}>
                      <HStack spacing={2}>
                        <Text fontWeight="medium" fontSize="xs">
                          {metric.name}
                        </Text>
                        {metric.isCore && <Badge size="xs" colorScheme="purple">核心</Badge>}
                      </HStack>
                    </Td>
                    {displayData.map((item, idx) => {
                      const value = rowData[idx];
                      const { change, intensity } = calculateYoYChange(
                        value, 
                        item.period, 
                        financialMetrics, 
                        metric.path
                      );

                      // 判断指标性质
                      const isNegativeIndicator = metric.key.includes('days') || 
                                                 metric.key.includes('expense_ratio') ||
                                                 metric.key.includes('debt_ratio') ||
                                                 metric.key.includes('cost_ratio');
                      
                      // 对于负向指标，增加是坏事（绿色），减少是好事（红色）
                      const displayColor = isNegativeIndicator ? 
                        (change > 0 ? negativeColor : positiveColor) : 
                        (change > 0 ? positiveColor : negativeColor);

                      return (
                        <Td 
                          key={idx} 
                          isNumeric
                          bg={getCellBackground(change, intensity * 0.3)}
                          position="relative"
                        >
                          <Tooltip 
                            label={
                              <VStack align="start" spacing={0}>
                                <Text>{metric.name}: {value?.toFixed(2) || '-'}</Text>
                                <Text>同比: {change.toFixed(2)}%</Text>
                              </VStack>
                            }
                            placement="top"
                          >
                            <Text 
                              fontSize="xs"
                              color={
                                selectedCategory === 'growth' ? 
                                  (value > 0 ? positiveColor : value < 0 ? negativeColor : 'gray.500') :
                                  'inherit'
                              }
                            >
                              {value?.toFixed(2) || '-'}
                            </Text>
                          </Tooltip>
                          {Math.abs(change) > 20 && Math.abs(value) > 0.01 && (
                            <Text 
                              position="absolute" 
                              top="-1" 
                              right="0"
                              fontSize="2xs"
                              color={displayColor}
                              fontWeight="bold"
                            >
                              {change > 0 ? '↑' : '↓'}
                            </Text>
                          )}
                        </Td>
                      );
                    })}
                    <Td>
                      <IconButton
                        size="xs"
                        icon={<ViewIcon />}
                        variant="ghost"
                        colorScheme="blue"
                        onClick={(e) => {
                          e.stopPropagation();
                          showMetricChart(metric.name, metric.key, financialMetrics, metric.path);
                        }}
                      />
                    </Td>
                  </Tr>
                );
              })}
            </Tbody>
          </Table>
        </TableContainer>

        {/* 关键指标快速对比 */}
        <Card>
          <CardHeader>
            <Heading size="sm">关键指标速览</Heading>
          </CardHeader>
          <CardBody>
            <SimpleGrid columns={{ base: 2, md: 4, lg: 6 }} spacing={4}>
              {financialMetrics[0] && [
                { label: 'ROE', value: financialMetrics[0].profitability?.roe, format: 'percent' },
                { label: '毛利率', value: financialMetrics[0].profitability?.gross_margin, format: 'percent' },
                { label: '净利率', value: financialMetrics[0].profitability?.net_profit_margin, format: 'percent' },
                { label: '流动比率', value: financialMetrics[0].solvency?.current_ratio, format: 'decimal' },
                { label: '资产负债率', value: financialMetrics[0].solvency?.asset_liability_ratio, format: 'percent' },
                { label: '研发费用率', value: financialMetrics[0].expense_ratios?.rd_expense_ratio, format: 'percent' },
              ].map((item, idx) => (
                <Box key={idx} p={3} borderRadius="md" bg={useColorModeValue('gray.50', 'gray.700')}>
                  <Text fontSize="xs" color="gray.500">{item.label}</Text>
                  <Text fontSize="lg" fontWeight="bold">
                    {item.format === 'percent' ? 
                      formatUtils.formatPercent(item.value) : 
                      item.value?.toFixed(2) || '-'}
                  </Text>
                </Box>
              ))}
            </SimpleGrid>
          </CardBody>
        </Card>
      </VStack>
    );
  };

  // 主营业务分析组件 - 修复bug，支持product和industry两种分类
  const MainBusinessAnalysis = () => {
    // 优先使用product_classification，如果为空则使用industry_classification
    const hasProductData = mainBusiness?.product_classification?.length > 0;
    const hasIndustryData = mainBusiness?.industry_classification?.length > 0;
    
    if (!hasProductData && !hasIndustryData) {
      return (
        <Alert status="info">
          <AlertIcon />
          暂无主营业务数据
        </Alert>
      );
    }

    // 选择数据源
    const dataSource = hasProductData ? 'product' : 'industry';
    const latestPeriod = hasProductData ? 
      mainBusiness.product_classification[0] : 
      mainBusiness.industry_classification[0];
    
    const businessItems = hasProductData ? latestPeriod.products : latestPeriod.industries;
    
    // 过滤掉"合计"项，准备饼图数据
    const pieData = businessItems
      .filter(item => item.content !== '合计')
      .map(item => ({
        name: item.content,
        value: item.revenue || 0
      }));

    const pieOption = {
      title: {
        text: `主营业务构成 - ${latestPeriod.report_type}`,
        subtext: dataSource === 'industry' ? '按行业分类' : '按产品分类',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: (params) => {
          return `${params.name}<br/>营收: ${formatUtils.formatLargeNumber(params.value)}<br/>占比: ${params.percent}%`;
        }
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: 'center'
      },
      series: [{
        type: 'pie',
        radius: '50%',
        data: pieData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    // 历史对比数据
    const historicalData = hasProductData ? 
      mainBusiness.product_classification : 
      mainBusiness.industry_classification;

    return (
      <VStack spacing={4} align="stretch">
        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
          <GridItem>
            <Card>
              <CardBody>
                <ReactECharts option={pieOption} style={{ height: '300px' }} />
              </CardBody>
            </Card>
          </GridItem>
          <GridItem>
            <Card>
              <CardHeader>
                <Heading size="sm">业务明细 - {latestPeriod.report_type}</Heading>
              </CardHeader>
              <CardBody>
                <TableContainer>
                  <Table size="sm">
                    <Thead>
                      <Tr>
                        <Th>业务</Th>
                        <Th isNumeric>营收</Th>
                        <Th isNumeric>毛利率(%)</Th>
                        <Th isNumeric>利润</Th>
                      </Tr>
                    </Thead>
                    <Tbody>
                      {businessItems
                        .filter(item => item.content !== '合计')
                        .map((item, idx) => (
                        <Tr key={idx}>
                          <Td>{item.content}</Td>
                          <Td isNumeric>{formatUtils.formatLargeNumber(item.revenue)}</Td>
                          <Td isNumeric>{formatUtils.formatPercent(item.gross_margin || item.profit_margin)}</Td>
                          <Td isNumeric>{formatUtils.formatLargeNumber(item.profit)}</Td>
                        </Tr>
                      ))}
                    </Tbody>
                  </Table>
                </TableContainer>
              </CardBody>
            </Card>
          </GridItem>
        </Grid>
        
        {/* 历史对比 */}
        {historicalData.length > 1 && (
          <Card>
            <CardHeader>
              <Heading size="sm">主营业务历史对比</Heading>
            </CardHeader>
            <CardBody>
              <TableContainer>
                <Table size="sm">
                  <Thead>
                    <Tr>
                      <Th>业务/期间</Th>
                      {historicalData.slice(0, 3).map(period => (
                        <Th key={period.period} isNumeric>{period.report_type}</Th>
                      ))}
                    </Tr>
                  </Thead>
                  <Tbody>
                    {businessItems
                      .filter(item => item.content !== '合计')
                      .map((item, idx) => (
                      <Tr key={idx}>
                        <Td>{item.content}</Td>
                        {historicalData.slice(0, 3).map(period => {
                          const periodItems = hasProductData ? period.products : period.industries;
                          const matchItem = periodItems.find(p => p.content === item.content);
                          return (
                            <Td key={period.period} isNumeric>
                              {matchItem ? formatUtils.formatLargeNumber(matchItem.revenue) : '-'}
                            </Td>
                          );
                        })}
                      </Tr>
                    ))}
                  </Tbody>
                </Table>
              </TableContainer>
            </CardBody>
          </Card>
        )}
      </VStack>
    );
  };

  // 行业排名组件
  const IndustryRankingView = () => {
    if (!industryRank || industryRank.length === 0) {
      return (
        <Alert status="info">
          <AlertIcon />
          暂无行业排名数据
        </Alert>
      );
    }

    const latestRanking = industryRank[0];
    
    const rankingMetrics = [
      { name: 'EPS', key: 'eps' },
      { name: '每股净资产', key: 'bvps' },
      { name: 'ROE', key: 'roe' },
      { name: '营收增长率', key: 'revenue_growth' },
      { name: '利润增长率', key: 'profit_growth' },
      { name: '营业利润率', key: 'operating_margin' },
      { name: '资产负债率', key: 'debt_ratio' },
      { name: '应收账款周转率', key: 'receivable_turnover' }
    ];

    return (
      <VStack spacing={4} align="stretch">
        {Array.isArray(industryRank) && industryRank.length > 0 ? (
          industryRank.map((periodData, periodIdx) => (
            <Card key={periodIdx}>
            <CardHeader>
              <HStack justify="space-between">
                <Heading size="sm">{periodData.report_type} 行业排名</Heading>
                <Badge colorScheme="purple">{periodData.period}</Badge>
              </HStack>
            </CardHeader>
            <CardBody>
              {periodData.rankings?.map((ranking, idx) => (
                <Box key={idx} mb={6}>
                  <Text fontWeight="bold" mb={3}>
                    {ranking.industry_name} ({ranking.level_description})
                  </Text>
                  <SimpleGrid columns={{ base: 1, md: 2, lg: 4 }} spacing={3}>
                    {rankingMetrics.map(metric => {
                      const metricData = ranking.metrics?.[metric.key];
                      if (!metricData) return null;
                      
                      const isGood = metricData.rank && metricData.rank <= 10;
                      const isBad = metricData.rank && metricData.rank > 30;
                      
                      return (
                        <Box 
                          key={metric.key}
                          p={3}
                          borderRadius="md"
                          bg={bgColor}
                          borderWidth="1px"
                          borderColor={borderColor}
                        >
                          <Text fontSize="xs" color="gray.500">{metric.name}</Text>
                          <HStack mt={1}>
                            <Text fontWeight="bold">
                              {metric.key.includes('growth') || metric.key.includes('margin') || metric.key === 'roe' ? 
                                formatUtils.formatPercent(metricData.value) : 
                                metricData.value?.toFixed(2) || '-'}
                            </Text>
                            {metricData.rank && (
                              <Badge 
                                size="sm"
                                colorScheme={isGood ? 'red' : isBad ? 'green' : 'gray'}
                              >
                                #{metricData.rank}
                              </Badge>
                            )}
                          </HStack>
                          <Text fontSize="xs" color="gray.500" mt={1}>
                            行业均值: {metric.key.includes('growth') || metric.key.includes('margin') || metric.key === 'roe' ? 
                              formatUtils.formatPercent(metricData.industry_avg) : 
                              metricData.industry_avg?.toFixed(2) || '-'}
                          </Text>
                        </Box>
                      );
                    })}
                  </SimpleGrid>
                </Box>
              ))}
            </CardBody>
          </Card>
          ))
        ) : (
          <Card>
            <CardBody>
              <Text textAlign="center" color="gray.500" py={8}>
                暂无行业排名数据
              </Text>
            </CardBody>
          </Card>
        )}
      </VStack>
    );
  };

  // 股票对比组件
  const StockComparison = ({ currentStock }) => {
    const [compareStock, setCompareStock] = useState('');
    const [compareData, setCompareData] = useState(null);
    const [compareLoading, setCompareLoading] = useState(false);
    
    const loadCompareData = async () => {
      if (!compareStock || compareStock.length !== 6) {
        logger.warn('FinancialPanorama', 'loadCompareData', '无效的对比股票代码', { compareStock });
        toast({
          title: '请输入有效的6位股票代码',
          status: 'warning',
          duration: 3000,
        });
        return;
      }

      logger.debug('FinancialPanorama', '开始加载对比数据', { currentStock, compareStock });
      setCompareLoading(true);
      try {
        const [stockInfoRes, metricsRes, comparisonRes] = await Promise.all([
          financialService.getStockInfo(compareStock),
          financialService.getFinancialMetrics(compareStock, 4),
          financialService.getPeriodComparison(compareStock, 4)
        ]);

        setCompareData({
          stockInfo: stockInfoRes.data,
          metrics: metricsRes.data,
          comparison: comparisonRes.data
        });

        // ❌ 移除对比数据加载成功toast
        logger.info('FinancialPanorama', '对比数据加载成功', { currentStock, compareStock });
      } catch (error) {
        logger.error('FinancialPanorama', 'loadCompareData', error, { currentStock, compareStock });

        // ❌ 移除对比数据加载失败toast
        // toast({ title: '加载对比数据失败', description: error.message, status: 'error', duration: 3000 });
      } finally {
        setCompareLoading(false);
      }
    };
    
    const compareMetrics = [
      { label: '营业收入', key: 'revenue', path: 'financial_summary.revenue' },
      { label: '净利润', key: 'net_profit', path: 'financial_summary.net_profit' },
      { label: 'ROE', key: 'roe', path: 'key_metrics.roe', format: 'percent' },
      { label: 'ROA', key: 'roa', path: 'key_metrics.roa', format: 'percent' },
      { label: '毛利率', key: 'gross_margin', path: 'key_metrics.gross_margin', format: 'percent' },
      { label: '净利率', key: 'net_margin', path: 'key_metrics.net_margin', format: 'percent' },
      { label: '营收增长率', key: 'revenue_growth', path: 'growth_rates.revenue_growth', format: 'percent' },
      { label: '利润增长率', key: 'profit_growth', path: 'growth_rates.profit_growth', format: 'percent' },
      { label: '资产总额', key: 'total_assets', path: 'financial_summary.total_assets' },
      { label: '负债总额', key: 'total_liabilities', path: 'financial_summary.total_liabilities' },
    ];
    
    return (
      <VStack spacing={4} align="stretch">
        <Card>
          <CardBody>
            <HStack>
              <Input
                placeholder="输入对比股票代码"
                value={compareStock}
                onChange={(e) => setCompareStock(e.target.value)}
                maxLength={6}
              />
              <Button
                colorScheme="blue"
                onClick={loadCompareData}
                isLoading={compareLoading}
              >
                添加对比
              </Button>
            </HStack>
          </CardBody>
        </Card>
        
        {compareData && (
          <Card>
            <CardHeader>
              <Heading size="md">
                {stockInfo?.stock_name} ({currentStock}) VS {compareData.stockInfo?.stock_name} ({compareStock})
              </Heading>
            </CardHeader>
            <CardBody>
              <TableContainer>
                <Table size="sm">
                  <Thead>
                    <Tr>
                      <Th>指标</Th>
                      <Th isNumeric>{stockInfo?.stock_name}</Th>
                      <Th isNumeric>{compareData.stockInfo?.stock_name}</Th>
                      <Th isNumeric>差异</Th>
                    </Tr>
                  </Thead>
                  <Tbody>
                    {compareMetrics.map(metric => {
                      const value1 = metric.path.split('.').reduce((obj, key) => obj?.[key], stockInfo);
                      const value2 = metric.path.split('.').reduce((obj, key) => obj?.[key], compareData.stockInfo);
                      
                      let diff = null;
                      let diffColor = 'gray.500';
                      
                      if (value1 && value2) {
                        if (metric.format === 'percent') {
                          diff = value1 - value2;
                          diffColor = diff > 0 ? positiveColor : negativeColor;
                        } else {
                          diff = ((value1 - value2) / value2) * 100;
                          diffColor = diff > 0 ? positiveColor : negativeColor;
                        }
                      }
                      
                      return (
                        <Tr key={metric.key}>
                          <Td>{metric.label}</Td>
                          <Td isNumeric>
                            {metric.format === 'percent' ? 
                              formatUtils.formatPercent(value1) : 
                              formatUtils.formatLargeNumber(value1)}
                          </Td>
                          <Td isNumeric>
                            {metric.format === 'percent' ? 
                              formatUtils.formatPercent(value2) : 
                              formatUtils.formatLargeNumber(value2)}
                          </Td>
                          <Td isNumeric color={diffColor}>
                            {diff !== null ? (
                              <HStack spacing={1}>
                                {diff > 0 && <ArrowUpIcon boxSize={3} />}
                                {diff < 0 && <ArrowDownIcon boxSize={3} />}
                                <Text>
                                  {metric.format === 'percent' ? 
                                    `${Math.abs(diff).toFixed(2)}pp` : 
                                    `${Math.abs(diff).toFixed(2)}%`}
                                </Text>
                              </HStack>
                            ) : '-'}
                          </Td>
                        </Tr>
                      );
                    })}
                  </Tbody>
                </Table>
              </TableContainer>
              
              {/* 对比图表 */}
              <Grid templateColumns="repeat(2, 1fr)" gap={4} mt={6}>
                <GridItem>
                  <Card>
                    <CardHeader>
                      <Heading size="sm">盈利能力对比</Heading>
                    </CardHeader>
                    <CardBody>
                      <ReactECharts
                        option={{
                          tooltip: { trigger: 'axis' },
                          legend: { data: [stockInfo?.stock_name, compareData.stockInfo?.stock_name] },
                          xAxis: {
                            type: 'category',
                            data: ['ROE', 'ROA', '毛利率', '净利率']
                          },
                          yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } },
                          series: [
                            {
                              name: stockInfo?.stock_name,
                              type: 'bar',
                              data: [
                                stockInfo?.key_metrics?.roe,
                                stockInfo?.key_metrics?.roa,
                                stockInfo?.key_metrics?.gross_margin,
                                stockInfo?.key_metrics?.net_margin
                              ]
                            },
                            {
                              name: compareData.stockInfo?.stock_name,
                              type: 'bar',
                              data: [
                                compareData.stockInfo?.key_metrics?.roe,
                                compareData.stockInfo?.key_metrics?.roa,
                                compareData.stockInfo?.key_metrics?.gross_margin,
                                compareData.stockInfo?.key_metrics?.net_margin
                              ]
                            }
                          ]
                        }}
                        style={{ height: '300px' }}
                      />
                    </CardBody>
                  </Card>
                </GridItem>
                
                <GridItem>
                  <Card>
                    <CardHeader>
                      <Heading size="sm">成长能力对比</Heading>
                    </CardHeader>
                    <CardBody>
                      <ReactECharts
                        option={{
                          tooltip: { trigger: 'axis' },
                          legend: { data: [stockInfo?.stock_name, compareData.stockInfo?.stock_name] },
                          xAxis: {
                            type: 'category',
                            data: ['营收增长', '利润增长', '资产增长', '股东权益增长']
                          },
                          yAxis: { type: 'value', axisLabel: { formatter: '{value}%' } },
                          series: [
                            {
                              name: stockInfo?.stock_name,
                              type: 'bar',
                              data: [
                                stockInfo?.growth_rates?.revenue_growth,
                                stockInfo?.growth_rates?.profit_growth,
                                stockInfo?.growth_rates?.asset_growth,
                                stockInfo?.growth_rates?.equity_growth
                              ]
                            },
                            {
                              name: compareData.stockInfo?.stock_name,
                              type: 'bar',
                              data: [
                                compareData.stockInfo?.growth_rates?.revenue_growth,
                                compareData.stockInfo?.growth_rates?.profit_growth,
                                compareData.stockInfo?.growth_rates?.asset_growth,
                                compareData.stockInfo?.growth_rates?.equity_growth
                              ]
                            }
                          ]
                        }}
                        style={{ height: '300px' }}
                      />
                    </CardBody>
                  </Card>
                </GridItem>
              </Grid>
            </CardBody>
          </Card>
        )}
      </VStack>
    );
  };

  // 综合对比分析
  const ComparisonAnalysis = () => {
    if (!Array.isArray(comparison) || comparison.length === 0) return null;

    const revenueData = comparison.map(item => ({
      period: formatUtils.getReportType(item.period),
      value: item.performance.revenue / 100000000 // 转换为亿
    })).reverse();

    const profitData = comparison.map(item => ({
      period: formatUtils.getReportType(item.period),
      value: item.performance.net_profit / 100000000 // 转换为亿
    })).reverse();

    const combinedOption = {
      title: {
        text: '营收与利润趋势',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: ['营业收入', '净利润'],
        bottom: 0
      },
      xAxis: {
        type: 'category',
        data: revenueData.map(d => d.period)
      },
      yAxis: [
        {
          type: 'value',
          name: '营收(亿)',
          position: 'left'
        },
        {
          type: 'value',
          name: '利润(亿)',
          position: 'right'
        }
      ],
      series: [
        {
          name: '营业收入',
          type: 'bar',
          data: revenueData.map(d => d.value?.toFixed(2)),
          itemStyle: { 
            color: (params) => {
              const idx = params.dataIndex;
              if (idx === 0) return '#3182CE';
              const prevValue = revenueData[idx - 1].value;
              const currValue = params.value;
              // 中国市场颜色
              return currValue >= prevValue ? '#EF4444' : '#10B981';
            }
          }
        },
        {
          name: '净利润',
          type: 'line',
          yAxisIndex: 1,
          data: profitData.map(d => d.value?.toFixed(2)),
          smooth: true,
          itemStyle: { color: '#F59E0B' },
          lineStyle: { width: 2 }
        }
      ]
    };

    return (
      <Card>
        <CardBody>
          <ReactECharts option={combinedOption} style={{ height: '400px' }} />
        </CardBody>
      </Card>
    );
  };

  // 页面头部信息
  const StockInfoHeader = () => {
    if (!stockInfo) return null;

    return (
      <Card mb={4}>
        <CardBody>
          <Grid templateColumns="repeat(6, 1fr)" gap={4}>
            <GridItem colSpan={{ base: 6, md: 2 }}>
              <VStack align="start">
                <Text fontSize="xs" color="gray.500">股票名称</Text>
                <HStack>
                  <Heading size="md">{stockInfo.stock_name}</Heading>
                  <Badge>{stockInfo.stock_code}</Badge>
                </HStack>
              </VStack>
            </GridItem>
            <GridItem>
              <Stat>
                <StatLabel>最新EPS</StatLabel>
                <StatNumber>{stockInfo.key_metrics?.eps?.toFixed(3) || '-'}</StatNumber>
              </Stat>
            </GridItem>
            <GridItem>
              <Stat>
                <StatLabel>ROE</StatLabel>
                <StatNumber>{formatUtils.formatPercent(stockInfo.key_metrics?.roe)}</StatNumber>
              </Stat>
            </GridItem>
            <GridItem>
              <Stat>
                <StatLabel>营收增长</StatLabel>
                <StatNumber color={stockInfo.growth_rates?.revenue_growth > 0 ? positiveColor : stockInfo.growth_rates?.revenue_growth < 0 ? negativeColor : 'gray.500'}>
                  {formatUtils.formatPercent(stockInfo.growth_rates?.revenue_growth)}
                </StatNumber>
              </Stat>
            </GridItem>
            <GridItem>
              <Stat>
                <StatLabel>利润增长</StatLabel>
                <StatNumber color={stockInfo.growth_rates?.profit_growth > 0 ? positiveColor : stockInfo.growth_rates?.profit_growth < 0 ? negativeColor : 'gray.500'}>
                  {formatUtils.formatPercent(stockInfo.growth_rates?.profit_growth)}
                </StatNumber>
              </Stat>
            </GridItem>
          </Grid>
          {stockInfo.latest_forecast && (
            <Alert status="info" mt={4}>
              <AlertIcon />
              <Box>
                <Text fontWeight="bold">{stockInfo.latest_forecast.forecast_type}</Text>
                <Text fontSize="sm">{stockInfo.latest_forecast.content}</Text>
              </Box>
            </Alert>
          )}
        </CardBody>
      </Card>
    );
  };

  return (
    <Container maxW="container.xl" py={5}>
      <VStack spacing={6} align="stretch">
        {/* 时间选择器 */}
        <Card>
          <CardBody>
            <HStack justify="space-between">
              <HStack>
                <Text fontSize="sm" color="gray.600">显示期数：</Text>
                <Select 
                  value={selectedPeriods} 
                  onChange={(e) => setSelectedPeriods(Number(e.target.value))}
                  w="150px"
                  size="sm"
                >
                  <option value={4}>最近4期</option>
                  <option value={8}>最近8期</option>
                  <option value={12}>最近12期</option>
                  <option value={16}>最近16期</option>
                </Select>
              </HStack>
              <IconButton
                icon={<RepeatIcon />}
                onClick={loadFinancialData}
                isLoading={loading}
                variant="outline"
                size="sm"
                aria-label="刷新数据"
              />
            </HStack>
          </CardBody>
        </Card>

        {/* 股票信息头部 */}
        {loading ? (
          <Skeleton height="150px" />
        ) : (
          <StockInfoHeader />
        )}

        {/* 主要内容区域 */}
        {!loading && stockInfo && (
          <Tabs 
            index={activeTab} 
            onChange={setActiveTab}
            variant="enclosed"
            colorScheme="blue"
          >
            <TabList>
              <Tab>财务概览</Tab>
              <Tab>资产负债表</Tab>
              <Tab>利润表</Tab>
              <Tab>现金流量表</Tab>
              <Tab>财务指标</Tab>
              <Tab>主营业务</Tab>
              <Tab>行业排名</Tab>
              <Tab>业绩预告</Tab>
              <Tab>股票对比</Tab>
            </TabList>

            <TabPanels>
              {/* 财务概览 */}
              <TabPanel>
                <VStack spacing={4} align="stretch">
                  <ComparisonAnalysis />
                  <FinancialMetricsTable />
                </VStack>
              </TabPanel>

              {/* 资产负债表 */}
              <TabPanel>
                <Card>
                  <CardHeader>
                    <VStack align="stretch" spacing={2}>
                      <HStack justify="space-between">
                        <Heading size="md">资产负债表</Heading>
                        <HStack spacing={2}>
                          <Badge colorScheme="blue">显示最近{Math.min(balanceSheet.length, 8)}期</Badge>
                          <Text fontSize="sm" color="gray.500">
                            红涨绿跌 | 同比变化
                          </Text>
                        </HStack>
                      </HStack>
                      <Text fontSize="xs" color="gray.500">
                        提示：表格可横向滚动查看更多数据，点击行查看历史趋势
                      </Text>
                    </VStack>
                  </CardHeader>
                  <CardBody>
                    <BalanceSheetTable />
                  </CardBody>
                </Card>
              </TabPanel>

              {/* 利润表 */}
              <TabPanel>
                <Card>
                  <CardHeader>
                    <VStack align="stretch" spacing={2}>
                      <HStack justify="space-between">
                        <Heading size="md">利润表</Heading>
                        <HStack spacing={2}>
                          <Badge colorScheme="blue">显示最近{Math.min(incomeStatement.length, 8)}期</Badge>
                          <Text fontSize="sm" color="gray.500">
                            红涨绿跌 | 同比变化
                          </Text>
                        </HStack>
                      </HStack>
                      <Text fontSize="xs" color="gray.500">
                        提示：Q1、中报、Q3、年报数据为累计值，同比显示与去年同期对比
                      </Text>
                    </VStack>
                  </CardHeader>
                  <CardBody>
                    <IncomeStatementTable />
                  </CardBody>
                </Card>
              </TabPanel>

              {/* 现金流量表 */}
              <TabPanel>
                <Card>
                  <CardHeader>
                    <VStack align="stretch" spacing={2}>
                      <HStack justify="space-between">
                        <Heading size="md">现金流量表</Heading>
                        <HStack spacing={2}>
                          <Badge colorScheme="blue">显示最近{Math.min(cashflow.length, 8)}期</Badge>
                          <Text fontSize="sm" color="gray.500">
                            红涨绿跌 | 同比变化
                          </Text>
                        </HStack>
                      </HStack>
                      <Text fontSize="xs" color="gray.500">
                        提示：现金流数据为累计值，正值红色表示现金流入，负值绿色表示现金流出
                      </Text>
                    </VStack>
                  </CardHeader>
                  <CardBody>
                    <CashflowTable />
                  </CardBody>
                </Card>
              </TabPanel>

              {/* 财务指标 */}
              <TabPanel>
                <FinancialMetricsTable />
              </TabPanel>

              {/* 主营业务 */}
              <TabPanel>
                <MainBusinessAnalysis />
              </TabPanel>

              {/* 行业排名 */}
              <TabPanel>
                <IndustryRankingView />
              </TabPanel>

              {/* 业绩预告 */}
              <TabPanel>
                {forecast && (
                  <VStack spacing={4} align="stretch">
                    {forecast.forecasts?.map((item, idx) => (
                      <Card key={idx}>
                        <CardBody>
                          <HStack justify="space-between" mb={2}>
                            <Badge colorScheme="blue">{item.forecast_type}</Badge>
                            <Text fontSize="sm" color="gray.500">
                              报告期: {item.report_date}
                            </Text>
                          </HStack>
                          <Text mb={2}>{item.content}</Text>
                          {item.reason && (
                            <Text fontSize="sm" color="gray.600">{item.reason}</Text>
                          )}
                          {item.change_range?.lower && (
                            <HStack mt={2}>
                              <Text fontSize="sm">预计变动范围:</Text>
                              <Badge colorScheme="green">
                                {item.change_range.lower}% ~ {item.change_range.upper}%
                              </Badge>
                            </HStack>
                          )}
                        </CardBody>
                      </Card>
                    ))}
                  </VStack>
                )}
              </TabPanel>

              {/* 股票对比 */}
              <TabPanel>
                <StockComparison currentStock={stockCode} />
              </TabPanel>
            </TabPanels>
          </Tabs>
        )}

        {/* 错误提示 */}
        {error && (
          <Alert status="error">
            <AlertIcon />
            {error}
          </Alert>
        )}

        {/* 弹出模态框 */}
        <Modal isOpen={isOpen} onClose={onClose} size="xl">
          <ModalOverlay />
          <ModalContent maxW="900px">
            <ModalHeader>指标详情</ModalHeader>
            <ModalCloseButton />
            <ModalBody pb={6}>
              {modalContent}
            </ModalBody>
          </ModalContent>
        </Modal>
      </VStack>
    </Container>
  );
};

export default FinancialPanorama;