<script setup lang="ts">
import { computed, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import chestImage from '@/assets/chest.png'
import { navItems } from '@/app/navigation/nav'
import KnowledgeLauncher from '@/components/chat/KnowledgeLauncher.vue'

const emit = defineEmits<{
  (e: 'select-folder', folder: any): void
  (e: 'open-knowledge-hud'): void
}>()

const router = useRouter()
const route = useRoute()
const isExpanded = ref(false)
const showKnowledgeLauncher = ref(false)
const visibleShortcutCount = ref(0)
const panelId = 'chat-hud-nav-panel'
let shortcutRevealTimer: ReturnType<typeof setTimeout> | null = null

const visibleNavItems = computed(() => navItems.slice(0, visibleShortcutCount.value))

function isActive(path: string) {
  return route.path === path || route.path.startsWith(`${path}/`)
}

function clearShortcutRevealTimer() {
  if (shortcutRevealTimer) {
    clearTimeout(shortcutRevealTimer)
    shortcutRevealTimer = null
  }
}

function revealNextShortcut(index = 1) {
  visibleShortcutCount.value = index
  if (index >= navItems.length) {
    shortcutRevealTimer = null
    return
  }
  shortcutRevealTimer = setTimeout(() => {
    revealNextShortcut(index + 1)
  }, 68)
}

function toggleExpanded() {
  isExpanded.value = !isExpanded.value
  if (!isExpanded.value) {
    showKnowledgeLauncher.value = false
  }
}

function handleNavigate(path?: string) {
  if (path === '/knowledge') {
    showKnowledgeLauncher.value = false
    isExpanded.value = false
    emit('open-knowledge-hud')
    return
  }
  
  // Reset states for other paths
  isExpanded.value = false
  showKnowledgeLauncher.value = false
  
  if (!path) return
  void router.push(path)
}

function handleSelectFolder(folder: any) {
  showKnowledgeLauncher.value = false
  isExpanded.value = false
  emit('select-folder', folder)
}

watch(isExpanded, (expanded) => {
  clearShortcutRevealTimer()
  if (!expanded) {
    visibleShortcutCount.value = 0
    showKnowledgeLauncher.value = false
    return
  }
  revealNextShortcut()
})

onUnmounted(() => {
  clearShortcutRevealTimer()
})
</script>

<template>
  <nav
    class="nav-shortcut-row"
    :class="{ expanded: isExpanded }"
    aria-label="Primary navigation"
    data-testid="nav-shortcut-row"
  >
    <button
      class="nav-trigger"
      type="button"
      :class="{ expanded: isExpanded }"
      :aria-expanded="isExpanded"
      :aria-controls="panelId"
      aria-label="鎵撳紑瀵艰埅"
      @click="toggleExpanded"
    >
      <span class="trigger-shell">
        <span class="trigger-scan"></span>
        <img class="trigger-image" :src="chestImage" alt="" aria-hidden="true" />
      </span>
      <span class="trigger-label" :class="{ hidden: isExpanded }" aria-hidden="true">Menu</span>
    </button>

    <div :id="panelId" class="nav-panel" :class="{ expanded: isExpanded }">
      <template v-if="isExpanded">
        <span class="panel-scan"></span>
        <span class="panel-line panel-line-top"></span>
        <span class="panel-line panel-line-bottom"></span>
        <TransitionGroup name="shortcut-stagger" tag="div" class="shortcut-list">
          <div
            v-for="(item, index) in visibleNavItems"
            :key="item.path"
            class="shortcut-wrapper"
          >
            <button
              type="button"
              class="shortcut"
              :class="{ 
                active: isActive(item.path) || (item.path === '/knowledge' && showKnowledgeLauncher) 
              }"
              :style="{ '--shortcut-delay': `${index * 58}ms` }"
              :title="item.name"
              :aria-label="item.name"
              :aria-current="isActive(item.path) ? 'page' : undefined"
              data-testid="nav-shortcut"
              @click="handleNavigate(item.path)"
            >
              <span class="shortcut-core">
                <span class="shortcut-frame"></span>
                <span class="shortcut-edge shortcut-edge-top"></span>
                <span class="shortcut-edge shortcut-edge-bottom"></span>
                <span class="shortcut-beam"></span>
                <span class="shortcut-pulse"></span>
                <component :is="item.icon" :size="14" class="shortcut-icon" aria-hidden="true" />
              </span>
            </button>

            <Transition name="launcher">
              <KnowledgeLauncher 
                v-if="item.path === '/knowledge' && showKnowledgeLauncher" 
                @select-folder="handleSelectFolder"
              />
            </Transition>
          </div>
        </TransitionGroup>
      </template>
    </div>
  </nav>
</template>

