/**
 * Node Management View
 * Features built-in hierarchical folding logic
 */

import { adminApi } from '../api/admin.js';

const { ref, onMounted, computed } = Vue;

export default {
  name: 'NodeManagement',
  template: `
    <div class="node-management">
      <div class="page-header">
        <h2>节点列表</h2>
        <div class="actions">
          <button class="btn btn-primary" @click="addNode">添加节点</button>
        </div>
      </div>

      <div class="table-container">
        <table class="admin-table">
          <thead>
            <tr>
              <th>名称</th>
              <th>类型</th>
              <th>倍率</th>
              <th>状态</th>
              <th>负载</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="node in displayNodes" :key="node.id">
              <!-- Parent/Main Node -->
              <tr :class="{ 'node-parent': node.has_children, 'expanded': expandedNodes.includes(node.id) }" 
                  @click="node.has_children && toggleExpand(node)">
                <td>
                  <div class="node-name-cell">
                    <i v-if="node.has_children" class="arrow-icon" :class="expandedNodes.includes(node.id) ? 'expanded' : ''"></i>
                    <span>{{ node.name }}</span>
                  </div>
                </td>
                <td>{{ node.type }}</td>
                <td>{{ node.rate }}x</td>
                <td>
                  <span :class="'status-tag ' + (node.show ? 'status-active' : 'status-disabled')">
                    {{ node.show ? '显示' : '隐藏' }}
                  </span>
                </td>
                <td>{{ node.online_users || 0 }} 人</td>
                <td>
                  <div class="row-actions" @click.stop>
                    <a href="javascript:;" @click="editNode(node)">编辑</a>
                    <span class="sep">|</span>
                    <a href="javascript:;" class="text-danger" @click="deleteNode(node)">删除</a>
                  </div>
                </td>
              </tr>
              
              <!-- Child Nodes (Conditionally rendered) -->
              <tr v-if="node.has_children && expandedNodes.includes(node.id)" 
                  v-for="child in node.children" :key="child.id" class="node-child-row">
                <td class="child-indent">
                  <div class="node-name-cell">
                    <span class="child-line"></span>
                    <span>{{ child.name }}</span>
                  </div>
                </td>
                <td>{{ child.type }}</td>
                <td>{{ child.rate }}x</td>
                <td>
                   <span :class="'status-tag ' + (child.show ? 'status-active' : 'status-disabled')">
                    {{ child.show ? '显示' : '隐藏' }}
                  </span>
                </td>
                <td>{{ child.online_users || 0 }} 人</td>
                <td>
                  <div class="row-actions" @click.stop>
                    <a href="javascript:;" @click="editNode(child)">编辑</a>
                  </div>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>

      <div v-if="loading" class="loading">加载中...</div>
    </div>
  `,
  setup() {
    const rawNodes = ref([]);
    const loading = ref(true);
    const expandedNodes = ref([]);

    const loadNodes = async () => {
      loading.value = true;
      try {
        const res = await adminApi.getNodes();
        rawNodes.value = res.data || [];
      } catch (e) {
        console.error('Failed to load nodes', e);
      } finally {
        loading.value = false;
      }
    };

    // Build hierarchical structure for display
    const displayNodes = computed(() => {
      const parents = rawNodes.value.filter(n => !n.parent_id || n.parent_id === 0);
      return parents.map(p => ({
        ...p,
        has_children: rawNodes.value.some(n => n.parent_id === p.id),
        children: rawNodes.value.filter(n => n.parent_id === p.id)
      }));
    });

    const toggleExpand = (node) => {
      const idx = expandedNodes.value.indexOf(node.id);
      if (idx > -1) {
        expandedNodes.value.splice(idx, 1);
      } else {
        expandedNodes.value.push(node.id);
      }
    };

    const addNode = () => alert('添加节点功能开发中...');
    const editNode = (node) => alert('编辑节点: ' + node.name);
    const deleteNode = (node) => confirm(`确定删除节点 ${node.name} 吗?`);

    onMounted(loadNodes);

    return {
      displayNodes,
      loading,
      expandedNodes,
      toggleExpand,
      addNode,
      editNode,
      deleteNode
    };
  }
};
