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

const props = defineProps<{
  disabled: boolean
  isPrompting: boolean
}>()

const emit = defineEmits<{
  (e: 'send', text: string): void
  (e: 'cancel'): void
}>()

const text = ref('')

function submit() {
  if (props.disabled) return
  if (props.isPrompting) {
    emit('cancel')
    return
  }
  const t = text.value.trim()
  if (!t) return
  emit('send', t)
  text.value = ''
}

function onKeydown(ev: KeyboardEvent) {
  // Enter (no Shift) → submit. Shift+Enter → newline.
  if (ev.key === 'Enter' && !ev.shiftKey) {
    ev.preventDefault()
    submit()
  }
}
</script>

<template>
  <form
    class="flex gap-2 items-end"
    @submit.prevent="submit"
  >
    <textarea
      v-model="text"
      class="flex-1 resize-none border rounded px-2 py-1 text-sm"
      rows="2"
      :placeholder="disabled ? 'Session ended' : 'Type a prompt...'"
      :disabled="disabled || isPrompting"
      @keydown="onKeydown"
    />
    <button
      type="submit"
      class="px-3 py-1 rounded text-sm font-medium border"
      :class="
        isPrompting
          ? 'bg-yellow-100 border-yellow-300 text-yellow-800 hover:bg-yellow-200'
          : 'bg-blue-600 border-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-300 disabled:border-gray-300 disabled:text-gray-500'
      "
      :disabled="disabled || (!isPrompting && !text.trim())"
    >
      {{ isPrompting ? 'Cancel' : 'Send' }}
    </button>
  </form>
</template>
