<script setup lang="ts">
import { ref, watch } from 'vue'
import type { TreeNode } from '@/types'

interface Props {
  nodes: TreeNode[]
}

const props = defineProps<Props>()

const emit = defineEmits<{
  'node-click': [node: TreeNode]
}>()

const expandedFolders = ref<Set<string>>(new Set())

// Auto-expand first level
watch(() => props.nodes, (newNodes) => {
  newNodes.forEach(node => {
    if (node.type === 'folder') {
      expandedFolders.value.add(node.id)
    }
  })
}, { immediate: true })

function toggleFolder(node: TreeNode, event: Event) {
  event.stopPropagation()
  if (expandedFolders.value.has(node.id)) {
    expandedFolders.value.delete(node.id)
  } else {
    expandedFolders.value.add(node.id)
  }
}

function handleClick(node: TreeNode) {
  emit('node-click', node)
}
</script>

<template>
  <ul class="tree">
    <li v-for="node in nodes" :key="node.id" class="tree__item">
      <div
        :class="['tree__node', { 'tree__node--folder': node.type === 'folder' }]"
        @click="handleClick(node)"
      >
        <button
          v-if="node.type === 'folder'"
          class="tree__toggle"
          @click="toggleFolder(node, $event)"
        >
          <svg
            :class="['tree__arrow', { 'tree__arrow--expanded': expandedFolders.has(node.id) }]"
            width="12"
            height="12"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
          >
            <path d="m9 18 6-6-6-6"/>
          </svg>
        </button>
        <span v-else class="tree__icon">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
            <polyline points="14 2 14 8 20 8"/>
          </svg>
        </span>

        <span class="tree__label">{{ node.name }}</span>
      </div>

      <Transition name="expand">
        <TreeView
          v-if="node.type === 'folder' && expandedFolders.has(node.id) && node.children?.length"
          :nodes="node.children"
          class="tree__children"
          @node-click="emit('node-click', $event)"
        />
      </Transition>
    </li>
  </ul>
</template>

<style scoped>
.tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tree__item {
  margin: 2px 0;
}

.tree__node {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}

.tree__node:hover {
  background: var(--bg-tertiary);
}

.tree__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
}

.tree__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--text-secondary);
}

.tree__arrow {
  transition: transform 0.15s;
}

.tree__arrow--expanded {
  transform: rotate(90deg);
}

.tree__label {
  flex: 1;
  font-size: 0.875rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree__children {
  margin-left: 1rem;
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.2s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  max-height: 0;
}

.expand-enter-to,
.expand-leave-from {
  max-height: 500px;
}
</style>
