<script setup lang="ts">
import { siteConfig } from '~/config/site'

const route = useRoute()

const breadcrumbs = computed(() => {
  const path = route.path
  if (path === '/') return []

  const parts = path.split('/').filter(Boolean)
  const result: Array<{ label: string; path: string }> = []

  let currentPath = ''
  for (const part of parts) {
    currentPath += `/${part}`
    result.push({
      label: part,
      path: currentPath,
    })
  }

  return result
})
</script>

<template>
  <nav class="sticky top-0 z-40 w-full backdrop-blur-sm border-b"
       style="background-color: color-mix(in srgb, var(--color-bg) 80%, transparent); border-color: var(--color-border);">
    <div class="relative flex h-10 items-center justify-between px-2">
      <!-- 最左边：头像 + 面包屑 -->
      <div class="flex items-center gap-1 min-w-0">
        <NuxtLink to="/" class="shrink-0 hover:opacity-80 transition-opacity">
          <img
            :src="siteConfig.avatar"
            :alt="siteConfig.siteName"
            class="h-6 w-6 rounded-full nav-avatar"
          />
        </NuxtLink>
        <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
          <span class="shrink-0 text-muted-foreground/40">/</span>
          <NuxtLink
            :to="crumb.path"
            class="text-xs font-medium truncate shrink min-w-0 hover:opacity-80 transition-opacity"
            :class="i === breadcrumbs.length - 1 ? 'text-foreground' : 'text-muted-foreground'"
          >
            {{ crumb.label }}
          </NuxtLink>
        </template>
      </div>

      <!-- 最右边：主题切换 -->
      <div class="flex items-center gap-2 shrink-0">
        <LayoutThemeToggle />
      </div>
    </div>
  </nav>
</template>

<style scoped>
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.nav-avatar {
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}

.nav-avatar:hover {
  animation-play-state: running;
}
</style>
