<template>
  <!-- 发送消息卡片 -->
  <div class="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-4 transform transition-all duration-300 hover:shadow-2xl border border-gray-100">
    <div class="flex items-center mb-3">
      <div class="w-7 h-7 rounded-full bg-primary/10 flex items-center justify-center mr-2">
        <i class="fa-solid fa-paper-plane text-primary"></i>
      </div>
      <h3 class="font-semibold text-sm">发送消息</h3>
    </div>
    
    <div class="space-y-3">
      <textarea 
        v-model="messageInput" 
        rows="3" 
        class="w-full max-w-full px-3 py-2.5 border border-gray-200 rounded-xl transition-all resize-none outline-none bg-gray-50/70 focus:border-primary focus:outline-2 focus:outline-offset-0 focus:outline-primary/30 box-border"
        placeholder="输入要发送的消息..."
        :disabled="!isConnected"
        @keydown.enter.exact="sendMessage"
        @keydown.enter.shift.prevent=""
      ></textarea>
      
      <div class="flex justify-between items-center">
        <div class="text-xs text-gray-400">
          {{ messageInput.length }} 字符
        </div>
        
        <button 
          @click="sendMessage" 
          class="px-5 py-2.5 rounded-xl font-medium transition-all duration-300 flex items-center space-x-2 shadow-md hover:shadow-lg transform hover:-translate-y-0.5" 
          :class="[sendButtonClass, { 'opacity-70': !isConnected || messageInput.trim() === '' }]" 
          :disabled="!isConnected || messageInput.trim() === ''"
        >
          <i class="fa-solid fa-paper-plane"></i>
          <span>发送</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// Props
const props = defineProps({
  isConnected: {
    type: Boolean,
    required: true
  }
});

// Emits
const emit = defineEmits(['send-message']);

// Refs
const messageInput = ref('');

// Computed
const sendButtonClass = computed(() => {
  return props.isConnected 
    ? 'bg-[#165DFF] text-white hover:bg-[#1453e0] shadow-md hover:shadow-lg' 
    : 'bg-gray-400 text-gray-900 cursor-not-allowed';
});

// Methods
const sendMessage = () => {
  if (!props.isConnected || messageInput.value.trim() === '') {
    return;
  }
  
  const message = messageInput.value.trim();
  emit('send-message', message);
  messageInput.value = '';
};
</script>