<style scoped>
.nav-shortcut-row {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  isolation: isolate;
}

.shortcut-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: inherit;
  overflow: visible;
}

.trigger-shell {
  position: relative;
  display: flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.trigger-shell::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.22), rgba(103, 232, 249, 0.06) 48%, transparent 74%);
  opacity: 0.52;
  filter: blur(4px);
  animation: arc-reactor-glow 4.8s linear infinite;
}

.trigger-scan {
  position: absolute;
  inset: -25% 42% -25% -42%;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.22), transparent);
  transform: translateX(-120%) skewX(-20deg);
  opacity: 0.75;
  animation: trigger-scan 3.2s linear infinite;
}

.trigger-image {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 8px rgba(103, 232, 249, 0.24))
    drop-shadow(0 0 16px rgba(103, 232, 249, 0.14));
  animation: arc-reactor-flicker 4.8s linear infinite;
}

.nav-trigger:hover .trigger-image,
.nav-trigger:focus-visible .trigger-image,
.nav-shortcut-row.expanded .trigger-image {
  filter:
    drop-shadow(0 0 9px rgba(103, 232, 249, 0.34))
    drop-shadow(0 0 16px rgba(103, 232, 249, 0.16));
}

.trigger-label {
  display: inline-block;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(186, 230, 253, 0.92);
  text-shadow: 0 0 8px rgba(103, 232, 249, 0.16);
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    max-width 0.22s ease;
  max-width: 72px;
  overflow: hidden;
  white-space: nowrap;
}

.trigger-label.hidden {
  opacity: 0;
  transform: translateX(-6px);
  max-width: 0;
}

.nav-trigger:focus-visible {
  outline: 2px solid rgba(103, 232, 249, 0.66);
  outline-offset: 2px;
}

.nav-panel {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-8px);
  transform-origin: left center;
  white-space: nowrap;
  transition:
    max-width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.24s ease,
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.shortcut-list {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-panel.expanded {
  max-width: 420px;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  overflow: visible;
  z-index: 100;
}

.panel-scan,
.panel-line {
  position: absolute;
  pointer-events: none;
}

.panel-scan {
  inset: 1px auto 1px -18%;
  width: 20%;
  background: linear-gradient(90deg, transparent, rgba(103, 232, 249, 0.18), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}

.nav-panel.expanded .panel-scan {
  opacity: 1;
  animation: panel-scan 1.2s ease-out 1;
}

.panel-line {
  left: 0;
  right: 0;
  height: 1px;
}

.panel-line-top {
  top: 1px;
  background: linear-gradient(90deg, rgba(103, 232, 249, 0), rgba(103, 232, 249, 0.4), rgba(103, 232, 249, 0));
}

.panel-line-bottom {
  bottom: 1px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0), rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0));
}

.shortcut {
  --shortcut-delay: 0ms;
  position: relative;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: transparent;
  text-decoration: none;
  color: rgba(148, 163, 184, 0.84);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    color var(--transition-fast),
    filter var(--transition-fast);
}

.shortcut-stagger-enter-active {
  transition:
    opacity 0.3s ease,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--shortcut-delay);
}

.shortcut-stagger-enter-from {
  opacity: 0;
  transform: translateX(-10px) scale(0.92);
}

.shortcut-stagger-enter-to {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.shortcut::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: -4px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.16), rgba(245, 158, 11, 0.14), transparent);
}

.shortcut:last-of-type::after {
  display: none;
}

.shortcut-core {
  position: relative;
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(20% 0, 100% 0, 100% 80%, 80% 100%, 0 100%, 0 20%);
  background: linear-gradient(180deg, rgba(11, 19, 32, 0.94), rgba(7, 11, 19, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 0 0 1px rgba(56, 189, 248, 0.06);
  overflow: hidden;
}

.shortcut-frame,
.shortcut-edge,
.shortcut-beam,
.shortcut-pulse {
  position: absolute;
  pointer-events: none;
}

.shortcut-frame {
  inset: 0;
  clip-path: inherit;
  border: 1px solid rgba(56, 189, 248, 0.14);
}

.shortcut-edge {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.5), transparent);
  opacity: 0.55;
}

.shortcut-edge-top {
  top: 4px;
  left: 5px;
  right: 9px;
}

.shortcut-edge-bottom {
  bottom: 4px;
  left: 9px;
  right: 5px;
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.44), transparent);
}

.shortcut-beam {
  inset: -30% 46% -30% -38%;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.22), transparent);
  opacity: 0;
  transform: translateX(-130%) skewX(-22deg);
  transition: opacity var(--transition-fast), transform 0.45s ease;
}

.shortcut-pulse {
  inset: 6px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 72%);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.shortcut-icon {
  position: relative;
  z-index: 1;
  transition: transform var(--transition-fast), filter var(--transition-fast);
}

