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

import Explorer from './explorer/Explorer.vue'
import Timeline from './timeline/Timeline.vue'
import Tree from './tree/Tree.vue'
import NodeFiltersContent from '@/components/filters/NodeFiltersContent.vue'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
} from '@/components/ui/dropdown-menu'
import { useSidebar } from '@/components/ui/sidebar'
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { useUiStore, type TraceViewMode } from '@/stores/uiStore'
import { WT1iser } from '@/services/wt1'

const uiStore = useUiStore()
const { open } = useSidebar()

onMounted(() => {
  // This is needed to avoid viewMode switch from settings
  // if no viewMode have been selected manually.
  if (!uiStore.viewMode) {
    uiStore.viewMode = uiStore.effectiveViewMode
  }
})

function handleViewModeChange(mode: string | number) {
  uiStore.viewMode = mode as TraceViewMode
  WT1iser.tabChange(mode as TraceViewMode)
}
</script>

<template>
  <div class="flex flex-col h-full">
    <div
      class="w-full flex items-center border-b border-border overflow-auto gap-2 justify-between"
    >
      <!-- Tabs -->
      <Tabs :model-value="uiStore.effectiveViewMode" @update:model-value="handleViewModeChange">
        <TabsList>
          <TabsTrigger value="explorer">
            <i class="dku-icon-trace-16" />
            Explorer
          </TabsTrigger>
          <TabsTrigger value="timeline">
            <i class="dku-icon-chart-horizontal-stack-bar-16" />
            Timeline
          </TabsTrigger>
          <TabsTrigger value="tree">
            <i class="dku-icon-sitemap-16" />
            Tree
          </TabsTrigger>
        </TabsList>
      </Tabs>

      <div class="flex gap-2 mr-2">
        <!-- Node Filters Dropdown (shown when sidebar is closed) -->
        <DropdownMenu v-if="!open">
          <DropdownMenuTrigger as-child>
            <Button variant="secondary" size="sm" class="relative">
              <i class="dku-icon-filter-16" />
              Filters
              <!-- Active indicator dot -->
              <span
                v-if="uiStore.hasActiveNodeFilters"
                class="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-primary"
              />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" class="w-64 p-3">
            <div class="flex justify-between">
              <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="mt-2" />
          </DropdownMenuContent>
        </DropdownMenu>

        <!-- Hidden for now - we will check how to implement that later
        <Button
          variant="outline"
          size="icon-sm"
          :title="uiStore.collapseAll ? 'Uncollapse all' : 'Collapse all'"
          @click="uiStore.toggleGlobalCollapse()"
        >
          <component :is="uiStore.collapseAll ? UnfoldVertical : FoldVertical" />
        </Button> -->
      </div>
    </div>

    <!-- Content -->
    <div
      class="flex-1 min-h-0 relative w-full"
      :class="uiStore.effectiveViewMode == 'explorer' ? 'overflow-y-auto' : ''"
    >
      <!-- Empty state -->
      <div
        v-if="!uiStore.selectedTraceId"
        class="flex items-center justify-center h-full text-muted-foreground text-sm"
      >
        No trace selected
      </div>
      <!-- Loading state -->
      <div
        v-else-if="uiStore.isLoadingTrace"
        class="flex items-center justify-center h-full text-muted-foreground text-sm"
      >
        Loading...
      </div>
      <!-- Views -->
      <template v-else>
        <Explorer v-if="uiStore.effectiveViewMode === 'explorer'" />
        <Timeline v-else-if="uiStore.effectiveViewMode === 'timeline'" />
        <Tree v-else />
      </template>
    </div>
  </div>
</template>
