<script setup lang="ts">
import { computed } from 'vue'
import { useBulletinStore } from '@/stores/bulletin'
import { BulletinPriorityMap } from '@/types'
import type { BulletinPost } from '@/types'

const emit = defineEmits<{
  viewAll: []
}>()

const bulletinStore = useBulletinStore()

const hasPinned = computed(() => bulletinStore.pinnedPosts.length > 0)

function handleClick(post: BulletinPost) {
  bulletinStore.markAsRead(post.id)
  emit('viewAll')
}
</script>

<template>
  <div v-if="hasPinned" class="bulletin-pinned">
    <div
      v-for="post in bulletinStore.pinnedPosts"
      :key="post.id"
      class="pinned-item"
      :class="{ 'pinned-item--urgent': post.priority === 'urgent' }"
      @click="handleClick(post)"
    >
      <span class="pinned-item__dot" />
      <span class="pinned-item__priority">{{ BulletinPriorityMap[post.priority] }}</span>
      <span class="pinned-item__title">{{ post.title }}</span>
      <span v-if="!bulletinStore.isRead(post.id)" class="pinned-item__unread" />
    </div>
  </div>
</template>

<style scoped>
.bulletin-pinned {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pinned-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--gg-bg-card);
  border: 1px solid var(--gg-border);
  border-left: 3px solid var(--gg-primary);
  border-radius: var(--gg-radius-md);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pinned-item:hover {
  border-color: var(--gg-primary-light);
  box-shadow: 0 0 16px rgba(5, 150, 105, 0.08);
}

.pinned-item--urgent {
  border-left-color: var(--gg-danger);
  background: rgba(239, 68, 68, 0.04);
}

.pinned-item--urgent:hover {
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.08);
}

.pinned-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gg-primary);
  flex-shrink: 0;
}

.pinned-item--urgent .pinned-item__dot {
  background: var(--gg-danger);
}

.pinned-item__priority {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--gg-bg-elevated);
  color: var(--gg-text-muted);
  flex-shrink: 0;
}

.pinned-item--urgent .pinned-item__priority {
  background: rgba(239, 68, 68, 0.12);
  color: var(--gg-danger);
}

.pinned-item__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--gg-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.pinned-item__unread {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gg-danger);
  box-shadow: 0 0 6px var(--gg-danger);
  flex-shrink: 0;
}
</style>
