<template>
  <div v-if="! settings.error" class="tw:relative">
    <TopLead/>
    <ul class="nav nav-tabs">
      <li :class="{active: route.name === 'general'}">
        <RouterLink :to="{name: 'general'}">Общие</RouterLink>
      </li>

      <li :class="{active: route.name === 'telegram'}">
        <RouterLink :to="{name: 'telegram'}">Telegram</RouterLink>
      </li>

      <li :class="{active: route.name === 'metrics'}">
        <RouterLink :to="{name: 'metrics'}">Метрики</RouterLink>
      </li>

      <li :class="{active: route.name === 'store'}">
        <RouterLink :to="{name: 'store'}">Магазин</RouterLink>
      </li>

      <li :class="{active: route.name === 'texts'}">
        <RouterLink :to="{name: 'texts'}">Тексты</RouterLink>
      </li>

      <li :class="{active: route.name === 'orders'}">
        <RouterLink :to="{name: 'orders'}">Заказы</RouterLink>
      </li>

      <li :class="{active: route.name === 'mainpage'}">
        <RouterLink :to="{name: 'mainpage'}">Главная страница</RouterLink>
      </li>

      <li :class="{active: route.name === 'formbuilder'}">
        <RouterLink :to="{name: 'formbuilder'}">Форма заказа</RouterLink>
      </li>

      <li :class="{active: route.name === 'logs'}">
        <RouterLink :to="{name: 'logs'}">Журнал событий</RouterLink>
      </li>
    </ul>

    <section class="form-horizontal tab-content">
      <RouterView/>
    </section>

    <section>
      <Divider/>
      <div class="tw:flex tw:items-center tw:justify-start tw:gap-4">
        <Button
          label="Сохранить настройки"
          :disabled="!settings.hasUnsavedChanges"
          v-tooltip.top="settings.hasUnsavedChanges ? 'Сохранить изменения' : 'Нет изменений для сохранения'"
          @click="settings.saveSettings"
        />
        <div v-if="settings.hasUnsavedChanges"
             class="tw:flex tw:items-center tw:gap-2 tw:text-red-600">
          <i class="fa fa-exclamation-triangle"></i>
          <span class="tw:text-sm">Есть несохранённые изменения</span>
        </div>
      </div>
    </section>

    <div v-if="settings.isLoading"
         class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
      <div
        class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:justify-center tw:items-center tw:z-40 tw:text-4xl">
        <i class="fa fa-spin fa-spinner tw:mr-5"></i>
        <div>Загрузка...</div>
      </div>
    </div>
    <Toast position="top-right"/>
    <ConfirmDialog/>
    <ConfirmPopup group="popup"/>
  </div>

  <div v-else
       class="tw:w-full tw:h-full tw:absolute tw:top-0 tw:left-0 tw:z-30 tw:backdrop-blur-sm">
    <div
      class="tw:fixed tw:top-0 tw:left-0 tw:w-full tw:h-full tw:flex tw:flex-col tw:justify-center tw:items-center tw:z-40">
      <i class="fa fa-ban tw:text-4xl"></i>
      <div class="tw:text-4xl">{{ settings.error }}</div>
      <div>Обратитесь в поддержку</div>
    </div>
  </div>
</template>

<script setup>
import {RouterView, useRoute} from 'vue-router';
import {useSettingsStore} from "@/stores/settings.js";
import Toast from 'primevue/toast';
import {toastBus} from '@/utils/toastHelper';
import {useToast} from "primevue";
import Button from 'primevue/button';
import TopLead from "@/components/TopLead.vue";
import Divider from 'primevue/divider';
import ConfirmDialog from 'primevue/confirmdialog';
import ConfirmPopup from 'primevue/confirmpopup';
import {onBeforeUnmount, onMounted} from "vue";

const route = useRoute();
const settings = useSettingsStore();
const toast = useToast();
toastBus.on('show', (data) => toast.add(data));

// Защита от обновления страницы или закрытия вкладки
function handleBeforeUnload(event) {
  if (settings.hasUnsavedChanges) {
    event.preventDefault();
    event.returnValue = 'У вас есть несохранённые изменения. Вы уверены, что хотите покинуть страницу?';
    return event.returnValue;
  }
}

onMounted(() => {
  window.addEventListener('beforeunload', handleBeforeUnload);
});

onBeforeUnmount(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload);
});
</script>


<style scoped>

</style>
