<!-- Карточка правила: условия кодом с подсветкой, действия, шаблон, шумодав.
     Правка целиком — модаль с общей формой RuleForm (PATCH поддерживает
     замену условий и действий атомарно). -->
<script setup>
import { computed, onMounted, ref } from "vue";
import {
  GnBadge,
  GnButton,
  GnChip,
  GnConfirmDialog,
  GnDropdown,
  GnLoader,
  GnModal,
  GnPageHeader,
  GnStatusCard,
  GnSwitch,
} from "gnexus-ui-kit/vue";
import { useToast } from "gnexus-ui-kit/vue";
import { useRoute, useRouter } from "vue-router";
import { api } from "../api.js";
import { fmtTime, jsonSpans } from "../ui.js";
import CodeBlock from "../components/CodeBlock.vue";
import RuleForm from "../components/RuleForm.vue";
import { t } from "../i18n/index.js";

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

const rule = ref(null);
const sources = ref([]);
const targets = ref([]);
const loading = ref(true);
const error = ref("");

async function load() {
  loading.value = true;
  error.value = "";
  try {
    const [rules, src, tg] = await Promise.all([api.listRules(), api.listSources(), api.listTargets()]);
    rule.value = rules.find((r) => r.id === Number(route.params.id)) || null;
    sources.value = src;
    targets.value = tg;
    if (!rule.value) error.value = t("ruleDetail.notFound");
  } catch (ex) {
    error.value = ex.message;
  } finally {
    loading.value = false;
  }
}

async function toggleRule(enabled) {
  try {
    await api.patchRule(rule.value.id, { enabled });
    rule.value = { ...rule.value, enabled };
    toast.info(enabled ? t("ruleDetail.toastEnabled") : t("ruleDetail.toastDisabled"));
  } catch (ex) {
    toast.error(ex.message);
    await load();
  }
}

// --- редактирование: модаль с общей формой ---
const showEdit = ref(false);
const busy = ref(false);
const editForm = ref(null);
const editError = ref("");

async function saveEdit() {
  const payload = editForm.value?.collect();
  if (!payload) return;
  busy.value = true;
  try {
    rule.value = await api.patchRule(rule.value.id, payload);
    showEdit.value = false;
    toast.success(t("ruleDetail.toastSaved"));
  } catch (ex) {
    toast.error(ex.message);
  } finally {
    busy.value = false;
  }
}

const confirmDelete = ref(false);
async function doDelete() {
  try {
    await api.deleteRule(rule.value.id);
    toast.success(t("ruleDetail.toastDeleted"));
    router.push("/rules");
  } catch (ex) {
    toast.error(ex.message);
    confirmDelete.value = false;
  }
}

// Условия: ключи с человекочитаемой подписью, значение — код с подсветкой
const CONDITION_HINTS = computed(() => ({
  source: t("ruleDetail.condSource"),
  subjects: t("ruleDetail.condSubjects"),
  actions: t("ruleDetail.condActions"),
  priority_min: t("ruleDetail.condPriorityMin"),
  payload: t("ruleDetail.condPayload"),
}));

const conditionRows = computed(() =>
  Object.entries(rule.value?.conditions || {}).map(([key, value]) => ({
    key,
    hint: CONDITION_HINTS.value[key] || "",
    spans: jsonSpans(value),
    text: JSON.stringify(value, null, 2),
  })),
);

const WEIGHT_TIP = computed(() => t("ruleDetail.weightTip"));
const THROTTLE_TIP = computed(() => t("ruleDetail.throttleTip"));
onMounted(load);
</script>

