<template>
  <div class="font-sans text-white">
    <div class="flex flex-col gap-[10px]">
      <div
        v-for="item in downloadMethods"
        :key="item.id"
        @click="toggle(item.id)"
        class="group relative flex flex-col rounded-[30px] border-[4px] border-white bg-black pt-4 pb-2 transition-all md:pb-6"
      >
        <div class="px-4 md:pl-[42px]">
          <div
            class="flex flex-wrap items-center gap-x-2 text-sm leading-tight font-bold md:text-2xl"
          >
            <StartIcon v-if="item.isHot" class="size-[20px] md:size-[30px]" />
            <span>{{ item.title }}</span>

            <span v-if="item.subtitle" class="font-medium">——{{ item.subtitle }}</span>

            <span v-if="item.highlight" class="font-black text-[#FF00FF]"
              >——{{ item.highlight }}</span
            >
          </div>

          <!--  打开按钮      -->
          <div
            class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100"
          >
            <div
              v-show="activeId !== item.id"
              class="mt-[16px] flex items-center gap-[10px] md:mt-[60px] md:text-xl"
            >
              <span class="tracking-tight">点击展开详情</span>
              <ArrowIcon class="size-[12px] md:size-[18px]" />
            </div>
          </div>
        </div>

        <div v-if="activeId === item.id" class="px-2 pt-4 md:pt-8">
          <div
            class="animate-in fade-in zoom-in-95 border-t-2 border-white pt-[10px] text-[15px] leading-relaxed duration-200 md:pt-[20px]"
          >
            <!--  内容区域 (点击图片不收起，只有特定的关闭按钮收起) -->
            <div class="relative px-2" @click.stop>
              <div
                class="flex items-center justify-end gap-1.5 self-end text-sm font-bold group-hover:opacity-100 md:text-xl"
              >
                <div class="relative z-10 flex items-center gap-[10px]" @click="toggle(item.id)">
                  <span class="tracking-tight">点击收起</span>
                  <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
                </div>
              </div>

              <!-- Mobile Image Stack -->
              <div class="relative -mt-10 flex min-h-[800px] flex-col md:hidden">
                <img
                  v-for="(img, idx) in item.mobileImages"
                  :key="idx"
                  :src="img"
                  class="w-full"
                  alt="mobile guide"
                />
                <!-- Mobile Hot Zones -->
                <div
                  v-for="(hz, hzIdx) in item.mobileHotzones"
                  :key="hzIdx"
                  class="absolute z-20 cursor-pointer"
                  :style="{
                    left: hz.x + 'px',
                    top: hz.y + 'px',
                    width: hz.w + 'px',
                    height: hz.h + 'px',
                  }"
                  @click="handleHotzone(hz)"
                >
                  <span class="text-xs font-bold text-black" v-if="hz.type === 'text'">{{
                    hz.payload
                  }}</span>
                </div>
              </div>

              <!-- PC Image Stack -->
              <div class="relative mt-4 hidden min-h-[800px] flex-col md:flex">
                <img
                  v-for="(img, idx) in item.pcImages"
                  :key="idx"
                  :src="img"
                  class="w-full"
                  alt="pc guide"
                />
                <!-- PC Hot Zones -->
                <div
                  v-for="(hz, hzIdx) in item.pcHotzones"
                  :key="hzIdx"
                  class="absolute z-20 cursor-pointer"
                  :style="{
                    left: hz.x + 'px',
                    top: hz.y + 'px',
                    width: hz.w + 'px',
                    height: hz.h + 'px',
                  }"
                  @click="handleHotzone(hz)"
                >
                  <span class="text-xs font-bold text-black" v-if="hz.type === 'text'">{{
                    hz.payload
                  }}</span>
                </div>
              </div>

              <!-- 底部收起按钮 -->
              <div class="absolute right-4 bottom-4 z-10">
                <div @click="toggle(item.id)" class="h-[30px] w-[200px]">
                  <div
                    class="hidden cursor-pointer items-center justify-end gap-[10px] rounded-full bg-black/40 px-3 py-1 text-xl backdrop-blur-sm transition-all hover:bg-black/60 md:flex"
                  >
                    <span class="tracking-tight">点击收起</span>
                    <ArrowIcon class="size-[12px] rotate-180 md:size-[22px]" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- iframe 弹窗 -->
    <div
      v-if="iframeVisible"
      class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4"
    >
      <div class="relative w-full max-w-[400px] rounded-2xl bg-white p-4">
        <div class="mb-2 flex justify-end">
          <button
            class="rounded-lg bg-black px-4 py-1 text-sm font-bold text-white"
            @click="iframeVisible = false"
          >
            关闭
          </button>
        </div>
        <iframe
          width="100%"
          height="400"
          :src="accountShareUrl"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
          class="rounded-lg"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import ArrowIcon from './arrow-icon.svg?component'
