<template>
  <div class="store-page">
    <Breadcrumb />

    <header class="page-header">
      <div>
        <h1 class="store-section-title">应用下载中心</h1>
        <p class="store-section-desc">稳定 · 高效 · 安全</p>
      </div>
    </header>

    <a-skeleton animation :loading="loading" class="download-skeleton">
      <StoreStackSkeleton :count="3" />
      <template #content>
        <div v-if="items.length" class="download-list">
        <a-card
          v-for="(item, index) in items"
          :key="index"
          class="download-item"
          :bordered="true"
          hoverable
        >
          <div class="download-item__inner">
            <div class="download-item__icon">{{ item.icon || '📦' }}</div>
            <div class="download-item__content">
              <h3 class="download-item__title">{{ item.title }}</h3>
              <p v-if="item.description" class="download-item__desc">{{ item.description }}</p>
              <div class="download-item__meta">
                <span v-if="item.version">当前版本：{{ item.version }}</span>
                <span v-if="item.platform">{{ platformLabel(item.platform) }}</span>
                <span v-if="item.extract_code">提取码：{{ item.extract_code }}</span>
              </div>
            </div>
            <a-button
              :type="item.button_color === 'primary' ? 'primary' : 'outline'"
              class="download-item__btn"
              @click="openDownload(item.download_url)"
            >
              {{ item.button_text || '立即下载' }}
            </a-button>
          </div>
          <div
            v-if="item.changelog_html"
            class="download-item__changelog rich-content"
            v-html="item.changelog_html"
          />
        </a-card>
        </div>
        <a-empty v-else description="暂无下载项" />
      </template>
    </a-skeleton>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Notification } from '@arco-design/web-vue'
import { getDownloadCenter } from '@/api/download'
import StoreStackSkeleton from '@/components/skeleton/StoreStackSkeleton.vue'

const loading = ref(false)
const items = ref([])

const platformLabels = {
  android: 'Android',
  windows: 'Windows',
  ios: 'iOS',
  mac: 'macOS'
}

const platformLabel = (p) => platformLabels[p] || p

const openDownload = (url) => {
  if (!url) return
  const href = url.startsWith('//') ? `https:${url}` : url
  window.open(href, '_blank')
}

const loadItems = async () => {
  loading.value = true
  try {
    const res = await getDownloadCenter()
    if (!res || res.code !== 0) {
      Notification.error({ title: '加载下载中心失败', content: res?.msg ?? '请稍后再试' })
      return
    }
    items.value = res.data || []
  } finally {
    loading.value = false
  }
}

onMounted(loadItems)
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.download-skeleton {
  width: 100%;
}

.download-list {
  display: flex;
  flex-direction: column;
}

.download-item {
  border-radius: @store-radius !important;
  border-color: @store-card-border !important;

  &__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    font-size: 2rem;
    line-height: 1;
    background: @store-cover-bg;
    border-radius: @store-radius-sm;
    border: 1px solid @store-card-border;
  }

  &__content {
    flex: 1 1 200px;
    min-width: 0;
  }

  &__title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    color: @store-primary;
    font-weight: 600;
  }

  &__desc {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: @store-text-muted;
    line-height: 1.5;
  }

  &__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.8rem;
    color: fade(@store-text-muted, 85%);
  }

  &__btn {
    flex-shrink: 0;
    align-self: center;

    @media (max-width: 768px) {
      width: 100%;
    }
  }

  &__changelog {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid @store-card-border;
    font-size: 0.875rem;
  }
}

.rich-content {
  line-height: 1.6;
  color: @store-text-muted;

  :deep(img) {
    max-width: 100%;
  }
}
</style>
