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

import Sidebar from '@/components/ui/sidebar/Sidebar.vue'
import SidebarContent from '@/components/ui/sidebar/SidebarContent.vue'
import { useNavigation } from '@/composables/useNavigation'
import { useSidebarAutoCollapse } from '@/composables/useSidebarAutoCollapse'
import DataikuLogo from '@/layout/sidebar/DataikuLogo.vue'
import UserMenu from '@/layout/sidebar/UserMenu.vue'
import { inIframe } from '@/utils/navigation'

const { backToTraces } = useNavigation()
const clickCount = ref(0)
const isFlipped = ref(false)

// auto-collapse sidebar on trace navigation
useSidebarAutoCollapse()

function handleTitleClick() {
  if (isFlipped.value) return
  clickCount.value++
  if (clickCount.value >= 5) {
    isFlipped.value = true
  }
}
</script>

<template>
  <Sidebar>
    <SidebarContent>
      <div v-if="!inIframe()" class="min-h-[60.5px] border-b items-center flex gap-2.5 px-4">
        <div class="logo-flip-container h-7 w-7" @click="handleTitleClick">
          <div class="logo-flip-inner h-7 w-7 relative" :class="{ flipped: isFlipped }">
            <div class="logo-flip-front">
              <DataikuLogo class="h-7 w-7" />
            </div>
            <div class="logo-flip-back">
              <i class="dku-icon-diamond-24 text-pink-400" />
            </div>
          </div>
        </div>
        <span
          class="font-semibold text-lg text-foreground/90 tracking-tight cursor-pointer select-none"
          @click="backToTraces"
        >
          Trace Explorer
        </span>
      </div>
      <RouterView name="sidebarContent" />

      <div class="p-2 border-t">
        <UserMenu />
      </div>
    </SidebarContent>
  </Sidebar>
</template>
