<!-- Личный раздел: события, которые правила маршрутизации отправили в канал
     user с адресатом этим пользователем (payload.user_id == sub). Настройка
     «что сюда попадает» — в правилах (админка). -->
<script setup>
import { onMounted, ref } from "vue";
import { GnBadge, GnLoader, GnPageHeader, GnStatusCard, GnTable } from "gnexus-ui-kit/vue";
import { useToast } from "gnexus-ui-kit/vue";
import { api } from "../api.js";
import { fmtTime, priorityVariant, th, truncate } from "../ui.js";

const toast = useToast();

const rows = ref([]);
const loading = ref(true);
const error = ref("");

const PRIORITY_TIP = "Приоритет события из конверта: low, normal, high, critical";

async function load() {
  loading.value = true;
  error.value = "";
  try {
    rows.value = await api.myEvents({ limit: 200 });
  } catch (ex) {
    error.value = ex.message;
    toast.error(ex.message);
  } finally {
    loading.value = false;
  }
}

onMounted(load);
</script>

<template>
  <main class="container page">
    <GnPageHeader
      kicker="Synapse"
      title="Мои события"
      subtitle="События, направленные лично вам правилами маршрутизации: что случилось и что об этом сказали"
    />

    <GnLoader v-if="loading" circle label="Загрузка…" />
    <GnStatusCard v-else-if="error" variant="error" icon="ph-warning-circle" :text="error" />
    <template v-else>
      <GnTable
        :rows="rows"
        empty-text="Пока нет событий, направленных лично вам: они появляются, когда правило маршрутизации отправляет событие в канал user"
        :columns="[
          { key: 'delivered_at', label: 'Время' },
          { key: 'event', label: 'Событие' },
          { key: 'priority', label: th('Приоритет', PRIORITY_TIP) },
          { key: 'rendered_message', label: 'Сообщение' },
        ]"
      >
        <template #cell-delivered_at="{ row }">{{ fmtTime(row.delivered_at || row.created_at) }}</template>
        <template #cell-event="{ row }">
          {{ row.source_name }}.{{ row.subject }}.{{ row.action }}
        </template>
        <template #cell-priority="{ value }">
          <GnBadge :variant="priorityVariant(value)" outline>{{ value }}</GnBadge>
        </template>
        <template #cell-rendered_message="{ value }">
          <span :title="value || ''">{{ truncate(value, 80) || "—" }}</span>
        </template>
      </GnTable>
    </template>
  </main>
</template>

<style scoped>
.page {
  max-width: 1440px;
  margin-inline: auto;
  padding-block: var(--gn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-4);
}
.event-sep {
  opacity: 0.4;
  font-size: 0.85em;
}
</style>