<script setup>
/**
 * Vertical subsidebar: shows children of the currently active TOP-LEVEL parent only.
 * Items and parentPath come from layout (getActiveTopLevelParent). Root is never
 * treated as submenu parent; subsidebar renders only when active parent has children.
 * Section headers come from SUBMENU_GROUPS (and DB headers); they render as plain
 * section labels with links listed underneath — same pattern as the main sidebar.
 */
import { computed } from "vue";
import VerticalSubmenuEntryList from "./VerticalSubmenuEntryList.vue";
import { TOP_ITEM_KEYS, SUBMENU_GROUPS } from "../config/verticalSubmenu";
import { splitNavByHeaders } from "../utils/navSections";

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
  parentPath: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "",
  },
  description: {
    type: String,
    default: null,
  },
});

/** Flatten items: top item(s) first, then grouped sections, then remaining items. */
const entriesWithHeaders = computed(() => {
  const items = props.items ?? [];
  const result = [];
  const matchedKeys = new Set();

  const topItems = items.filter(
    (it) => it && it.key && TOP_ITEM_KEYS.includes(it.key),
  );
  for (const it of topItems) {
    result.push(it);
    matchedKeys.add(it.key);
  }

  for (const group of SUBMENU_GROUPS) {
    const groupItems = items.filter(
      (it) => it && it.key && group.keys.includes(it.key),
    );
    if (groupItems.length === 0) continue;
    result.push({ header: true, label: group.label });
    for (const it of groupItems) {
      result.push(it);
      matchedKeys.add(it.key);
    }
  }

  const rest = items.filter(
    (it) => it && (!it.key || !matchedKeys.has(it.key)),
  );
  for (const it of rest) result.push(it);
  return result;
});

const subsections = computed(() =>
  splitNavByHeaders(entriesWithHeaders.value),
);
</script>

<template>
  <div class="vertical-submenu flex flex-col h-full">
    <div
      v-if="title"
      class="vertical-submenu-header-card shrink-0 h-16 px-4 bg-surface-100 dark:bg-surface-800 flex flex-col justify-center"
    >
      <div
        class="text-lg font-semibold leading-tight text-surface-900 dark:text-surface-0"
      >
        {{ title }}
      </div>
      <p
        v-if="description"
        class="text-xs text-surface-500 dark:text-surface-400 mt-0.5 mb-0 leading-tight"
      >
        {{ description }}
      </p>
    </div>
    <nav class="vertical-submenu-nav flex-1 min-h-0 overflow-y-auto">
      <template
        v-for="(sec, sidx) in subsections"
        :key="
          'vsub-' +
          sidx +
          '-' +
          (sec.title ? sec.title : 'flat') +
          '-' +
          sec.entries.length
        "
      >
        <template v-if="sec.title && sec.entries.length">
          <div class="vertical-submenu-section-header">
            {{ sec.title }}
          </div>
          <VerticalSubmenuEntryList
            :entries="sec.entries"
            :parent-path="parentPath"
          />
        </template>
        <VerticalSubmenuEntryList
          v-else-if="sec.entries.length"
          :entries="sec.entries"
          :parent-path="parentPath"
        />
      </template>
    </nav>
  </div>
</template>
