<script setup lang="ts">
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
import { useNavigation } from '@/composables/useNavigation'
import { classifyNodeGroup, getGroupColor, getGroupIcon } from '@/utils/nodeGroups'
import { useUiStore } from '@/stores/uiStore'

const uiStore = useUiStore()
const { backToTraces } = useNavigation()
</script>

<template>
  <div class="h-[60.5px] border-b flex items-center shrink-0 z-10 relative">
    <Breadcrumb class="ml-3">
      <BreadcrumbList>
        <!-- Home: Traces -->
        <BreadcrumbItem>
          <BreadcrumbLink
            class="cursor-pointer flex items-center gap-1 text-foreground transition-colors"
            :class="{
              'font-medium': !uiStore.selectedTraceId,
            }"
            @click="backToTraces"
          >
            Traces
          </BreadcrumbLink>
        </BreadcrumbItem>

        <!-- Selected Trace -->
        <template v-if="uiStore.selectedTrace">
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink
              v-if="uiStore.selectedNodeId"
              class="cursor-pointer flex items-center gap-2 text-foreground transition-colors"
              @click="uiStore.selectedNodeId = undefined"
            >
              <span class="max-w-[250px] truncate">
                {{ uiStore.selectedTrace.name }}
              </span>
            </BreadcrumbLink>
            <BreadcrumbPage
              v-else
              class="flex items-center gap-2 animate-in fade-in zoom-in-95 duration-200"
            >
              <i class="dku-icon-comment-multiple-20 rounded-md p-[4px] bg-primary/20 text-primary" />
              <span class="font-medium text-foreground max-w-[250px] truncate">{{
                uiStore.selectedTrace.name
              }}</span>
            </BreadcrumbPage>
          </BreadcrumbItem>
        </template>

        <!-- Selected Node -->
        <template v-if="uiStore.selectedNode">
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage
              class="flex items-center gap-2 animate-in fade-in zoom-in-95 duration-200"
            >
              <i
                :class="[
                  `${getGroupIcon(classifyNodeGroup(uiStore.selectedNode))}-20`,
                  'rounded-md p-[4px]',
                ]"
                :style="{
                  backgroundColor: `color-mix(in srgb, ${getGroupColor(uiStore.selectedNode)} 20%, transparent)`,
                  color: getGroupColor(uiStore.selectedNode),
                }"
              />
              <span class="font-medium text-foreground">{{ uiStore.selectedNode.name }}</span>
            </BreadcrumbPage>
          </BreadcrumbItem>
        </template>
      </BreadcrumbList>
    </Breadcrumb>
  </div>
</template>
