<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-surface-50/80 dark:bg-surface-900/80 backdrop-blur-md border-t border-surface-200/50 dark:border-surface-700/50 p-4 pb-6">
    <div class="max-w-4xl mx-auto flex items-end gap-3 bg-white dark:bg-surface-800 p-2 rounded-2xl shadow-soft border border-surface-100 dark:border-surface-700/50 focus-within:ring-2 focus-within:ring-primary-500/20 focus-within:border-primary-500/50 transition-all duration-300">
      <!-- 附件按钮组 -->
      <div class="flex gap-1 pb-1">
        <button
          @click="emit('selectFile')"
          class="p-2 rounded-xl text-surface-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200"
          title="发送文件"
        >
          <Paperclip :size="22" stroke-width="2" />
        </button>
        <button
          @click="emit('selectImage')"
          class="p-2 rounded-xl text-surface-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200"
          title="发送图片"
        >
          <Image :size="22" stroke-width="2" />
        </button>
      </div>

      <!-- 输入框 -->
      <div class="flex-1 relative py-1">
        <textarea
          ref="inputRef"
          v-model="inputText"
          @keydown="handleKeydown"
          @input="autoResize"
          placeholder="输入消息..."
          rows="1"
          class="w-full max-h-32 px-2 py-1.5 bg-transparent border-none focus:ring-0 text-surface-900 dark:text-white placeholder-surface-400 resize-none text-[15px] leading-relaxed scrollbar-hide"
        />
      </div>

      <!-- 发送按钮 -->
      <div class="pb-1 pr-1">
        <button
          @click="sendMessage"
          :disabled="!inputText.trim()"
          class="p-2.5 rounded-xl bg-primary-500 text-white shadow-lg shadow-primary-500/30 disabled:opacity-50 disabled:shadow-none disabled:bg-surface-300 dark:disabled:bg-surface-700 hover:bg-primary-600 hover:scale-105 active:scale-95 transition-all duration-200"
        >
          <Send :size="20" stroke-width="2.5" class="ml-0.5" />
        </button>
      </div>
    </div>
    <div class="text-center mt-2">
        <p class="text-[10px] text-surface-400 dark:text-surface-600">Enter 发送 · Shift + Enter 换行</p>
    </div>
  </div>
</template>
<style scoped>
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
</style>
