<script setup lang="ts">
import { computed } from 'vue'
import ChatInterface from '@/components/ChatInterface.vue'
import { useConversationStore } from '@/store/conversationStore'
import CustomMainHeader from '@/components/CustomMainHeader.vue'

defineProps<{
  submit: boolean
}>()

// Use the centralized chat and conversation store
const conversationStore = useConversationStore()
// Get initial message from chat store
const initialMessage = computed(() => {
  const message = conversationStore.initialMessage
  if (message) {
    return {
      text: message.content as string,
      attachments: message.attachments ?? [],
    }
  }
  return null
})

// When a conversation is created, update the store
function onConversationCreated(_payload: { conversationId: string }) {
  conversationStore.setActiveConversation(_payload.conversationId)
}

// When a conversation is updated, update the store
function onConversationUpdated(payload: { conversationId: string; agentIds: string[] }) {
  conversationStore.setAgentIds(payload.agentIds)
}

// Clear initial message after it's been sent
function clearInitialMessage() {
  if (conversationStore.activeConversationId) {
    conversationStore.setInitialMessage(undefined)
  }
}
</script>

<template>
  <header class="w-full h-[58px] md:h-[4px] py-1.5 md:py-0 border-t-[4px] border-t-primary">
    <CustomMainHeader />
  </header>

  <!-- Chat interface takes remaining space -->
  <div v-if="conversationStore.activeConversationId" class="flex-1 overflow-hidden bg-white">
    <ChatInterface
      :agentIds="conversationStore.agentIds"
      :conversationId="conversationStore.activeConversationId!"
      :activeOnlyAgents="true"
      :initialMessage="initialMessage"
      :modeAgents="conversationStore.activeConversation?.modeAgents!"
      :selectedLlm="conversationStore.activeConversation?.selectedLLM ?? null"
      @conversationCreated="onConversationCreated"
      @conversationUpdated="onConversationUpdated"
      @initialMessageSent="clearInitialMessage"
      :submit="submit"
      placeholder="Ask Anything"
    />
  </div>
</template>
