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

defineOptions({ name: 'WorkbenchMentions' });

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

interface MentionItem {
  id: string;
  fromName: string;
  fromAvatar: string;
  context: string;
  timeLabel: string;
  unread: boolean;
}

const items: MentionItem[] = [
  {
    id: 'm1',
    fromName: '李四',
    fromAvatar: '李',
    context: '在 任务「分片设计评审」中 @ 了你',
    timeLabel: '2h 前 · 评审建议',
    unread: true
  },
  {
    id: 'm2',
    fromName: '张三',
    fromAvatar: '张',
    context: '在 执行「迭代 24.05」中 @ 了你',
    timeLabel: '昨日 · 关闭确认',
    unread: true
  },
  {
    id: 'm3',
    fromName: '王五',
    fromAvatar: '王',
    context: '在 需求「多币种支持」中 @ 了你',
    timeLabel: '3 天前',
    unread: true
  }
];

const unreadCount = items.filter(i => i.unread).length;
</script>

<template>
  <WorkbenchModuleCard
    title="@我的提及"
    icon="mdi:at"
    :badge-count="unreadCount"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <ul class="mention-list">
      <li v-for="item in items" :key="item.id" class="mention-item">
        <span class="mention-avatar">{{ item.fromAvatar }}</span>
        <div class="mention-body">
          <div class="mention-text">
            <strong>{{ item.fromName }}</strong>
            {{ item.context }}
          </div>
          <div class="mention-meta">{{ item.timeLabel }}</div>
        </div>
      </li>
    </ul>
  </WorkbenchModuleCard>
</template>

<style scoped>
.mention-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mention-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  background: var(--el-fill-color-blank);
}
.mention-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--el-color-primary-light-8);
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}
.mention-body {
  min-width: 0;
  flex: 1;
}
.mention-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--el-text-color-primary);
}
.mention-meta {
  font-size: 12px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
}
</style>
