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

import CollapseButton from './CollapseButton.vue'
import { Badge } from '@/components/ui/badge'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useFormatters } from '@/composables/useFormatters'
import type { TraceNode } from '@/types/trace'

const props = defineProps<{
  node: TraceNode
  isCollapsed: boolean
}>()

const emit = defineEmits<{
  'toggle-collapse': []
}>()

const { formatMillis } = useFormatters()

const totalTokens = computed(() => props.node.usageMetadata?.totalTokens)

const tokenCountsAreEstimated = computed(
  () => props.node.usageMetadata?.tokenCountsAreEstimated ?? false,
)

const tokenBreakdown = computed(() => {
  const meta = props.node.usageMetadata
  if (!meta?.totalTokens) return null
  return {
    prompt: meta.promptTokens,
    completion: meta.completionTokens,
    total: meta.totalTokens,
    isEstimated: meta.tokenCountsAreEstimated ?? false,
  }
})
</script>

<template>
  <div class="flex-1 flex flex-col min-w-0">
    <!-- Main Row -->
    <div class="flex items-center gap-1.5">
      <!-- Name -->
      <span class="truncate text-sm text-foreground tracking-tight leading-[28px]">
        {{ node.name }}
      </span>

      <!-- Duration Badge -->
      <Badge
        v-if="node.duration"
        variant="outline"
        class="text-[10px] px-1 py-0 h-[18px] text-muted-foreground [&>svg]:size-2.5"
      >
        <i class="dku-icon-clock-12 opacity-70" />
        <span class="font-mono">{{ formatMillis(node.duration) }}</span>
      </Badge>

      <!-- Tokens Badge -->
      <Tooltip v-if="totalTokens">
        <TooltipTrigger as-child>
          <Badge
            variant="outline"
            class="text-[10px] px-1 py-0 h-[18px] text-muted-foreground [&>svg]:size-2.5"
          >
            <i class="dku-icon-llm-12 opacity-70" />
            <span class="font-mono"
              >{{ tokenCountsAreEstimated ? '~' : '' }}{{ totalTokens.toLocaleString() }}</span
            >
          </Badge>
        </TooltipTrigger>
        <TooltipContent v-if="tokenBreakdown">
          <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]">{{
              tokenBreakdown.prompt.toLocaleString()
            }}</span>
            <span class="text-[14px] opacity-80">Completion tokens:</span>
            <span class="text-right font-mono text-[12px]">{{
              tokenBreakdown.completion.toLocaleString()
            }}</span>
            <span class="text-[14px] opacity-80">Total tokens:</span>
            <span class="text-right font-mono text-[12px]">{{
              tokenBreakdown.total.toLocaleString()
            }}</span>
            <span v-if="tokenBreakdown.isEstimated" class="col-span-2 text-[14px] opacity-80 italic"
              >Token counts are estimated</span
            >
          </div>
        </TooltipContent>
      </Tooltip>

      <!-- Expand/Collapse Icon (Far Right) -->
      <div class="ml-auto pl-2 flex items-center">
        <CollapseButton
          :is-collapsed="isCollapsed"
          :has-children="node.children.length > 0"
          @toggle="emit('toggle-collapse')"
        />
      </div>
    </div>
  </div>
</template>
