// src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js
// 事件头部信息区组件

import React from 'react';
import {
  Box,
  Flex,
  HStack,
  Heading,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import { ViewIcon } from '@chakra-ui/icons';
import moment from 'moment';
import StockChangeIndicators from '../../../../components/StockChangeIndicators';
import EventFollowButton from '../EventCard/EventFollowButton';

/**
 * 事件头部信息区组件
 * @param {Object} props
 * @param {Object} props.event - 事件对象
 * @param {Object} props.importance - 重要性配置对象（包含 level, color 等）
 * @param {boolean} props.isFollowing - 是否已关注
 * @param {number} props.followerCount - 关注数
 * @param {Function} props.onToggleFollow - 切换关注回调
 */
const EventHeaderInfo = ({ event, importance, isFollowing, followerCount, onToggleFollow }) => {
  const sectionBg = useColorModeValue('gray.50', 'gray.750');
  const headingColor = useColorModeValue('gray.700', 'gray.200');

  // 获取重要性文本
  const getImportanceText = () => {
    const levelMap = {
      'S': '极高',
      'A': '高',
      'B': '中',
      'C': '低'
    };
    return levelMap[importance.level] || '中';
  };

  // 格式化涨跌幅数字
  const formatChange = (value) => {
    if (value === null || value === undefined) return '--';
    const prefix = value > 0 ? '+' : '';
    return `${prefix}${value.toFixed(2)}%`;
  };

  return (
    <Box bg={sectionBg} p={3} borderRadius="md" position="relative">
      {/* 粉色圆角标签（左上角绝对定位） */}
      {event.related_avg_chg !== null && event.related_avg_chg !== undefined && (
        <Box
          position="absolute"
          top="-8px"
          left="-8px"
          bg="pink.500"
          color="white"
          px={3}
          py={1}
          borderRadius="full"
          fontSize="sm"
          fontWeight="bold"
          boxShadow="md"
          zIndex={1}
        >
          {formatChange(event.related_avg_chg)}
        </Box>
      )}

      {/* 第一行：标题 + 关注按钮 */}
      <Flex align="center" justify="space-between" mb={3} gap={4}>
        {/* 标题 */}
        <Heading size="md" color={headingColor} flex={1}>
          {event.title}
        </Heading>

        {/* 关注按钮 */}
        <EventFollowButton
          isFollowing={isFollowing}
          followerCount={followerCount}
          onToggle={onToggleFollow}
          size="sm"
          showCount={true}
        />
      </Flex>
      {/* 第二行：浏览数 + 日期 */}
      <Flex align="left" mb={3} gap={4}>
        {/* 浏览数 */}
        <HStack spacing={1}>
          <ViewIcon color="gray.400" boxSize={4} />
          <Text fontSize="sm" color="gray.400" whiteSpace="nowrap">
            {(event.view_count || 0).toLocaleString()}次浏览
          </Text>
        </HStack>

        {/* 日期 */}
        <Text fontSize="sm" color="red.500" fontWeight="medium" whiteSpace="nowrap">
          {moment(event.created_at).format('YYYY年MM月DD日')}
        </Text>
      </Flex>

      {/* 第三行：涨跌幅指标 + 重要性文本 */}
      <HStack spacing={3} align="center">
        <Box maxW="500px">
          <StockChangeIndicators
            avgChange={event.related_avg_chg}
            maxChange={event.related_max_chg}
            weekChange={event.related_week_chg}
          />
        </Box>

        {/* 重要性文本 */}
        <Box
          bg={importance.bgColor}
          borderWidth="2px"
          borderColor={importance.badgeBg}
          px={2}
          py={1}
          borderRadius="md"
        >
          <Text fontSize="sm" color={importance.badgeBg} whiteSpace="nowrap" fontWeight="medium">
            重要性：{getImportanceText()}
          </Text>
        </Box>
      </HStack>
    </Box>
  );
};

export default EventHeaderInfo;