<template>
  <div class="p-3 md:p-4">
    <div
      class="path-glass-bubble rounded-2xl px-4 py-3 flex items-end gap-3 transition-all duration-300"
      :class="focused
        ? isDark
          ? 'border-white/30'
          : 'border-black/20'
        : ''"
    >
      <textarea
        ref="textareaRef"
        v-model="text"
        rows="1"
        :placeholder="placeholder"
        class="flex-1 resize-none bg-transparent text-sm outline-none min-h-[24px] max-h-[120px]"
        :class="isDark
          ? 'text-white/90 placeholder:text-white/25'
          : 'text-gray-800 placeholder:text-gray-400'"
        @keydown.enter.exact.prevent="send"
        @input="autoResize"
        @focus="focused = true"
        @blur="focused = false"
      />
      <button
        :disabled="!canSend"
        class="shrink-0 path-glass-button path-glass-button-sm rounded-xl px-3 transition-all duration-200"
        :class="canSend
          ? 'hover:opacity-80 active:scale-95'
          : 'opacity-30 cursor-not-allowed'"
        aria-label="Send message"
        @click="send"
      >
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { useTheme } from '@/composables/useTheme'

const props = withDefaults(
  defineProps<{
    disabled?: boolean
    placeholder?: string
  }>(),
  {
    disabled: false,
    placeholder: 'Message AIUI...',
  }
)

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

const { isDark } = useTheme()
const text = ref('')
const focused = ref(false)
const textareaRef = ref<HTMLTextAreaElement | null>(null)

const canSend = computed(() => text.value.trim().length > 0 && !props.disabled)

function send() {
  if (!canSend.value) return
  emit('send', text.value.trim())
  text.value = ''
  nextTick(autoResize)
}

function autoResize() {
  const el = textareaRef.value
  if (!el) return
  el.style.height = 'auto'
  el.style.height = Math.min(el.scrollHeight, 120) + 'px'
}
</script>