import StartIcon from './Star-1.svg?component'

// Sliced WebP Images
// Method 1
import m1_1 from './mobile1/row-1-column-1.webp'
import m1_2 from './mobile1/row-2-column-1.webp'
import m1_3 from './mobile1/row-3-column-1.webp'
import pc1_1 from './pc1/row-1-column-1.webp'
import pc1_2 from './pc1/row-2-column-1.webp'
import pc1_3 from './pc1/row-3-column-1.webp'

// Method 2
import m2_1 from './mobile2/row-1-column-1.webp'
import m2_2 from './mobile2/row-2-column-1.webp'
import m2_3 from './mobile2/row-3-column-1.webp'
import pc2_1 from './pc2/row-1-column-1.webp'
import pc2_2 from './pc2/row-2-column-1.webp'
import pc2_3 from './pc2/row-3-column-1.webp'

// Method 3
import m3_1 from './mobile3/row-1-column-1.webp'
import m3_2 from './mobile3/row-2-column-1.webp'
import m3_3 from './mobile3/row-3-column-1.webp'
import pc3_1 from './pc3/row-1-column-1.webp'
import pc3_2 from './pc3/row-2-column-1.webp'
import pc3_3 from './pc3/row-3-column-1.webp'
import { getAllQueryString } from '@/utils/url-utils.ts'

const ic = getAllQueryString('ic') || sessionStorage.getItem('ic')
const ADJ_GO_LINK =
  ic && typeof ic === 'string'
    ? `https://hifastvpn.go.link?adj_t=1xf6e7ru&inviteCode=${ic}`
    : 'https://hifastvpn.go.link/?adj_t=1xf6e7ru'

const downLoadIos = ADJ_GO_LINK
const accountShareUrl = 'https://aunlock.laomaos.com/share/jibsPdEN'

