<template>
  <div class="tree-node" :class="{ 'tree-node-expanded': expanded }">
    <!-- Node Content -->
    <div class="tree-node-content" :style="{ paddingLeft: (level * 24) + 'px' }">
      <div class="d-flex align-items-center">
        <!-- Expand/Collapse Button -->
        <button v-if="hasChildren" type="button" class="btn btn-sm btn-link text-muted p-0 me-2" @click="toggleExpand"
          :title="expanded ? 'Thu gọn' : 'Mở rộng'">
          <i class="fe" :class="expanded ? 'fe-chevron-down' : 'fe-chevron-right'"></i>
        </button>
        <div v-else class="me-4"></div>

        <!-- Node Info -->
        <div class="flex-grow-1">
          <div class="d-flex align-items-center justify-content-between">
            <div class="node-info">
              <div class="d-flex align-items-center">
                <strong class="node-name">{{ category.Name }}</strong>
                <span class="badge bg-info ms-2">{{ category.DisplayOrder }}</span>
                <span v-if="level > 0" class="badge bg-secondary ms-2">Level {{ level }}</span>
                <span v-if="category.AccountCode" class="badge bg-light text-dark ms-2">{{ category.AccountCode
                  }}</span>
              </div>
              <div class="text-muted small mt-1">
                <span>ID: {{ category.Id }}</span>
                <span v-if="category.Description" class="ms-3">{{ category.Description }}</span>
              </div>
              <div class="text-muted small">
                <span v-if="category.ApprovedByUserName">Phê duyệt: {{ category.ApprovedByUserName }}</span>
                <span v-if="category.CreatedDate" class="ms-3">Tạo: {{ formatDate(category.CreatedDate) }}</span>
              </div>
            </div>

            <!-- Actions -->
            <div class="node-actions">
              <button type="button" class="btn btn-sm btn-outline-primary me-1" @click="$emit('edit', category)"
                title="Chỉnh sửa">
                <i class="fe fe-edit-2"></i>
              </button>
              <button type="button" class="btn btn-sm btn-outline-danger" @click="$emit('delete', category)"
                title="Xóa">
                <i class="fe fe-trash-2"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Children -->
    <div v-if="hasChildren && expanded" class="tree-children">
      <CategoryTreeNode v-for="child in category.Children" :key="child.Id" :category="child" :level="level + 1"
        @edit="$emit('edit', $event)" @delete="$emit('delete', $event)" />
    </div>
  </div>
</template>

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

const props = defineProps({
  category: {
    type: Object,
    required: true
  },
  level: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['edit', 'delete'])

// State
const expanded = ref(true) // Default to expanded

// Computed
const hasChildren = computed(() => {
  return props.category.Children && props.category.Children.length > 0
})

// Methods
const toggleExpand = () => {
  expanded.value = !expanded.value
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  try {
    return new Date(dateString).toLocaleDateString('vi-VN')
  } catch {
    return '-'
  }
}
</script>

<style scoped>
.tree-node {
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.tree-node:hover {
  background-color: #f8f9fa;
  border-left-color: #007bff;
}

.tree-node-content {
  padding: 12px 16px;
  border-bottom: 1px solid #e9ecef;
  min-height: 80px;
}

.tree-node-expanded>.tree-node-content {
  background-color: #fff;
}

.node-name {
  font-size: 1.1em;
  color: #495057;
}

.node-info {
  flex-grow: 1;
}

.node-actions {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.tree-node:hover .node-actions {
  opacity: 1;
}

.tree-children {
  background-color: #f8f9fa;
}

.tree-children .tree-node-content {
  background-color: transparent;
}

.btn-link {
  border: none !important;
  box-shadow: none !important;
}

.btn-link:hover {
  background-color: rgba(0, 123, 255, 0.1);
  border-radius: 4px;
}

/* Level-based styling */
.tree-node .tree-node {
  border-left-color: #dee2e6;
}

.tree-node .tree-node .tree-node {
  border-left-color: #ced4da;
}

.tree-node .tree-node .tree-node .tree-node {
  border-left-color: #adb5bd;
}
</style>
