<script setup lang="ts">
import type { TreeItem } from './type'
import { Check, ChevronRight, Loader2 } from 'lucide-vue-next'
import TreeView from './tree-view.vue'

const props = defineProps<{
  item: TreeItem
  selectedValue?: string
  onFetchChildren: (parentId: string) => Promise<void>
  level?: number
}>()

const emit = defineEmits(['select'])

const hasChildren = computed(() => props.item.children && props.item.children.length > 0)

const isOpen = ref(false)
const isLoading = ref(false)
const isChevronRotated = ref(false)

function handleSelect(value: string) {
  emit('select', value)
}

function handleLabelClick() {
  handleSelect(props.item.value)
}

watch(isOpen, async (newValue) => {
  console.log(`[TreeNode] ${props.item.label} - isOpen changed to:`, newValue)

  isChevronRotated.value = newValue

  if (newValue && props.item.hasChildren && !props.item.children && !isLoading.value) {
    console.log(`[TreeNode] Fetching children for: ${props.item.label}`)
    isLoading.value = true
    try {
      await props.onFetchChildren(props.item.value)
      console.log(`[TreeNode] Fetch completed for: ${props.item.label}`, props.item.children)
      // Force reactivity update dengan nextTick
      await nextTick()
    } catch (error) {
      console.error('Gagal memuat data anak:', error)
      // Tutup kembali jika gagal fetch
      isOpen.value = false
    } finally {
      isLoading.value = false
    }
  }
})
</script>

<template>
  <div class="tree-node min-w-max">
    <Collapsible v-model:open="isOpen" class="w-full">
      <!-- Node Header -->
      <div class="flex items-center justify-start w-full p-2 rounded-md hover:bg-accent gap-2">
        <!-- Chevron Toggle Button -->
        <CollapsibleTrigger as-child>
          <Button
            variant="ghost"
            class="h-4 w-4 p-0 flex items-center justify-center"
          >
            <Loader2 v-if="isLoading" class="w-4 h-4 animate-spin text-muted-foreground" />
            <ChevronRight
              v-else
              class="w-4 h-4 transition-transform duration-200 ease-in-out text-muted-foreground"
              :class="{
                'rotate-90': isChevronRotated,
              }"
            />
          </Button>
        </CollapsibleTrigger>

        <!-- Node Label -->
        <span
          class="text-sm font-normal cursor-pointer hover:text-primary flex-1 flex items-center justify-between"
          @click="handleLabelClick"
        >
          {{ item.label }}
          <!-- Check Icon untuk selected state -->
          <Check
            v-if="selectedValue === item.value"
            class="w-4 h-4 text-primary ml-2 flex-shrink-0"
          />
        </span>
      </div>

      <!-- Children Container -->
      <CollapsibleContent class="pl-6">
        <div v-if="!hasChildren" class="text-sm text-muted-foreground p-2">
          {{ isLoading ? 'Memuat...' : 'Tidak ada data' }}
        </div>
        <TreeView
          v-else
          :data="item.children!"
          :selected-value="selectedValue"
          :on-fetch-children="onFetchChildren"
          :level="(level || 0) + 1"
          @select="handleSelect"
        />
      </CollapsibleContent>
    </Collapsible>
  </div>
</template>

<style scoped>
.tree-node {
  @apply w-full;
}

/* Animasi tambahan untuk smooth transition */
.tree-node .collapsible-content {
  transition: all 0.2s ease-in-out;
}
</style>
