/**
 * 产业链流程式导航组件
 *
 * 显示上游 → 核心 → 下游的流程式导航
 * 带图标箭头连接符
 */

import React, { memo } from 'react';
import { HStack, VStack, Box, Text, Icon, Badge } from '@chakra-ui/react';
import { FaArrowRight } from 'react-icons/fa';

// 黑金主题配置
const THEME = {
  gold: '#D4AF37',
  textSecondary: 'gray.400',
  upstream: {
    active: 'orange.500',
    activeBg: 'orange.900',
    inactive: 'white',
    inactiveBg: 'gray.700',
  },
  core: {
    active: 'blue.500',
    activeBg: 'blue.900',
    inactive: 'white',
    inactiveBg: 'gray.700',
  },
  downstream: {
    active: 'green.500',
    activeBg: 'green.900',
    inactive: 'white',
    inactiveBg: 'gray.700',
  },
};

export type TabType = 'upstream' | 'core' | 'downstream';

interface ProcessNavigationProps {
  activeTab: TabType;
  onTabChange: (tab: TabType) => void;
  upstreamCount: number;
  coreCount: number;
  downstreamCount: number;
}

interface NavItemProps {
  label: string;
  subtitle: string;
  count: number;
  isActive: boolean;
  colorKey: 'upstream' | 'core' | 'downstream';
  onClick: () => void;
}

const NavItem: React.FC<NavItemProps> = memo(({
  label,
  subtitle,
  count,
  isActive,
  colorKey,
  onClick,
}) => {
  const colors = THEME[colorKey];

  return (
    <Box
      px={4}
      py={2}
      borderRadius="lg"
      cursor="pointer"
      bg={isActive ? colors.activeBg : colors.inactiveBg}
      borderWidth={2}
      borderColor={isActive ? colors.active : 'gray.600'}
      onClick={onClick}
      transition="all 0.2s"
      _hover={{
        borderColor: colors.active,
        transform: 'translateY(-2px)',
      }}
    >
      <VStack spacing={1} align="center">
        <HStack spacing={2}>
          <Text
            fontWeight={isActive ? 'bold' : 'medium'}
            color={isActive ? colors.active : colors.inactive}
            fontSize="sm"
          >
            {label}
          </Text>
          <Badge
            bg={isActive ? colors.active : 'gray.600'}
            color="white"
            borderRadius="full"
            px={2}
            fontSize="xs"
          >
            {count}
          </Badge>
        </HStack>
        <Text
          fontSize="xs"
          color={THEME.textSecondary}
        >
          {subtitle}
        </Text>
      </VStack>
    </Box>
  );
});

NavItem.displayName = 'NavItem';

const ProcessNavigation: React.FC<ProcessNavigationProps> = memo(({
  activeTab,
  onTabChange,
  upstreamCount,
  coreCount,
  downstreamCount,
}) => {
  return (
    <HStack
      spacing={2}
      flexWrap="wrap"
      gap={2}
    >
      <NavItem
        label="上游供应链"
        subtitle="原材料与供应商"
        count={upstreamCount}
        isActive={activeTab === 'upstream'}
        colorKey="upstream"
        onClick={() => onTabChange('upstream')}
      />

      <Icon
        as={FaArrowRight}
        color={THEME.textSecondary}
        boxSize={4}
      />

      <NavItem
        label="核心企业"
        subtitle="公司主体与产品"
        count={coreCount}
        isActive={activeTab === 'core'}
        colorKey="core"
        onClick={() => onTabChange('core')}
      />

      <Icon
        as={FaArrowRight}
        color={THEME.textSecondary}
        boxSize={4}
      />

      <NavItem
        label="下游客户"
        subtitle="客户与终端市场"
        count={downstreamCount}
        isActive={activeTab === 'downstream'}
        colorKey="downstream"
        onClick={() => onTabChange('downstream')}
      />
    </HStack>
  );
});

ProcessNavigation.displayName = 'ProcessNavigation';

export default ProcessNavigation;