<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import { Page, useVbenModal } from '@vben/common-ui';
import { useTabs } from '@vben/hooks';

import {
  ArrowLeft,
  Bell,
  CalendarClock,
  Clock,
  Megaphone,
  User,
} from 'lucide-vue-next';
import { MdPreview } from 'md-editor-v3';

import { formatTimeToRelative } from '#/util/tool';
import { getNoticeDetailApi } from '#/views/notice/api';

import UnreadUserList from './UnreadUserList.vue';

// eslint-disable-next-line n/no-extraneous-import
import 'md-editor-v3/lib/style.css';
import {Icon} from "#/components/icon";

const router = useRouter();
const route = useRoute();
const noticeId = ref(route.params.id);

const notice = ref(null);
const loading = ref(true);
const error = ref(null);

const { setTabTitle } = useTabs();

// 消息类型定义
const messageTypes = [
  {
    id: 0,
    name: '系统公告',
    icon: Megaphone,
    color: 'text-sky-500',
    darkColor: 'dark:text-sky-400',
    bgColor: 'bg-sky-50',
    darkBgColor: 'dark:bg-sky-900/30',
    borderColor: 'border-sky-200',
    darkBorderColor: 'dark:border-sky-800',
  },
  {
    id: 1,
    name: '系统通知',
    icon: Bell,
    color: 'text-amber-500',
    darkColor: 'dark:text-amber-400',
    bgColor: 'bg-amber-50',
    darkBgColor: 'dark:bg-amber-900/30',
    borderColor: 'border-amber-200',
    darkBorderColor: 'dark:border-amber-800',
  },
  {
    id: 2,
    name: '周报提醒',
    icon: CalendarClock,
    color: 'text-emerald-500',
    darkColor: 'dark:text-emerald-400',
    bgColor: 'bg-emerald-50',
    darkBgColor: 'dark:bg-emerald-900/30',
    borderColor: 'border-emerald-200',
    darkBorderColor: 'dark:border-emerald-800',
  },
];

// 获取通知详情
const getNoticeDetail = async () => {
  loading.value = true;
  error.value = null;

  try {
    const res = await getNoticeDetailApi(noticeId.value);
    notice.value = res;
    setTabTitle(`通知详情-【${res.id}】`);
    loading.value = false;
  } catch (error_) {
    console.error('获取通知详情失败:', error_);
    error.value = '获取通知详情失败，请稍后重试';
    loading.value = false;
  }
};

// 返回列表
const goBack = () => {
  router.push('/notice');
};

// 获取类型信息
const getTypeInfo = (typeId) => {
  return messageTypes.find((t) => t.id === typeId) || messageTypes[0];
};

// 格式化内容，将换行符转换为<br>
const formatContent = (content) => {
  return content ? content.replaceAll('\n', '<br>') : '';
};

onMounted(() => {
  getNoticeDetail();
});

const [UnreadUserListModal, UnreadUserListModalApi] = useVbenModal({
  connectedComponent: UnreadUserList,
});

const showUnreadList = () => {
  UnreadUserListModalApi.setData({
    values: notice.value.user_list,
    unread_count: notice.value.unread_count,
  });
  UnreadUserListModalApi.open();
};
</script>

