// src/components/EventCommentSection/CommentItem.js
/**
 * 单条评论组件
 * 功能：显示用户头像、昵称、时间、评论内容
 */

import React from 'react';
import {
  Box,
  HStack,
  VStack,
  Avatar,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');

const CommentItem = ({ comment }) => {
  const itemBg = useColorModeValue('gray.50', 'gray.700');
  const usernameColor = useColorModeValue('gray.800', 'gray.100');
  const timeColor = useColorModeValue('gray.500', 'gray.400');
  const contentColor = useColorModeValue('gray.700', 'gray.300');

  // 格式化时间
  const formatTime = (timestamp) => {
    const now = moment();
    const time = moment(timestamp);
    const diffMinutes = now.diff(time, 'minutes');
    const diffHours = now.diff(time, 'hours');
    const diffDays = now.diff(time, 'days');

    if (diffMinutes < 1) {
      return '刚刚';
    } else if (diffMinutes < 60) {
      return `${diffMinutes}分钟前`;
    } else if (diffHours < 24) {
      return `${diffHours}小时前`;
    } else if (diffDays < 7) {
      return `${diffDays}天前`;
    } else {
      return time.format('MM-DD HH:mm');
    }
  };

  return (
    <Box
      p={3}
      bg={itemBg}
      borderRadius="md"
      transition="all 0.2s"
      _hover={{
        transform: 'translateY(-2px)',
        boxShadow: 'sm',
      }}
    >
      <HStack align="start" spacing={3}>
        {/* 用户头像 */}
        <Avatar
          size="sm"
          name={comment.author?.username || 'Anonymous'}
          src={comment.author?.avatar}
        />

        {/* 评论内容区 */}
        <VStack align="stretch" flex={1} spacing={1}>
          {/* 用户名和时间 */}
          <HStack spacing={2}>
            <Text fontSize="sm" fontWeight="bold" color={usernameColor}>
              {comment.author?.username || 'Anonymous'}
            </Text>
            <Text fontSize="xs" color={timeColor}>
              {formatTime(comment.created_at)}
            </Text>
          </HStack>

          {/* 评论内容 */}
          <Text fontSize="sm" color={contentColor} lineHeight="1.6">
            {comment.content}
          </Text>
        </VStack>
      </HStack>
    </Box>
  );
};

export default CommentItem;