<template>
  <div class="chat-header">
    <button class="btn-icon btn-sidebar-toggle" title="Menu" @click="emit('toggle-sidebar')">
      <i class="ph ph-sidebar"></i>
    </button>

    <div class="chat-header-info">
      <span class="chat-header-title">{{ title }}</span>
      <ProfileBadge :profile-id="chatStore.currentProfileId" />
    </div>

    <ContextBar />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useChatStore } from '@/stores/chat.js'
import { useSessionsStore } from '@/stores/sessions.js'
import ProfileBadge from '@/components/ui/ProfileBadge.vue'
import ContextBar from '@/components/ui/ContextBar.vue'

const emit = defineEmits(['toggle-sidebar'])

const chatStore = useChatStore()
const sessionsStore = useSessionsStore()

const title = computed(() => {
  const session = sessionsStore.sessions.find(s => s.session_id === chatStore.currentId)
  return session?.name || (chatStore.currentId?.slice(0, 8) ?? 'Navi')
})
</script>