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

import TraceNodeCostBadge from './badges/TraceNodeCostBadge.vue'
import TraceNodeDurationBadge from './badges/TraceNodeDurationBadge.vue'
import TraceNodeTimeBadge from './badges/TraceNodeTimeBadge.vue'
import TraceNodeTokensBadge from './badges/TraceNodeTokensBadge.vue'
import TraceNodeTypeBadge from './badges/TraceNodeTypeBadge.vue'
import { Button } from '@/components/ui/button'
import { TooltipWrapper } from '@/components/ui/tooltip'
import { Switch } from '@/components/ui/switch'
import type { TraceNode } from '@/types/trace'
import { useCopyToClipboard } from '@/composables/useCopyToClipboard'
import { classifyNodeGroup, getGroupColor, getGroupIcon } from '@/utils/nodeGroups'
import { useUiStore, type NodeViewMode } from '@/stores/uiStore'
import { WT1iser } from '@/services/wt1'

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

const uiStore = useUiStore()
const { copy } = useCopyToClipboard()

function copyNode() {
  copy(JSON.stringify(props.node, null, 2))
}

const nodeGroup = computed(() => classifyNodeGroup(props.node))
const nodeColor = computed(() => getGroupColor(props.node))
const nodeIcon = computed(() => getGroupIcon(nodeGroup.value))

function handleNodeViewChange(mode: NodeViewMode) {
  uiStore.nodeViewMode = mode
  WT1iser.nodeViewChange(mode)
}
</script>

<template>
  <div class="@container p-3">
    <div class="flex justify-between gap-3 @max-[700px]:flex-col">
      <!-- Icon, name & badges -->
      <div class="flex gap-3 items-center">
        <div
          :style="`background-color: ${nodeColor}`"
          class="flex-none w-10 h-10 rounded-md flex items-center justify-center text-white/90"
        >
          <i :class="`${nodeIcon}-20`" />
        </div>

        <div class="flex-1 min-w-0 flex flex-col gap-0.5">
          <h2 class="text-base font-medium text-foreground truncate leading-snug">
            {{ node.name }}
          </h2>

          <!-- Metadata Row -->
          <div class="flex items-center gap-2 flex-wrap">
            <TraceNodeTypeBadge :node-group="nodeGroup" />
            <TraceNodeDurationBadge :duration="node.duration" />
            <TraceNodeTimeBadge :node="node" />
            <TraceNodeTokensBadge :usage-metadata="node.usageMetadata" />
            <TraceNodeCostBadge :usage-metadata="node.usageMetadata" />
          </div>
        </div>
      </div>

      <!-- Actions -->
      <div class="flex items-center @max-[700px]:justify-end gap-3">
        <!-- Raw Mode Switch -->
        <label
          class="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer select-none p-2 rounded-sm"
        >
          <Switch
            :model-value="uiStore.nodeViewMode === 'raw'"
            @update:model-value="handleNodeViewChange($event ? 'raw' : 'formatted')"
          />
          Switch to raw mode
        </label>

        <!-- Copy Node -->
        <TooltipWrapper content="Copy node" side="left">
          <Button variant="ghost" size="icon-xs" class="flex-none" @click="copyNode">
            <i key="copy" class="dku-icon-copy-16" />
          </Button>
        </TooltipWrapper>
      </div>
    </div>
  </div>
</template>
