<script setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import AppMenuItem from "./AppMenuItem.vue";
import { useLayout } from "./composables/layout";
import { useNavigation } from "../composables/useNavigation";
import { splitNavByHeaders } from "../utils/navSections";

const route = useRoute();
const { menu, loaded } = useNavigation();
const { shouldCollapseSidebar } = useLayout();

const allItems = computed(() => {
  if (!loaded.value || !menu.value?.length) return [];
  const root = menu.value.find((n) => n.key === "root") ?? menu.value[0];
  if (!root) return [];
  return root.key === "root" ? (root.items ?? []) : (menu.value ?? []);
});

const mainItems = computed(() =>
  allItems.value.filter((item) => !item.pinnedBottom),
);
const pinnedItems = computed(() =>
  allItems.value.filter((item) => item.pinnedBottom),
);

const scrollSections = computed(() => splitNavByHeaders(mainItems.value));

/** Expand sidebar sections that contain the current route */
function sectionTouchesRoute(sec) {
  return sec.entries.some((item) => {
    const to = item.to;
    if (!to) return false;
    const base = to.replace(/\/$/, "");
    const cur = route.path.replace(/\/$/, "");
    return cur === base || cur.startsWith(`${base}/`);
  });
}

const mainItemsCollapsedNoHeaders = computed(() =>
  mainItems.value.filter((i) => !i.header),
);
</script>

<template>
  <div class="flex flex-col h-full overflow-hidden">
    <div
      class="sidebar-scroll flex-1 overflow-y-auto overflow-x-hidden min-h-0"
      :class="shouldCollapseSidebar ? 'pr-3' : 'pr-2'"
    >
      <!-- Icon-only Maestro sidebar: flat list, headers omitted -->
      <ul v-if="shouldCollapseSidebar" class="layout-menu">
        <AppMenuItem
          v-for="(item, index) in mainItemsCollapsedNoHeaders"
          :key="
            item.key || item.label + '_' + (item.to || item.path || index)
          "
          :item="item"
          :index="index"
          :root="true"
          :top-level-only="true"
        />
      </ul>

      <!-- Expanded: collapsible titled sections when navigation defines headers -->
      <template v-else>
        <template
          v-for="(sec, idx) in scrollSections"
          :key="
            'mainsec-' +
            idx +
            '-' +
            (sec.title ?? 'flat') +
            '-' +
            sec.entries.length
          "
        >
          <details
            v-if="sec.title && sec.entries.length"
            class="layout-sidebar-details"
            :open="sectionTouchesRoute(sec)"
          >
            <summary class="layout-sidebar-details-summary">
              <span>{{ sec.title }}</span>
              <i
                class="pi pi-angle-down layout-sidebar-details-chevron"
                aria-hidden="true"
              />
            </summary>
            <ul class="layout-menu layout-sidebar-details-menu">
              <AppMenuItem
                v-for="(item, index) in sec.entries"
                :key="
                  item.key ||
                  item.label + '_' + (item.to || item.path || index)
                "
                :item="item"
                :index="index"
                :root="true"
                :top-level-only="true"
              />
            </ul>
          </details>
          <ul v-else-if="sec.entries.length" class="layout-menu">
            <AppMenuItem
              v-for="(item, index) in sec.entries"
              :key="
                item.key ||
                item.label + '_' + (item.to || item.path || index)
              "
              :item="item"
              :index="index"
              :root="true"
              :top-level-only="true"
            />
          </ul>
        </template>
      </template>
    </div>
    <div v-if="pinnedItems.length" class="shrink-0 pt-2">
      <div class="border-t border-white/10 my-2" aria-hidden="true" />
      <ul class="layout-menu">
        <AppMenuItem
          v-for="(item, index) in pinnedItems"
          :key="item.key || item.label + '_' + (item.to || index)"
          :item="item"
          :index="index"
          :root="true"
          :top-level-only="true"
        />
      </ul>
    </div>
  </div>
</template>

<style scoped>
.sidebar-scroll {
  scrollbar-gutter: stable;
}
</style>
