<script setup lang="ts">
import type { PlayerTreeNode } from '@engine/types'

defineProps<{
  node: PlayerTreeNode
  depth: number
}>()
</script>

<template>
  <div class="tree-row" :style="{ paddingLeft: depth * 16 + 'px' }">
    <span class="tree-icon">{{ node.visited ? '✅' : node.locked ? '🔒' : '⬜' }}</span>
    <span class="tree-label" :class="{ visited: node.visited }">{{ node.label }}</span>
    <span v-if="node.locked && node.lockHint" class="tree-hint">{{ node.lockHint }}</span>
  </div>
  <TreeNode
    v-for="child in node.children"
    :key="node.sceneId + '-' + child.sceneId"
    :node="child"
    :depth="depth + 1"
  />
</template>

<style scoped>
.tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 11px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 8px;
}

.tree-icon {
  font-size: 11px;
  flex-shrink: 0;
}

.tree-label {
  color: #aaa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-label.visited {
  color: #ddd;
}

.tree-hint {
  font-size: 10px;
  color: #ff9800;
  white-space: nowrap;
}
</style>
