<script setup lang="ts">
import IcBaselineNotificationsNone from "~icons/ic/baseline-notifications-none";
import { mockClient } from "@/api";

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

const { data: allNotifications } = await mockClient("notify.list");

const notification = computed(() => {
  return allNotifications.value.find(item => String(item.id) === props.id);
});

watch(notification, (val) => {
  if (!val && allNotifications.value.length > 0) {
    router.replace("/layout/notify");
  }
}, { immediate: true });

function handleBack() {
  router.back();
}
</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="notification" class="notification-detail">
        <!-- 图标和标题 -->
        <div class="flex items-start gap-4 mb-2">
          <div class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full shrink-0">
            <IcBaselineNotificationsNone class="text-2xl text-[#71cc51]" />
          </div>
          <div class="flex-1 min-w-0">
            <div class="text-xl font-semibold wrap-break-word">
              {{ notification.title }}
            </div>
            <ion-note class="text-xs">
              {{ useDateFormat(notification.date, '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">
            {{ 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>
