<script setup lang="ts">
import { AlertCircle, Box, Loader2 } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'

import api from '@/services/api'

const route = useRoute()

const loading = ref(true)
const app = ref<any>(null)
const cardTypes = ref<any[]>([])

onMounted(async () => {
  const appId = route.params.id
  try {
    const data = await api.get<{ app: any, cardTypes: any[] }>(`/agent/apps/${appId}`)
    app.value = data?.app
    cardTypes.value = data?.cardTypes || []
  }
  catch (error) {
    console.error('获取应用详情失败:', error)
  }
  finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="space-y-6">
    <div v-if="loading" class="flex items-center justify-center py-12">
      <Loader2 class="size-8 animate-spin text-muted-foreground" />
    </div>

    <template v-else-if="app">
      <div class="flex items-center gap-4">
        <div class="size-16 rounded-xl bg-primary/10 flex items-center justify-center">
          <Box class="size-8 text-primary" />
        </div>
        <div>
          <h1 class="text-2xl font-bold">
            {{ app.name }}
          </h1>
          <p class="text-muted-foreground">
            {{ app.description || '暂无描述' }}
          </p>
        </div>
      </div>

      <UiCard>
        <UiCardHeader>
          <UiCardTitle>可用卡类</UiCardTitle>
          <UiCardDescription>
            您可以为此应用生成以下类型的卡密
          </UiCardDescription>
        </UiCardHeader>
        <UiCardContent>
          <div v-if="cardTypes.length === 0" class="text-center py-8 text-muted-foreground">
            暂无可用卡类
          </div>
          <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <UiCard v-for="ct in cardTypes" :key="ct.id" class="bg-muted/50">
              <UiCardHeader class="pb-2">
                <UiCardTitle class="text-base">
                  {{ ct.name }}
                </UiCardTitle>
              </UiCardHeader>
              <UiCardContent>
                <div class="flex items-center justify-between text-sm">
                  <span class="text-muted-foreground">时长</span>
                  <span>{{ ct.duration_days }} 天</span>
                </div>
                <div class="flex items-center justify-between text-sm mt-2">
                  <span class="text-muted-foreground">价格</span>
                  <span class="font-medium">¥{{ ct.price }}</span>
                </div>
                <UiButton
                  class="w-full mt-4"
                  size="sm"
                  as-child
                >
                  <router-link :to="`/agent/cards/create?app_id=${app.id}&card_type_id=${ct.id}`">
                    生成卡密
                  </router-link>
                </UiButton>
              </UiCardContent>
            </UiCard>
          </div>
        </UiCardContent>
      </UiCard>
    </template>

    <div v-else class="text-center py-12 text-muted-foreground">
      <AlertCircle class="size-16 mx-auto mb-4 opacity-30" />
      <p>应用不存在或无权访问</p>
    </div>
  </div>
</template>
