<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { TooltipWrapper } from '@/components/ui/tooltip'
import { useNavigation } from '@/composables/useNavigation'
import NodeFiltersContent from '@/components/filters/NodeFiltersContent.vue'
import { useUiStore } from '@/stores/uiStore'

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

<template>
  <div class="flex-1 overflow-y-auto">
    <!-- Back to traces -->
    <div class="p-2 h-[50px] flex items-center">
      <Button
        size="sm"
        variant="link"
        @click="backToTraces"
        class="uppercase text-muted-foreground hover:no-underline [&:hover>span]:underline"
      >
        <i class="dku-icon-arrow-left-16" />
        <span>Back to traces</span>
      </Button>
    </div>

    <!-- Node Filters -->
    <div class="border-b border-t">
      <!-- Header with Clear button -->
      <div class="flex items-center justify-between px-3 py-3 bg-sidebar-accent">
        <span class="text-sm font-medium text-foreground">Node filters</span>
        <Button
          v-if="uiStore.hasActiveNodeFilters"
          variant="link"
          size="sm"
          class="h-auto p-0"
          @click="uiStore.clearNodeFilters"
        >
          Clear
        </Button>
      </div>

      <NodeFiltersContent class="px-3 py-3" />
    </div>
  </div>
</template>
