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

const { t, locale, setLocale } = useI18n()
const colorMode = useColorMode()

// 获取应用列表
const { data: appsData } = await useFetch('/api/apps')
const apps = computed(() => appsData.value?.apps || [])
const categories = computed(() => appsData.value?.categories || [])

// 当前选中的分类
const selectedCategory = ref('all')

// 搜索关键词
const searchKeyword = ref('')

// 过滤后的应用列表
const filteredApps = computed(() => {
  let result = apps.value

  // 按分类过滤
  if (selectedCategory.value !== 'all') {
    result = result.filter(app => app.category === selectedCategory.value)
  }

  // 按搜索关键词过滤
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(app =>
      app.name.toLowerCase().includes(keyword)
      || app.shortDescription[locale.value as 'zh-CN' | 'en-US'].toLowerCase().includes(keyword),
    )
  }

  return result
})

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

// 打开应用详情
function openAppDetail(app: AppInfo) {
  navigateTo(`/apps/${app.id}`)
}

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

  if (!url) {
    return
  }

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

  await $fetch(`/api/track/${type}`, {
    method: 'POST',
    body: { appId: app.id },
  })
}

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

// SEO
useHead({
  title: locale.value === 'zh-CN' ? 'Riwa 应用商店' : 'Riwa App Store',
  meta: [
    {
      name: 'description',
      content: locale.value === 'zh-CN'
        ? '下载 Riwa 系列应用，包括 Riwa 主应用、Riwa 钱包和 Riwa 聊天等'
        : 'Download Riwa apps including Riwa main app, Riwa Wallet, and Riwa Chat',
    },
  ],
})
</script>

<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- Header -->
    <UContainer>
      <header class="sticky top-0 z-50">
        <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-8">
      <!-- Search and Filter -->
      <div class="mb-8 space-y-4">
        <!-- Search -->
        <div class="relative max-w-2xl mx-auto">
          <UInput
            v-model="searchKeyword"
            icon="i-heroicons-magnifying-glass"
            size="xl"
            :placeholder="locale === 'zh-CN' ? '搜索应用...' : 'Search apps...'"
            class="w-full"
          />
        </div>

        <!-- Categories -->
        <div class="flex items-center gap-2 overflow-x-auto pb-2">
          <UButton
            v-for="category in categories"
            :key="category.id"
            :label="category.name[locale as 'zh-CN' | 'en-US']"
            :color="selectedCategory === category.id ? 'primary' : 'neutral'"
            :variant="selectedCategory === category.id ? 'solid' : 'ghost'"
            @click="selectedCategory = category.id"
          />
        </div>
      </div>

      <!-- Apps Grid -->
      <div v-if="filteredApps.length > 0" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        <UCard
          v-for="app in filteredApps"
          :key="app.id"
          class="cursor-pointer hover:shadow-xl transition-all hover:scale-[1.02]"
          @click="openAppDetail(app)"
        >
          <div class="flex items-start gap-4">
            <!-- App Icon -->
            <div class="size-16 rounded-2xl bg-linear-to-br from-primary-500 to-primary-600 flex items-center justify-center text-white font-bold text-2xl shrink-0">
              {{ app.name.charAt(0) }}
            </div>

            <!-- App Info -->
            <div class="flex-1 min-w-0">
              <h3 class="font-bold text-lg text-gray-900 dark:text-white truncate">
                {{ app.name }}
              </h3>
              <p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mt-1">
                {{ app.shortDescription[locale as 'zh-CN' | 'en-US'] }}
              </p>
              <div class="flex items-center gap-3 mt-3 text-xs text-gray-500 dark:text-gray-500">
                <span>v{{ app.version }}</span>
                <span>•</span>
                <span>{{ app.stats.total.toLocaleString() }} {{ locale === 'zh-CN' ? '次下载' : 'downloads' }}</span>
              </div>
            </div>
          </div>

          <!-- Download Buttons -->
          <div class="grid grid-cols-3 gap-2 mt-4">
            <UButton
              v-if="app.downloads.ios"
              icon="i-heroicons-device-phone-mobile"
              label="iOS"
              size="sm"
              block
              @click.stop="handleDownload(app, 'ios')"
            />
            <UButton
              v-if="app.downloads.android"
              icon="i-heroicons-device-tablet"
              label="Android"
              size="sm"
              block
              @click.stop="handleDownload(app, 'android')"
            />
            <UButton
              v-if="app.downloads.h5"
              icon="i-heroicons-globe-alt"
              label="Web"
              size="sm"
              block
              @click.stop="handleDownload(app, 'h5')"
            />
          </div>
        </UCard>
      </div>

      <!-- Empty State -->
      <div v-else class="text-center py-20">
        <UIcon name="i-heroicons-inbox" class="size-20 mx-auto text-gray-400 dark:text-gray-600 mb-4" />
        <p class="text-gray-600 dark:text-gray-400">
          {{ locale === 'zh-CN' ? '没有找到应用' : 'No apps found' }}
        </p>
      </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>
</template>
