<template>
  <div class="tree-node">
    <div
      class="node-label"
      :class="{ 'has-children': hasChildren }"
      @click="toggleExpand"
    >
      <i
        v-if="hasChildren"
        class="fas expand-icon"
        :class="expanded ? 'fa-chevron-down' : 'fa-chevron-right'"
      ></i>
      <i class="fas node-icon" :class="getIcon()"></i>
      <span class="node-name">{{ node.name }}</span>
      <span v-if="node.type === 'mesh'" class="mesh-info">
        ({{ node.triangleCount?.toLocaleString() }} 面)
      </span>
    </div>
    <div v-if="expanded && hasChildren" class="node-children">
      <ModelTreeNode
        v-for="(child, index) in node.children"
        :key="index"
        :node="child"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  node: {
    type: Object,
    required: true
  }
})

const expanded = ref(props.node.expanded || false)

const hasChildren = computed(() => {
  return props.node.children && props.node.children.length > 0
})

const toggleExpand = () => {
  if (hasChildren.value) {
    expanded.value = !expanded.value
  }
}

const getIcon = () => {
  if (props.node.type === 'mesh') {
    return 'fa-cube'
  }
  return expanded.value ? 'fa-folder-open' : 'fa-folder'
}
</script>

<style scoped>
.tree-node {
  margin: 2px 0;
}

.node-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--size-border-radius);
  cursor: pointer;
  transition: var(--transition-all);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.node-label:hover {
  background: var(--color-bg-hover);
}

.node-label.has-children {
  font-weight: var(--font-weight-medium);
}

.expand-icon {
  width: 12px;
  font-size: 10px;
  color: var(--color-text-tertiary);
  transition: transform 0.2s;
}

.node-icon {
  font-size: 14px;
  color: var(--color-primary);
  width: 16px;
  text-align: center;
}

.node-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mesh-info {
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  margin-left: auto;
  flex-shrink: 0;
}

.node-children {
  margin-left: 20px;
  border-left: 1px solid var(--color-border-primary);
  padding-left: 4px;
}
</style>
