<script lang="ts" setup>
/**
 * 通用富文本/Markdown 消息视图（系统通知 / 公告 / 处方等）
 */
import { computed } from 'vue';

import { usePreferences } from '@vben/preferences';
import { MdPreview } from 'md-editor-v3';

import 'md-editor-v3/lib/style.css';

const props = defineProps<{
  notice: Record<string, any>;
}>();

const { isDark } = usePreferences();
const isMarkdown = computed(() => Number(props.notice?.edit_type) === 1);
const mdTheme = computed(() => (isDark.value ? 'dark' : 'light'));
const contentHtml = computed(() =>
  String(props.notice?.content || '').replaceAll('\n', '<br>'),
);
const typeLabel = computed(
  () => props.notice?.type_name || props.notice?.title || '通知',
);
</script>

<template>
  <div class="rich-view">
    <div class="hero">
      <div class="kicker">{{ typeLabel }}</div>
      <h3 class="title">{{ notice.title || '消息详情' }}</h3>
      <p v-if="notice.detail" class="desc">{{ notice.detail }}</p>
      <time v-if="notice.created_at" class="time">{{ notice.created_at }}</time>
    </div>
    <div class="body">
      <MdPreview
        v-if="isMarkdown"
        :model-value="String(notice.content || '')"
        :theme="mdTheme"
      />
      <div
        v-else
        class="prose prose-sm dark:prose-invert max-w-none"
        v-html="contentHtml"
      ></div>
    </div>
  </div>
</template>

<style scoped>
.rich-view {
  padding: 2px 0;
}

.hero {
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 14px;
  background:
    radial-gradient(
      80% 120% at 0% 0%,
      hsl(var(--primary) / 0.12),
      transparent 60%
    ),
    hsl(var(--muted) / 0.35);
}

.kicker {
  font-size: 12px;
  font-weight: 650;
  color: hsl(var(--primary));
}

.title {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

.desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

.time {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: hsl(var(--muted-foreground));
}

.body {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card, var(--background)));
  min-height: 88px;
}
</style>
