<template>
  <div v-if="item.children?.length" class="mb-1">
    <div
      class="flex items-center justify-between rounded-md cursor-pointer transition-colors duration-200 group"
      :class="[
        depthPadding,
        isItemActive ? 'text-white' : 'text-art-muted hover:text-white hover:bg-white/5'
      ]"
      @click="handleToggle"
    >
      <div class="flex items-center gap-3 min-w-0">
        <span
          v-if="item.icon && depth === 0"
          class="text-lg shrink-0 group-hover:text-art-accent transition-colors"
          :class="isItemActive ? 'text-art-accent' : ''"
        >{{ item.icon }}</span>
        <span
          class="text-sm truncate transition-opacity duration-300"
          :class="[
            depth === 0 ? 'font-medium' : '',
            { 'opacity-0 w-0': depth === 0 && !isSidebarOpen }
          ]"
        >{{ item.title }}</span>
      </div>
      <span
        v-if="isSidebarOpen"
        class="text-[10px] transition-transform duration-200 opacity-50 group-hover:opacity-100 shrink-0"
        :class="{ 'rotate-180': item.isOpen }"
      >▼</span>
    </div>

    <div
      v-show="isSidebarOpen && item.isOpen"
      class="border-l border-white/5 space-y-1 overflow-hidden transition-all duration-300"
      :class="childContainerClass"
    >
      <AdminMenuItem
        v-for="(child, childIndex) in item.children"
        :key="`${item.title}-${childIndex}`"
        :item="child"
        :depth="depth + 1"
        :is-sidebar-open="isSidebarOpen"
        :is-active="isActive"
        @toggle="(index) => $emit('toggle', index)"
        @request-open-sidebar="$emit('request-open-sidebar')"
      />
    </div>
  </div>

  <router-link
    v-else-if="item.path"
    :to="item.path"
    class="flex items-center gap-3 rounded-md transition-all duration-200 relative group mb-1"
    :class="[
      depthPadding,
      isActive(item.path) ? 'text-art-accent bg-art-accent/5 font-medium' : 'text-art-muted hover:text-white hover:bg-white/5'
    ]"
    active-class="text-art-accent bg-art-accent/5"
  >
    <div
      v-if="isActive(item.path)"
      class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 rounded-full bg-art-accent"
      :class="depth >= 2 ? 'h-3' : 'h-4'"
    ></div>
    <span
      v-if="item.icon && depth === 0"
      class="text-lg shrink-0 group-hover:text-art-accent transition-colors"
    >{{ item.icon }}</span>
    <span
      class="text-sm truncate transition-opacity duration-300"
      :class="[
        depth === 0 ? 'font-medium' : '',
        { 'opacity-0 w-0': depth === 0 && !isSidebarOpen }
      ]"
    >{{ item.title }}</span>
  </router-link>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import AdminMenuItem from './AdminMenuItem.vue'
import type { MenuItem } from './adminMenuTypes'

const props = defineProps<{
  item: MenuItem
  depth: number
  isSidebarOpen: boolean
  isActive: (path: string) => boolean
}>()

const emit = defineEmits<{
  toggle: [index: number]
  'request-open-sidebar': []
}>()

const isItemActive = computed(() => {
  if (props.item.path && props.isActive(props.item.path)) return true
  if (props.item.children) {
    return props.item.children.some(child => isMenuItemActive(child))
  }
  return false
})

const isMenuItemActive = (item: MenuItem): boolean => {
  if (item.path && props.isActive(item.path)) return true
  if (item.children) {
    return item.children.some(child => isMenuItemActive(child))
  }
  return false
}

const depthPadding = computed(() => {
  if (props.depth === 0) return 'px-3 py-2.5'
  if (props.depth === 1) return 'px-3 py-2 ml-4 pl-4'
  return 'px-3 py-1.5 ml-4 pl-3 text-xs'
})

const childContainerClass = computed(() => {
  if (props.depth === 0) return 'ml-4 pl-4 mb-2'
  return 'ml-2 pl-3 mb-1'
})

const handleToggle = () => {
  if (!props.isSidebarOpen) {
    emit('request-open-sidebar')
    window.setTimeout(() => {
      props.item.isOpen = true
    }, 100)
    return
  }
  props.item.isOpen = !props.item.isOpen
}
</script>
