<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps<{ disabled?: boolean }>()
const emit = defineEmits<{ send: [question: string] }>()

const input = ref('')

function send() {
  const q = input.value.trim()
  if (!q || props.disabled) return
  emit('send', q)
  input.value = ''
}

function handleKeydown(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    send()
  }
}
</script>

<template>
  <div class="border-t border-dark-700 bg-dark-900 px-4 py-3">
    <div class="max-w-4xl mx-auto flex gap-3">
      <textarea
        v-model="input"
        @keydown="handleKeydown"
        :disabled="disabled"
        placeholder="Ask a question about your data..."
        rows="1"
        class="input-field resize-none min-h-[40px] max-h-[120px]"
      />
      <button @click="send" :disabled="!input.trim() || disabled" class="btn-primary shrink-0">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
        </svg>
      </button>
    </div>
  </div>
</template>