interface Hotzone {
  x: number
  y: number
  w: number
  h: number
  type: 'copy' | 'link' | 'text'
  payload: string
  label?: string
}
const accounts = [
  { account: '点击获取邮箱', password: '****' },
  // { account: 'prla08741@gmx.com', password: 'Qw990088' },
  // { account: 'zhongcujiu8051@hotmail.com', password: 'Dx114461' },
]
const selectedIndex = ref(0) // 直接在内部定义数据
const downloadMethods = computed(() => {
  const account = accounts[selectedIndex.value]
  return [
    {
      id: 1,
      title: '创建新“香港Apple ID”',
      subtitle: '首推',
      isHot: true,
      highlight: '',
      mobileImages: [m1_1, m1_2, m1_3],
      pcImages: [pc1_1, pc1_2, pc1_3],
      mobileHotzones: [
        {
          x: 62,
          y: 130,
          w: 88,
          h: 20,
          type: 'link',
          payload: 'https://account.apple.com/account',
        },
        {
          x: 142,
          y: 1952,
          w: 88,
          h: 20,
          type: 'link',
          payload: downLoadIos,
        },
      ] as Hotzone[],
      pcHotzones: [
        {
          x: 410,
          y: 224,
          w: 140,
          h: 20,
          type: 'link',
          payload: 'https://account.apple.com/account',
        },
        {
          x: 580,
          y: 1689,
          w: 88,
          h: 20,
          type: 'link',
          payload: downLoadIos,
        },
      ] as Hotzone[],
    },
    {
      id: 2,
      title: '修改已有 Apple ID 至 <香港>',
      subtitle: '',
      isHot: false,
      highlight: '',
      mobileImages: [m2_1, m2_2, m2_3],
      pcImages: [pc2_1, pc2_2, pc2_3],
      mobileHotzones: [
        {
          x: 62,
          y: 130,
          w: 88,
          h: 20,
          type: 'link',
          payload: 'https://account.apple.com',
        },
        {
          x: 142,
          y: 2510,
          w: 88,
          h: 20,
          type: 'link',
          payload: downLoadIos,
        },
      ] as Hotzone[],
      pcHotzones: [
        {
          x: 410,
          y: 224,
          w: 140,
          h: 20,
          type: 'link',
          payload: 'https://account.apple.com',
        },
        {
          x: 580,
          y: 2106,
          w: 88,
          h: 20,
          type: 'link',
          payload: downLoadIos,
        },
      ] as Hotzone[],
    },
    {
      id: 3,
      title: '使用Hi快提供的公用账号',
      subtitle: '',
      isHot: false,
      highlight: '谨慎选择',
      mobileImages: [m3_1, m3_2, m3_3],
      pcImages: [pc3_1, pc3_2, pc3_3],
      mobileHotzones: [
        {
          x: 62,
          y: 1950,
          w: 170,
          h: 20,
          type: 'text', // 展示账号文字
          payload: account.account,
        },
        {
          x: 62,
          y: 1985,
          w: 170,
          h: 20,
          type: 'text', // 展示账号文字
          payload: account.password,
        },
        {
          x: 53,
          y: 1941,
          w: 200,
          h: 32,
          type: 'copy',
          payload: account.account,
          label: '账号',
        },
        {
          x: 53,
          y: 1976,
          w: 200,
          h: 32,
          type: 'copy',
          payload: account.password,
          label: '密码',
        },
        {
          x: 142,
          y: 3006,
          w: 88,
          h: 20,
          type: 'link',
          payload: downLoadIos,
        },
      ] as Hotzone[],
      pcHotzones: [
        {
          x: 103,
          y: 1426,
          w: 140,
          h: 20,
          type: 'text', // 展示账号文字
          payload: account.account,
        },
        {
          x: 103,
          y: 1463,
          w: 140,
          h: 20,
          type: 'text', // 展示密码文字
          payload: account.password,
        },
        {
          x: 103,
          y: 1414,
          w: 194,
          h: 34,
          type: 'copy',
          payload: account.account,
          label: '账号',
        },
        {
          x: 103,
          y: 1451,
          w: 194,
          h: 34,
          type: 'copy',
          payload: account.password,
          label: '密码',
        },
        {
          x: 580,
          y: 2386,
          w: 88,
          h: 20,
          type: 'link',
          payload: downLoadIos,
        },
      ] as Hotzone[],
    },
  ]
})

const activeId = ref<number | null>(null)
const iframeVisible = ref(false)

/**
 * 切换下载方式详情面板显示状态。
 * @param {number} id 当前点击的下载方式 ID。
 * @returns {void} 无返回值。
 */
const toggle = (id: number) => {
  if (activeId.value === id) {
    activeId.value = null
    window.scrollTo(0, 0)
  } else {
    activeId.value = id

    // 重点：当点开 ID 为 3 的面板时，随机切换账号索引
    if (id === 3) {
      // 生成一个与当前不同的随机数，或者纯随机
      selectedIndex.value = selectedIndex.value === 0 ? 1 : 0
    }
  }
}

/**
 * 处理热区点击行为。
 * @param {Hotzone} hz 当前点击的热区配置。
 * @returns {void} 无返回值。
 */
const handleHotzone = (hz: Hotzone) => {
  if (hz.type === 'copy') {
    iframeVisible.value = true
  } else if (hz.type === 'link') {
    window.open(hz.payload, '_blank')
  }
}
</script>

<style scoped>
/* 针对整体风格进行微调 */
.font-bold {
  letter-spacing: -0.02em;
}

/* 移除移动端点击的高亮蓝色框 */
div {
  -webkit-tap-highlight-color: transparent;
}
</style>
