<template>
  <div class="folder-tree">
    <!-- 多选模式工具栏 -->
    <div v-if="multiSelectMode" class="multi-select-toolbar">
      <span class="multi-select-toolbar__count">已选择 {{ selectedIds.size }} 项</span>
      <button type="button" class="multi-select-toolbar__btn multi-select-toolbar__btn--danger" @click="handleBatchDelete">
        🗑️ 批量删除
      </button>
      <button type="button" class="multi-select-toolbar__btn" @click="exitMultiSelect">
        ✕ 退出多选
      </button>
    </div>
    
    <!-- 根节点列表 -->
    <div v-for="node in treeData" :key="node.id" class="tree-node">
      <TreeNode
        :node="node"
        :depth="0"
        :expanded-folder-ids="expandedFolderIds"
        :selected-ids="selectedIds"
        :multi-select-mode="multiSelectMode"
        @toggle-select="handleToggleSelect"
        @add-folder="handleAddFolder"
        @add-file="handleAddFile"
        @expand="handleExpand"
        @edit="handleEdit"
        @delete="handleDelete"
        @scrape-status="handleScrapeStatus"
        @rescrape="handleRescrape"
      />
    </div>
  </div>
</template>

<script setup>
import TreeNode from './TreeNode.vue'

const props = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
  expandedFolderIds: {
    type: Set,
    default: () => new Set(),
  },
  multiSelectMode: {
    type: Boolean,
    default: false,
  },
  selectedIds: {
    type: Set,
    default: () => new Set(),
  },
})

const emit = defineEmits(['add-folder', 'add-file', 'expand', 'edit', 'delete', 'toggle-select', 'batch-delete', 'toggle-multi-select-exit', 'scrape-status', 'rescrape'])

function handleAddFolder(parentId) {
  emit('add-folder', parentId)
}

function handleAddFile(parentId) {
  emit('add-file', parentId)
}

function handleEdit(node) {
  emit('edit', node)
}

function handleExpand(node) {
  emit('expand', node)
}

function handleDelete(node) {
  emit('delete', node)
}

function handleScrapeStatus(node) {
  emit('scrape-status', node)
}

function handleRescrape(node) {
  emit('rescrape', node)
}

function handleToggleSelect(nodeId) {
  emit('toggle-select', nodeId)
}

function handleBatchDelete() {
  emit('batch-delete', props.selectedIds)
}

function exitMultiSelect() {
  emit('toggle-multi-select-exit')
}
</script>

<style scoped>
.folder-tree {
  padding: 16px;
}

.tree-node {
  margin-bottom: 8px;
}

/* 多选模式工具栏样式 */
.multi-select-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 10px;
}

.multi-select-toolbar__count {
  font-size: 14px;
  font-weight: 600;
  color: #6366f1;
}

.multi-select-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.multi-select-toolbar__btn:hover {
  background: rgba(99, 102, 241, 0.2);
  transform: translateY(-1px);
}

.multi-select-toolbar__btn--danger {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.multi-select-toolbar__btn--danger:hover {
  background: rgba(239, 68, 68, 0.2);
}
</style>