<template>
  <main class="container page">
    <RouterLink to="/rules" class="back-link"><i class="ph ph-arrow-left"></i> {{ t("ruleDetail.backToList") }}</RouterLink>
    <GnPageHeader :kicker="t('ruleDetail.kicker')" :title="rule?.name || t('ruleDetail.noName')" :subtitle="t('ruleDetail.subtitle')">
      <template #actions>
        <GnSwitch
          v-if="rule"
          :model-value="rule.enabled"
          :label="rule.enabled ? t('ruleDetail.enabled') : t('ruleDetail.disabled')"
          @update:model-value="(v) => toggleRule(v)"
        />
        <GnDropdown
          :label="t('ruleDetail.actionsLabel')"
          :items="[
            { label: t('ruleDetail.edit'), icon: 'ph-pencil-simple', onSelect: () => (showEdit = true) },
            { label: t('ruleDetail.delete'), icon: 'ph-trash', danger: true, onSelect: () => (confirmDelete = true) },
          ]"
        />
      </template>
    </GnPageHeader>

    <GnLoader v-if="loading" circle :label="t('ruleDetail.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("ruleDetail.paramsTitle") }}</h3>
        <dl class="meta">
          <div class="meta-row">
            <dt>{{ t("ruleDetail.statusLabel") }}</dt>
            <dd>
              <GnBadge :variant="rule.enabled ? 'success' : 'secondary'" outline>
                {{ rule.enabled ? t("ruleDetail.stateOn") : t("ruleDetail.stateOff") }}
              </GnBadge>
            </dd>
          </div>
          <div class="meta-row">
            <dt>{{ t("ruleDetail.weightLabel") }}</dt>
            <dd>{{ rule.weight }} <span class="mini-hint">{{ WEIGHT_TIP }}</span></dd>
          </div>
          <div class="meta-row">
            <dt>{{ t("ruleDetail.throttleLabel") }}</dt>
            <dd>
              <template v-if="rule.throttle_seconds">
                <GnBadge variant="warning" outline>{{ rule.throttle_seconds }} {{ t("ruleDetail.secondsShort") }}</GnBadge>
              </template>
              <template v-else>—</template>
            </dd>
          </div>
          <div class="meta-row">
            <dt>{{ t("ruleDetail.createdLabel") }}</dt>
            <dd>{{ fmtTime(rule.created_at) }}</dd>
          </div>
        </dl>
        <p v-if="rule.throttle_seconds" class="panel-note">
          <i class="ph ph-info"></i> {{ THROTTLE_TIP }}
        </p>
      </section>

      <section class="panel">
        <h3 class="panel-title">{{ t("ruleDetail.conditionsTitle") }}</h3>
        <p class="panel-note">
          {{ t("ruleDetail.conditionsNote") }}
        </p>
        <ul class="conditions">
          <li v-for="c in conditionRows" :key="c.key" class="condition">
            <div class="condition-name">
              <code>{{ c.key }}</code>
              <span v-if="c.hint" class="condition-hint">{{ c.hint }}</span>
            </div>
            <CodeBlock :value="c.text" />
          </li>
        </ul>
      </section>

      <section class="panel">
        <h3 class="panel-title">{{ t("ruleDetail.templateTitle") }}</h3>
        <p class="panel-note">
          {{ t("ruleDetail.templateNote1") }} <code v-pre>{{ payload.поле }}</code> {{ t("ruleDetail.templateNote2") }}
        </p>
        <p v-if="rule.template" class="template-text"><code>{{ rule.template }}</code></p>
        <p v-else class="template-text muted">{{ t("ruleDetail.templateEmpty") }}</p>
      </section>

      <section class="panel">
        <h3 class="panel-title">{{ t("ruleDetail.actionsTitle") }}</h3>
        <p class="panel-note">
          {{ t("ruleDetail.actionsNote") }}
        </p>
        <ul class="actions-list">
          <li v-for="(a, i) in rule.actions" :key="i" class="action-item">
            <div class="action-head">
              <span class="action-num">{{ i + 1 }}</span>
              <GnBadge :variant="a.channel === 'internal_log' ? 'secondary' : 'accent'">
                {{ a.channel }}
              </GnBadge>
              <GnChip v-if="a.target_name" variant="accent">{{ a.target_name }}</GnChip>
              <span v-else class="mini-hint">{{ t("ruleDetail.withoutTarget") }}</span>
            </div>
            <div class="action-body">
              <template v-if="a.template">
                <span class="mini-hint">{{ t("ruleDetail.actionTemplate") }}</span>
                <code class="tpl">{{ a.template }}</code>
              </template>
              <template v-else-if="!rule.template && a.channel !== 'internal_log'">
                <span class="mini-hint">{{ t("ruleDetail.noTemplate") }}</span>
              </template>
            </div>
          </li>
        </ul>
      </section>
    </template>

    <!-- Редактирование правила -->
    <GnModal v-model:open="showEdit" :title="t('ruleDetail.editTitle')">
      <RuleForm v-if="showEdit" ref="editForm" :initial="rule" :sources="sources" :targets="targets" />
      <template #actions>
        <GnButton variant="secondary" @click="showEdit = false">{{ t("ruleDetail.cancel") }}</GnButton>
        <GnButton variant="primary" :loading="busy" @click="saveEdit">{{ t("ruleDetail.save") }}</GnButton>
      </template>
    </GnModal>

    <!-- Удаление правила -->
    <GnConfirmDialog
      v-model:open="confirmDelete"
      :title="t('ruleDetail.deleteTitle')"
      :message="t('ruleDetail.deleteMessage', { name: rule?.name })"
      confirm-variant="danger"
      :confirm-text="t('ruleDetail.delete')"
      :cancel-text="t('ruleDetail.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-note,
.mini-hint {
  margin: 0;
  font-size: 0.82em;
  opacity: 0.75;
}
.panel-note {
  /* иконка и текст на одной линии — как в карточке цели */
  display: flex;
  align-items: center;
  gap: var(--gn-space-2);
}
.mini-hint {
  opacity: 0.7;
}
.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);
  align-items: start;
}
.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;
  display: flex;
  align-items: center;
  gap: var(--gn-space-2);
  flex-wrap: wrap;
}
.conditions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gn-space-4);
}
.condition-name {
  display: flex;
  align-items: baseline;
  gap: var(--gn-space-3);
  margin-bottom: var(--gn-space-1);
}
.condition-hint {
  font-size: 0.82em;
  opacity: 0.75;
}
.template-text {
  margin: 0;
  border-radius: 6px;
  padding: var(--gn-space-3) var(--gn-space-4);
  background: var(--gn-surface-panel-muted);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.template-text.muted {
  background: none;
}
.actions-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--gn-space-3);
}
.action-item {
  padding: var(--gn-space-3) var(--gn-space-4);
  border: 1px solid var(--gn-border-color-muted);
  border-radius: 6px;
  background: var(--gn-surface-panel-muted);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-2);
}
.action-head {
  display: flex;
  align-items: center;
  gap: var(--gn-space-3);
  flex-wrap: wrap;
}
.action-body {
  display: flex;
  align-items: baseline;
  gap: var(--gn-space-3);
}
.action-num {
  opacity: 0.6;
  font-size: 0.85em;
}
.tpl {
  font-size: 0.85em;
  overflow-wrap: anywhere;
}
</style>