<template>
  <div v-if="chat.maxContextTokens > 0" class="context-bar">
    <div class="context-bar-header">
      <span class="context-bar-pct" :class="fillClass">{{ pct }}%</span>
      <span class="context-bar-numbers">{{ compact(chat.contextTokens) }} / {{ compact(chat.maxContextTokens) }}</span>
    </div>
    <div class="context-bar-track">
      <div
        class="context-bar-fill"
        :class="fillClass"
        :style="{ width: pct + '%' }"
      />
    </div>
  </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-header {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.context-bar-pct {
  font-size: 13px;
  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); }
}

.context-bar-numbers {
  font-size: 11px;
  color: var(--color-text-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
</style>