<template>
  <Page>
    <UnreadUserListModal />
    <template #title>
      <div class="flex items-center gap-2">
        <button
          class="flex h-8 w-8 items-center justify-center rounded-full text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300"
          @click="goBack"
        >
          <ArrowLeft class="h-5 w-5" />
        </button>
        <h1 class="text-xl font-semibold text-gray-900 dark:text-gray-100">
          通知详情
        </h1>
      </div>
    </template>

    <div class="mx-auto max-w-3xl">
      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center py-20">
        <div
          class="h-10 w-10 animate-spin rounded-full border-4 border-gray-200 border-t-sky-500 dark:border-gray-700 dark:border-t-sky-400"
        ></div>
      </div>

      <!-- 错误状态 -->
      <div
        v-else-if="error"
        class="rounded-lg border border-red-200 bg-red-50 p-4 text-center text-red-600 transition-colors dark:border-red-800 dark:bg-red-900/20 dark:text-red-400"
      >
        {{ error }}
        <button
          class="mt-2 rounded-md bg-red-100 px-3 py-1 text-sm font-medium text-red-700 transition-colors hover:bg-red-200 dark:bg-red-900/30 dark:text-red-300 dark:hover:bg-red-900/50"
          @click="getNoticeDetail"
        >
          重试
        </button>
      </div>

      <!-- 通知详情 -->
      <div v-else-if="notice" class="space-y-6">
        <!-- 标题和类型 -->
        <div
          class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800"
        >
          <div class="mb-4 flex items-start justify-between">
            <h2
              class="text-xl font-bold text-gray-900 transition-colors dark:text-gray-100"
            >
              {{ notice.title }}
            </h2>
            <div
              :class="[
                getTypeInfo(notice.type).bgColor,
                getTypeInfo(notice.type).darkBgColor,
              ]"
              class="flex items-center gap-1.5 rounded-full px-3 py-1 transition-colors"
            >
              <component
                :is="getTypeInfo(notice.type).icon"
                :class="[
                  getTypeInfo(notice.type).color,
                  getTypeInfo(notice.type).darkColor,
                ]"
                class="h-4 w-4"
              />
              <span
                :class="[
                  getTypeInfo(notice.type).color,
                  getTypeInfo(notice.type).darkColor,
                ]"
                class="text-xs font-medium"
              >
                {{ getTypeInfo(notice.type).name }}
              </span>
            </div>
          </div>

          <!-- 元信息 -->
          <div
            class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 transition-colors dark:text-gray-400"
          >
            <div class="flex items-center gap-1.5">
              来自:
              <Icon icon="svg:logo" />
              <span>萧康云医</span>
            </div>

            <div class="flex items-center gap-1.5">
              收件人:
              <User class="h-4 w-4" />
              <span>{{ notice.admin?.nick_name || '系统' }}</span>
            </div>
          </div>

          <div
            class="mb-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500 transition-colors dark:text-gray-400"
          >
            <div v-html="formatContent(notice.detail)"></div>
            <div class="flex items-center gap-1.5" style="margin-left: auto">
              <Clock class="h-4 w-4" />
              <span>{{ notice.created_at }}({{
                  formatTimeToRelative(notice.created_at)
                }})</span>
            </div>
          </div>

          <!-- 分隔线 -->
          <div
            class="mb-6 h-px w-full bg-gray-100 transition-colors dark:bg-gray-700"
          ></div>

          <!-- 内容 -->
          <div
            v-if="notice.edit_type === 0"
            class="rounded-lg bg-gray-50 p-4 transition-colors dark:bg-gray-700"
          >
            <div
              class="prose prose-sm dark:prose-invert max-w-none text-gray-700 transition-colors dark:text-gray-300"
              v-html="formatContent(notice.content)"
            ></div>
          </div>
          <MdPreview
            v-else-if="notice.edit_type === 1"
            v-model="notice.content"
            style="padding: 10px 20px"
            theme="dark"
          />
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-between">
          <button
            class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
            @click="goBack"
          >
            <ArrowLeft class="h-4 w-4" />
            返回列表
          </button>

          <div class="flex gap-2">
            <!-- 这里可以添加其他操作按钮，如删除、转发等 -->

            <button
              v-if="notice.is_my === 1"
              class="flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
              @click="showUnreadList"
            >
              {{
                notice.is_all_read === 1
                  ? '全部已读'
                  : `有 ${notice.unread_count} 人未读`
              }}
            </button>
          </div>
        </div>
      </div>

      <!-- 通知不存在 -->
      <div
        v-else
        class="rounded-lg border border-gray-200 bg-white p-8 text-center shadow-sm transition-colors dark:border-gray-700 dark:bg-gray-800"
      >
        <Bell class="mx-auto mb-4 h-12 w-12 text-gray-300 dark:text-gray-600" />
        <h3
          class="mb-2 text-lg font-medium text-gray-900 transition-colors dark:text-gray-100"
        >
          通知不存在
        </h3>
        <p class="mb-4 text-gray-500 transition-colors dark:text-gray-400">
          该通知可能已被删除或您没有权限查看
        </p>
        <button
          class="rounded-md bg-sky-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-sky-600 dark:bg-sky-600 dark:hover:bg-sky-500"
          @click="goBack"
        >
          返回通知列表
        </button>
      </div>
    </div>
  </Page>
</template>

<style scoped>
/* 新增 Markdown 样式（如果使用 GitHub 风格） */

/* 调整 Markdown 容器样式 */
.markdown-body {
  padding: 20px;
}
/* 平滑过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 确保内容中的换行正确显示 */
:deep(.prose) {
  white-space: pre-line;
}

/* 暗黑模式特有样式 */
.dark .bg-gray-750 {
  background-color: #1e293b;
}

.dark .bg-gray-650 {
  background-color: #334155;
}
</style>
