<template>
  <div v-if="visible" class="wz-setup-bar" role="status">
    <div class="bar-left">
      <span class="bar-kicker">配置向导</span>
      <span class="bar-step">{{ current.index }}/{{ total }} · {{ current.title }}</span>
      <span class="bar-hint">{{ current.hint }}</span>
    </div>
    <div class="bar-right">
      <button type="button" class="bar-btn" @click="backToWizard">返回向导</button>
      <button v-if="nextId" type="button" class="bar-btn primary" @click="goNext">下一步</button>
      <button v-else type="button" class="bar-btn primary" @click="backToWizard">完成向导</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  isWizardSetupActive,
  loadWizardDraft,
  nextStep,
  saveWizardDraft,
  stepDef,
  WIZARD_STEPS
} from '@/utils/wizardSetup'

const route = useRoute()
const router = useRouter()
const visible = ref(false)
const draft = ref(loadWizardDraft())

const total = WIZARD_STEPS.length
const current = computed(() => stepDef(draft.value.step))
const nextId = computed(() => nextStep(draft.value.step))

function refresh() {
  visible.value = isWizardSetupActive()
  draft.value = loadWizardDraft()
}

function backToWizard() {
  router.push({ name: 'wizard' })
}

function goNext() {
  const n = nextId.value
  if (!n) {
    backToWizard()
    return
  }
  const next = { ...draft.value, step: n, inSetup: true }
  saveWizardDraft(next)
  draft.value = next
  router.push({ name: 'wizard' })
}

onMounted(refresh)
watch(() => route.fullPath, refresh)
</script>

<style scoped>
.wz-setup-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin: 0 8px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(117, 67, 232, 0.16), rgba(155, 124, 255, 0.1));
  border: 1px solid rgba(117, 67, 232, 0.28);
  color: #28213a;
}
.bar-left {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.bar-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #7543e8;
  text-transform: uppercase;
}
.bar-step { font-size: 13px; font-weight: 650; }
.bar-hint {
  font-size: 12px;
  color: #756d85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-right { display: flex; gap: 8px; flex: none; }
.bar-btn {
  appearance: none;
  height: 28px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(40, 33, 58, 0.12);
  background: #fff;
  color: #28213a;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.bar-btn.primary {
  background: #7543e8;
  border-color: transparent;
  color: #fff;
}
</style>
