<template>
  <div class="bg-black font-sans text-white">
    <div class="rounded-[30px]">
      <div class="flex flex-col">
        <div v-for="(item, index) in faqList" :key="index" class="flex flex-col">
          <div
            @click="toggle(index)"
            class="flex cursor-pointer items-center justify-between py-4 transition-opacity active:opacity-70 md:py-8"
          >
            <h3 class="pr-5 text-[17px] leading-snug font-bold tracking-tight md:text-xl">
              {{ item.question }}
            </h3>

            <ArrowIcon
              :class="[
                'mt-1 h-5 w-5 shrink-0 transition-transform duration-300',
                activeIds.has(index) ? 'rotate-180' : '',
              ]"
            />
          </div>

          <transition
            enter-active-class="transition-all duration-300 ease-out"
            leave-active-class="transition-all duration-200 ease-in"
            enter-from-class="max-h-0 opacity-0"
            enter-to-class="max-h-[500px] opacity-100"
            leave-from-class="max-h-[500px] opacity-100"
            leave-to-class="max-h-0 opacity-0"
          >
            <div v-if="activeIds.has(index)" class="overflow-hidden">
              <div class="pb-6 text-base leading-relaxed text-white/60">
                <p
                  class="mb-6 whitespace-pre-line last:mb-0"
                  v-for="(answer, answerIndex) in item.answer"
                  :key="answerIndex"
                >
                  {{ answer }}
                </p>
              </div>
            </div>
          </transition>

          <div class="h-[1px] w-full bg-[#757575]"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import ArrowIcon from './arrow-icon2.svg?component'

const faqList = ref([
  {
    question: '登陆公共 Apple ID 时，出现“双重验证”提示，且要求输入验证码怎么办？',
    answer: [
      '这是由于有其他用户没有按照教程操作，将公共 Apple ID 绑定手机号码，开启了双重验证所导致。',
      '解决办法：请您先清除浏览器缓存，再刷新本页面，获取新的公共 Apple ID ，接着请按照教程一步一步操作。',
    ],
  },
  {
    question: '手机显示“丢失的 iPhone”，要求联系非官方的私人账号怎么办？',
    answer: [
      '这是因为您在手机设置中登陆了公开账号，导致设备被其他用户设置为“丢失模式”。',
      '解决方法：输入正确的手机锁屏密码即可解除“丢失模式”，随后请从手机设置中 <立即退出公开账号>。切勿相信或添加任何非Hi快官方的私人账号！如有疑问，请通过右下角的官方客服获取帮助。',
    ],
  },
  {
    question: '下载Hi快 App 时提示出现 “App 不可用” 怎么办？',
    answer: [
      '遇到这种情况请首先检查您登录的 Apple ID 地区是否处于 <中国大陆>；或者是否刚切换过地区，Apple 可能还没完成信息同步。',
      '解决办法：重新退出登录 <香港 Apple ID>，再进行下载。',
    ],
  },
  {
    question: '登入 App Store 却提示“验证失败”怎么办？',
    answer: [
      '这种错误场景会出现在您使用 <Apple ID A> 下载Hi快 VPN，然后使用 <Apple ID B> 进行版本更新。',
      '解决办法：登录<Apple ID A>更新Hi快，或者删除旧版本，重新安装新版本。',
    ],
  },
  {
    question: '使用Hi快 App 时却提示 “不能购买此项目” 怎么办？',
    answer: [
      '遇到此情况可能说明您的手机中还存在Hi快 VPN 的 <历史旧版本>，它会与 App Store 版本产生冲突。',
      '解决办法：删除旧版本，重新安装新版本。',
    ],
  },
  {
    question: '下载Hi快 App 时提示出现 “此项目已不再提供” 怎么办？',
    answer: [
      '遇到此情况可能说明您的手机中还存在Hi快 VPN 的 <历史旧版本>，它会与 App Store 版本产生冲突。',
      '解决办法：删除旧版本，重新安装新版本。',
    ],
  },
])

// 1. 使用 reactive 配合 Set 记录所有展开的 ID
const activeIds = reactive(new Set<number>())

// 2. 修改 toggle 逻辑：如果已存在则删除（收起），不存在则添加（展开）
const toggle = (index: number) => {
  if (activeIds.has(index)) {
    activeIds.delete(index)
  } else {
    activeIds.add(index)
  }
}
</script>
