<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { Sidebar, SidebarContent, SidebarHeader, useSidebar } from '@/components/ui/sidebar'
import CustomSidebarHeader from '@/components/CustomSidebarHeader.vue'
import UserMenu from '@/components/UserMenu.vue'
import AgentsSidebarContent from '@/components/AgentsSidebarContent.vue'
import AdminSidebarContent from '@/components/admin/AdminSidebarContent.vue'
import CustomSidebarAdminHeader from '@/components/admin/CustomSidebarAdminHeader.vue'

interface Props {
  selectedConversationId?: string | null
}

defineProps<Props>()

const emit = defineEmits<{
  (e: 'selectAgent', id: string): void
  (
    e: 'selectConversation',
    p: {
      conversationId: string
      agentIds: string[]
      modeAgents: boolean
      selectedLlm: string | null
    }
  ): void
  (e: 'conversationDeleted', id?: string): void
  (e: 'new-conversation'): void
  (e: 'view-library'): void
  (e: 'view-library-my-agents'): void
  (e: 'view-monitoring'): void
  (e: 'new-agent'): void
  (e: 'edit-agent', id: string): void
  (e: 'view-home'): void
  (e: 'view-admin-settings'): void
}>()

const route = useRoute()
const { open, openMobile, isMobile } = useSidebar()

const agentsSidebarContentRef = ref<InstanceType<typeof AgentsSidebarContent> | null>(null)

const isAdminPage = computed(() => route.name === 'AdminSettings')
const isSidebarOpen = computed(() => (isMobile.value ? openMobile.value : open.value))

const sidebarContent = ref<InstanceType<typeof SidebarContent> | null>(null)
const hasScrolled = ref(false)

const handleScroll = () => {
  if (sidebarContent.value?.$el) {
    hasScrolled.value = sidebarContent.value.$el.scrollTop > 0
  }
}

function handleViewHome() {
  emit('view-home')
}

function refreshConversations() {
  agentsSidebarContentRef.value?.refreshConversations()
}

function updateConversationTitle(id: string, title: string) {
  agentsSidebarContentRef.value?.updateConversationTitle(id, title)
}

defineExpose({
  refreshConversations,
  updateConversationTitle,
})
</script>

<template>
  <Sidebar collapsible="icon">
    <SidebarHeader
      class="border-1 border-border border-y-0"
      :class="[
        isAdminPage ? 'admin-sidebar-header' : 'bg-primary-alpha-light-10',
        { 'border-b-transparent': !isSidebarOpen },
      ]"
    >
      <CustomSidebarAdminHeader
        v-if="isAdminPage"
        :sidebarOpen="isSidebarOpen"
        @view-home="handleViewHome"
      />

      <CustomSidebarHeader v-else :sidebarOpen="isSidebarOpen" @view-home="handleViewHome" />
    </SidebarHeader>

    <SidebarContent
      ref="sidebarContent"
      class="flex flex-col overflow-y-auto border-x-1 border-border gap-0"
      :class="[
        isAdminPage ? 'admin-sidebar-content' : 'bg-primary-alpha-light-10',
        {
          'border-t-1 border-border': hasScrolled,
          'border-b-1 border-border': isSidebarOpen,
        },
      ]"
      @scroll="handleScroll"
    >
      <!-- Admin Settings Content -->
      <AdminSidebarContent v-if="isAdminPage" :sidebarOpen="isSidebarOpen" />

      <!-- Agents Content -->
      <AgentsSidebarContent
        v-else
        ref="agentsSidebarContentRef"
        :sidebarOpen="isSidebarOpen"
        :selectedConversationId="selectedConversationId"
        @selectAgent="(id) => emit('selectAgent', id)"
        @selectConversation="(p) => emit('selectConversation', p)"
        @conversationDeleted="(id) => emit('conversationDeleted', id)"
        @new-conversation="emit('new-conversation')"
        @view-library="emit('view-library')"
        @view-library-my-agents="emit('view-library-my-agents')"
        @view-monitoring="emit('view-monitoring')"
        @new-agent="emit('new-agent')"
        @edit-agent="(id) => emit('edit-agent', id)"
        @view-home="emit('view-home')"
      />
    </SidebarContent>

    <!-- Footer: User Menu  -->
    <div
      v-if="!isAdminPage"
      class="border-r-1 border-border"
      :class="isAdminPage ? 'admin-sidebar-footer' : 'bg-primary-alpha-light-10'"
    >
      <UserMenu :sidebarOpen="isSidebarOpen" @view-admin-settings="emit('view-admin-settings')" />
    </div>
  </Sidebar>
</template>
