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

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

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

const { simpleTimeFormatter, preciseTimeFormatter } = useFormatters()

const timeDisplay = computed(() => {
  const raw = props.node.begin || props.node.timestamp
  if (!raw) return null
  return simpleTimeFormatter.format(new Date(raw))
})
</script>

<template>
  <Tooltip v-if="timeDisplay">
    <TooltipTrigger as-child>
      <Badge variant="outline" class="text-foreground/85 h-5">
        <i class="dku-icon-clock-16 opacity-80" />
        <span class="font-mono text-[11px]">{{ timeDisplay }}</span>
      </Badge>
    </TooltipTrigger>
    <TooltipContent>
      <div class="grid grid-cols-[auto_1fr] gap-x-2 gap-y-0.5 leading-5">
        <template v-if="props.node.begin">
          <span class="text-[14px] opacity-80">Begin:</span>
          <span class="text-right font-mono text-[12px]">{{
            preciseTimeFormatter.format(new Date(props.node.begin))
          }}</span>
          <template v-if="props.node.end">
            <span class="text-[14px] opacity-80">End:</span>
            <span class="text-right font-mono text-[12px]">{{
              preciseTimeFormatter.format(new Date(props.node.end))
            }}</span>
          </template>
        </template>
        <template v-else-if="props.node.timestamp">
          <span class="text-[14px] opacity-80">Timestamp:</span>
          <span class="text-right font-mono text-[12px]">{{
            preciseTimeFormatter.format(new Date(props.node.timestamp))
          }}</span>
        </template>
      </div>
    </TooltipContent>
  </Tooltip>
</template>
