<template>
  <SettingsItem :label="label">
    <template #default>
      <div style="margin-bottom: 10px;">
        <Codemirror
          v-model="model"
          :placeholder="placeholder"
          :extensions="extensions"
        />
      </div>

      <div>
        <button
          class="btn btn-link"
          type="button"
          data-toggle="collapse"
          :data-target="`#${collapseId}`"
          aria-expanded="false"
          :aria-controls="collapseId"
        >
          Документация
        </button>
        <button
          type="button"
          class="btn btn-primary btn-sm"
          @click="sendTestMessage"
          :disabled="isSending"
          :class="{
            'tw:opacity-60 tw:cursor-not-allowed': isSending
          }"
        >
          <i :class="isSending ? 'fa fa-spinner fa-spin' : 'fa fa-envelope'"></i>
          {{ isSending ? 'Отправляю...' : 'Отправить тестовое уведомление' }}
        </button>
      </div>

      <div class="collapse" :id="collapseId" style="margin-top: 15px">
        <div class="well">
          <p>
            Для формирования сообщения используется HTML разметка.
            Telegram поддерживает только часть HTML тегов, которые описаны в их
            <a href="https://core.telegram.org/bots/api#html-style" target="_blank">документации <i class="fa fa-external-link"></i></a>.
          </p>
          <p>Дополнительно к этому TeleCart добавляет переменные, которые вы можете использовать, чтобы сделать сообщения динамическими.</p>
          <ul>
            <li><code>{store_name}</code> — название магазина</li>
            <li><code>{order_id}</code> — номер заказа</li>
            <li><code>{customer}</code> — имя и фамилия покупателя</li>
            <li><code>{email}</code> — email покупателя</li>
            <li><code>{phone}</code> — телефон</li>
            <li><code>{comment}</code> — комментарий к заказу</li>
            <li><code>{address}</code> — адрес доставки</li>
            <li><code>{total}</code> — сумма заказа</li>
            <li><code>{ip}</code> — IP покупателя</li>
            <li><code>{created_at}</code> — дата и время создания заказа</li>
          </ul>
          <p></p>
        </div>
      </div>
    </template>

    <template #help>
      <slot></slot>
    </template>
  </SettingsItem>
</template>

<script setup>
import {useSettingsStore} from "@/stores/settings.js";
import {ref, toRaw, useId} from "vue";
import SettingsItem from "@/components/SettingsItem.vue";
import {apiPost} from "@/utils/http.js";
import {Codemirror} from "vue-codemirror";
import { html } from '@codemirror/lang-html';
import { oneDark } from '@codemirror/theme-one-dark';

const model = defineModel();
const settings = useSettingsStore();
const isSending = ref(false);
const collapseId = useId();
const extensions = [html(), oneDark];

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: 'Введите шаблон сообщения',
  },
  rows: {
    type: Number,
    default: 5,
  },
});

async function sendTestMessage() {
  console.log(toRaw(settings.items.telegram));
  const telegramToken = settings.items.telegram.bot_token?.trim();

  if (!telegramToken) {
    alert('Сначала введите Telegram Bot Token!');
    return;
  }

  const chatId = settings.items.telegram.chat_id;

  if (!chatId) {
    alert('Сначала введите Chat ID!');
    return;
  }

  const template = model.value?.trim();

  if (!template) {
    alert('Сначала задайте шаблон!');
    return;
  }

  isSending.value = true;

  try {
    const result = await apiPost('testTgMessage', {
      token: telegramToken,
      chat_id: chatId,
      template: template,
    });

    if (!result.success) {
      const errorMessage = result.data?.message || result.error || 'Неизвестная ошибка';
      alert(`Ошибка: ${errorMessage}`);
      return;
    }

    const response = result.data;
    alert(response.message || 'Уведомление успешно отправлено');
  } catch (error) {
    console.error('Ошибка при отправке тестового сообщения:', error);
    alert('Ошибка при отправке тестового сообщения');
  } finally {
    isSending.value = false;
  }
}
</script>

<style scoped>
code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
}

pre {
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.9em;
  overflow-x: auto;
}
</style>

