<!-- Карточка цели канала: паспорт и config как читаемый код с подсветкой. -->
<script setup>
import { computed, onMounted, ref } from "vue";
import {
  GnBadge,
  GnButton,
  GnConfirmDialog,
  GnCopyButton,
  GnIconButton,
  GnLoader,
  GnPageHeader,
  GnStatusCard,
} from "gnexus-ui-kit/vue";
import { useToast } from "gnexus-ui-kit/vue";
import { useRoute, useRouter } from "vue-router";
import { api } from "../api.js";
import { badgeChannel, fmtTime } from "../ui.js";
import CodeBlock from "../components/CodeBlock.vue";

const toast = useToast();
const route = useRoute();
const router = useRouter();

// В админ-списках целей немного — берём полный список и ищем по id.
const row = ref(null);
const loading = ref(true);
const error = ref("");

async function load() {
  loading.value = true;
  error.value = "";
  try {
    const targets = await api.listTargets();
    row.value = targets.find((t) => t.id === Number(route.params.id)) || null;
    if (!row.value) error.value = "Цель не найдена";
  } catch (ex) {
    error.value = ex.message;
  } finally {
    loading.value = false;
  }
}

const confirmDelete = ref(false);
async function doDelete() {
  try {
    await api.deleteTarget(row.value.id);
    toast.success("Цель удалена");
    router.push("/targets");
  } catch (ex) {
    toast.error(ex.message);
    confirmDelete.value = false;
  }
}

const configText = computed(() => JSON.stringify(row.value?.config ?? {}, null, 2));

const CHANNEL_HINTS = {
  s2s: "system-to-system: Synapse подписывает и отправляет событие на endpoint цели. Секрет — в .env воркера под именем S2S_SECRET_<TOKEN_REF>.",
  telegram: "Telegram-канал (#29, пока не реализован). Config хранит идентификатор чата.",
  email: "Email-канал (#29, пока не реализован). Config хранит адреса/тему.",
  internal_log: "Внутренний журнал Synapse: доставка пишется в БД как деградация и аудит.",
};
onMounted(load);
</script>

<template>
  <main class="container page">
    <GnPageHeader kicker="Synapse · Цель" :title="row?.name || '…'" :subtitle="row?.channel || ''">
      <template #actions>
        <GnIconButton icon="ph-arrow-left" label="К списку целей" @click="router.push('/targets')" />
        <GnIconButton icon="ph-trash" label="Удалить цель" @click="confirmDelete = true" />
      </template>
    </GnPageHeader>

    <GnLoader v-if="loading" />
    <GnStatusCard v-else-if="error" variant="error" icon="ph-warning-circle" :text="error" />
    <template v-else>
      <section class="panel">
        <h3 class="panel-title">О цели</h3>
        <dl class="meta">
          <div class="meta-row">
            <dt>Канал</dt>
            <dd><GnBadge :variant="badgeChannel(row.channel)" outline>{{ row.channel }}</GnBadge></dd>
          </div>
          <div class="meta-row">
            <dt>Название</dt>
            <dd>{{ row.name }}</dd>
          </div>
          <div class="meta-row">
            <dt>Описание</dt>
            <dd>{{ row.description || "—" }}</dd>
          </div>
          <div class="meta-row">
            <dt>Создана</dt>
            <dd>{{ fmtTime(row.created_at) }}</dd>
          </div>
        </dl>
        <p v-if="CHANNEL_HINTS[row.channel]" class="channel-hint">
          <i class="ph ph-info"></i> {{ CHANNEL_HINTS[row.channel] }}
        </p>
      </section>

      <section class="panel">
        <div class="panel-head">
          <h3 class="panel-title">Config</h3>
          <GnCopyButton :text="configText" label="Скопировать" icon="ph-copy" />
        </div>
        <p class="panel-note">
          Идентификаторы точки доставки. Секреты и креды в config не пишутся — только в .env (gnexus-creds).
        </p>
        <CodeBlock :value="row.config ?? {}" />
      </section>
    </template>

    <!-- Удаление цели -->
    <GnConfirmDialog
      v-model:open="confirmDelete"
      title="Удалить цель?"
      :message="`Цель «${row?.name}» будет удалена. Ссылки из правил и доставок обнулятся, история доставок останется.`"
      confirm-variant="danger"
      confirm-text="Удалить"
      cancel-text="Отмена"
      @confirm="doDelete"
    />
  </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);
}
.panel {
  background: var(--gn-surface-panel);
  border: 1px solid var(--gn-border-color-muted);
  border-radius: 6px;
  padding: var(--gn-space-4) var(--gn-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-3);
}
.panel-title {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8em;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gn-space-3);
}
.panel-note,
.channel-hint {
  margin: 0;
  font-size: 0.82em;
  opacity: 0.75;
}
.meta {
  margin: 0;
  display: grid;
  gap: var(--gn-space-2);
}
.meta-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: var(--gn-space-3);
}
.meta-row dt {
  color: var(--gn-color-text-medium);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.meta-row dd {
  margin: 0;
}
</style>