<template>
  <!-- Conteneur de notifications global -->
  <notification-container />

  <!-- Guest Layout: for login, signup, auth pages -->
  <div v-if="isGuestRoute" class="guest-layout">
    <router-view />
  </div>

  <!-- Dashboard Layout: for authenticated pages -->
  <div v-else class="dashboard-layout">
    <sidenav
      v-if="showSidenav"
      :custom-class="color"
      :class="[isTransparent, isRTL ? 'fixed-end' : 'fixed-start']"
    />
    <main
      class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
    >
      <!-- nav -->
      <navbar
        v-if="showNavbar"
        :class="[isNavFixed ? navbarFixed : '', isAbsolute ? absolute : '']"
        :text-white="isAbsolute ? 'text-white opacity-8' : ''"
        :min-nav="navbarMinimize"
      />
      <router-view />
      <app-footer v-show="showFooter" />

      <BotMessageConfigurator
        :toggle="toggleConfigurator"
        :class="[showConfig ? 'show' : '', hideConfigButton ? 'd-none' : '']"
      />
    </main>
  </div>
</template>
<script>
import Sidenav from "./examples/Sidenav";
import BotMessageConfigurator from "./examples/BotMessageConfigurator.vue";
import Navbar from "@/examples/Navbars/Navbar.vue";
import AppFooter from "@/examples/Footer.vue";
import NotificationContainer from "@/components/NotificationContainer.vue";
import { mapMutations, mapState } from "vuex";
export default {
  name: "App",
  components: {
    Sidenav,
    Navbar,
    AppFooter,
    NotificationContainer,
    BotMessageConfigurator,
  },
  computed: {
    ...mapState([
      "isTransparent",
      "isRTL",
      "isNavFixed",
      "isAbsolute",
      "navbarFixed",
      "absolute",
      "color",
      "showSidenav",
      "showNavbar",
      "showFooter",
      "showConfig",
      "hideConfigButton",
    ]),
    isGuestRoute() {
      // Check if current route has guestLayout meta flag
      return this.$route.meta?.guestLayout === true;
    },
  },
  beforeMount() {
    this.$store.state.isTransparent = "bg-transparent";
  },
  methods: {
    ...mapMutations(["toggleConfigurator", "navbarMinimize"]),
  },
};
</script>

<style>
/* Ensure Bootstrap modals appear above the Soft UI sidenav */
.g-sidenav-show .sidenav {
  /* lower than modal/backdrop but still above content */
  z-index: 1030 !important;
}

.g-sidenav-show .modal-backdrop {
  z-index: 1040 !important;
}

.g-sidenav-show .modal {
  z-index: 1050 !important;
}
</style>
