<script setup lang="ts">
import { ref, onMounted } from 'vue'
import AgentsLibrary from '@/components/AgentConfiguration/LanguageModel/AgentsLibrary/AgentsLibrary.vue'
import { useConversationStore } from '@/store/conversationStore'
import { v4 as uuidv4 } from 'uuid'
import { useUserStore } from '@/store/userStore'
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import CustomMainHeader from '@/components/CustomMainHeader.vue'

// Use the centralized chat and conversation store
const conversationStore = useConversationStore()
// Get agents and tools
const userStore = useUserStore()
const { userHasFullAccess } = storeToRefs(userStore)

// Router
const router = useRouter()
const route = useRoute()

// References to components
const agentsLibraryRef = ref<InstanceType<typeof AgentsLibrary> | null>(null)
const forceMyAgentsTab = ref<string | undefined>(undefined)

// Check for tab query parameter on mount
onMounted(() => {
  if (route.query.tab) {
    forceMyAgentsTab.value = route.query.tab as string
  }
})

// When an agent is clicked, start a new conversation with that agent preselected.
function onAgentSelect(agentId: string) {
  const conversationId = uuidv4()
  conversationStore.setActiveConversation(conversationId)
  conversationStore.setAgentIds([agentId])
  router.push({ name: 'Home' })
  forceMyAgentsTab.value = 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>

  <!-- Agents Library takes remaining space -->
  <div class="flex-1 overflow-y-auto">
    <div class="py-8">
      <AgentsLibrary
        ref="agentsLibraryRef"
        :userHasAccess="userHasFullAccess"
        :forceTab="forceMyAgentsTab"
        @selectAgent="onAgentSelect"
      />
    </div>
  </div>
</template>
