<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { solutions } from '../data/homepage'
import QrPlaceholder from './QrPlaceholder.vue'

const activeKey = ref(solutions[0].key)
const isMobile = ref(false)
const activeIndex = computed(() => solutions.findIndex(item => item.key === activeKey.value))
const activeSolution = computed(() => solutions[activeIndex.value] ?? solutions[0])
let mobileMediaQuery

const selectSolution = (index) => {
  if (!isMobile.value) return
  activeKey.value = solutions[index]?.key ?? solutions[0].key
}

const handleTabKeydown = (event, index) => {
  if (!isMobile.value) return

  const keyMap = {
    ArrowRight: 1,
    ArrowDown: 1,
    ArrowLeft: -1,
    ArrowUp: -1
  }

  if (event.key === 'Home' || event.key === 'End' || keyMap[event.key]) {
    event.preventDefault()
  } else {
    return
  }

  const nextIndex =
    event.key === 'Home'
      ? 0
      : event.key === 'End'
        ? solutions.length - 1
        : (index + keyMap[event.key] + solutions.length) % solutions.length

  selectSolution(nextIndex)
  document.getElementById(`solution-tab-${solutions[nextIndex].key}`)?.focus()
}

const updateViewportMode = () => {
  isMobile.value = mobileMediaQuery.matches
}

onMounted(() => {
  mobileMediaQuery = window.matchMedia('(max-width: 860px)')
  updateViewportMode()
  mobileMediaQuery.addEventListener('change', updateViewportMode)
})

onBeforeUnmount(() => {
  mobileMediaQuery?.removeEventListener('change', updateViewportMode)
})
</script>

<template>
  <section class="solution-section page-section page-section--compact">
    <div class="container">
      <div class="solution-tabs solution-tabs--mobile" role="tablist" aria-label="版本切换">
        <button
          v-for="(solution, index) in solutions"
          :key="solution.key"
          :id="`solution-tab-${solution.key}`"
          type="button"
          :class="['solution-tab', { active: isMobile && solution.key === activeKey }]"
          role="tab"
          :aria-selected="isMobile ? solution.key === activeKey : undefined"
          aria-controls="solution-panel"
          :tabindex="isMobile ? (solution.key === activeKey ? 0 : -1) : -1"
          @click="selectSolution(index)"
          @keydown="handleTabKeydown($event, index)"
        >
          {{ solution.tab }}
        </button>
        <span v-if="isMobile" class="tab-indicator" :style="{ transform: `translateX(${activeIndex * 100}%)` }"></span>
      </div>

      <div class="solution-grid solution-grid--desktop">
        <article
          v-for="solution in solutions"
          :key="solution.key"
          :id="`solution-card-${solution.key}`"
          class="solution-card"
        >
          <div class="solution-card-top">
            <h3>{{ solution.title }}</h3>
          </div>
          <ol v-if="solution.key !== 'personal'" class="solution-points">
            <li v-for="point in solution.points" :key="point">{{ point }}</li>
          </ol>
          <p v-else class="solution-personal-text">{{ solution.points[0] }}</p>
          <div class="solution-qr-row">
            <span v-if="solution.key !== 'personal'">微信长按扫码咨询</span>
            <QrPlaceholder :image="solution.qrImage" :label="solution.qrLabel" :title="`${solution.tab}咨询二维码`" />
          </div>
        </article>
      </div>

      <div class="solution-panel solution-panel--mobile">
        <article
          id="solution-panel"
          :key="activeSolution.key"
          class="solution-card active"
          role="tabpanel"
          :aria-labelledby="`solution-tab-${activeSolution.key}`"
          tabindex="0"
        >
          <div class="solution-card-top">
            <h3>{{ activeSolution.title }}</h3>
          </div>
          <ol v-if="activeSolution.key !== 'personal'" class="solution-points">
            <li v-for="point in activeSolution.points" :key="point">{{ point }}</li>
          </ol>
          <p v-else class="solution-personal-text">{{ activeSolution.points[0] }}</p>
          <div class="solution-qr-row">
            <span v-if="activeSolution.key !== 'personal'">微信长按扫码咨询</span>
            <QrPlaceholder :image="activeSolution.qrImage" :label="activeSolution.qrLabel" :title="`${activeSolution.tab}咨询二维码`" />
          </div>
        </article>
      </div>
    </div>
  </section>
</template>
