<script setup lang="ts">
import {
  InputGroup,
  InputGroupTextarea,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
} from '@/components/ui/input-group'
import { Separator } from '@/components/ui/separator'
import { ArrowUp } from 'lucide-vue-next'

const chatInput = ref('')

const handleSend = () => {
  if (!chatInput.value.trim()) return
  
  // TODO: Implement AI chat send functionality
  console.log('Sending message:', chatInput.value)
  chatInput.value = ''
}
</script>

<template>
  <div class="ai-chat-area w-full border-t border-border p-4 bg-neutral-50">
    <InputGroup>
      <InputGroupTextarea 
        v-model="chatInput"
        placeholder="Ask, Search or Chat..." 
        class="min-h-[60px] rounded-lg"
        @keydown.enter.exact.prevent="handleSend"
      />
      <InputGroupAddon>
        <InputGroupText class="ml-auto">
          52% used
        </InputGroupText>
        <Separator orientation="vertical" class="!h-4" />
        <InputGroupButton
          variant="default"
          class="rounded-full"
          :disabled="!chatInput.trim()"
          @click="handleSend"
        >
          <ArrowUp class="size-4" />
          <span class="sr-only">Send</span>
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  </div>
</template>

<style scoped>
.ai-chat-area {
  min-height: 190px;
}
</style>
