// src/views/Community/components/EventCard/ImportanceBadge.js
// 重要性标签通用组件

import React from 'react';
import {
    Box,
    Text,
    HStack,
    VStack,
    Popover,
    PopoverTrigger,
    PopoverContent,
    PopoverBody,
    PopoverArrow,
    Portal,
} from '@chakra-ui/react';
import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';

/**
 * 重要性标签组件（实心样式）
 * @param {Object} props
 * @param {string} props.importance - 重要性等级 ('S' | 'A' | 'B' | 'C')
 * @param {Object} props.position - 定位配置 { top, left, right, bottom }，默认为 { top: 0, left: 0 }
 */
const ImportanceBadge = ({ importance, position = { top: 0, left: 0 } }) => {
    const importanceConfig = getImportanceConfig(importance);

    return (
        <Popover trigger="hover" placement="right" isLazy>
            <PopoverTrigger>
                <Box
                    position="absolute"
                    top={position.top}
                    left={position.left}
                    right={position.right}
                    bottom={position.bottom}
                    zIndex={1}
                    bg={importanceConfig.badgeBg}
                    color={importanceConfig.badgeColor || 'white'}
                    fontSize="11px"
                    fontWeight="bold"
                    w="30px"
                    h="15px"
                    borderRadius="xl"
                    display="flex"
                    alignItems="center"
                    justifyContent="center"
                    cursor="help"
                    boxShadow="sm"
                >
                    {importanceConfig.label}
                </Box>
            </PopoverTrigger>
            <Portal>
                <PopoverContent width="auto" maxW="350px">
                    <PopoverArrow />
                    <PopoverBody p={3}>
                        <VStack align="stretch" spacing={2}>
                            <Text fontSize="sm" fontWeight="bold" mb={1}>
                                重要性等级说明
                            </Text>
                            {getAllImportanceLevels().map(item => (
                                <HStack key={item.level} spacing={2} align="center">
                                    <Box
                                        w="30px"
                                        h="15px"
                                        bg={item.badgeBg}
                                        color={item.badgeColor || 'white'}
                                        fontSize="9px"
                                        fontWeight="bold"
                                        display="flex"
                                        alignItems="center"
                                        justifyContent="center"
                                        borderRadius="lg"
                                        flexShrink={0}
                                    >
                                        {item.label}
                                    </Box>
                                    <Text fontSize="xs" flex={1}>
                                        <Text as="span" fontWeight="bold">
                                            {item.label}：
                                        </Text>
                                        {item.description}
                                    </Text>
                                </HStack>
                            ))}
                        </VStack>
                    </PopoverBody>
                </PopoverContent>
            </Portal>
        </Popover>
    );
};

export default ImportanceBadge;