<script setup>
import { useLayout } from "../composables/layout/layout.js";
import { useSubSidebarContext } from "../composables/layout/context.js";
import { computed } from "vue";
import BaseToast from "../components/base/BaseToast.vue";
import AppBreadcrumb from "./AppBreadcrumb.vue";
import AppConfig from "./AppConfig.vue";
import AppFooter from "./AppFooter.vue";
import AppRightMenu from "./AppRightMenu.vue";
import AppSearch from "./AppSearch.vue";
import AppSidebar from "./AppSidebar.vue";
import AppTopbar from "./AppTopbar.vue";
import VerticalSubmenu from "./VerticalSubmenu.vue";

const {
  layoutConfig,
  layoutState,
  hideMobileMenu,
  shouldCollapseSidebar,
  activeSubitems,
  isMaestroMode,
} = useLayout();
const { activeContext } = useSubSidebarContext();

const hasSubmenu = computed(() => {
  // Show vertical submenu only in Maestro mode when we have active subitems
  if (!isMaestroMode.value) return false;
  const sub = activeSubitems.value;
  return !!(sub && sub.items && sub.items.length > 0);
});

const containerClass = computed(() => {
  return [
    `layout-sidebar-${layoutConfig.menuTheme}`,
    `layout-card-${layoutConfig.cardStyle}`,
    {
      "layout-overlay": layoutConfig.menuMode === "overlay",
      "layout-static": layoutConfig.menuMode === "static",
      "layout-slim": layoutConfig.menuMode === "slim",
      "layout-horizontal": layoutConfig.menuMode === "horizontal",
      "layout-compact": layoutConfig.menuMode === "compact",
      "layout-reveal": layoutConfig.menuMode === "reveal",
      "layout-drawer": layoutConfig.menuMode === "drawer",
      "layout-maestro": layoutConfig.menuMode === "maestro",
      "layout-overlay-active": layoutState.overlayMenuActive,
      "layout-mobile-active": layoutState.mobileMenuActive,
      "layout-static-inactive": layoutState.staticMenuInactive,
      "layout-sidebar-expanded": layoutState.sidebarExpanded,
      "layout-sidebar-anchored": layoutState.anchored,
    },
  ];
});
</script>

<template>
  <div class="layout-wrapper" :class="containerClass">
    <AppSidebar />
    <VerticalSubmenu
      v-if="hasSubmenu && activeSubitems"
      :key="activeContext?.key || activeSubitems.parentPath || 'submenu'"
      :items="activeSubitems.items"
      :parent-path="activeSubitems.parentPath"
      :title="activeSubitems.title"
      :description="activeSubitems.description"
    />
    <div class="layout-content-wrapper">
      <!-- main content wrapper / page wrapper-->
      <div
        name="sectie"
        class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10"
        style="border-bottom: 1px solid var(--surface-border)"
      >
        <div
          name="containers"
          class="layout-content-wrapper-inside"
          :class="{ 'layout-maestro-with-submenu': hasSubmenu }"
        >
          <AppTopbar class="" />
        </div>
      </div>
      <div
        name="sectie"
        class="w-full px-3 py-3 sm:px-4 sm:py-4 md:px-6 lg:px-8 lg:py-5 xl:px-10"
      >
        <div
          name="containers"
          class="layout-content-wrapper-inside"
          :class="{ 'layout-maestro-with-submenu': hasSubmenu }"
        >
          <div class="layout-content h-full">
            <div class="layout-content-main">
              <div class="main-column">
                <AppBreadcrumb />
                <!-- min-h-0: avoid min-h-screen stacking with topbar/breadcrumb (extra page scroll) -->
                <router-view class="min-h-0" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div name="sectie" class="w-full px-3 sm:px-4 md:px-6 lg:px-8 xl:px-10">
        <div
          name="containers"
          class="layout-content-wrapper-inside"
          :class="{ 'layout-maestro-with-submenu': hasSubmenu }"
        >
          <AppFooter />
        </div>
      </div>
    </div>
    <AppConfig />
    <AppSearch />
    <AppRightMenu />
    <BaseToast />
    <Transition name="p-overlay-mask">
      <div
        v-if="layoutState.mobileMenuActive"
        class="layout-mask"
        @click="hideMobileMenu"
      />
    </Transition>
  </div>
</template>

<!-- 
<div class="layout-content-wrapper-inside" :class="{ 'layout-maestro-with-submenu': hasSubmenu }">
           

   

</div> -->
