<script setup lang="ts">
import { client, safeClient } from "@/api";
import { NotificationTypeIcon } from "./enum";

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

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

function getConfigByType(type: string) {
  return NotificationTypeIcon[type];
}
</script>

<template>
  <IonPage>
    <IonHeader class="ion-no-border">
      <ion-toolbar class="ion-toolbar">
        <ui-back-button slot="start" />
        <ion-title>通知详情</ion-title>
      </ion-toolbar>
    </IonHeader>
    <IonContent :fullscreen="true" class="ion-padding">
      <div v-if="data" class="notification-detail">
        <!-- 图标和标题 -->
        <div class="flex items-start gap-4">
          <div class="bg-success p-3 rounded-full shrink-0">
            <Icon :icon="getConfigByType(data.notification.type).icon" class="text-xl text-(--ion-background-color)" />
          </div>
          <div class="flex-1 min-w-0">
            <div class="text-xl font-semibold wrap-break-word">
              {{ data.notification.title }}
            </div>
            <ion-note class="text-xs">
              {{ useDateFormat(data.createdAt, 'YYYY-MM-DD HH:mm:ss') }}
            </ion-note>
          </div>
        </div>

        <ui-divider />

        <!-- 内容 -->
        <div class="notification-content">
          <p class="text-base leading-relaxed whitespace-pre-wrap wrap-break-word">
            {{ data.notification.content }}
          </p>
        </div>
      </div>

      <div v-else class="flex items-center justify-center h-full">
        <ion-spinner name="crescent" />
      </div>
    </IonContent>
  </IonPage>
</template>

<style scoped>
.notification-detail {
  max-width: 800px;
  margin: 0 auto;
}

.notification-content {
  color: var(--ion-text-color);
  font-size: 15px;
  line-height: 1.8;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .notification-content {
    color: var(--ion-color-step-600);
  }
}
</style>
