<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-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" placeholder="例如：裂变增长计划" />
      </div>
      <div class="grid gap-4 md:grid-cols-2">
        <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>
      </div>
      <div>
        <label class="text-xs font-semibold text-mosquito-ink/70">目标用户</label>
        <input class="mos-input mt-2 w-full" v-model="form.audience" placeholder="示例：VIP 用户 / 新注册用户" />
      </div>
      <button class="mos-btn mos-btn-accent w-full" @click="createActivity">保存并进入配置</button>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useActivityStore } from '../stores/activities'

const router = useRouter()
const store = useActivityStore()
const form = ref({
  name: '',
  startDate: '',
  endDate: '',
  audience: ''
})

const createActivity = () => {
  const created = store.create({
    name: form.value.name || '未命名活动',
    description: '请在配置向导中补充活动描述。',
    status: 'draft',
    startTime: form.value.startDate ? new Date(form.value.startDate).toISOString() : new Date().toISOString(),
    endTime: form.value.endDate ? new Date(form.value.endDate).toISOString() : new Date().toISOString(),
    participants: 0,
    config: {
      audience: form.value.audience || '待配置',
      conversion: '待配置',
      reward: '待配置',
      budget: '待配置'
    },
    metrics: {
      visits: 0,
      shares: 0,
      conversions: 0,
      budgetUsed: 0
    }
  })
  router.push(`/activities/${created.id}`)
}
</script>
