import React, { useState } from "react";
import {
  Box,
  VStack,
  HStack,
  Text,
  Badge,
  Card,
  CardBody,
  CardHeader,
  Heading,
  SimpleGrid,
  Divider,
  Center,
  Alert,
  AlertIcon,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Button,
  Tag,
  TagLabel,
  Icon,
  Tooltip,
  Grid,
  GridItem,
  useToast,
  IconButton,
  Progress,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
  AccordionIcon,
  Fade,
  ScaleFade,
  useDisclosure,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Circle,
  Spinner,
} from "@chakra-ui/react";

import {
  FaBuilding,
  FaChartLine,
  FaLightbulb,
  FaRocket,
  FaNetworkWired,
  FaCog,
  FaTrophy,
  FaShieldAlt,
  FaChartPie,
  FaHistory,
  FaCheckCircle,
  FaExclamationCircle,
  FaArrowUp,
  FaArrowDown,
  FaArrowRight,
  FaArrowLeft,
  FaStar,
  FaUserTie,
  FaIndustry,
  FaDollarSign,
  FaBalanceScale,
  FaFlask,
  FaHandshake,
  FaUsers,
  FaCalendarAlt,
  FaExpandAlt,
  FaCompressAlt,
} from "react-icons/fa";

import { ExternalLinkIcon } from "@chakra-ui/icons";
import ReactECharts from "echarts-for-react";
import { logger } from "@utils/logger";
import { getApiBase } from "@utils/apiConfig";

const API_BASE_URL = getApiBase();

// 格式化工具
const formatUtils = {
  formatCurrency: (value) => {
    if (!value && value !== 0) return "-";
    const absValue = Math.abs(value);
    if (absValue >= 100000000) {
      return (value / 100000000).toFixed(2) + "亿元";
    } else if (absValue >= 10000) {
      return (value / 10000).toFixed(2) + "万元";
    }
    return value.toFixed(2) + "元";
  },
  formatBusinessRevenue: (value, unit) => {
    if (!value && value !== 0) return "-";
    if (unit) {
      if (unit === "元") {
        const absValue = Math.abs(value);
        if (absValue >= 100000000) {
          return (value / 100000000).toFixed(2) + "亿元";
        } else if (absValue >= 10000) {
          return (value / 10000).toFixed(2) + "万元";
        }
        return value.toFixed(0) + "元";
      } else if (unit === "万元") {
        const absValue = Math.abs(value);
        if (absValue >= 10000) {
          return (value / 10000).toFixed(2) + "亿元";
        }
        return value.toFixed(2) + "万元";
      } else if (unit === "亿元") {
        return value.toFixed(2) + "亿元";
      } else {
        return value.toFixed(2) + unit;
      }
    }
    const absValue = Math.abs(value);
    if (absValue >= 100000000) {
      return (value / 100000000).toFixed(2) + "亿元";
    } else if (absValue >= 10000) {
      return (value / 10000).toFixed(2) + "万元";
    }
    return value.toFixed(2) + "元";
  },
  formatPercentage: (value) => {
    if (!value && value !== 0) return "-";
    return value.toFixed(2) + "%";
  },
};

// 免责声明组件
const DisclaimerBox = () => {
  return (
    <Alert status="warning" variant="left-accent" mb={4}>
      <AlertIcon />
      <Box fontSize="xs" lineHeight="1.4">
        <Text fontWeight="medium" mb={1}>
          免责声明
        </Text>
        <Text>
          本内容由AI模型基于新闻、公告、研报等公开信息自动分析和生成，未经许可严禁转载。
          所有内容仅供参考，不构成任何投资建议，请投资者注意风险，独立审慎决策。
        </Text>
      </Box>
    </Alert>
  );
};

// 评分进度条组件
const ScoreBar = ({ label, score, icon }) => {
  const percentage = (score / 100) * 100;
  const getColorScheme = () => {
    if (percentage >= 80) return "purple";
    if (percentage >= 60) return "blue";
    if (percentage >= 40) return "yellow";
    return "orange";
  };

  return (
    <Box>
      <HStack justify="space-between" mb={1}>
        <HStack>
          {icon && (
            <Icon as={icon} boxSize={4} color={`${getColorScheme()}.500`} />
          )}
          <Text fontSize="sm" fontWeight="medium">
            {label}
          </Text>
        </HStack>
        <Badge colorScheme={getColorScheme()}>{score || 0}</Badge>
      </HStack>
      <Progress
        value={percentage}
        size="sm"
        colorScheme={getColorScheme()}
        borderRadius="full"
        hasStripe
        isAnimated
      />
    </Box>
  );
};

// 业务结构树形图组件
const BusinessTreeItem = ({ business, depth = 0 }) => {
  const bgColor = "gray.50";

  return (
    <Box
      ml={depth * 6}
      p={3}
      bg={bgColor}
      borderLeft={depth > 0 ? `4px solid` : "none"}
      borderLeftColor="blue.400"
      borderRadius="md"
      mb={2}
      _hover={{ shadow: "md" }}
      transition="all 0.2s"
    >
      <HStack justify="space-between">
        <VStack align="start" spacing={1}>
          <HStack>
            <Text fontWeight="bold" fontSize={depth === 0 ? "md" : "sm"}>
              {business.business_name}
            </Text>
            {business.financial_metrics?.revenue_ratio > 30 && (
              <Badge colorScheme="purple" size="sm">
                核心业务
              </Badge>
            )}
          </HStack>
          <HStack spacing={4} flexWrap="wrap">
            <Tag size="sm" variant="subtle">
              营收占比:{" "}
              {formatUtils.formatPercentage(
                business.financial_metrics?.revenue_ratio
              )}
            </Tag>
            <Tag size="sm" variant="subtle">
              毛利率:{" "}
              {formatUtils.formatPercentage(
                business.financial_metrics?.gross_margin
              )}
            </Tag>
            {business.growth_metrics?.revenue_growth && (
              <Tag
                size="sm"
                colorScheme={
                  business.growth_metrics.revenue_growth > 0 ? "red" : "green"
                }
              >
                <TagLabel>
                  增长: {business.growth_metrics.revenue_growth > 0 ? "+" : ""}
                  {formatUtils.formatPercentage(
                    business.growth_metrics.revenue_growth
                  )}
                </TagLabel>
              </Tag>
            )}
          </HStack>
        </VStack>
        <VStack align="end" spacing={0}>
          <Text fontSize="lg" fontWeight="bold" color="blue.500">
            {(() => {
              const revenue =
                business.revenue || business.financial_metrics?.revenue;
              const unit = business.revenue_unit;
              if (revenue || revenue === 0) {
                return formatUtils.formatBusinessRevenue(revenue, unit);
              }
              return "-";
            })()}
          </Text>
          <Text fontSize="xs" color="gray.500">
            营业收入
          </Text>
        </VStack>
      </HStack>
    </Box>
  );
};

