<script lang='ts' setup>
import { downloadOutline, eyeOutline, timeOutline } from "ionicons/icons";
import markdownit from "markdown-it";
import { client, safeClient } from "@/api";

const props = defineProps<{ id: string }>();

const md = markdownit();
const { t } = useI18n();

const { data, error } = await safeClient(client.api.news({ id: props.id }).get());

function formatViewCount(count: number): string {
  if (count >= 10000) {
    return `${(count / 10000).toFixed(1)}w`;
  }
  if (count >= 1000) {
    return `${(count / 1000).toFixed(1)}k`;
  }
  return String(count);
}

function handleDownloadAttachment(url: string, filename: string) {
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  link.target = "_blank";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<template>
  <IonPage>
    <IonHeader class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>{{ t('news.detail') }}</ion-title>
      </ion-toolbar>
    </IonHeader>

    <IonContent :fullscreen="true" class="ion-padding">
      <!-- 加载状态 -->
      <div v-if="!data && !error" class="flex items-center justify-center h-full">
        <ion-spinner name="crescent" color="primary" />
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="flex flex-col items-center justify-center h-full gap-4">
        <Icon icon="mdi:alert-circle-outline" class="text-5xl text-(--ion-color-danger)" />
        <ion-text color="medium">
          {{ t('news.loadError') }}
        </ion-text>
      </div>

      <!-- 新闻内容 -->
      <div v-else-if="data" class="max-w-800px mx-auto pb-8">
        <!-- 标题 -->
        <div class="text-2xl sm:text-xl font-bold leading-tight text-(--ion-text-color) mb-4 wrap-break-word">
          {{ data.title }}
        </div>

        <!-- 元信息 -->
        <div class="flex items-center gap-4 sm:gap-3 flex-wrap mb-4">
          <div class="flex items-center gap-1.5 text-xs text-(--ion-color-medium)">
            <ion-icon :icon="timeOutline" class="text-base" />
            <span>{{ useDateFormat(data.publishedAt || data.createdAt, 'YYYY-MM-DD HH:mm') }}</span>
          </div>
          <div class="flex items-center gap-1.5 text-xs text-(--ion-color-medium)">
            <ion-icon :icon="eyeOutline" class="text-base" />
            <span>{{ formatViewCount(data.viewCount || 0) }} {{ t('news.views') }}</span>
          </div>
        </div>

        <ui-divider class="my-4" />

        <!-- 摘要 -->
        <div v-if="data.summary" class="border-2 border-dashed border-text-900 rounded-xl p-4 ">
          <div class="text-sm font-semibold text-(--ion-color-primary) mb-2">
            {{ t('news.summary') }}
          </div>
          <p class="text-base leading-relaxed text-(--ion-color-step-600) m-0">
            {{ data.summary }}
          </p>
        </div>

        <!-- 缩略图 -->
        <div v-if="data.thumbnailId" class="my-6 rounded-xl overflow-hidden shadow-sm dark:shadow-md">
          <img :src="data.thumbnail.publicUrl" :alt="data.title" class="w-full h-auto block">
        </div>

        <!-- 正文内容 -->
        <div class="news-content text-base leading-relaxed text-(--ion-text-color) my-6">
          <div v-html="md.render(data.content)" />
        </div>

        <!-- 附件列表 -->
        <div v-if="data.attachments && data.attachments.length > 0" class="mt-8 pt-6 border-t border-(--ion-color-light)">
          <div class="flex items-center gap-2 text-base font-semibold text-(--ion-text-color) mb-4">
            <Icon icon="mdi:paperclip" class="text-lg" />
            <span>{{ t('news.attachments') }} ({{ data.attachments.length }})</span>
          </div>
          <div class="flex flex-col gap-3">
            <div
              v-for="(attachment, index) in data.attachments"
              :key="index"
              class="flex items-center justify-between p-3 px-4 bg-(--ion-color-light) dark:bg-(--ion-color-step-100) rounded-lg cursor-pointer transition-all hover:bg-(--ion-color-light-shade) dark:hover:bg-(--ion-color-step-150) hover:translate-x-1 active:scale-98"
              @click="handleDownloadAttachment(attachment.url, attachment.name)"
            >
              <div class="flex items-center gap-3 flex-1 min-w-0">
                <Icon icon="mdi:file-document-outline" class="text-2xl text-(--ion-color-primary) shrink-0" />
                <div class="flex-1 min-w-0">
                  <div class="text-sm font-medium text-(--ion-text-color) truncate">
                    {{ attachment.name }}
                  </div>
                  <div v-if="attachment.size" class="text-xs text-(--ion-color-medium) mt-0.5">
                    {{ (attachment.size / 1024).toFixed(2) }} KB
                  </div>
                </div>
              </div>
              <ion-button fill="clear" size="small">
                <ion-icon slot="icon-only" :icon="downloadOutline" />
              </ion-button>
            </div>
          </div>
        </div>
      </div>
    </IonContent>
  </IonPage>
</template>

<style scoped>
@reference "tailwindcss";

/* 正文内容富文本样式 */
.news-content :deep(p) {
  @apply my-4 whitespace-pre-wrap wrap-break-word;
}

.news-content :deep(img) {
  @apply max-w-full h-auto rounded-lg my-4;
}

.news-content :deep(h1),
.news-content :deep(h2),
.news-content :deep(h3) {
  @apply font-semibold my-6 mb-4 leading-tight;
}

.news-content :deep(h1) {
  @apply text-xl;
}

.news-content :deep(h2) {
  @apply text-lg;
}

.news-content :deep(h3) {
  @apply text-base;
}

.news-content :deep(ul),
.news-content :deep(ol) {
  @apply pl-6 my-4;
}

.news-content :deep(li) {
  @apply my-2;
}

.news-content :deep(blockquote) {
  @apply border-l-3 border-(--ion-color-medium) pl-4 my-4 text-(--ion-color-medium) italic;
}

.news-content :deep(code) {
  @apply bg-(--ion-color-light) px-1.5 py-0.5 rounded text-sm font-mono;
}

.news-content :deep(pre) {
  @apply bg-(--ion-color-light) p-4 rounded-lg overflow-x-auto my-4;
}

.news-content :deep(pre code) {
  @apply bg-transparent p-0;
}
</style>
