<script setup>
defineProps({
  /** 공개 API `primary` 트리 노드 */
  nodes: {
    type: Array,
    default: () => []
  }
})

const expandedSet = inject('sidebarPrimaryNavExpandedSet')
const toggleBranch = inject('sidebarPrimaryNavToggle')

/**
 * 노드가 펼쳐져 있는지
 * @param {string} id - 노드 id
 * @returns {boolean}
 */
const isExpanded = (id) => expandedSet?.value?.has(String(id)) ?? true

/**
 * 부모 행(이름·행 전체) 클릭으로 하위 접기/펼치기
 * @param {string} id - 노드 id
 * @returns {void}
 */
const onBranchClick = (id) => {
  toggleBranch(id)
}
</script>

<template>
  <ul class="sidebar-primary-nav-list flex w-full flex-col gap-[3px] text-[15px] text-[var(--site-text)]">
    <template v-for="node in nodes" :key="node.id">
      <li
        v-if="node.children?.length"
        class="sidebar-primary-nav-list__branch w-full"
      >
        <button
          type="button"
          class="sidebar-primary-nav-list__branch-toggle site-panel-hover group flex w-full max-w-full items-center gap-2 rounded-[10px] py-1.5 pr-2 pl-0 text-left leading-tight text-[var(--site-text)] transition-[padding,background-color] duration-200 hover:px-3"
          :aria-expanded="isExpanded(node.id)"
          :aria-label="isExpanded(node.id) ? `${node.label} 하위 메뉴 접기` : `${node.label} 하위 메뉴 펼치기`"
          @click="onBranchClick(node.id)"
        >
          <span class="sidebar-primary-nav-list__dot h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--site-muted)]" />
          <span class="sidebar-primary-nav-list__branch-label min-w-0 flex-1 truncate font-medium transition-transform duration-200 group-hover:translate-x-[3px]">{{ node.label }}</span>
          <span
            class="sidebar-primary-nav-list__chevron-wrap grid h-5 w-5 shrink-0 place-items-center text-[var(--site-muted)] transition-transform duration-200 ease-out group-hover:text-[var(--site-text)]"
            :class="{ '-rotate-180': isExpanded(node.id) }"
            aria-hidden="true"
          >
            <svg class="sidebar-primary-nav-list__chevron-svg h-3.5 w-3.5" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.5 4.25L6 7.75L9.5 4.25" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </span>
        </button>
        <div
          class="sidebar-primary-nav-list__sub-grid grid min-h-0 w-full max-w-full transition-[grid-template-rows] duration-200 ease-out"
          :class="isExpanded(node.id) ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'"
        >
          <div class="sidebar-primary-nav-list__sub-clip min-h-0 overflow-hidden">
            <ul class="sidebar-primary-nav-list__sub ml-0 border-l border-[var(--site-line)] pl-2 pt-0">
              <SidebarPrimaryNavList :nodes="node.children" />
            </ul>
          </div>
        </div>
      </li>
      <li
        v-else
        class="sidebar-primary-nav-list__leaf group relative flex w-full max-w-full items-center"
      >
        <NuxtLink
          v-if="node.url && String(node.url).trim() !== '' && String(node.url).trim() !== '#'"
          class="sidebar-primary-nav-list__nav-link site-panel-hover flex min-w-0 max-w-full flex-1 items-center gap-2 rounded-[10px] py-1.5 pr-3 pl-0 leading-tight transition-[padding,background-color] duration-200 before:h-4 before:w-1 before:flex-none before:rounded-sm before:rounded-l-none before:bg-[var(--site-line)] before:transition-[width,height,border-radius,background-color] before:duration-200 hover:px-3 hover:before:h-2 hover:before:w-2 hover:before:rounded-full hover:before:bg-[color:color-mix(in_srgb,var(--site-text)_28%,var(--site-line))]"
          :to="node.url"
        >
          <span class="sidebar-primary-nav-list__label min-w-0 flex-1 truncate transition-transform duration-200 group-hover:translate-x-[3px]">{{ node.label }}</span>
        </NuxtLink>
        <span
          v-else
          class="sidebar-primary-nav-list__leaf-static flex min-w-0 max-w-full flex-1 items-center gap-2 rounded-[10px] py-1.5 pr-3 pl-2 text-[var(--site-text)]"
        >
          <span class="h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--site-muted)]" />
          <span class="min-w-0 flex-1 truncate font-medium">{{ node.label }}</span>
        </span>
      </li>
    </template>
  </ul>
</template>
