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

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

    <ContextBar />

    <GnIconButton icon="ph-files" label="Artifacts" class="btn-artifacts-toggle" @click="emit('toggle-artifacts')">
      <span v-if="artifactCount" class="artifact-count">{{ artifactCount }}</span>
    </GnIconButton>
  </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', 'toggle-artifacts'])

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')
})

const artifactCount = computed(() => chatStore.artifacts.length)
</script>

<style scoped>
.btn-artifacts-toggle {
  position: relative;
}

.artifact-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1;
  background: var(--accent, #4ec9b0);
  color: #11111b;
}
</style>