<!-- Карточка цели канала: паспорт (редактируется), 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 { t } from "../i18n/index.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 = t("targetDetail.notFound");
  } 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 = t("targetDetail.invalidConfigJson");
    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(t("targetDetail.toastSaved"));
  } 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 ? t("targetDetail.toastEnabled") : t("targetDetail.toastDisabled"));
  } catch (ex) {
    toast.error(ex.message);
  }
}

const confirmDelete = ref(false);
async function doDelete() {
  try {
    await api.deleteTarget(row.value.id);
    toast.success(t("targetDetail.toastDeleted"));
    router.push("/targets");
  } catch (ex) {
    toast.error(ex.message);
    confirmDelete.value = false;
  }
}

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

// Подсказки по каналам зависят от языка — computed, чтобы t() был реактивен.
const CHANNEL_HINTS = computed(() => ({
  s2s: t("targetDetail.hintS2s"),
  telegram: t("targetDetail.hintTelegram"),
  email: t("targetDetail.hintEmail"),
  internal_log: t("targetDetail.hintInternalLog"),
}));
onMounted(load);
</script>

<template>
  <main class="container page">
    <RouterLink to="/targets" class="back-link"><i class="ph ph-arrow-left"></i> {{ t("targetDetail.backLink") }}</RouterLink>
    <GnPageHeader :kicker="`Synapse · ${t('targetDetail.kickerTarget')}`" :title="row?.name || t('targetDetail.unnamed')" :subtitle="row?.channel || ''">
      <template #actions>
        <GnSwitch
          v-if="row"
          :model-value="row.enabled"
          :label="row.enabled ? t('targetDetail.enabled') : t('targetDetail.disabled')"
          @update:model-value="(v) => toggleEnabled(v)"
        />
        <GnDropdown
          :label="t('targetDetail.actions')"
          :items="[
            { label: t('targetDetail.edit'), icon: 'ph-pencil-simple', onSelect: openEdit },
            { label: t('targetDetail.delete'), icon: 'ph-trash', danger: true, onSelect: () => (confirmDelete = true) },
          ]"
        />
      </template>
    </GnPageHeader>

    <GnLoader v-if="loading" circle :label="t('targetDetail.loading')" />
    <GnStatusCard v-else-if="error" variant="error" icon="ph-warning-circle" :text="error" />
    <template v-else>
      <section class="panel">
        <h3 class="panel-title">{{ t("targetDetail.about") }}</h3>
        <dl class="meta">
          <div class="meta-row">
            <dt>{{ t("targetDetail.fieldChannel") }}</dt>
            <dd><GnBadge :variant="badgeChannel(row.channel)" outline>{{ row.channel }}</GnBadge></dd>
          </div>
          <div class="meta-row">
            <dt>{{ t("targetDetail.fieldStatus") }}</dt>
            <dd>
              <GnBadge :variant="row.enabled ? 'success' : 'secondary'" outline>
                {{ row.enabled ? t("targetDetail.statusOn") : t("targetDetail.statusOff") }}
              </GnBadge>
            </dd>
          </div>
          <div class="meta-row">
            <dt>{{ t("targetDetail.fieldName") }}</dt>
            <dd>{{ row.name }}</dd>
          </div>
          <div class="meta-row">
            <dt>{{ t("targetDetail.fieldDescription") }}</dt>
            <dd>{{ row.description || "—" }}</dd>
          </div>
          <div class="meta-row">
            <dt>{{ t("targetDetail.fieldCreatedAt") }}</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">{{ t("targetDetail.configTitle") }}</h3>
          <GnCopyButton :text="configText" :label="t('targetDetail.copy')" icon="ph-copy" />
        </div>
        <p class="panel-note">
          {{ t("targetDetail.configNote") }}
        </p>
        <CodeBlock :value="row.config ?? {}" />
      </section>
    </template>

    <!-- Редактирование цели -->
    <GnModal v-model:open="showEdit" :title="t('targetDetail.modalEdit')">
      <div class="form">
        <GnInput v-model="form.name" :label="t('targetDetail.formName')" icon="ph-tag" :help="t('targetDetail.nameHelp')" />
        <GnTextarea v-model="form.description" :label="t('targetDetail.formDescription')" :help="t('targetDetail.descriptionHelp')" />
        <GnTextarea
          v-model="form.config_text"
          :label="t('targetDetail.formConfigLabel')"
          state="error"
          :help="formError || t('targetDetail.configExample')"
        />
        <p class="form-note"><i class="ph ph-lock"></i> {{ t("targetDetail.credsNote") }}</p>
      </div>
      <template #actions>
        <GnButton variant="secondary" @click="showEdit = false">{{ t("targetDetail.cancel") }}</GnButton>
        <GnButton variant="primary" :loading="busy" @click="saveEdit">{{ t("targetDetail.save") }}</GnButton>
      </template>
    </GnModal>

    <!-- Удаление цели -->
    <GnConfirmDialog
      v-model:open="confirmDelete"
      :title="t('targetDetail.confirmTitle')"
      :message="t('targetDetail.confirmMessage', { name: row?.name })"
      confirm-variant="danger"
      :confirm-text="t('targetDetail.confirmDelete')"
      :cancel-text="t('targetDetail.cancel')"
      @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>