.shortcut:hover,
.shortcut:focus-visible {
  color: rgba(241, 245, 249, 0.98);
  transform: translateY(-1px);
}

.shortcut:hover .shortcut-frame,
.shortcut:focus-visible .shortcut-frame {
  border-color: rgba(56, 189, 248, 0.24);
}

.shortcut:hover .shortcut-beam,
.shortcut:focus-visible .shortcut-beam,
.shortcut.active .shortcut-beam {
  opacity: 1;
  transform: translateX(155%) skewX(-22deg);
}

.shortcut:hover .shortcut-pulse,
.shortcut:focus-visible .shortcut-pulse,
.shortcut.active .shortcut-pulse {
  opacity: 1;
  transform: scale(1);
}

.shortcut:hover .shortcut-icon,
.shortcut:focus-visible .shortcut-icon,
.shortcut.active .shortcut-icon {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.34));
}

.shortcut.active {
  color: #67e8f9;
}

.shortcut.active .shortcut-core {
  background:
    radial-gradient(circle at top center, rgba(56, 189, 248, 0.16), transparent 54%),
    linear-gradient(180deg, rgba(11, 23, 38, 0.98), rgba(7, 11, 18, 1));
  box-shadow:
    inset 0 0 0 1px rgba(56, 189, 248, 0.08),
    0 0 14px rgba(56, 189, 248, 0.12);
}

.shortcut.active .shortcut-frame {
  border-color: rgba(56, 189, 248, 0.32);
}

.shortcut.active::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.96), rgba(245, 158, 11, 0.72), transparent);
  box-shadow: 0 0 9px rgba(56, 189, 248, 0.24);
}

.shortcut:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.66);
  outline-offset: 2px;
}

@keyframes trigger-scan {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }

  100% {
    transform: translateX(175%) skewX(-20deg);
  }
}

@keyframes arc-reactor-flicker {
  0%, 54%, 100% {
    opacity: 0.94;
    transform: scale(1);
    filter:
      drop-shadow(0 0 8px rgba(103, 232, 249, 0.24))
      drop-shadow(0 0 16px rgba(103, 232, 249, 0.14));
  }

  56% {
    opacity: 1;
    transform: scale(1.06);
    filter:
      drop-shadow(0 0 16px rgba(103, 232, 249, 0.44))
      drop-shadow(0 0 30px rgba(103, 232, 249, 0.24));
  }

  57% {
    opacity: 0.74;
    transform: scale(0.985);
  }

  58% {
    opacity: 1;
    transform: scale(1.08);
    filter:
      drop-shadow(0 0 18px rgba(103, 232, 249, 0.54))
      drop-shadow(0 0 36px rgba(103, 232, 249, 0.28));
  }

  60% {
    opacity: 0.86;
    transform: scale(1.01);
  }

  62% {
    opacity: 1;
    transform: scale(1.05);
    filter:
      drop-shadow(0 0 15px rgba(103, 232, 249, 0.4))
      drop-shadow(0 0 28px rgba(103, 232, 249, 0.2));
  }

  66% {
    opacity: 0.94;
    transform: scale(1);
    filter:
      drop-shadow(0 0 8px rgba(103, 232, 249, 0.24))
      drop-shadow(0 0 16px rgba(103, 232, 249, 0.14));
  }
}

@keyframes arc-reactor-glow {
  0%, 54%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }

  56% {
    opacity: 0.8;
    transform: scale(1.18);
  }

  58% {
    opacity: 1;
    transform: scale(1.26);
  }

  62% {
    opacity: 0.72;
    transform: scale(1.14);
  }

  66% {
    opacity: 0.4;
    transform: scale(1);
  }
}

@keyframes panel-scan {
  0% {
    transform: translateX(0) skewX(-18deg);
  }

  100% {
    transform: translateX(560%) skewX(-18deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel,
  .shortcut,
  .shortcut-icon,
  .shortcut-beam,
  .shortcut-pulse,
  .trigger-image,
  .trigger-scan,
  .panel-scan,
  .shortcut-stagger-enter-active {
    transition: none;
    animation: none;
  }

  .trigger-shell::before {
    animation: none;
  }

  .shortcut-stagger-enter-from,
  .shortcut-stagger-enter-to {
    opacity: 1;
    transform: none;
  }

  .shortcut:hover,
  .shortcut:focus-visible,
  .nav-trigger:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  .nav-shortcut-row {
    gap: 8px;
  }

  .nav-panel.expanded {
    gap: 6px;
    max-width: min(100vw - 72px, 420px);
  }

  .shortcut-core {
    width: 27px;
    height: 27px;
  }
}
</style>
