<template>
  <div class="chat-input">
    <a-textarea
      v-model:value="inputText"
      :placeholder="placeholder"
      :auto-size="{ minRows: 1, maxRows: 4 }"
      :disabled="disabled"
      @pressEnter="handlePressEnter"
      class="chat-input__textarea"
    />
    <a-button
      type="primary"
      :disabled="!canSend"
      :loading="disabled"
      @click="handleSend"
      class="chat-input__send"
    >
      <template #icon><SendOutlined /></template>
      发送
    </a-button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Input as AInput, Button as AButton } from 'ant-design-vue'
import { SendOutlined } from '@ant-design/icons-vue'

const ATextarea = AInput.TextArea

interface IProps {
  disabled?: boolean
  placeholder?: string
}

const props = withDefaults(defineProps<IProps>(), {
  disabled: false,
  placeholder: '输入消息，按 Enter 发送...',
})

const emit = defineEmits<{
  send: [message: string]
}>()

const inputText = ref('')

const canSend = computed(() => {
  return inputText.value.trim().length > 0 && !props.disabled
})

function handleSend(): void {
  const message = inputText.value.trim()
  if (!message || props.disabled) return
  emit('send', message)
  inputText.value = ''
}

function handlePressEnter(event: KeyboardEvent): void {
  if (event.shiftKey) return // Shift+Enter for new line
  event.preventDefault()
  handleSend()
}
</script>

<style scoped>
.chat-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
}

.chat-input__textarea {
  flex: 1;
}

.chat-input__send {
  flex-shrink: 0;
  height: 40px;
}
</style>
