<script setup>
import { ref } from 'vue'
import { Send, Paperclip, Image } from 'lucide-vue-next'

const emit = defineEmits(['send', 'selectFile', 'selectImage'])

const inputText = ref('')
const inputRef = ref(null)

// 发送消息
function sendMessage() {
  const content = inputText.value.trim()
  if (!content) return
  
  emit('send', content)
  inputText.value = ''
  
  // 重新聚焦
  inputRef.value?.focus()
}

// 处理键盘事件
function handleKeydown(e) {
  // Enter 发送，Shift+Enter 换行
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    sendMessage()
  }
}

// 自动调整高度
function autoResize(e) {
  const target = e.target
  target.style.height = 'auto'
  target.style.height = Math.min(target.scrollHeight, 120) + 'px'
}
</script>

<template>
  <div class="bg-white dark:bg-gray-800 border-t border-surface-200 dark:border-gray-700 p-4">
    <div class="flex items-end gap-3">
      <!-- 附件按钮 -->
      <div class="flex gap-1">
        <button
          @click="emit('selectFile')"
          class="p-2 rounded-lg hover:bg-surface-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
          title="发送文件"
        >
          <Paperclip :size="20" />
        </button>
        <button
          @click="emit('selectImage')"
          class="p-2 rounded-lg hover:bg-surface-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
          title="发送图片"
        >
          <Image :size="20" />
        </button>
      </div>

      <!-- 输入框 -->
      <div class="flex-1 relative">
        <textarea
          ref="inputRef"
          v-model="inputText"
          @keydown="handleKeydown"
          @input="autoResize"
          placeholder="输入消息... (Enter 发送, Shift+Enter 换行)"
          rows="1"
          class="w-full px-4 py-2 bg-surface-50 dark:bg-gray-700 border border-surface-200 dark:border-gray-600 rounded-xl resize-none focus:outline-none focus:border-primary-400 transition-colors text-gray-900 dark:text-white placeholder-gray-400"
        />
      </div>

      <!-- 发送按钮 -->
      <button
        @click="sendMessage"
        :disabled="!inputText.trim()"
        class="p-3 rounded-xl bg-primary-500 text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-primary-600 transition-colors"
      >
        <Send :size="20" />
      </button>
    </div>
  </div>
</template>
