<template>
  <div
    v-if="chat.maxContextTokens > 0"
    class="context-bar"
    :title="`${compact(chat.contextTokens)} / ${compact(chat.maxContextTokens)} tokens`"
  >
    <span class="context-bar-pct" :class="fillClass">{{ pct }}%</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useChatStore } from '@/stores/chat.js'

const chat = useChatStore()

const pct = computed(() => {
  if (!chat.maxContextTokens) return 0
  return Math.min(100, Math.round((chat.contextTokens / chat.maxContextTokens) * 100))
})

const fillClass = computed(() => {
  if (pct.value >= 80) return 'is-crit'
  if (pct.value >= 60) return 'is-warn'
  return ''
})

function compact(n) {
  if (n >= 1000) return (n / 1000).toFixed(1).replace('.0', '') + 'k'
  return String(n)
}
</script>

<style scoped>
.context-bar-pct {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-success);
  white-space: nowrap;

  &.is-warn { color: var(--color-warning); }
  &.is-crit { color: var(--color-error); }
}
</style>