<template>
  <section class="space-y-6">
    <header class="space-y-2">
      <h1 class="mos-title text-2xl font-semibold">活动配置向导</h1>
      <p class="mos-muted text-sm">分步完成活动配置与发布设置。</p>
    </header>

    <div class="mos-card p-5 space-y-6">
      <div class="flex items-center gap-2 text-xs text-mosquito-ink/70">
        <span v-for="(step, index) in steps" :key="step" class="mos-pill" :class="{ 'opacity-40': index !== currentStep }">
          {{ index + 1 }}. {{ step }}
        </span>
      </div>

      <div v-if="currentStep === 0" class="space-y-4">
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">活动名称</label>
          <input class="mos-input mt-2 w-full" v-model="form.name" />
        </div>
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">描述</label>
          <textarea class="mos-input mt-2 w-full" rows="3" v-model="form.description"></textarea>
        </div>
      </div>

      <div v-if="currentStep === 1" class="space-y-4">
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">目标人群</label>
          <input class="mos-input mt-2 w-full" v-model="form.audience" />
        </div>
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">转化条件</label>
          <input class="mos-input mt-2 w-full" v-model="form.conversion" />
        </div>
      </div>

      <div v-if="currentStep === 2" class="space-y-4">
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">奖励规则</label>
          <input class="mos-input mt-2 w-full" v-model="form.reward" />
        </div>
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">预算/限额</label>
          <input class="mos-input mt-2 w-full" v-model="form.budget" />
        </div>
      </div>

      <div v-if="currentStep === 3" class="space-y-4">
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">开始时间</label>
          <input class="mos-input mt-2 w-full" type="date" v-model="form.startDate" />
        </div>
        <div>
          <label class="text-xs font-semibold text-mosquito-ink/70">结束时间</label>
          <input class="mos-input mt-2 w-full" type="date" v-model="form.endDate" />
        </div>
        <button class="mos-btn mos-btn-accent w-full" @click="saveConfig">保存配置（演示）</button>
      </div>

      <div class="flex items-center justify-between">
        <button class="mos-btn mos-btn-secondary" :disabled="currentStep === 0" @click="prevStep">上一步</button>
        <button class="mos-btn mos-btn-accent" :disabled="currentStep === steps.length - 1" @click="nextStep">下一步</button>
      </div>
    </div>
  </section>
</template>

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

const steps = ['基础信息', '受众与转化', '奖励与预算', '发布设置']
const currentStep = ref(0)
const form = ref({
  name: '裂变增长计划',
  description: '邀请好友注册，获取双倍奖励。',
  audience: '新注册用户与邀请达人',
  conversion: '完成注册并绑定手机号',
  reward: '每邀请 1 人奖励 20 积分',
  budget: '总预算 50,000 积分',
  startDate: '',
  endDate: ''
})

const prevStep = () => {
  if (currentStep.value > 0) currentStep.value--
}

const nextStep = () => {
  if (currentStep.value < steps.length - 1) currentStep.value++
}

const saveConfig = () => {
  // demo placeholder
}
</script>