// 产业链节点卡片
const ValueChainNodeCard = ({ node, isCompany = false, level = 0 }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [relatedCompanies, setRelatedCompanies] = useState([]);
  const [loadingRelated, setLoadingRelated] = useState(false);
  const toast = useToast();

  const getColorScheme = () => {
    if (isCompany) return "blue";
    if (level < 0) return "orange";
    if (level > 0) return "green";
    return "gray";
  };

  const colorScheme = getColorScheme();
  const bgColor = `${colorScheme}.50`;
  const borderColor = `${colorScheme}.200`;

  const getNodeTypeIcon = (type) => {
    const icons = {
      company: FaBuilding,
      supplier: FaHandshake,
      customer: FaUserTie,
      product: FaIndustry,
      service: FaCog,
      channel: FaNetworkWired,
      raw_material: FaFlask,
    };
    return icons[type] || FaBuilding;
  };

  const getImportanceColor = (score) => {
    if (score >= 80) return "red";
    if (score >= 60) return "orange";
    if (score >= 40) return "yellow";
    return "green";
  };

  const fetchRelatedCompanies = async () => {
    setLoadingRelated(true);
    try {
      const response = await fetch(
        `${API_BASE_URL}/api/company/value-chain/related-companies?node_name=${encodeURIComponent(
          node.node_name
        )}`
      );
      const data = await response.json();
      if (data.success) {
        setRelatedCompanies(data.data || []);
      } else {
        toast({
          title: "获取相关公司失败",
          description: data.message,
          status: "error",
          duration: 3000,
          isClosable: true,
        });
      }
    } catch (error) {
      logger.error("ValueChainNodeCard", "fetchRelatedCompanies", error, {
        node_name: node.node_name,
      });
      toast({
        title: "获取相关公司失败",
        description: error.message,
        status: "error",
        duration: 3000,
        isClosable: true,
      });
    } finally {
      setLoadingRelated(false);
    }
  };

  const handleCardClick = () => {
    onOpen();
    if (relatedCompanies.length === 0) {
      fetchRelatedCompanies();
    }
  };

  return (
    <>
      <ScaleFade in={true} initialScale={0.9}>
        <Card
          bg={bgColor}
          borderColor={borderColor}
          borderWidth={isCompany ? 3 : 1}
          shadow={isCompany ? "lg" : "sm"}
          cursor="pointer"
          onClick={handleCardClick}
          _hover={{
            shadow: "xl",
            transform: "translateY(-4px)",
            borderColor: `${colorScheme}.400`,
          }}
          transition="all 0.3s ease"
          minH="140px"
        >
          <CardBody p={4}>
            <VStack spacing={3} align="stretch">
              <HStack justify="space-between">
                <HStack spacing={2}>
                  <Icon
                    as={getNodeTypeIcon(node.node_type)}
                    color={`${colorScheme}.500`}
                    boxSize={5}
                  />
                  {isCompany && (
                    <Badge colorScheme="blue" variant="solid">
                      核心企业
                    </Badge>
                  )}
                </HStack>
                {node.importance_score >= 70 && (
                  <Tooltip label="重要节点">
                    <Icon as={FaStar} color="orange.400" boxSize={4} />
                  </Tooltip>
                )}
              </HStack>

              <Text fontWeight="bold" fontSize="sm" noOfLines={2}>
                {node.node_name}
              </Text>

              {node.node_description && (
                <Text fontSize="xs" color="gray.600" noOfLines={2}>
                  {node.node_description}
                </Text>
              )}

              <HStack spacing={2} flexWrap="wrap">
                <Badge variant="subtle" size="sm" colorScheme={colorScheme}>
                  {node.node_type}
                </Badge>
                {node.market_share && (
                  <Badge variant="outline" size="sm">
                    份额 {node.market_share}%
                  </Badge>
                )}
              </HStack>

              {(node.importance_score || node.importance_score === 0) && (
                <Box>
                  <HStack justify="space-between" mb={1}>
                    <Text fontSize="xs" color="gray.500">
                      重要度
                    </Text>
                    <Text fontSize="xs" fontWeight="bold">
                      {node.importance_score}
                    </Text>
                  </HStack>
                  <Progress
                    value={node.importance_score}
                    size="xs"
                    colorScheme={getImportanceColor(node.importance_score)}
                    borderRadius="full"
                  />
                </Box>
              )}
            </VStack>
          </CardBody>
        </Card>
      </ScaleFade>

      <Modal isOpen={isOpen} onClose={onClose} size="xl">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>
            <HStack>
              <Icon
                as={getNodeTypeIcon(node.node_type)}
                color={`${colorScheme}.500`}
                boxSize={6}
              />
              <VStack align="start" spacing={0}>
                <Text>{node.node_name}</Text>
                <HStack>
                  <Badge colorScheme={colorScheme}>{node.node_type}</Badge>
                  {isCompany && (
                    <Badge colorScheme="blue" variant="solid">
                      核心企业
                    </Badge>
                  )}
                </HStack>
              </VStack>
            </HStack>
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <VStack align="stretch" spacing={4}>
              {node.node_description && (
                <Box>
                  <Text fontWeight="bold" mb={2} color="gray.600">
                    节点描述
                  </Text>
                  <Text fontSize="sm" lineHeight="1.6">
                    {node.node_description}
                  </Text>
                </Box>
              )}

              <SimpleGrid columns={3} spacing={4}>
                <Stat>
                  <StatLabel fontSize="xs">重要度评分</StatLabel>
                  <StatNumber fontSize="lg">
                    {node.importance_score || 0}
                  </StatNumber>
                  <StatHelpText>
                    <Progress
                      value={node.importance_score}
                      size="sm"
                      colorScheme={getImportanceColor(node.importance_score)}
                      borderRadius="full"
                    />
                  </StatHelpText>
                </Stat>

                {node.market_share && (
                  <Stat>
                    <StatLabel fontSize="xs">市场份额</StatLabel>
                    <StatNumber fontSize="lg">{node.market_share}%</StatNumber>
                  </Stat>
                )}

                {node.dependency_degree && (
                  <Stat>
                    <StatLabel fontSize="xs">依赖程度</StatLabel>
                    <StatNumber fontSize="lg">
                      {node.dependency_degree}%
                    </StatNumber>
                    <StatHelpText>
                      <Progress
                        value={node.dependency_degree}
                        size="sm"
                        colorScheme={
                          node.dependency_degree > 50 ? "orange" : "green"
                        }
                        borderRadius="full"
                      />
                    </StatHelpText>
                  </Stat>
                )}
              </SimpleGrid>

              <Divider />

              <Box>
                <HStack mb={3} justify="space-between">
                  <Text fontWeight="bold" color="gray.600">
                    相关公司
                  </Text>
                  {loadingRelated && <Spinner size="sm" />}
                </HStack>
                {loadingRelated ? (
                  <Center py={4}>
                    <Spinner size="md" />
                  </Center>
                ) : relatedCompanies.length > 0 ? (
                  <VStack
                    align="stretch"
                    spacing={3}
                    maxH="400px"
                    overflowY="auto"
                  >
                    {relatedCompanies.map((company, idx) => {
                      const getLevelLabel = (level) => {
                        if (level < 0) return { text: "上游", color: "orange" };
                        if (level === 0) return { text: "核心", color: "blue" };
                        if (level > 0) return { text: "下游", color: "green" };
                        return { text: "未知", color: "gray" };
                      };
                      const levelInfo = getLevelLabel(
                        company.node_info?.node_level
                      );

                      return (
                        <Card key={idx} variant="outline" size="sm">
                          <CardBody p={3}>
                            <VStack align="stretch" spacing={2}>
                              <HStack justify="space-between">
                                <VStack align="start" spacing={1} flex={1}>
                                  <HStack flexWrap="wrap">
                                    <Text fontSize="sm" fontWeight="bold">
                                      {company.stock_name}
                                    </Text>
                                    <Badge size="sm" colorScheme="blue">
                                      {company.stock_code}
                                    </Badge>
                                    <Badge
                                      size="sm"
                                      colorScheme={levelInfo.color}
                                      variant="solid"
                                    >
                                      {levelInfo.text}
                                    </Badge>
                                  </HStack>
                                  {company.company_name && (
                                    <Text
                                      fontSize="xs"
                                      color="gray.500"
                                      noOfLines={1}
                                    >
                                      {company.company_name}
                                    </Text>
                                  )}
                                </VStack>
                                <IconButton
                                  size="sm"
                                  icon={<ExternalLinkIcon />}
                                  variant="ghost"
                                  colorScheme="blue"
                                  onClick={() => {
                                    window.location.href = `/company?stock_code=${company.stock_code}`;
                                  }}
                                  aria-label="查看公司详情"
                                />
                              </HStack>

                              {company.node_info?.node_description && (
                                <Text
                                  fontSize="xs"
                                  color="gray.600"
                                  noOfLines={2}
                                >
                                  {company.node_info.node_description}
                                </Text>
                              )}

                              {company.relationships &&
                                company.relationships.length > 0 && (
                                  <Box
                                    pt={2}
                                    borderTop="1px"
                                    borderColor="gray.100"
                                  >
                                    <Text
                                      fontSize="xs"
                                      fontWeight="bold"
                                      color="gray.600"
                                      mb={1}
                                    >
                                      产业链关系:
                                    </Text>
                                    <VStack align="stretch" spacing={1}>
                                      {company.relationships.map(
                                        (rel, ridx) => (
                                          <HStack
                                            key={ridx}
                                            fontSize="xs"
                                            spacing={2}
                                          >
                                            <Icon
                                              as={
                                                rel.role === "source"
                                                  ? FaArrowRight
                                                  : FaArrowLeft
                                              }
                                              color={
                                                rel.role === "source"
                                                  ? "green.500"
                                                  : "orange.500"
                                              }
                                              boxSize={3}
                                            />
                                            <Text
                                              color="gray.700"
                                              noOfLines={1}
                                            >
                                              {rel.role === "source"
                                                ? "流向"
                                                : "来自"}
                                              <Text
                                                as="span"
                                                fontWeight="medium"
                                                mx={1}
                                              >
                                                {rel.connected_node}
                                              </Text>
                                            </Text>
                                          </HStack>
                                        )
                                      )}
                                    </VStack>
                                  </Box>
                                )}
                            </VStack>
                          </CardBody>
                        </Card>
                      );
                    })}
                  </VStack>
                ) : (
                  <Center py={4}>
                    <VStack spacing={2}>
                      <Icon as={FaBuilding} boxSize={8} color="gray.300" />
                      <Text fontSize="sm" color="gray.500">
                        暂无相关公司
                      </Text>
                    </VStack>
                  </Center>
                )}
              </Box>
            </VStack>
          </ModalBody>
          <ModalFooter>
            <Button colorScheme="blue" onClick={onClose}>
              关闭
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};

// 关键因素卡片
const KeyFactorCard = ({ factor }) => {
  const impactColor =
    {
      positive: "red",
      negative: "green",
      neutral: "gray",
      mixed: "yellow",
    }[factor.impact_direction] || "gray";

  const bgColor = "white";
  const borderColor = "gray.200";

  return (
    <Card bg={bgColor} borderColor={borderColor} size="sm">
      <CardBody p={3}>
        <VStack align="stretch" spacing={2}>
          <HStack justify="space-between">
            <Text fontWeight="medium" fontSize="sm">
              {factor.factor_name}
            </Text>
            <Badge colorScheme={impactColor} size="sm">
              {factor.impact_direction === "positive"
                ? "正面"
                : factor.impact_direction === "negative"
                ? "负面"
                : factor.impact_direction === "mixed"
                ? "混合"
                : "中性"}
            </Badge>
          </HStack>

          <HStack spacing={2}>
            <Text fontSize="lg" fontWeight="bold" color={`${impactColor}.500`}>
              {factor.factor_value}
              {factor.factor_unit && ` ${factor.factor_unit}`}
            </Text>
            {factor.year_on_year && (
              <Tag
                size="sm"
                colorScheme={factor.year_on_year > 0 ? "red" : "green"}
              >
                <Icon
                  as={factor.year_on_year > 0 ? FaArrowUp : FaArrowDown}
                  mr={1}
                  boxSize={3}
                />
                {Math.abs(factor.year_on_year)}%
              </Tag>
            )}
          </HStack>

          {factor.factor_desc && (
            <Text fontSize="xs" color="gray.600" noOfLines={2}>
              {factor.factor_desc}
            </Text>
          )}

          <HStack justify="space-between">
            <Text fontSize="xs" color="gray.500">
              影响权重: {factor.impact_weight}
            </Text>
            {factor.report_period && (
              <Text fontSize="xs" color="gray.500">
                {factor.report_period}
              </Text>
            )}
          </HStack>
        </VStack>
      </CardBody>
    </Card>
  );
};

// 时间线组件
const TimelineComponent = ({ events }) => {
  const [selectedEvent, setSelectedEvent] = useState(null);
  const { isOpen, onOpen, onClose } = useDisclosure();

  // 背景颜色
  const positiveBgColor = "red.50";
  const negativeBgColor = "green.50";

  const handleEventClick = (event) => {
    setSelectedEvent(event);
    onOpen();
  };

  return (
    <>
      <Box position="relative" pl={8}>
        <Box
          position="absolute"
          left="15px"
          top="20px"
          bottom="20px"
          width="2px"
          bg="gray.300"
        />

        <VStack align="stretch" spacing={6}>
          {events.map((event, idx) => {
            const isPositive = event.impact_metrics?.is_positive;
            const iconColor = isPositive ? "red.500" : "green.500";
            const bgColor = isPositive ? positiveBgColor : negativeBgColor;

            return (
              <Fade in={true} key={idx}>
                <Box position="relative">
                  <Circle
                    size="30px"
                    bg={iconColor}
                    position="absolute"
                    left="-15px"
                    top="20px"
                    zIndex={2}
                    border="3px solid white"
                    shadow="md"
                  >
                    <Icon
                      as={isPositive ? FaArrowUp : FaArrowDown}
                      color="white"
                      boxSize={3}
                    />
                  </Circle>

                  <Box
                    position="absolute"
                    left="15px"
                    top="35px"
                    width="20px"
                    height="2px"
                    bg="gray.300"
                  />

                  <Card
                    ml={10}
                    bg={bgColor}
                    cursor="pointer"
                    onClick={() => handleEventClick(event)}
                    _hover={{ shadow: "lg", transform: "translateX(4px)" }}
                    transition="all 0.3s ease"
                  >
                    <CardBody p={4}>
                      <VStack align="stretch" spacing={2}>
                        <HStack justify="space-between">
                          <VStack align="start" spacing={0}>
                            <Text fontWeight="bold" fontSize="sm">
                              {event.event_title}
                            </Text>
                            <HStack spacing={2}>
                              <Icon
                                as={FaCalendarAlt}
                                boxSize={3}
                                color="gray.500"
                              />
                              <Text
                                fontSize="xs"
                                color="gray.500"
                                fontWeight="medium"
                              >
                                {event.event_date}
                              </Text>
                            </HStack>
                          </VStack>
                          <Badge
                            colorScheme={isPositive ? "red" : "green"}
                            size="sm"
                          >
                            {event.event_type}
                          </Badge>
                        </HStack>

                        <Text fontSize="sm" color="gray.600" noOfLines={2}>
                          {event.event_desc}
                        </Text>

                        <HStack>
                          <Text fontSize="xs" color="gray.500">
                            影响度:
                          </Text>
                          <Progress
                            value={event.impact_metrics?.impact_score}
                            size="xs"
                            width="60px"
                            colorScheme={
                              event.impact_metrics?.impact_score > 70
                                ? "red"
                                : "orange"
                            }
                            borderRadius="full"
                          />
                          <Text
                            fontSize="xs"
                            color="gray.500"
                            fontWeight="bold"
                          >
                            {event.impact_metrics?.impact_score || 0}
                          </Text>
                        </HStack>
                      </VStack>
                    </CardBody>
                  </Card>
                </Box>
              </Fade>
            );
          })}
        </VStack>
      </Box>

      {selectedEvent && (
        <Modal isOpen={isOpen} onClose={onClose} size="xl">
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>
              <HStack>
                <Icon
                  as={
                    selectedEvent.impact_metrics?.is_positive
                      ? FaCheckCircle
                      : FaExclamationCircle
                  }
                  color={
                    selectedEvent.impact_metrics?.is_positive
                      ? "red.500"
                      : "green.500"
                  }
                  boxSize={6}
                />
                <VStack align="start" spacing={0}>
                  <Text>{selectedEvent.event_title}</Text>
                  <HStack>
                    <Badge
                      colorScheme={
                        selectedEvent.impact_metrics?.is_positive
                          ? "red"
                          : "green"
                      }
                    >
                      {selectedEvent.event_type}
                    </Badge>
                    <Text fontSize="sm" color="gray.500">
                      {selectedEvent.event_date}
                    </Text>
                  </HStack>
                </VStack>
              </HStack>
            </ModalHeader>
            <ModalCloseButton />
            <ModalBody>
              <VStack align="stretch" spacing={4}>
                <Box>
                  <Text fontWeight="bold" mb={2} color="gray.600">
                    事件详情
                  </Text>
                  <Text fontSize="sm" lineHeight="1.6">
                    {selectedEvent.event_desc}
                  </Text>
                </Box>

                {selectedEvent.related_info?.financial_impact && (
                  <Box>
                    <Text fontWeight="bold" mb={2} color="gray.600">
                      财务影响
                    </Text>
                    <Text fontSize="sm" lineHeight="1.6" color="blue.600">
                      {selectedEvent.related_info.financial_impact}
                    </Text>
                  </Box>
                )}

                <Box>
                  <Text fontWeight="bold" mb={2} color="gray.600">
                    影响评估
                  </Text>
                  <HStack spacing={4}>
                    <VStack spacing={1}>
                      <Text fontSize="xs" color="gray.500">
                        影响度
                      </Text>
                      <Progress
                        value={selectedEvent.impact_metrics?.impact_score}
                        size="lg"
                        width="120px"
                        colorScheme={
                          selectedEvent.impact_metrics?.impact_score > 70
                            ? "red"
                            : "orange"
                        }
                        hasStripe
                        isAnimated
                      />
                      <Text fontSize="sm" fontWeight="bold">
                        {selectedEvent.impact_metrics?.impact_score || 0}/100
                      </Text>
                    </VStack>
                    <VStack>
                      <Badge
                        size="lg"
                        colorScheme={
                          selectedEvent.impact_metrics?.is_positive
                            ? "red"
                            : "green"
                        }
                        px={3}
                        py={1}
                      >
                        {selectedEvent.impact_metrics?.is_positive
                          ? "正面影响"
                          : "负面影响"}
                      </Badge>
                    </VStack>
                  </HStack>
                </Box>
              </VStack>
            </ModalBody>
            <ModalFooter>
              <Button colorScheme="blue" onClick={onClose}>
                关闭
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
      )}
    </>
  );
};

// 生成雷达图配置
const getRadarChartOption = (comprehensiveData) => {
  if (!comprehensiveData?.competitive_position?.scores) return null;

  const scores = comprehensiveData.competitive_position.scores;
  const indicators = [
    { name: "市场地位", max: 100 },
    { name: "技术实力", max: 100 },
    { name: "品牌价值", max: 100 },
    { name: "运营效率", max: 100 },
    { name: "财务健康", max: 100 },
    { name: "创新能力", max: 100 },
    { name: "风险控制", max: 100 },
    { name: "成长潜力", max: 100 },
  ];

  const data = [
    scores.market_position || 0,
    scores.technology || 0,
    scores.brand || 0,
    scores.operation || 0,
    scores.finance || 0,
    scores.innovation || 0,
    scores.risk || 0,
    scores.growth || 0,
  ];

  return {
    tooltip: { trigger: "item" },
    radar: {
      indicator: indicators,
      shape: "polygon",
      splitNumber: 4,
      name: { textStyle: { color: "#666", fontSize: 12 } },
      splitLine: {
        lineStyle: { color: ["#e8e8e8", "#e0e0e0", "#d0d0d0", "#c0c0c0"] },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"],
        },
      },
      axisLine: { lineStyle: { color: "#ddd" } },
    },
    series: [
      {
        name: "竞争力评分",
        type: "radar",
        data: [
          {
            value: data,
            name: "当前评分",
            symbol: "circle",
            symbolSize: 5,
            lineStyle: { width: 2, color: "#3182ce" },
            areaStyle: { color: "rgba(49, 130, 206, 0.3)" },
            label: {
              show: true,
              formatter: (params) => params.value,
              color: "#3182ce",
              fontSize: 10,
            },
          },
        ],
      },
    ],
  };
};

