// src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js
// 精简信息栏组件（无头部模式下右上角显示）

import React from 'react';
import {
  HStack,
  Badge,
  Text,
  Icon,
  useColorModeValue,
} from '@chakra-ui/react';
import { ViewIcon } from '@chakra-ui/icons';
import EventFollowButton from '../EventCard/EventFollowButton';

/**
 * 精简信息栏组件
 * 在无头部模式下，显示在 CardBody 右上角
 * 包含：重要性徽章、浏览次数、关注按钮
 *
 * @param {Object} props
 * @param {Object} props.event - 事件对象
 * @param {Object} props.importance - 重要性配置对象（包含 level, icon 等）
 * @param {boolean} props.isFollowing - 是否已关注
 * @param {number} props.followerCount - 关注数
 * @param {Function} props.onToggleFollow - 切换关注回调
 */
const CompactMetaBar = ({ event, importance, isFollowing, followerCount, onToggleFollow }) => {
  const viewCountBg = useColorModeValue('white', 'gray.700');
  const viewCountTextColor = useColorModeValue('gray.600', 'gray.300');

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

  return (
    <HStack
      position="absolute"
      top={3}
      right={3}
      spacing={3}
      zIndex={1}
    >
      {/* 重要性徽章 - 与 EventHeaderInfo 样式一致，尺寸略小 - H5 隐藏 */}
      <Badge
        px={3}
        py={1.5}
        borderRadius="full"
        fontSize="sm"
        fontWeight="bold"
        bgGradient={
          importance.level === 'S' ? 'linear(to-r, red.500, red.700)' :
          importance.level === 'A' ? 'linear(to-r, orange.500, orange.700)' :
          importance.level === 'B' ? 'linear(to-r, blue.500, blue.700)' :
          'linear(to-r, gray.500, gray.700)'
        }
        color="white"
        boxShadow="lg"
        display={{ base: 'none', lg: 'flex' }}
        alignItems="center"
        gap={1}
      >
        <Icon as={importance.icon} boxSize={4} />
        <Text>重要性：{getImportanceText()}</Text>
      </Badge>

      {/* 浏览次数 - 添加容器背景以提高可读性 */}
      <HStack
        spacing={1}
        bg={viewCountBg}
        px={2}
        py={1}
        borderRadius="md"
        boxShadow="sm"
      >
        <ViewIcon color="gray.400" boxSize={4} />
        <Text fontSize="sm" color={viewCountTextColor} whiteSpace="nowrap">
          {(event.view_count || 0).toLocaleString()}
        </Text>
      </HStack>

      {/* 关注按钮 */}
      <EventFollowButton
        isFollowing={isFollowing}
        followerCount={followerCount}
        onToggle={onToggleFollow}
        size="sm"
        showCount={true}
      />
    </HStack>
  );
};

export default CompactMetaBar;