vf_react/src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx

// src/views/Company/components/CompanyOverview/CompanyHeaderCard.tsx
// 公司头部信息卡片组件 - 黑金主题

import React from "react";
import {
  VStack,
  HStack,
  Text,
  Badge,
  Card,
  CardBody,
  Heading,
  SimpleGrid,
  Divider,
  Icon,
  Box,
  Link,
} from "@chakra-ui/react";
import {
  FaBuilding,
  FaMapMarkerAlt,
  FaCalendarAlt,
  FaGlobe,
  FaCoins,
} from "react-icons/fa";
import { ExternalLinkIcon } from "@chakra-ui/icons";

import type { CompanyHeaderCardProps } from "./types";
import { formatRegisteredCapital, formatDate } from "./utils";

// 黑金主题色
const THEME = {
  bg: "gray.900",
  cardBg: "gray.800",
  gold: "#D4AF37",
  goldLight: "#F0D78C",
  textPrimary: "white",
  textSecondary: "gray.400",
  border: "rgba(212, 175, 55, 0.3)",
};

/**
 * 公司头部信息卡片组件
 * 三区块布局：身份分类 | 关键属性 | 公司介绍
 * 黑金主题
 */
const CompanyHeaderCard: React.FC<CompanyHeaderCardProps> = ({ basicInfo }) => {
  return (
    <Card
      bg={THEME.cardBg}
      shadow="xl"
      borderTop="3px solid"
      borderTopColor={THEME.gold}
      borderRadius="lg"
    >
      <CardBody px={0}>
        <VStack align="stretch" spacing={4}>
          {/* 区块一：公司身份与分类 */}
          <HStack spacing={4}>
            <Box
              w="56px"
              h="56px"
              borderRadius="full"
              bg={`linear-gradient(135deg, ${THEME.gold} 0%, ${THEME.goldLight} 100%)`}
              display="flex"
              alignItems="center"
              justifyContent="center"
              boxShadow={`0 4px 14px rgba(212, 175, 55, 0.4)`}
            >
              <Icon as={FaBuilding} color="gray.900" boxSize={7} />
            </Box>
            <VStack align="start" spacing={1}>
              <HStack flexWrap="wrap">
                <Heading size="lg" color={THEME.textPrimary}>
                  {basicInfo.ORGNAME || basicInfo.SECNAME}
                </Heading>
                <Badge
                  bg={THEME.gold}
                  color="gray.900"
                  fontSize="md"
                  px={2}
                  py={1}
                  fontWeight="bold"
                >
                  {basicInfo.SECCODE}
                </Badge>
              </HStack>
              <HStack spacing={2} flexWrap="wrap">
                <Badge
                  bg="transparent"
                  border="1px solid"
                  borderColor={THEME.gold}
                  color={THEME.goldLight}
                  fontSize="xs"
                >
                  {basicInfo.sw_industry_l1}
                </Badge>
                <Badge
                  bg="transparent"
                  border="1px solid"
                  borderColor="gray.600"
                  color={THEME.textSecondary}
                  fontSize="xs"
                >
                  {basicInfo.sw_industry_l2}
                </Badge>
                {basicInfo.sw_industry_l3 && (
                  <Badge
                    bg="transparent"
                    border="1px solid"
                    borderColor="gray.600"
                    color={THEME.textSecondary}
                    fontSize="xs"
                  >
                    {basicInfo.sw_industry_l3}
                  </Badge>
                )}
              </HStack>
            </VStack>
          </HStack>

          <Divider borderColor={THEME.border} />

          {/* 区块二：关键属性网格 */}
          <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
            <HStack>
              <Icon as={FaCalendarAlt} color={THEME.gold} boxSize={4} />
              <Box>
                <Text fontSize="xs" color={THEME.textSecondary}>成立日期</Text>
                <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
                  {formatDate(basicInfo.establish_date)}
                </Text>
              </Box>
            </HStack>
            <HStack>
              <Icon as={FaCoins} color={THEME.gold} boxSize={4} />
              <Box>
                <Text fontSize="xs" color={THEME.textSecondary}>注册资本</Text>
                <Text fontSize="sm" fontWeight="bold" color={THEME.goldLight}>
                  {formatRegisteredCapital(basicInfo.reg_capital)}
                </Text>
              </Box>
            </HStack>
            <HStack>
              <Icon as={FaMapMarkerAlt} color={THEME.gold} boxSize={4} />
              <Box>
                <Text fontSize="xs" color={THEME.textSecondary}>所在地</Text>
                <Text fontSize="sm" fontWeight="bold" color={THEME.textPrimary}>
                  {basicInfo.province} {basicInfo.city}
                </Text>
              </Box>
            </HStack>
            <HStack>
              <Icon as={FaGlobe} color={THEME.gold} boxSize={4} />
              <Box>
                <Text fontSize="xs" color={THEME.textSecondary}>官网</Text>
                <Link
                  href={basicInfo.website}
                  isExternal
                  color={THEME.goldLight}
                  fontSize="sm"
                  fontWeight="bold"
                  noOfLines={1}
                  _hover={{ color: THEME.gold }}
                >
                  {basicInfo.website ? (
                    <>访问官网 <ExternalLinkIcon mx="2px" /></>
                  ) : (
                    "暂无"
                  )}
                </Link>
              </Box>
            </HStack>
          </SimpleGrid>

          <Divider borderColor={THEME.border} />

          {/* 区块三：公司介绍 */}
          <Box>
            <Text fontSize="sm" color={THEME.textSecondary} noOfLines={2}>
              {basicInfo.company_intro}
            </Text>
            {basicInfo.company_intro && basicInfo.company_intro.length > 100 && (
              <Link
                color={THEME.goldLight}
                fontSize="sm"
                mt={1}
                display="inline-block"
                _hover={{ color: THEME.gold }}
              >
                查看完整介绍
              </Link>
            )}
          </Box>
        </VStack>
      </CardBody>
    </Card>
  );
};

export default CompanyHeaderCard;