<script setup lang="ts">
// Notification drawer. Right-side slide-out. Triggered by the topbar bell.

const drawer = useNotificationDrawer()

const TONE_COLOR: Record<string, string> = {
  info: 'var(--info)',
  ok:   'var(--ok)',
  warn: 'var(--warn)',
  bad:  'var(--bad)',
}
</script>

<template>
  <SidePanel :open="drawer.open.value" width="sm" eyebrow="Notifications" title="Inbox" @close="drawer.hide">
    <template #footer>
      <UiButton variant="ghost" @click="drawer.markAllRead">Mark all read</UiButton>
      <UiButton variant="secondary" @click="$router.push('/profile?tab=notifications'); drawer.hide()">Preferences</UiButton>
    </template>

    <div v-if="drawer.items.value.length === 0" class="empty">
      <Mono dim>No notifications.</Mono>
    </div>
    <div v-else class="list">
      <div v-for="n in drawer.items.value" :key="n.id" class="row" :class="{ unread: !n.read }">
        <span class="dot" :style="{ background: TONE_COLOR[n.tone] }" />
        <div class="meta">
          <div class="row-head">
            <div class="title">{{ n.title }}</div>
            <Mono dim>{{ n.when }}</Mono>
          </div>
          <div class="body">{{ n.body }}</div>
        </div>
      </div>
    </div>
  </SidePanel>
</template>

<style scoped>
.empty { padding: 32px 0; text-align: center; }
.list { display: flex; flex-direction: column; gap: 0; }
.row {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.row.unread { background: linear-gradient(to right, rgba(212, 255, 58, 0.06), transparent 60%); padding-left: 8px; margin-left: -8px; }
.dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 6px; flex-shrink: 0; }
.meta { flex: 1; min-width: 0; }
.row-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.title { font-weight: 600; font-size: 13.5px; }
.body { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
</style>
