// src/components/EventCommentSection/CommentInput.js
/**
 * 评论输入框组件
 * 功能：输入评论内容、字数限制、发布按钮
 */

import React from 'react';
import {
  Box,
  Textarea,
  Button,
  HStack,
  Text,
  useColorModeValue,
} from '@chakra-ui/react';

const CommentInput = ({
  value,
  onChange,
  onSubmit,
  isSubmitting,
  maxLength = 500,
  placeholder = '说点什么...',
}) => {
  const bgColor = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.600');
  const textColor = useColorModeValue('gray.600', 'gray.400');
  const countColor = useColorModeValue('gray.500', 'gray.500');

  const handleKeyDown = (e) => {
    // Ctrl/Cmd + Enter 快捷键提交
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
      onSubmit();
    }
  };

  return (
    <Box>
      <Textarea
        value={value}
        onChange={onChange}
        onKeyDown={handleKeyDown}
        placeholder={placeholder}
        bg={bgColor}
        borderColor={borderColor}
        color={textColor}
        rows={3}
        maxLength={maxLength}
        resize="vertical"
        _hover={{
          borderColor: 'blue.300',
        }}
        _focus={{
          borderColor: 'blue.500',
          boxShadow: '0 0 0 1px var(--chakra-colors-blue-500)',
        }}
      />
      <HStack justify="space-between" mt={2}>
        <Text fontSize="sm" color={countColor}>
          {value.length}/{maxLength}
          {value.length === 0 && ' · Ctrl+Enter 快速发布'}
        </Text>
        <Button
          colorScheme="blue"
          size="sm"
          onClick={onSubmit}
          isLoading={isSubmitting}
          isDisabled={!value.trim() || isSubmitting}
        >
          发布
        </Button>
      </HStack>
    </Box>
  );
};

export default CommentInput;