<template>
  <div class="survey-view">
    <van-nav-bar
      title="问卷调查"
      left-text="返回"
      left-arrow
      @click-left="onBack"
    />

    <div class="survey-content">
      <div v-if="surveyStore.currentQuestion" class="question-container">
        <h2 class="question-title">
          {{ surveyStore.currentQuestionNumber }}. {{ surveyStore.currentQuestion.content }}
          <span v-if="surveyStore.currentQuestion.type === 'MULTIPLE_CHOICE'" class="question-type">(多选)</span>
        </h2>
        <van-checkbox-group v-if="surveyStore.currentQuestion.type === 'MULTIPLE_CHOICE'" v-model="selectedOptions" class="options-container">
          <van-cell-group inset>
            <van-cell
              v-for="option in surveyStore.currentOptions"
              :key="option.code"
              clickable
              @click="toggleOption(option.code)"
            >
              <template #title>
                <span>{{ option.code }}. {{ option.content }}</span>
                <template v-if="option.requiresText && selectedOptions.includes(option.code)">
                  <van-field
                    v-model="textAnswer"
                    type="text"
                    placeholder="请输入具体内容"
                    class="option-text-input"
                    @click.stop
                  />
                </template>
              </template>
              <template #right-icon>
                <van-checkbox
                  :name="option.code"
                  @click.stop
                />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
        <van-radio-group v-else-if="surveyStore.currentQuestion.type === 'SINGLE_CHOICE'" v-model="selectedOption" class="options-container">
          <van-cell-group inset>
            <van-cell
              v-for="option in surveyStore.currentOptions"
              :key="option.code"
              clickable
              @click="selectedOption = option.code"
            >
              <template #title>
                <span>{{ option.code }}. {{ option.content }}</span>
                <template v-if="option.requiresText && selectedOption === option.code">
                  <van-field
                    v-model="textAnswer"
                    type="text"
                    placeholder="请输入具体内容"
                    class="option-text-input"
                    @click.stop
                  />
                </template>
              </template>
              <template #right-icon>
                <van-radio :name="option.code" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div v-else-if="surveyStore.currentQuestion.type === 'TEXT'" class="text-input-container">
          <van-field
            v-model="textAnswer"
            type="textarea"
            rows="4"
            autosize
            placeholder="请输入您的答案"
          />
        </div>
        <div class="button-container">
          <van-button
            type="primary"
            block
            :disabled="!isValidSelection"
            @click="onNextQuestion"
          >
            {{ surveyStore.currentQuestion?.isLast ? '完成' : '下一题' }}
          </van-button>
        </div>
      </div>

      <van-empty v-else description="加载中..." />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { useSurveyStore } from '@/stores/survey';
import { showToast } from 'vant';

const router = useRouter();
const userStore = useUserStore();
const surveyStore = useSurveyStore();

const selectedOption = ref('');
const selectedOptions = ref([]);
const textAnswer = ref('');
const responses = ref([]);

// 计算当前选择是否有效
const isValidSelection = computed(() => {
  const questionType = surveyStore.currentQuestion?.type;
  if (!questionType) return false;

  if (questionType === 'MULTIPLE_CHOICE') {
    // 检查是否有选中的选项需要填写文本
    const needsText = selectedOptions.value.some(code => {
      const option = surveyStore.currentOptions.find(opt => opt.code === code);
      return option?.requiresText;
    });
    return selectedOptions.value.length > 0 && (!needsText || (textAnswer.value?.trim() || '').length > 0);
  } else if (questionType === 'SINGLE_CHOICE') {
    // 检查单选的选项是否需要文本且已填写
    const selectedOpt = surveyStore.currentOptions.find(opt => opt.code === selectedOption.value);
    return selectedOption.value && (!selectedOpt?.requiresText || (textAnswer.value?.trim() || '').length > 0);
  } else if (questionType === 'TEXT') {
    return (textAnswer.value?.trim() || '').length > 0;
  }
  return false;
});

// 切换多选选项
function toggleOption(code) {
  const index = selectedOptions.value.indexOf(code);
  if (index === -1) {
    selectedOptions.value.push(code);
  } else {
    selectedOptions.value.splice(index, 1);
  }
}

// 返回上一页
function onBack() {
  router.back();
}

