<template>
  <div class="group-panel-wrapper">
    <div class="group-panel">
      <div class="panel-header">
        <div class="header-title">
          <IconGitBranch :size="20" :stroke-width="1.5" />
          <span>拓扑视图</span>
        </div>
      </div>

      <!-- 自动拓扑分组选择 -->
      <div v-if="isAutoTopo" class="topo-selector">
        <a-tree-select
          v-model="selectedGroupId"
          placeholder="选择分组"
          :data="treeData"
          allow-clear
          allow-search
          default-expand-all
          :field-names="{ key: 'key', title: 'title', children: 'children' }"
          @change="handleGroupChange"
        />
        <div v-if="topologyList.length > 0" class="topology-list">
          <div
            v-for="topology in topologyList"
            :key="topology.id"
            :class="['topology-item', { active: selectedTopologyId === topology.id }]"
            @click="handleTopologySelect(topology)"
          >
            <div class="topology-icon">
              <IconGitBranch :size="18" :stroke-width="1.5" />
            </div>
            <div class="topology-info">
              <div class="topology-name">{{ topology.name }}</div>
              <div class="topology-meta">{{ topology.nodeCount || 0 }} 个节点</div>
            </div>
          </div>
        </div>
      </div>

      <a-divider />

      <!-- 全部分组选项 -->
      <a-menu :selected-keys="selectedGroup === null ? ['all'] : []">
        <a-menu-item key="all" @click="handleSelectAll">
          <template #icon>
            <IconLayout2 :size="18" :stroke-width="1.5" />
          </template>
          <template #default>全部节点</template>
          <template #extra>
            <span class="menu-count">{{ nodes.length }}</span>
          </template>
        </a-menu-item>
      </a-menu>

      <a-divider />

      <!-- 分组树 -->
      <div class="group-tree">
        <template v-for="group in groups" :key="group.id">
          <group-tree-item
            :group="group"
            :level="0"
            :selected-group="selectedGroup"
            :expanded-groups="expandedGroups"
            :nodes="nodes"
            @select="handleSelectGroup"
            @toggle="handleToggleGroup"
          />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { Node } from '@vue-flow/core'
import type { TopoGroup, NodeData } from '../types'
import { IconGitBranch, IconLayout2 } from '@tabler/icons-vue'
import GroupTreeItem from './GroupTreeItem.vue'

interface Props {
  groups: TopoGroup[]
  selectedGroup: string | null
  expandedGroups: Set<string>
  nodes: Node[]
  isAutoTopo?: boolean
}

interface Emits {
  (e: 'selectGroup', groupId: string | null): void
  (e: 'toggleGroup', groupId: string): void
  (e: 'groupChange', groupId: number | null): void
}

const props = withDefaults(defineProps<Props>(), {
  isAutoTopo: false,
})

const emit = defineEmits<Emits>()
const topologyGroups = ref<any[]>([])
const selectedGroupId = ref<number | null>(null)
const topologyList = ref<any[]>([])
const selectedTopologyId = ref<number | null>(null)

const treeData = computed(() => {
  const convertToTree = (groups: any[]): any[] => {
    return groups.map((group) => ({
      key: String(group.id),
      title: group.name,
      disabled: group.children && group.children.length > 0,
      children: group.children && group.children.length > 0 ? convertToTree(group.children) : undefined,
    }))
  }
  return convertToTree(topologyGroups.value)
})

const handleSelectAll = () => {
  emit('selectGroup', null)
}

const handleSelectGroup = (groupId: string) => {
  emit('selectGroup', groupId)
}

const handleToggleGroup = (groupId: string) => {
  emit('toggleGroup', groupId)
}

const handleGroupChange = async (value: number | null) => {
  selectedGroupId.value = value
  topologyList.value = []
  selectedTopologyId.value = null
  emit('groupChange', null)

  if (value) {
    try {
      // 这里应该调用API获取拓扑列表
    } catch (error) {
      console.error('获取拓扑列表失败:', error)
    }
  }
}

const handleTopologySelect = (topology: any) => {
  selectedTopologyId.value = topology.id
  emit('groupChange', topology.id)
}
</script>

<style scoped lang="less">
.group-panel-wrapper {
  width: 280px;
  height: 100%;
  border-right: 1px solid var(--color-border-2);
  background: var(--color-bg-1);
  display: flex;
  flex-direction: column;
}

.group-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.panel-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border-2);

  .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
  }
}

.topo-selector {
  padding: 16px;

  .topology-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .topology-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--color-border-2);
    background: var(--color-bg-2);
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      border-color: rgb(var(--primary-6));
      background: var(--color-fill-2);
      transform: translateX(2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    &.active {
      border-color: rgb(var(--primary-6));
      background: var(--color-primary-light-1);

      .topology-icon {
        background: rgb(var(--primary-6));
        color: #fff;
      }
    }

    .topology-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--color-fill-3);
      color: var(--color-text-2);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s;
    }

    .topology-info {
      flex: 1;
      min-width: 0;
    }

    .topology-name {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-text-1);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 2px;
    }

    .topology-meta {
      font-size: 12px;
      color: var(--color-text-3);
    }
  }
}

.group-tree {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.menu-count {
  font-size: 12px;
  color: var(--color-text-3);
  background: var(--color-fill-2);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}
</style>
