<template>
  <el-dialog
    v-model="activityStore.showSurvey"
    title=""
    width="480px"
    :close-on-click-modal="false"
    class="satisfaction-survey-dialog"
    @close="handleClose"
  >
    <div class="flex flex-col gap-5">
      <!-- 头部 -->
      <div class="text-center">
        <div class="text-2xl mb-2">📋</div>
        <h3 class="text-lg font-bold text-gray-800 mb-1">使用体验反馈</h3>
        <p class="text-xs text-gray-400">您的反馈对我们非常重要，仅需1分钟</p>
      </div>

      <!-- Q1: 满意度评分 -->
      <div class="flex flex-col gap-2">
        <label class="text-sm font-medium text-gray-700">整体满意度</label>
        <div class="flex items-center justify-center gap-2">
          <button
            v-for="star in 5"
            :key="star"
            class="text-2xl transition-all duration-200 cursor-pointer hover:scale-125 border-none bg-transparent p-1"
            :class="star <= form.rating ? 'grayscale-0' : 'grayscale opacity-30'"
            @click="form.rating = star"
          >
            ⭐
          </button>
        </div>
        <div class="text-center text-xs text-gray-400">
          {{ ratingLabels[form.rating] || '请点击星星评分' }}
        </div>
      </div>

      <!-- Q2: 最喜欢的功能 -->
      <div class="flex flex-col gap-2">
        <label class="text-sm font-medium text-gray-700">最喜欢的功能（可多选）</label>
        <div class="flex flex-wrap gap-2">
          <button
            v-for="feat in featureOptions"
            :key="feat.value"
            class="px-3 py-1.5 rounded-full text-xs border transition-all duration-200 cursor-pointer"
            :class="
              form.favoriteFeatures.includes(feat.value)
                ? 'bg-indigo-50 border-indigo-300 text-indigo-600'
                : 'bg-white border-gray-200 text-gray-500 hover:border-gray-300'
            "
            @click="toggleFeature(feat.value)"
          >
            {{ feat.label }}
          </button>
        </div>
      </div>

      <!-- Q3: 改进建议 -->
      <div class="flex flex-col gap-2">
        <label class="text-sm font-medium text-gray-700">改进建议（选填）</label>
        <el-input
          v-model="form.suggestion"
          type="textarea"
          :rows="3"
          placeholder="说说您的想法，帮助我们做得更好..."
          maxlength="300"
          show-word-limit
        />
      </div>

      <!-- 提交按钮 -->
      <div class="flex gap-3 mt-1">
        <el-button class="flex-1" @click="handleClose">下次再说</el-button>
        <el-button
          type="primary"
          class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500! border-none!"
          :disabled="form.rating === 0"
          @click="handleSubmit"
        >
          提交反馈
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { useActivityStore } from '@/stores'
import { submitSurvey } from '@/api'
import { push } from 'notivue'

const activityStore = useActivityStore()

const form = reactive({
  rating: 0,
  favoriteFeatures: [] as string[],
  suggestion: '',
})

const ratingLabels: Record<number, string> = {
  1: '非常不满意',
  2: '不太满意',
  3: '一般',
  4: '比较满意',
  5: '非常满意',
}

const featureOptions = [
  { value: 'post', label: '帖子/实践' },
  { value: 'video', label: '视频' },
  { value: 'question', label: '问吧' },
  { value: 'sign', label: '签到/任务' },
  { value: 'store', label: '积分商城' },
  { value: 'auction', label: '限时竞拍' },
  { value: 'lottery', label: '每日抽奖' },
  { value: 'column', label: '专栏/专访' },
]

const toggleFeature = (value: string) => {
  const idx = form.favoriteFeatures.indexOf(value)
  if (idx >= 0) {
    form.favoriteFeatures.splice(idx, 1)
  } else {
    form.favoriteFeatures.push(value)
  }
}

const handleSubmit = async () => {
  if (form.rating === 0) return

  try {
    await submitSurvey({
      rating: form.rating,
      favoriteFeatures: form.favoriteFeatures,
      suggestion: form.suggestion,
    })
    push.success('感谢您的反馈！')
    activityStore.markSurveySubmitted()
  } catch {
    push.success('感谢您的反馈！')
    activityStore.markSurveySubmitted()
  }
}

const handleClose = () => {
  activityStore.showSurvey = false
}
</script>

<style>
.satisfaction-survey-dialog .el-dialog__header {
  display: none;
}
.satisfaction-survey-dialog .el-dialog__body {
  padding: 24px;
}
</style>
