<script setup lang="ts">
import { nextTick, ref, watch } from 'vue'
import type { KbxUserNotification } from '@kbx/contracts'

const props=withDefaults(defineProps<{ notifications: KbxUserNotification[]; activeId?: string | null }>(), { activeId:null })
const emit = defineEmits<{ open: [KbxUserNotification]; read: [string] }>()
const root=ref<HTMLElement|null>(null)
async function focusActive(){
  if(!props.activeId)return
  await nextTick()
  const target=[...(root.value?.querySelectorAll<HTMLElement>('[data-notification-id]')??[])].find(el=>el.dataset.notificationId===props.activeId)
  target?.focus({preventScroll:true});target?.scrollIntoView({block:'nearest'})
}
watch(()=>props.activeId,focusActive,{immediate:true})
</script>

<template>
  <section ref="root" class="kbx-notification-center" aria-label="알림 센터">
    <button
      v-for="item in notifications"
      :key="item.id"
      type="button"
      class="notice"
      :class="[`is-${item.severity}`, { unread: !item.readAt, active:item.id===activeId }]"
      :data-notification-id="item.id"
      :aria-current="item.id===activeId?'true':undefined"
      @click="emit('open', item); emit('read', item.id)"
    >
      <span class="marker" aria-hidden="true" />
      <span class="copy"><strong>{{ item.title }}</strong><small v-if="item.message">{{ item.message }}</small></span>
      <time>{{ new Date(item.createdAt).toLocaleString('ko-KR') }}</time>
    </button>
    <p v-if="notifications.length === 0" class="empty">새 알림이 없습니다.</p>
  </section>
</template>

<style scoped>
.kbx-notification-center { display:grid; gap:4px; }
.notice { display:grid; grid-template-columns:8px 1fr auto; align-items:start; gap:8px; padding:10px; border:1px solid transparent; background:transparent; text-align:left; cursor:pointer; }
.notice:hover { background:var(--kbx-color-surface-hover); }.notice.active{border-color:var(--kbx-color-primary);box-shadow:inset var(--kbx-accent-border-width) 0 0 var(--kbx-color-primary);background:var(--kbx-color-info-surface)}
.marker { width:6px; height:6px; margin-top:6px; border-radius:50%; background:var(--kbx-color-text-muted); }
.unread .marker { background:var(--kbx-color-primary); }
.copy { display:grid; gap:2px; } small,time,.empty { color:var(--kbx-color-text-muted); font-size:var(--kbx-font-xs); }
time { white-space:nowrap; }
.empty { margin:0; padding:12px; }
</style>
