<script setup lang="ts">
import { Box } from 'lucide-vue-next'
import { useRouter } from 'vue-router'

import type { App } from '../data/schema'

const props = defineProps<{
  app: App
}>()

const emit = defineEmits<{
  refresh: []
}>()

const router = useRouter()

function formatDate(date: string | Date) {
  return new Date(date).toLocaleDateString('zh-CN')
}
</script>

<template>
  <UiCard class="cursor-pointer hover:border-primary/50 transition-colors" @click="router.push(`/admin/applications/${props.app.id}`)">
    <UiCardHeader class="pb-3">
      <div class="flex items-start justify-between">
        <div class="flex items-center gap-3">
          <div class="size-10 rounded-lg bg-primary/10 flex items-center justify-center">
            <img v-if="props.app.icon_url" :src="props.app.icon_url.startsWith('http') ? props.app.icon_url : `http://localhost:8080${props.app.icon_url}`" class="size-6 object-cover rounded" alt="" />
            <Box v-else class="size-6 text-primary" />
          </div>
          <div>
            <UiCardTitle class="text-base">
              {{ props.app.name }}
            </UiCardTitle>
            <p class="text-sm text-muted-foreground line-clamp-1">
              {{ props.app.description || '暂无描述' }}
            </p>
          </div>
        </div>
        <UiBadge :variant="props.app.status === 'active' ? 'default' : 'secondary'">
          {{ props.app.status === 'active' ? '正常' : '停用' }}
        </UiBadge>
      </div>
    </UiCardHeader>
    <UiCardContent>
      <div class="flex items-center justify-between text-sm text-muted-foreground">
        <span>用户: {{ props.app.users || 0 }}</span>
        <span>验证: {{ props.app.verify_count || 0 }}</span>
        <span>{{ formatDate(props.app.created_at) }}</span>
      </div>
    </UiCardContent>
  </UiCard>
</template>
