/**
 * 业务结构树形项组件
 *
 * 递归显示业务结构层级
 * 使用位置：业务结构分析卡片
 * 黑金主题风格
 */

import React from 'react';
import { Box, HStack, VStack, Text, Badge, Tag, TagLabel } from '@chakra-ui/react';
import { formatPercentage, formatBusinessRevenue } from '@utils/priceFormatters';
import type { BusinessTreeItemProps } from '../types';

// 黑金主题配置（使用更亮的金色提高对比度）
const THEME = {
  bg: 'gray.700',
  gold: '#F4D03F',          // 亮金色
  goldLight: '#F0D78C',
  textPrimary: '#F4D03F',   // 亮金色（提高对比度）
  textSecondary: 'gray.400',
  border: 'rgba(212, 175, 55, 0.5)',
};

const BusinessTreeItem: React.FC<BusinessTreeItemProps> = ({ business, depth = 0 }) => {
  // 获取营收显示
  const getRevenueDisplay = (): string => {
    const revenue = business.revenue || business.financial_metrics?.revenue;
    const unit = business.revenue_unit;
    if (revenue !== undefined && revenue !== null) {
      return formatBusinessRevenue(revenue, unit);
    }
    return '-';
  };

  return (
    <Box
      ml={depth * 6}
      p={3}
      bg={THEME.bg}
      borderLeft={depth > 0 ? '4px solid' : 'none'}
      borderLeftColor={THEME.gold}
      borderRadius="md"
      mb={2}
      _hover={{ shadow: 'md', bg: 'gray.600' }}
      transition="all 0.2s"
    >
      <HStack justify="space-between">
        <VStack align="start" spacing={1}>
          <HStack>
            <Text fontWeight="bold" fontSize={depth === 0 ? 'md' : 'sm'} color={THEME.textPrimary}>
              {business.business_name}
            </Text>
            {business.financial_metrics?.revenue_ratio &&
              business.financial_metrics.revenue_ratio > 30 && (
                <Badge bg={THEME.gold} color="gray.900" size="sm">
                  核心业务
                </Badge>
              )}
          </HStack>
          <HStack spacing={4} flexWrap="wrap">
            <Tag size="sm" bg="gray.600" color={THEME.textPrimary}>
              营收占比: {formatPercentage(business.financial_metrics?.revenue_ratio)}
            </Tag>
            <Tag size="sm" bg="gray.600" color={THEME.textPrimary}>
              毛利率: {formatPercentage(business.financial_metrics?.gross_margin)}
            </Tag>
            {business.growth_metrics?.revenue_growth !== undefined && (
              <Tag
                size="sm"
                bg={business.growth_metrics.revenue_growth > 0 ? 'red.600' : 'green.600'}
                color="white"
              >
                <TagLabel>
                  增长: {business.growth_metrics.revenue_growth > 0 ? '+' : ''}
                  {formatPercentage(business.growth_metrics.revenue_growth)}
                </TagLabel>
              </Tag>
            )}
          </HStack>
        </VStack>
        <VStack align="end" spacing={0}>
          <Text fontSize="lg" fontWeight="bold" color={THEME.gold}>
            {getRevenueDisplay()}
          </Text>
          <Text fontSize="xs" color={THEME.textSecondary}>
            营业收入
          </Text>
        </VStack>
      </HStack>
    </Box>
  );
};

export default BusinessTreeItem;