// 获取下一个问题
async function onNextQuestion() {
  const questionType = surveyStore.currentQuestion.type;
  try {
    let currentSelection = [];

    if (questionType === 'MULTIPLE_CHOICE') {
      currentSelection = selectedOptions.value;
    } else if (questionType === 'SINGLE_CHOICE') {
      currentSelection = [selectedOption.value];
    }

    // 保存当前答案
    const currentResponse = {
      questionId: surveyStore.currentQuestion.id,
      selectedOptions: currentSelection,
      textAnswer: textAnswer.value?.trim() || null
    };

    // 更新或添加当前答案
    const existingIndex = responses.value.findIndex(r => r.questionId === currentResponse.questionId);
    if (existingIndex !== -1) {
      responses.value[existingIndex] = currentResponse;
    } else {
      responses.value.push(currentResponse);
    }

    // 保存答题进度到本地存储
    localStorage.setItem('surveyProgress', JSON.stringify({
      currentQuestionNumber: surveyStore.currentQuestionNumber,
      responses: responses.value
    }));

    // 如果是最后一题，直接提交答案
    if (surveyStore.currentQuestion.isLast) {
      try {
        await surveyStore.submitSurveyResponses(userStore.userId, responses.value);
        showToast('问卷提交成功');
        surveyStore.isCompleted = true;
        // 清除本地存储的进度
        localStorage.removeItem('surveyProgress');
        // 跳转到完成页面
        router.replace('/completed');
        return;
      } catch (error) {
        console.error('提交问卷失败:', error);
        showToast(error.response?.data?.message || '提交失败，请重试');
        return;
      }
    }

    // 获取下一题
    try {
      await surveyStore.fetchNextQuestion(userStore.userId, currentSelection);
      // 重置选项
      selectedOption.value = '';
      selectedOptions.value = [];
      textAnswer.value = '';
    } catch (error) {
      console.error('获取下一题失败:', error);
      showToast(error.response?.data?.message || '获取下一题失败，请重试');
    }
  } catch (error) {
    console.error('问卷处理失败:', error);
    showToast(error.response?.data?.message || '操作失败，请重试');
  }
}

// 初始化问卷
async function initSurvey() {
  try {
    // 检查是否有保存的进度
    const savedProgress = localStorage.getItem('surveyProgress');
    if (savedProgress) {
      const progress = JSON.parse(savedProgress);
      responses.value = progress.responses || [];

      // 恢复当前题目的选项状态
      const lastResponse = responses.value[responses.value.length - 1];
      if (lastResponse) {
        if (lastResponse.selectedOptions.length === 1) {
          selectedOption.value = lastResponse.selectedOptions[0];
        } else {
          selectedOptions.value = lastResponse.selectedOptions;
        }
        textAnswer.value = lastResponse.textAnswer || '';
      }

      // 获取当前问题
      const nextQuestionNumber = progress.currentQuestionNumber + 1;
      await surveyStore.fetchNextQuestion(
        userStore.userId,
        [],
        nextQuestionNumber
      );

      // 如果获取失败（可能是最后一题），尝试获取当前题目
      if (!surveyStore.currentQuestion) {
        await surveyStore.fetchNextQuestion(
          userStore.userId,
          [],
          progress.currentQuestionNumber
        );
      }
    } else {
      surveyStore.resetSurvey(); // 确保重置所有状态
      responses.value = [];
      // 初始化时不传递任何选项
      await surveyStore.fetchNextQuestion(userStore.userId);
    }
  } catch (error) {
    console.error('初始化问卷失败:', error);
    showToast('初始化问卷失败，请重试');
  }
}

// 组件挂载时初始化
onMounted(() => {
  if (!userStore.userId) {
    router.replace('/register');
    return;
  }
  initSurvey();
});
</script>

<style scoped>
.survey-view {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.survey-content {
  padding: 20px;
}

.question-container {
  margin-bottom: 20px;
}

.question-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 0 16px;
}

.options-container {
  margin-top: 20px;
}

.button-container {
  margin-top: 24px;
  padding: 0 16px;
}

.survey-completed {
  padding: 40px 20px;
  text-align: center;
}

.restart-button {
  margin-top: 20px;
  width: 80%;
}

.question-type {
  font-size: 14px;
  color: #666;
  margin-left: 8px;
}

.text-input-container {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  margin: 0 16px;
}

.completion-message {
  margin: 16px 0;
  color: #666;
  line-height: 1.6;
}

.home-button {
  margin-top: 24px;
  width: 80%;
}

.option-text-input {
  margin-top: 8px;
  background-color: #f8f8f8;
  border-radius: 4px;
}
</style>