<script setup lang="ts">
import type { DownloadStats } from '~/types'

const { t, locale, setLocale } = useI18n()
const colorMode = useColorMode()
const { platform, isIOS, isAndroid } = usePlatformDetection()

// 版本数据
const { data: versionData } = await useFetch('/api/version')
const version = computed(() => versionData.value || {
  version: '1.0.0',
  buildNumber: '100',
  releaseDate: '2025-12-30',
  releaseNotes: { 'zh-CN': [], 'en-US': [] },
  downloads: { ios: '', android: '', h5: '' },
})

// 下载统计
const { data: stats, refresh: refreshStats } = await useFetch<DownloadStats>('/api/stats')

// 切换语言
function toggleLanguage() {
  setLocale(locale.value === 'zh-CN' ? 'en-US' : 'zh-CN')
}

// 下载处理
async function handleDownload(type: 'ios' | 'android' | 'h5') {
  const url = version.value.downloads[type]

  if (type === 'h5') {
    navigateTo(url, { external: true, open: { target: '_blank' } })
  }
  else {
    navigateTo(url, { external: true })
  }

  await $fetch(`/api/track/${type}`, { method: 'POST' })
  await refreshStats()
}

const isDark = computed(() => colorMode.value === 'dark')
</script>

<template>
  <UApp>
    <div class="min-h-screen">
      <!-- Header -->
    <UContainer>
      <header class="sticky top-0 z-50 border-b border-gray-200 dark:border-gray-800 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md">
        <div class="flex items-center justify-between py-4">
          <div class="flex items-center gap-3">
            <div class="size-10 rounded-xl bg-linear-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white font-bold text-xl">
              R
            </div>
            <h1 class="text-xl font-bold text-gray-900 dark:text-white">
              {{ t('appName') }}
            </h1>
          </div>

          <div class="flex items-center gap-2">
            <UButton
              :label="locale === 'zh-CN' ? 'EN' : '中文'"
              color="neutral"
              variant="ghost"
              @click="toggleLanguage"
            />
            <UButton
              :icon="isDark ? 'i-heroicons-sun' : 'i-heroicons-moon'"
              color="neutral"
              variant="ghost"
              @click="colorMode.preference = isDark ? 'light' : 'dark'"
            />
          </div>
        </div>
      </header>
    </UContainer>

    <!-- Main Content -->
    <UContainer class="py-12">
      <!-- Hero Section -->
      <div class="text-center mb-16">
        <div class="size-24 mx-auto mb-6 rounded-3xl bg-linear-to-br from-primary-500 to-primary-600 flex items-center justify-center shadow-xl">
          <span class="text-white font-bold text-4xl">R</span>
        </div>
        <h2 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
          {{ t('downloadTitle') }}
        </h2>
        <div class="flex items-center justify-center gap-4 text-sm text-gray-600 dark:text-gray-400">
          <span>{{ t('version') }} {{ version.version }}</span>
          <span>•</span>
          <span>{{ t('updateDate') }} {{ version.releaseDate }}</span>
        </div>
      </div>

      <!-- Download Buttons -->
      <div class="grid md:grid-cols-3 gap-4 mb-16">
        <UCard
          :class="isIOS && 'ring-2 ring-primary-500'"
          class="cursor-pointer hover:shadow-xl transition-all hover:scale-105"
          @click="handleDownload('ios')"
        >
          <div class="flex items-center gap-3 mb-2">
            <UIcon name="i-heroicons-device-phone-mobile" class="size-8" />
            <div>
              <h3 class="font-semibold text-lg">
                iOS
              </h3>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                iPhone & iPad
              </p>
            </div>
          </div>
          <p class="text-sm font-medium text-primary-500">
            {{ t('downloadIOS') }}
          </p>
        </UCard>

        <UCard
          :class="isAndroid && 'ring-2 ring-primary-500'"
          class="cursor-pointer hover:shadow-xl transition-all hover:scale-105"
          @click="handleDownload('android')"
        >
          <div class="flex items-center gap-3 mb-2">
            <UIcon name="i-heroicons-device-tablet" class="size-8" />
            <div>
              <h3 class="font-semibold text-lg">
                Android
              </h3>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                APK Package
              </p>
            </div>
          </div>
          <p class="text-sm font-medium text-primary-500">
            {{ t('downloadAndroid') }}
          </p>
        </UCard>

        <UCard
          class="cursor-pointer hover:shadow-xl transition-all hover:scale-105"
          @click="handleDownload('h5')"
        >
          <div class="flex items-center gap-3 mb-2">
            <UIcon name="i-heroicons-globe-alt" class="size-8" />
            <div>
              <h3 class="font-semibold text-lg">
                Web
              </h3>
              <p class="text-xs text-gray-500 dark:text-gray-400">
                H5 Version
              </p>
            </div>
          </div>
          <p class="text-sm font-medium text-primary-500">
            {{ t('openH5') }}
          </p>
        </UCard>
      </div>

      <!-- Download Stats -->
      <div v-if="stats" class="grid md:grid-cols-4 gap-4 mb-16">
        <UCard>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
            {{ t('totalDownloads') }}
          </p>
          <p class="text-3xl font-bold text-gray-900 dark:text-white">
            {{ stats.total.toLocaleString() }}
          </p>
        </UCard>
        <UCard>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
            {{ t('todayDownloads') }}
          </p>
          <p class="text-3xl font-bold text-primary-500">
            {{ stats.today.toLocaleString() }}
          </p>
        </UCard>
        <UCard>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
            {{ t('iosDownloads') }}
          </p>
          <p class="text-3xl font-bold text-gray-900 dark:text-white">
            {{ stats.ios.toLocaleString() }}
          </p>
        </UCard>
        <UCard>
          <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
            {{ t('androidDownloads') }}
          </p>
          <p class="text-3xl font-bold text-gray-900 dark:text-white">
            {{ stats.android.toLocaleString() }}
          </p>
        </UCard>
      </div>

      <!-- What's New -->
      <UCard class="mb-16">
        <h3 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
          {{ t('whatsNew') }}
        </h3>
        <ul class="space-y-3">
          <li
            v-for="(note, index) in version.releaseNotes[locale]"
            :key="index"
            class="flex items-start gap-3 text-gray-700 dark:text-gray-300"
          >
            <span class="text-primary-500 mt-1">•</span>
            <span>{{ note }}</span>
          </li>
        </ul>
      </UCard>

      <!-- Install Guide -->
      <div class="grid md:grid-cols-2 gap-6">
        <UCard>
          <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">
            {{ t('iosGuideTitle') }}
          </h3>
          <ol class="space-y-3 text-gray-700 dark:text-gray-300">
            <li>{{ t('iosGuideStep1') }}</li>
            <li>{{ t('iosGuideStep2') }}</li>
            <li>{{ t('iosGuideStep3') }}</li>
            <li>{{ t('iosGuideStep4') }}</li>
          </ol>
        </UCard>

        <UCard>
          <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">
            {{ t('androidGuideTitle') }}
          </h3>
          <ol class="space-y-3 text-gray-700 dark:text-gray-300">
            <li>{{ t('androidGuideStep1') }}</li>
            <li>{{ t('androidGuideStep2') }}</li>
            <li>{{ t('androidGuideStep3') }}</li>
            <li>{{ t('androidGuideStep4') }}</li>
          </ol>
        </UCard>
      </div>
    </UContainer>

    <!-- Footer -->
    <footer class="mt-20 py-8 border-t border-gray-200 dark:border-gray-800">
      <UContainer>
        <div class="text-center text-sm text-gray-600 dark:text-gray-500">
          <p>&copy; 2025 Riwa. All rights reserved.</p>
        </div>
      </UContainer>
    </footer>
    </div>
  </UApp>
</template>
