<!-- Карточка цели канала: паспорт (редактируется), config как код с подсветкой,
     переключатель включённости. Канал не меняется — на него ссылаются правила. -->
<script setup>
import { computed, onMounted, ref } from "vue";
import {
  GnBadge,
  GnButton,
  GnConfirmDialog,
  GnCopyButton,
  GnDropdown,
  GnInput,
  GnLoader,
  GnModal,
  GnPageHeader,
  GnStatusCard,
  GnSwitch,
  GnTextarea,
} 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 showEdit = ref(false);
const form = ref({ name: "", description: "", config_text: "{}" });
const busy = ref(false);

function openEdit() {
  form.value = {
    name: row.value.name,
    description: row.value.description || "",
    config_text: JSON.stringify(row.value.config ?? {}, null, 2),
  };
  showEdit.value = true;
}

async function saveEdit() {
  formError.value = "";
  let config = {};
  try {
    config = JSON.parse(form.value.config_text || "{}");
  } catch {
    formError.value = "Config — не корректный JSON";
    return;
  }
  busy.value = true;
  try {
    row.value = await api.patchTarget(row.value.id, {
      name: form.value.name.trim(),
      ...(form.value.description ? { description: form.value.description } : { description: null }),
      config,
    });
    showEdit.value = false;
    toast.success("Сохранено");
  } catch (ex) {
    toast.error(ex.message);
  } finally {
    busy.value = false;
  }
}
const formError = ref("");

async function toggleEnabled(enabled) {
  try {
    row.value = await api.patchTarget(row.value.id, { enabled });
    toast.info(enabled ? "Цель включена" : "Цель выключена");
  } catch (ex) {
    toast.error(ex.message);
  }
}

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">
    <RouterLink to="/targets" class="back-link"><i class="ph ph-arrow-left"></i> К списку целей</RouterLink>
    <GnPageHeader kicker="Synapse · Цель" :title="row?.name || '…'" :subtitle="row?.channel || ''">
      <template #actions>
        <GnSwitch
          v-if="row"
          :model-value="row.enabled"
          :label="row.enabled ? 'Включена' : 'Выключена'"
          @update:model-value="(v) => toggleEnabled(v)"
        />
        <GnDropdown
          label="Действия"
          :items="[
            { label: 'Редактировать', icon: 'ph-pencil-simple', onSelect: openEdit },
            { label: 'Удалить', icon: 'ph-trash', danger: true, onSelect: () => (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>
              <GnBadge :variant="row.enabled ? 'success' : 'secondary'" outline>
                {{ row.enabled ? "включена" : "выключена" }}
              </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>

    <!-- Редактирование цели -->
    <GnModal v-model:open="showEdit" title="Редактировать цель">
      <div class="form">
        <GnInput v-model="form.name" label="Название" icon="ph-tag" help="Показывается в правилах и логе доставок" />
        <GnTextarea v-model="form.description" label="Описание" help="Для чего эта цель (для ИИ-агента и человека)" />
        <GnTextarea
          v-model="form.config_text"
          label="Config (JSON)"
          help='Например: {"endpoint":"http://…","token_ref":"navi-rei"}'
          state="error"
          :help="formError || undefined"
        />
        <p class="form-note"><i class="ph ph-lock"></i> Креды в config не пишутся — только .env (gnexus-creds)</p>
      </div>
      <template #actions>
        <GnButton variant="secondary" @click="showEdit = false">Отмена</GnButton>
        <GnButton variant="primary" :loading="busy" @click="saveEdit">Сохранить</GnButton>
      </template>
    </GnModal>

    <!-- Удаление цели -->
    <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);
}
.back-link {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: var(--gn-space-1);
  color: inherit;
  text-decoration: none;
  font-size: 0.85em;
  opacity: 0.75;
}
.back-link:hover {
  opacity: 1;
}
.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,
.form-note {
  margin: 0;
  font-size: 0.82em;
  opacity: 0.75;
  /* иконка и текст на одной линии, без «уехавшей» базовой линии */
  display: flex;
  align-items: center;
  gap: var(--gn-space-2);
}
.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;
}
.form {
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-4);
}
</style>