<template>
  <Teleport to="body">
    <!-- 整条（含主条）一起显隐，避免 finish 后先把 visible 关掉但主条仍显示，percent 归零时出现 100→0 的 width 过渡 -->
    <div
      v-show="pageProgressVisible"
      class="pointer-events-none fixed left-0 right-0 top-0 z-[10000] h-3px overflow-hidden"
      role="progressbar"
      :aria-hidden="!pageProgressVisible"
      :aria-valuenow="clamped"
      aria-valuemin="0"
      aria-valuemax="100"
    >
      <!-- 轨道微光 -->

      <div class="absolute inset-0 bg-gradient-to-b from-white/25 to-transparent opacity-40"></div>
      <!-- 主进度条 -->
      <div
        class="page-progress-bar relative h-full origin-left rounded-r-full shadow-[0_0_14px_rgba(99,102,241,0.55)]"
        :style="barStyle"
      >
        <!-- 流光 -->
        <div class="absolute inset-0 overflow-hidden rounded-r-full" aria-hidden="true">
          <div
            class="page-progress-shimmer absolute inset-y-0 w-[40%] -skew-x-[20deg] bg-gradient-to-r from-transparent via-white/35 to-transparent"
          />
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  finishPageProgress,
  pageProgressPercent,
  pageProgressVisible,
  startPageProgress,
} from './usePageProgress'

const clamped = computed(() => Math.min(100, Math.max(0, Math.round(pageProgressPercent.value))))

const barStyle = computed(() => ({
  width: `${clamped.value}%`,
  transition:
    pageProgressPercent.value >= 100
      ? 'width 0.22s cubic-bezier(0.22, 1, 0.36, 1)'
      : 'width 0.2s ease-out',
}))

defineExpose({
  start: startPageProgress,
  finish: finishPageProgress,
})
</script>

<style scoped>
.page-progress-bar {
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 45%, #22d3ee 100%);
}

.page-progress-shimmer {
  animation: page-progress-shimmer 1.25s ease-in-out infinite;
}

@keyframes page-progress-shimmer {
  0% {
    transform: translateX(-120%) skewX(-20deg);
  }
  100% {
    transform: translateX(320%) skewX(-20deg);
  }
}
</style>
