<script setup lang="ts">
import { computed } from 'vue'

import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import type { UsageMetadata } from '@/types/trace'

const props = defineProps<{
  usageMetadata?: UsageMetadata
}>()
</script>

<template>
  <Tooltip v-if="props.usageMetadata?.totalTokens">
    <TooltipTrigger as-child>
      <Badge variant="outline" class="text-foreground/85 h-5">
        <i class="dku-icon-llm-16 opacity-80" />
        <span class="font-mono text-[11px]">
          {{ props.usageMetadata?.tokenCountsAreEstimated ? '~' : '' }}
          {{ props.usageMetadata?.totalTokens.toLocaleString() }}
        </span>
      </Badge>
    </TooltipTrigger>
    <TooltipContent v-if="props.usageMetadata">
      <div class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 leading-5">
        <span class="text-[14px] opacity-80">Prompt tokens:</span>
        <span class="text-right font-mono text-[12px]">
          {{ props.usageMetadata?.promptTokens.toLocaleString() }}
        </span>
        <span class="text-[14px] opacity-80">Completion tokens:</span>
        <span class="text-right font-mono text-[12px]">
          {{ props.usageMetadata?.completionTokens.toLocaleString() }}
        </span>
        <span class="text-[14px] opacity-80">Total tokens:</span>
        <span class="text-right font-mono text-[12px]">
          {{ props.usageMetadata?.totalTokens.toLocaleString() }}
        </span>
        <span
          v-if="props.usageMetadata?.tokenCountsAreEstimated"
          class="col-span-2 text-[14px] opacity-80 italic"
        >
          Token counts are estimated
        </span>
      </div>
    </TooltipContent>
  </Tooltip>
</template>
