<!-- Личный раздел: события, которые правила маршрутизации отправили в канал
     user с адресатом этим пользователем (payload.user_id == sub). Настройка
     «что сюда попадает» — в правилах (админка). -->
<script setup>
import { computed, 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";
import { t } from "../i18n/index.js";

const toast = useToast();

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

// computed: t() на уровне модуля заморозил бы язык (см. i18n-спек)
const PRIORITY_TIP = computed(() => t("myEvents.priorityTip"));

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="t('myEvents.title')"
      :subtitle="t('myEvents.subtitle')"
    />

    <GnLoader v-if="loading" circle :label="t('myEvents.loading')" />
    <GnStatusCard v-else-if="error" variant="error" icon="ph-warning-circle" :text="error" />
    <template v-else>
      <GnTable
        :rows="rows"
        :empty-text="t('myEvents.empty')"
        :columns="[
          { key: 'delivered_at', label: t('myEvents.colTime') },
          { key: 'event', label: t('myEvents.colEvent') },
          { key: 'priority', label: th(t('myEvents.colPriority'), PRIORITY_TIP) },
          { key: 'rendered_message', label: t('myEvents.colMessage') },
        ]"
      >
        <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>