<template>
  <div class="tw:space-y-6">
    <div class="acmeshop-pulse-info">
      <h3>🚀 Расширьте возможности вашего магазина с <strong><a href="https://acmeshop.pro/" target="_blank">AcmeShop Pulse</a>!</strong></h3>

      <p>
        Если вы хотите не только показывать товары в Telegram, но и активно общаться с клиентами,
        рассылать новости, акции и уведомления — для этого есть <strong>AcmeShop Pulse</strong>.
        Это <strong>SaaS-платформа с месячной подпиской</strong>, которая полностью интегрируется
        с вашим ECommerce-магазином и витриной AcmeShop.
      </p>

      <p><strong>С AcmeShop Pulse вы сможете:</strong></p>

      <ul>
        <li>📣 Делать массовые рассылки сообщений покупателям прямо в Telegram</li>
        <li>📊 Анализировать эффективность сообщений и взаимодействие клиентов</li>
        <li>🔗 Легко синхронизироваться с вашей витриной AcmeShop — все данные остаются в одном месте</li>
      </ul>

      <p>
        🧪 Платформа <strong>AcmeShop Pulse находится на ранней стадии тестирования</strong>.
        Если вам интересно и вы хотите принять участи в тестировании интересно, свяжитесь со мной через
        <a href="https://t.me/ocstore3" target="_blank">официальную группу AcmeShop в Telegram</a>.
      </p>
    </div>

    <SettingsItem v-if="settings.items.pulse.api_key" label="Статистика за 7 дней">
      <template #default>
        <div v-if="stats" class="tw:space-y-4">
          <div class="tw:flex tw:gap-3 tw:max-w-2xl">
             <div class="tw:group tw:bg-white tw:rounded-lg tw:shadow tw:p-3 tw:relative tw:flex-1 tw:transition-all tw:duration-200 tw:cursor-default tw:hover:shadow-md tw:hover:-translate-y-0.5">
               <div class="tw:flex tw:justify-between tw:items-start tw:mb-1.5">
                 <div class="tw:text-xs tw:font-medium tw:text-gray-700">В очереди</div>
                 <div
                   class="tw:w-8 tw:h-8 tw:rounded-lg tw:bg-gradient-to-br tw:from-yellow-400 tw:to-yellow-600 tw:flex tw:items-center tw:justify-center tw:transition-transform tw:duration-200 tw:group-hover:scale-110">
                   <i class="fa fa-clock-o tw:text-white tw:text-xs"></i>
                 </div>
               </div>
               <div class="tw:text-3xl tw:font-bold tw:text-gray-800 tw:mb-0.5">{{
                   stats.pending
                 }}
               </div>
               <div class="tw:text-xs tw:text-gray-500">Ожидают отправки</div>
             </div>
             <div class="tw:group tw:bg-white tw:rounded-lg tw:shadow tw:p-3 tw:relative tw:flex-1 tw:transition-all tw:duration-200 tw:cursor-default tw:hover:shadow-md tw:hover:-translate-y-0.5">
               <div class="tw:flex tw:justify-between tw:items-start tw:mb-1.5">
                 <div class="tw:text-xs tw:font-medium tw:text-gray-700">Отправлено</div>
                 <div
                   class="tw:w-8 tw:h-8 tw:rounded-lg tw:bg-gradient-to-br tw:from-green-400 tw:to-green-600 tw:flex tw:items-center tw:justify-center tw:transition-transform tw:duration-200 tw:group-hover:scale-110">
                   <i class="fa fa-check-circle tw:text-white tw:text-xs"></i>
                 </div>
               </div>
               <div class="tw:text-3xl tw:font-bold tw:text-gray-800 tw:mb-0.5">{{
                   stats.sent
                 }}
               </div>
               <div class="tw:text-xs tw:text-gray-500">Успешно доставлено</div>
             </div>
             <div class="tw:group tw:bg-white tw:rounded-lg tw:shadow tw:p-3 tw:relative tw:flex-1 tw:transition-all tw:duration-200 tw:cursor-default tw:hover:shadow-md tw:hover:-translate-y-0.5">
               <div class="tw:flex tw:justify-between tw:items-start tw:mb-1.5">
                 <div class="tw:text-xs tw:font-medium tw:text-gray-700">Ошибки</div>
                 <div
                   class="tw:w-8 tw:h-8 tw:rounded-lg tw:bg-gradient-to-br tw:from-red-400 tw:to-red-600 tw:flex tw:items-center tw:justify-center tw:transition-transform tw:duration-200 tw:group-hover:scale-110">
                   <i class="fa fa-exclamation-circle tw:text-white tw:text-xs"></i>
                 </div>
               </div>
               <div class="tw:text-3xl tw:font-bold tw:text-gray-800 tw:mb-0.5">{{
                   stats.failed
                 }}
               </div>
               <div class="tw:text-xs tw:text-gray-500">Требуют внимания</div>
             </div>
          </div>
        </div>
      </template>
      <template #help>
        Статистика обновляется 1 раз в час
      </template>
    </SettingsItem>

    <ItemInput label="API ключ"
               v-model="settings.items.pulse.api_key"
               placeholder="AAAAAAAA-BBBB-CCCC-DDDD-EEEEEEEEEEEE"
    >
      Используется для обмена информацией по кампаниям, рассылкам, сбору метрик.
    </ItemInput>

    <ItemInput label="Размер пакета обработки"
               v-model.number="settings.items.pulse.batch_size"
               type="number"
               placeholder="50"
    >
      Определяет, сколько событий отправляется в AcmeShop Pulse за один запуск фоновой задачи.
      При большом значении события обрабатываются быстрее, но увеличивается нагрузка на сервер.
      При малом значении нагрузка ниже, но обработка занимает больше времени.
      Рекомендуемое значение: 50.
    </ItemInput>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useSettingsStore} from "@/stores/settings.js";
import ItemInput from "@/components/Settings/ItemInput.vue";
import {apiGet} from "@/utils/http.js";
import SettingsItem from "@/components/SettingsItem.vue";

const settings = useSettingsStore();
const stats = ref(null);

const loadStats = async () => {
  const response = await apiGet('getAcmeShopPulseStats');
  if (response.success) {
    stats.value = response.data;
  }
};

onMounted(() => {
  loadStats();
});
</script>

<style scoped>
.acmeshop-pulse-info {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.acmeshop-pulse-info h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #212529;
  line-height: 1.4;
}

.acmeshop-pulse-info h3 a {
  color: #dc3545;
  font-weight: 700;
  text-decoration: underline;
}

.acmeshop-pulse-info h3 a:hover {
  text-decoration: none;
}

.acmeshop-pulse-info p {
  margin-bottom: 16px;
  line-height: 1.6;
  color: #495057;
}

.acmeshop-pulse-info p:last-child {
  margin-bottom: 0;
}

.acmeshop-pulse-info p strong {
  color: #212529;
  font-weight: 600;
}

.acmeshop-pulse-info ul {
  margin: 16px 0;
  padding-left: 24px;
}

.acmeshop-pulse-info ul li {
  color: #495057;
  position: relative;
  padding-left: 8px;
}

.acmeshop-pulse-info ul li:last-child {
  margin-bottom: 0;
}
</style>
