<script setup lang="ts">
import { computed } from 'vue';
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchNoticeNotification' });

interface Props {
  editing?: boolean;
  collapsed?: boolean;
}
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();

interface NoticeRow {
  id: string;
  title: string;
  timeLabel: string;
}

interface NotificationRow {
  id: string;
  title: string;
  timeLabel: string;
  unread: boolean;
}

const notices: NoticeRow[] = [
  { id: 'n1', title: '【运维】本周六 02:00-04:00 数据库主从切换', timeLabel: '2 天前' },
  { id: 'n2', title: '【HR】Q2 OKR 复盘截止 06-05', timeLabel: '3 天前' },
  { id: 'n3', title: '【流程】工单 SLA 新规则即将上线', timeLabel: '1 周前' }
];

const notifications: NotificationRow[] = [
  { id: 'm1', title: '你被指派为执行「迭代 24.06」负责人', timeLabel: '10min 前', unread: true },
  { id: 'm2', title: '任务「SSO 改造」状态变更：开发中 → 待验收', timeLabel: '2h 前', unread: true },
  { id: 'm3', title: '需求「多币种支持」评审通过', timeLabel: '昨日', unread: false }
];

const unreadCount = computed(() => notifications.filter(n => n.unread).length);

// mock 阶段：交互函数留占位，等后端接口落地后接通
function handleOpenNotification(row: NotificationRow) {
  // eslint-disable-next-line no-warning-comments
  // TODO: 跳对应业务对象详情
  // eslint-disable-next-line no-console
  console.warn('[notification] open', row.id);
}

function handleMarkRead(row: NotificationRow) {
  // eslint-disable-next-line no-warning-comments
  // TODO: 调标已读接口
  // eslint-disable-next-line no-console
  console.warn('[notification] mark-read', row.id);
}

function handleMarkAllRead() {
  // eslint-disable-next-line no-warning-comments
  // TODO: 调一键全部已读接口
  // eslint-disable-next-line no-console
  console.warn('[notification] mark-all-read');
}
</script>

<template>
  <WorkbenchModuleCard
    title="公告与通知"
    icon="mdi:bullhorn-outline"
    :badge-count="unreadCount || undefined"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <div class="nn-grid">
      <!-- 左 1/3：公告（只读，露头扫一眼） -->
      <section class="nn-col nn-col--notice">
        <header class="nn-h">
          <SvgIcon icon="mdi:bullhorn-outline" class="nn-h__icon" />
          <span class="nn-h__title">公告</span>
          <span class="nn-h__count">{{ notices.length }}</span>
        </header>
        <ul class="nn-list">
          <li v-for="row in notices" :key="row.id" class="nn-notice">
            <div class="nn-notice__title">{{ row.title }}</div>
            <div class="nn-notice__time">{{ row.timeLabel }}</div>
          </li>
        </ul>
      </section>

      <!-- 右 2/3：通知（可操作，按行跳详情/标已读） -->
      <section class="nn-col nn-col--notify">
        <header class="nn-h">
          <SvgIcon icon="mdi:bell-outline" class="nn-h__icon" />
          <span class="nn-h__title">通知</span>
          <span v-if="unreadCount > 0" class="nn-h__count is-unread">未读 {{ unreadCount }}</span>
          <span v-else class="nn-h__count">{{ notifications.length }}</span>
          <ElButton v-if="unreadCount > 0" link size="small" class="nn-h__action" @click="handleMarkAllRead">
            全部已读
          </ElButton>
        </header>
        <ul class="nn-list">
          <li
            v-for="row in notifications"
            :key="row.id"
            class="nn-notify"
            :class="{ 'is-unread': row.unread }"
            @click="handleOpenNotification(row)"
          >
            <span v-if="row.unread" class="nn-notify__dot" />
            <span class="nn-notify__title">{{ row.title }}</span>
            <span class="nn-notify__time">{{ row.timeLabel }}</span>
            <span class="nn-notify__actions">
              <ElTooltip v-if="row.unread" content="标为已读" placement="top">
                <button class="nn-notify__act" @click.stop="handleMarkRead(row)">
                  <SvgIcon icon="mdi:check" />
                </button>
              </ElTooltip>
              <ElTooltip content="跳详情" placement="top">
                <button class="nn-notify__act" @click.stop="handleOpenNotification(row)">
                  <SvgIcon icon="mdi:open-in-new" />
                </button>
              </ElTooltip>
            </span>
          </li>
        </ul>
      </section>
    </div>
  </WorkbenchModuleCard>
</template>

<style scoped>
.nn-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}
.nn-col {
  min-width: 0;
}

.nn-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.nn-h__icon {
  color: var(--el-color-primary);
  font-size: 14px;
}
.nn-h__title {
  font-weight: 600;
  color: var(--el-text-color-primary);
}
.nn-h__count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--el-fill-color);
  color: var(--el-text-color-secondary);
  font-size: 11px;
  line-height: 1.5;
}
.nn-h__count.is-unread {
  background: var(--el-color-danger);
  color: #fff;
  font-weight: 600;
}
.nn-h__action {
  margin-left: auto;
  font-size: 11px;
}

.nn-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
.nn-list::-webkit-scrollbar {
  width: 6px;
}
.nn-list::-webkit-scrollbar-thumb {
  background: var(--el-fill-color-darker);
  border-radius: 3px;
}
.nn-list::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color);
}

/* 公告行：纯阅读 + 标题 2 行 clamp */
.nn-notice {
  padding: 7px 0;
  border-bottom: 1px dashed var(--el-border-color-lighter);
}
.nn-notice:last-child {
  border-bottom: none;
}
.nn-notice__title {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--el-text-color-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.nn-notice__time {
  margin-top: 3px;
  font-size: 11px;
  color: var(--el-text-color-secondary);
}

/* 通知行：可操作 + hover 浮出动作按钮 */
.nn-notify {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 120ms;
}
.nn-notify + .nn-notify {
  border-top: 1px dashed var(--el-border-color-lighter);
}
.nn-notify:hover {
  background: var(--el-fill-color-light);
}
.nn-notify__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--el-color-primary);
}
.nn-notify:not(.is-unread) .nn-notify__dot {
  background: transparent;
}
.nn-notify__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--el-text-color-regular);
}
.nn-notify.is-unread .nn-notify__title {
  color: var(--el-text-color-primary);
  font-weight: 500;
}
.nn-notify__time {
  font-size: 11px;
  color: var(--el-text-color-secondary);
  flex-shrink: 0;
  white-space: nowrap;
}
.nn-notify__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms;
}
.nn-notify:hover .nn-notify__actions {
  opacity: 1;
}
.nn-notify__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 4px;
  color: var(--el-text-color-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: background-color 120ms;
}
.nn-notify__act:hover {
  background: var(--el-fill-color);
  color: var(--el-color-primary);
}
</style>
