<template>
  <div class="flex gap-2">
    <div class="relative items-center">
      <Input
        id="search"
        type="text"
        placeholder="Search trace nodes..."
        class="pl-9 shadow-none min-w-[250px]"
        v-model="tracesStore.nodesFilters.name"
      />
      <span class="absolute start-0 inset-y-0 flex items-center justify-center pl-3">
        <Search class="text-muted-foreground" :size="16" />
      </span>
    </div>

    <Tooltip :delay-duration="500" v-if="tokenUsage[0]">
      <TooltipTrigger as-child>
        <div
          class="flex px-3 rounded-md items-center border-1 font-light text-sm cursor-help bg-gray-50 text-gray-600"
        >
          <MessageSquareText :size="16" class="mr-1" />
          <span class="font-mono">{{ tokenUsage[0] }}</span>

          <div class="h-full flex px-3">
            <Separator orientation="vertical" class="" />
            <Plus
              class="absolute -translate-x-[7.5px] translate-y-[9px] bg-white rounded-full border"
              :size="16"
            />
          </div>

          <BrainCircuit :size="16" class="mr-1" />
          <span class="font-mono">{{ tokenUsage[1] }}</span>

          <div class="h-full flex px-3">
            <Separator orientation="vertical" class="" />
            <Equal
              class="absolute -translate-x-[7.5px] translate-y-[9px] bg-white rounded-full border"
              :size="16"
            />
          </div>

          <Sigma :size="16" class="mr-1" />
          <span class="font-mono">{{ tokenUsage[2] }}</span>
        </div>
      </TooltipTrigger>

      <TooltipContent side="bottom" class="text-black shadow-md" :arrow-display="true">
        <div class="flex gap-6 text-sm font-light text-white">
          <div class="flex-column gap-2">
            <p>Prompt tokens</p>
            <p>Completion tokens</p>
            <p>Total tokens</p>
          </div>
          <div class="flex-column gap-2 font-mono font-thin align-end">
            <div class="flex justify-end">
              {{ tokenUsage[0] }}
            </div>
            <div class="flex items-center justify-between">
              <Plus :size="16" class="mr-2" />
              {{ tokenUsage[1] }}
            </div>
            <div class="flex items-center justify-between">
              <Equal :size="16" class="mr-2" />
              {{ tokenUsage[2] }}
            </div>
          </div>
        </div>
      </TooltipContent>
    </Tooltip>

    <Tooltip :delay-duration="500" v-if="costTokens[0]">
      <TooltipTrigger as-child>
        <div
          class="flex px-3 rounded-md items-center gap-1 border-1 font-light text-sm cursor-help bg-gray-50 text-gray-600"
        >
          <DollarSign :size="16" />
          <span class="ml-1 font-mono mt-[2px]">{{ costTokens[0] }}</span>
        </div>
      </TooltipTrigger>
      <TooltipContent side="bottom" class="text-black shadow-md" :arrow-display="true">
        <div class="flex gap-6 text-sm font-light text-white">
          <div class="flex-column gap-2">
            <p>Estimated cost</p>
            <p>1k requests</p>
          </div>
          <div class="flex-column gap-2 font-mono font-thin">
            <p>${{ costTokens[0] }}</p>
            <p>${{ costTokens[1] }}</p>
          </div>
        </div>
      </TooltipContent>
    </Tooltip>
  </div>
</template>

<script setup lang="ts">
import {
  BrainCircuit,
  DollarSign,
  Equal,
  MessageSquareText,
  Plus,
  Search,
  Sigma
} from 'lucide-vue-next'
import { computed } from 'vue'

import { Input } from '@/components/ui/input'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import Separator from '@/components/ui/separator/Separator.vue'
import { useTracesStore } from '@/stores/traces'
import { localizeNumber } from '@/utils/formatNumber'

const tracesStore = useTracesStore()

const tokenUsage = computed<(string | undefined)[]>(() => {
  const promptTokens = tracesStore.selectedTrace?.overallTotalPromptTokens
  const completionTokens = tracesStore.selectedTrace?.overallTotalCompletionTokens
  const totalTokens = tracesStore.selectedTrace?.overallTotalTokens

  return [
    localizeNumber(promptTokens),
    localizeNumber(completionTokens),
    localizeNumber(totalTokens)
  ]
})

const costTokens = computed<(string | undefined)[]>(() => {
  const estimatedCost = tracesStore.selectedTrace?.overallEstimatedCost
  const totalTokens = tracesStore.selectedTrace?.overallTotalTokens

  if (!estimatedCost || !totalTokens) return [undefined, undefined]

  const cost1kRequests = estimatedCost * 1_000

  return [localizeNumber(estimatedCost), localizeNumber(cost1kRequests)]
})
</script>