// 生成桑基图配置
const getSankeyChartOption = (valueChainData) => {
  if (
    !valueChainData?.value_chain_flows ||
    valueChainData.value_chain_flows.length === 0
  )
    return null;

  const nodes = new Set();
  const links = [];

  valueChainData.value_chain_flows.forEach((flow) => {
    if (!flow?.source?.node_name || !flow?.target?.node_name) return;
    nodes.add(flow.source.node_name);
    nodes.add(flow.target.node_name);
    links.push({
      source: flow.source.node_name,
      target: flow.target.node_name,
      value: parseFloat(flow.flow_metrics?.flow_ratio) || 1,
      lineStyle: { color: "source", opacity: 0.6 },
    });
  });

  return {
    tooltip: { trigger: "item", triggerOn: "mousemove" },
    series: [
      {
        type: "sankey",
        layout: "none",
        emphasis: { focus: "adjacency" },
        data: Array.from(nodes).map((name) => ({ name })),
        links: links,
        lineStyle: { color: "gradient", curveness: 0.5 },
        label: { color: "#333", fontSize: 10 },
      },
    ],
  };
};

// 深度分析 Tab 主组件
const DeepAnalysisTab = ({
  comprehensiveData,
  valueChainData,
  keyFactorsData,
  loading,
  cardBg,
  expandedSegments,
  onToggleSegment,
}) => {
  const blueBg = "blue.50";
  const greenBg = "green.50";
  const purpleBg = "purple.50";
  const orangeBg = "orange.50";

  if (loading) {
    return (
      <Center h="200px">
        <VStack spacing={4}>
          <Spinner size="xl" color="blue.500" />
          <Text>加载深度分析数据...</Text>
        </VStack>
      </Center>
    );
  }

  return (
    <VStack spacing={6} align="stretch">
      {/* 核心定位卡片 */}
      {comprehensiveData?.qualitative_analysis && (
        <Card bg={cardBg} shadow="md">
          <CardHeader>
            <HStack>
              <Icon as={FaLightbulb} color="yellow.500" />
              <Heading size="sm">核心定位</Heading>
            </HStack>
          </CardHeader>
          <CardBody>
            <DisclaimerBox />
            <VStack spacing={4} align="stretch">
              {comprehensiveData.qualitative_analysis.core_positioning
                ?.one_line_intro && (
                <Alert status="info" variant="left-accent">
                  <AlertIcon />
                  <Text fontWeight="bold">
                    {
                      comprehensiveData.qualitative_analysis.core_positioning
                        .one_line_intro
                    }
                  </Text>
                </Alert>
              )}

              <Grid templateColumns="repeat(2, 1fr)" gap={4}>
                <GridItem colSpan={{ base: 2, md: 1 }}>
                  <VStack align="stretch" spacing={3}>
                    <Text fontWeight="bold" fontSize="sm" color="gray.600">
                      投资亮点
                    </Text>
                    <Box p={3} bg={blueBg} borderRadius="md">
                      <Text fontSize="sm" whiteSpace="pre-wrap">
                        {comprehensiveData.qualitative_analysis.core_positioning
                          ?.investment_highlights || "暂无数据"}
                      </Text>
                    </Box>
                  </VStack>
                </GridItem>

                <GridItem colSpan={{ base: 2, md: 1 }}>
                  <VStack align="stretch" spacing={3}>
                    <Text fontWeight="bold" fontSize="sm" color="gray.600">
                      商业模式
                    </Text>
                    <Box p={3} bg={greenBg} borderRadius="md">
                      <Text fontSize="sm" whiteSpace="pre-wrap">
                        {comprehensiveData.qualitative_analysis.core_positioning
                          ?.business_model_desc || "暂无数据"}
                      </Text>
                    </Box>
                  </VStack>
                </GridItem>
              </Grid>
            </VStack>
          </CardBody>
        </Card>
      )}

      {/* 竞争地位分析 */}
      {comprehensiveData?.competitive_position && (
        <Card bg={cardBg} shadow="md">
          <CardHeader>
            <HStack>
              <Icon as={FaTrophy} color="gold" />
              <Heading size="sm">竞争地位分析</Heading>
              {comprehensiveData.competitive_position.ranking && (
                <Badge colorScheme="purple" ml={2}>
                  行业排名{" "}
                  {comprehensiveData.competitive_position.ranking.industry_rank}
                  /
                  {
                    comprehensiveData.competitive_position.ranking
                      .total_companies
                  }
                </Badge>
              )}
            </HStack>
          </CardHeader>
          <CardBody>
            <DisclaimerBox />
            {comprehensiveData.competitive_position.analysis
              ?.main_competitors && (
              <Box mb={4}>
                <Text fontWeight="bold" fontSize="sm" mb={2} color="gray.600">
                  主要竞争对手
                </Text>
                <HStack spacing={2} flexWrap="wrap">
                  {comprehensiveData.competitive_position.analysis.main_competitors
                    .split(",")
                    .map((competitor, idx) => (
                      <Tag
                        key={idx}
                        size="md"
                        colorScheme="purple"
                        variant="outline"
                        borderRadius="full"
                      >
                        <Icon as={FaUsers} mr={1} />
                        <TagLabel>{competitor.trim()}</TagLabel>
                      </Tag>
                    ))}
                </HStack>
              </Box>
            )}

            <Grid templateColumns="repeat(2, 1fr)" gap={6}>
              <GridItem colSpan={{ base: 2, lg: 1 }}>
                <VStack spacing={4} align="stretch">
                  <ScoreBar
                    label="市场地位"
                    score={
                      comprehensiveData.competitive_position.scores
                        ?.market_position
                    }
                    icon={FaTrophy}
                  />
                  <ScoreBar
                    label="技术实力"
                    score={
                      comprehensiveData.competitive_position.scores?.technology
                    }
                    icon={FaCog}
                  />
                  <ScoreBar
                    label="品牌价值"
                    score={comprehensiveData.competitive_position.scores?.brand}
                    icon={FaStar}
                  />
                  <ScoreBar
                    label="运营效率"
                    score={
                      comprehensiveData.competitive_position.scores?.operation
                    }
                    icon={FaChartLine}
                  />
                  <ScoreBar
                    label="财务健康"
                    score={
                      comprehensiveData.competitive_position.scores?.finance
                    }
                    icon={FaDollarSign}
                  />
                  <ScoreBar
                    label="创新能力"
                    score={
                      comprehensiveData.competitive_position.scores?.innovation
                    }
                    icon={FaFlask}
                  />
                  <ScoreBar
                    label="风险控制"
                    score={comprehensiveData.competitive_position.scores?.risk}
                    icon={FaShieldAlt}
                  />
                  <ScoreBar
                    label="成长潜力"
                    score={
                      comprehensiveData.competitive_position.scores?.growth
                    }
                    icon={FaRocket}
                  />
                </VStack>
              </GridItem>

              <GridItem colSpan={{ base: 2, lg: 1 }}>
                {getRadarChartOption(comprehensiveData) && (
                  <ReactECharts
                    option={getRadarChartOption(comprehensiveData)}
                    style={{ height: "320px" }}
                    theme="light"
                  />
                )}
              </GridItem>
            </Grid>

            <Divider my={4} />

            <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
              <Box>
                <Text fontWeight="bold" fontSize="sm" mb={2} color="red.600">
                  竞争优势
                </Text>
                <Text fontSize="sm">
                  {comprehensiveData.competitive_position.analysis
                    ?.competitive_advantages || "暂无数据"}
                </Text>
              </Box>
              <Box>
                <Text fontWeight="bold" fontSize="sm" mb={2} color="green.600">
                  竞争劣势
                </Text>
                <Text fontSize="sm">
                  {comprehensiveData.competitive_position.analysis
                    ?.competitive_disadvantages || "暂无数据"}
                </Text>
              </Box>
            </SimpleGrid>
          </CardBody>
        </Card>
      )}

      {/* 业务结构分析 */}
      {comprehensiveData?.business_structure &&
        comprehensiveData.business_structure.length > 0 && (
          <Card bg={cardBg} shadow="md">
            <CardHeader>
              <HStack>
                <Icon as={FaChartPie} color="purple.500" />
                <Heading size="sm">业务结构分析</Heading>
                <Badge>
                  {comprehensiveData.business_structure[0]?.report_period}
                </Badge>
              </HStack>
            </CardHeader>
            <CardBody>
              <DisclaimerBox />
              <VStack spacing={3} align="stretch">
                {comprehensiveData.business_structure.map((business, idx) => (
                  <BusinessTreeItem
                    key={idx}
                    business={business}
                    depth={business.business_level - 1}
                  />
                ))}
              </VStack>
            </CardBody>
          </Card>
        )}

      {/* 产业链分析 */}
      {valueChainData && (
        <Card bg={cardBg} shadow="md">
          <CardHeader>
            <HStack>
              <Icon as={FaNetworkWired} color="teal.500" />
              <Heading size="sm">产业链分析</Heading>
              <HStack spacing={2}>
                <Badge colorScheme="orange">
                  上游 {valueChainData.analysis_summary?.upstream_nodes || 0}
                </Badge>
                <Badge colorScheme="blue">
                  核心 {valueChainData.analysis_summary?.company_nodes || 0}
                </Badge>
                <Badge colorScheme="green">
                  下游 {valueChainData.analysis_summary?.downstream_nodes || 0}
                </Badge>
              </HStack>
            </HStack>
          </CardHeader>
          <CardBody>
            <DisclaimerBox />
            <Tabs variant="soft-rounded" colorScheme="teal">
              <TabList>
                <Tab>层级视图</Tab>
                <Tab>流向关系</Tab>
              </TabList>

              <TabPanels>
                <TabPanel>
                  <VStack spacing={8} align="stretch">
                    {(valueChainData.value_chain_structure?.nodes_by_level?.[
                      "level_-2"
                    ] ||
                      valueChainData.value_chain_structure?.nodes_by_level?.[
                        "level_-1"
                      ]) && (
                      <Box>
                        <HStack mb={4}>
                          <Badge
                            colorScheme="orange"
                            fontSize="md"
                            px={3}
                            py={1}
                          >
                            上游供应链
                          </Badge>
                          <Text fontSize="sm" color="gray.600">
                            原材料与供应商
                          </Text>
                        </HStack>
                        <SimpleGrid
                          columns={{ base: 2, md: 3, lg: 4 }}
                          spacing={4}
                        >
                          {[
                            ...(valueChainData.value_chain_structure
                              ?.nodes_by_level?.["level_-2"] || []),
                            ...(valueChainData.value_chain_structure
                              ?.nodes_by_level?.["level_-1"] || []),
                          ].map((node, idx) => (
                            <ValueChainNodeCard
                              key={idx}
                              node={node}
                              level={node.node_level}
                            />
                          ))}
                        </SimpleGrid>
                      </Box>
                    )}

                    {valueChainData.value_chain_structure?.nodes_by_level?.[
                      "level_0"
                    ] && (
                      <Box>
                        <HStack mb={4}>
                          <Badge colorScheme="blue" fontSize="md" px={3} py={1}>
                            核心企业
                          </Badge>
                          <Text fontSize="sm" color="gray.600">
                            公司主体与产品
                          </Text>
                        </HStack>
                        <SimpleGrid
                          columns={{ base: 1, md: 2, lg: 3 }}
                          spacing={4}
                        >
                          {valueChainData.value_chain_structure.nodes_by_level[
                            "level_0"
                          ].map((node, idx) => (
                            <ValueChainNodeCard
                              key={idx}
                              node={node}
                              isCompany={node.node_type === "company"}
                              level={0}
                            />
                          ))}
                        </SimpleGrid>
                      </Box>
                    )}

                    {(valueChainData.value_chain_structure?.nodes_by_level?.[
                      "level_1"
                    ] ||
                      valueChainData.value_chain_structure?.nodes_by_level?.[
                        "level_2"
                      ]) && (
                      <Box>
                        <HStack mb={4}>
                          <Badge
                            colorScheme="green"
                            fontSize="md"
                            px={3}
                            py={1}
                          >
                            下游客户
                          </Badge>
                          <Text fontSize="sm" color="gray.600">
                            客户与终端市场
                          </Text>
                        </HStack>
                        <SimpleGrid
                          columns={{ base: 2, md: 3, lg: 4 }}
                          spacing={4}
                        >
                          {[
                            ...(valueChainData.value_chain_structure
                              ?.nodes_by_level?.["level_1"] || []),
                            ...(valueChainData.value_chain_structure
                              ?.nodes_by_level?.["level_2"] || []),
                          ].map((node, idx) => (
                            <ValueChainNodeCard
                              key={idx}
                              node={node}
                              level={node.node_level}
                            />
                          ))}
                        </SimpleGrid>
                      </Box>
                    )}
                  </VStack>
                </TabPanel>

                <TabPanel>
                  {getSankeyChartOption(valueChainData) ? (
                    <ReactECharts
                      option={getSankeyChartOption(valueChainData)}
                      style={{ height: "500px" }}
                      theme="light"
                    />
                  ) : (
                    <Center h="200px">
                      <Text color="gray.500">暂无流向数据</Text>
                    </Center>
                  )}
                </TabPanel>
              </TabPanels>
            </Tabs>
          </CardBody>
        </Card>
      )}

      {/* 关键因素与发展时间线 */}
      <Grid templateColumns="repeat(2, 1fr)" gap={6}>
        <GridItem colSpan={{ base: 2, lg: 1 }}>
          {keyFactorsData?.key_factors && (
            <Card bg={cardBg} shadow="md" h="full">
              <CardHeader>
                <HStack>
                  <Icon as={FaBalanceScale} color="orange.500" />
                  <Heading size="sm">关键因素</Heading>
                  <Badge>{keyFactorsData.key_factors.total_factors} 项</Badge>
                </HStack>
              </CardHeader>
              <CardBody>
                <DisclaimerBox />
                <Accordion allowMultiple>
                  {keyFactorsData.key_factors.categories.map(
                    (category, idx) => (
                      <AccordionItem key={idx}>
                        <AccordionButton>
                          <Box flex="1" textAlign="left">
                            <HStack>
                              <Text fontWeight="medium">
                                {category.category_name}
                              </Text>
                              <Badge size="sm" variant="subtle">
                                {category.factors.length}
                              </Badge>
                            </HStack>
                          </Box>
                          <AccordionIcon />
                        </AccordionButton>
                        <AccordionPanel pb={4}>
                          <VStack spacing={3} align="stretch">
                            {category.factors.map((factor, fidx) => (
                              <KeyFactorCard key={fidx} factor={factor} />
                            ))}
                          </VStack>
                        </AccordionPanel>
                      </AccordionItem>
                    )
                  )}
                </Accordion>
              </CardBody>
            </Card>
          )}
        </GridItem>

        <GridItem colSpan={{ base: 2, lg: 1 }}>
          {keyFactorsData?.development_timeline && (
            <Card bg={cardBg} shadow="md" h="full">
              <CardHeader>
                <HStack>
                  <Icon as={FaHistory} color="cyan.500" />
                  <Heading size="sm">发展时间线</Heading>
                  <HStack spacing={1}>
                    <Badge colorScheme="red">
                      正面{" "}
                      {keyFactorsData.development_timeline.statistics
                        ?.positive_events || 0}
                    </Badge>
                    <Badge colorScheme="green">
                      负面{" "}
                      {keyFactorsData.development_timeline.statistics
                        ?.negative_events || 0}
                    </Badge>
                  </HStack>
                </HStack>
              </CardHeader>
              <CardBody>
                <DisclaimerBox />
                <Box maxH="600px" overflowY="auto" pr={2}>
                  <TimelineComponent
                    events={keyFactorsData.development_timeline.events}
                  />
                </Box>
              </CardBody>
            </Card>
          )}
        </GridItem>
      </Grid>

      {/* 业务板块详情 */}
      {comprehensiveData?.business_segments &&
        comprehensiveData.business_segments.length > 0 && (
          <Card bg={cardBg} shadow="md">
            <CardHeader>
              <HStack>
                <Icon as={FaIndustry} color="indigo.500" />
                <Heading size="sm">业务板块详情</Heading>
                <Badge>
                  {comprehensiveData.business_segments.length} 个板块
                </Badge>
              </HStack>
            </CardHeader>
            <CardBody>
              <DisclaimerBox />
              <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
                {comprehensiveData.business_segments.map((segment, idx) => {
                  const isExpanded = expandedSegments[idx];

                  return (
                    <Card key={idx} variant="outline">
                      <CardBody>
                        <VStack align="stretch" spacing={3}>
                          <HStack justify="space-between">
                            <Text fontWeight="bold" fontSize="md">
                              {segment.segment_name}
                            </Text>
                            <Button
                              size="sm"
                              variant="ghost"
                              leftIcon={
                                <Icon
                                  as={isExpanded ? FaCompressAlt : FaExpandAlt}
                                />
                              }
                              onClick={() => onToggleSegment(idx)}
                              colorScheme="blue"
                            >
                              {isExpanded ? "折叠" : "展开"}
                            </Button>
                          </HStack>

                          <Box>
                            <Text fontSize="xs" color="gray.500" mb={1}>
                              业务描述
                            </Text>
                            <Text
                              fontSize="sm"
                              noOfLines={isExpanded ? undefined : 3}
                            >
                              {segment.segment_description || "暂无描述"}
                            </Text>
                          </Box>

                          <Box>
                            <Text fontSize="xs" color="gray.500" mb={1}>
                              竞争地位
                            </Text>
                            <Text
                              fontSize="sm"
                              noOfLines={isExpanded ? undefined : 2}
                            >
                              {segment.competitive_position || "暂无数据"}
                            </Text>
                          </Box>

                          <Box>
                            <Text fontSize="xs" color="gray.500" mb={1}>
                              未来潜力
                            </Text>
                            <Text
                              fontSize="sm"
                              noOfLines={isExpanded ? undefined : 2}
                              color="blue.600"
                            >
                              {segment.future_potential || "暂无数据"}
                            </Text>
                          </Box>

                          {isExpanded && segment.key_products && (
                            <Box>
                              <Text fontSize="xs" color="gray.500" mb={1}>
                                主要产品
                              </Text>
                              <Text fontSize="sm" color="green.600">
                                {segment.key_products}
                              </Text>
                            </Box>
                          )}

                          {isExpanded && segment.market_share && (
                            <Box>
                              <Text fontSize="xs" color="gray.500" mb={1}>
                                市场份额
                              </Text>
                              <Badge colorScheme="purple" fontSize="sm">
                                {segment.market_share}%
                              </Badge>
                            </Box>
                          )}

                          {isExpanded && segment.revenue_contribution && (
                            <Box>
                              <Text fontSize="xs" color="gray.500" mb={1}>
                                营收贡献
                              </Text>
                              <Badge colorScheme="orange" fontSize="sm">
                                {segment.revenue_contribution}%
                              </Badge>
                            </Box>
                          )}
                        </VStack>
                      </CardBody>
                    </Card>
                  );
                })}
              </SimpleGrid>
            </CardBody>
          </Card>
        )}

      {/* 战略分析 */}
      {comprehensiveData?.qualitative_analysis?.strategy && (
        <Card bg={cardBg} shadow="md">
          <CardHeader>
            <HStack>
              <Icon as={FaRocket} color="red.500" />
              <Heading size="sm">战略分析</Heading>
            </HStack>
          </CardHeader>
          <CardBody>
            <DisclaimerBox />
            <Grid templateColumns="repeat(2, 1fr)" gap={6}>
              <GridItem colSpan={{ base: 2, md: 1 }}>
                <VStack align="stretch" spacing={3}>
                  <Text fontWeight="bold" fontSize="sm" color="gray.600">
                    战略方向
                  </Text>
                  <Box p={4} bg={purpleBg} borderRadius="md">
                    <Text fontSize="sm">
                      {comprehensiveData.qualitative_analysis.strategy
                        .strategy_description || "暂无数据"}
                    </Text>
                  </Box>
                </VStack>
              </GridItem>

              <GridItem colSpan={{ base: 2, md: 1 }}>
                <VStack align="stretch" spacing={3}>
                  <Text fontWeight="bold" fontSize="sm" color="gray.600">
                    战略举措
                  </Text>
                  <Box p={4} bg={orangeBg} borderRadius="md">
                    <Text fontSize="sm">
                      {comprehensiveData.qualitative_analysis.strategy
                        .strategic_initiatives || "暂无数据"}
                    </Text>
                  </Box>
                </VStack>
              </GridItem>
            </Grid>
          </CardBody>
        </Card>
      )}
    </VStack>
  );
};

export default DeepAnalysisTab;