<template>
  <div class="vm-manage-container">
    <div class="page-header" v-if="!embedded">
      <div class="header-left">
        <el-button @click="goBack" :icon="ArrowLeft">返回</el-button>
        <div class="header-info">
          <h3>虚拟机管理</h3>
          <span class="sub-info" v-if="serviceName">主控服务：{{ serviceName }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建虚拟机</el-button>
        <el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
      </div>
    </div>
    <div class="embedded-toolbar" v-if="embedded">
      <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建虚拟机</el-button>
      <el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
    </div>

    <!-- 筛选 -->
    <div class="filter-bar">
      <el-input v-model="keyword" placeholder="搜索虚拟机" clearable style="width: 220px" @keyup.enter="handleSearch" @clear="handleSearch">
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <el-select v-model="filterStatus" placeholder="状态" clearable style="width: 130px" @change="handleSearch">
        <el-option v-for="s in vmStatuses" :key="s.value" :label="s.label" :value="s.value" />
      </el-select>
    </div>

    <!-- 批量操作栏 -->
    <div class="batch-bar" v-if="selectedVms.length">
      <span class="batch-info">已选择 <strong>{{ selectedVms.length }}</strong> 台虚拟机</span>
      <el-button type="success" size="small" @click="handleBatchPower('start')" :loading="batchLoading">
        <el-icon><VideoPlay /></el-icon>批量开机
      </el-button>
      <el-button type="warning" size="small" @click="handleBatchPower('stop')" :loading="batchLoading">
        <el-icon><SwitchButton /></el-icon>批量关机
      </el-button>
      <el-button type="danger" size="small" @click="handleBatchDelete" :loading="batchLoading">
        <el-icon><Delete /></el-icon>批量删除
      </el-button>
      <el-button size="small" @click="clearSelection">取消选择</el-button>
    </div>

    <!-- 虚拟机列表 -->
    <el-table ref="vmTableRef" :data="vmList" v-loading="loading" stripe @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="45" />
      <el-table-column prop="id" label="ID" width="70" />
      <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip />
      <el-table-column label="配置" min-width="200">
        <template #default="{ row }">
          <div class="vm-config">
            <el-tag size="small" type="info" v-if="row.vcpu">{{ row.vcpu }}核</el-tag>
            <el-tag size="small" type="info" v-if="row.memory">{{ formatMemory(row.memory) }}</el-tag>
            <el-tag size="small" type="info" v-if="row.system_size">{{ row.system_size }}GB盘</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="带宽" width="180">
        <template #default="{ row }">
          <span v-if="row.rx_bandwidth || row.tx_bandwidth">
            ↓{{ row.rx_bandwidth || 0 }} Mbps / ↑{{ row.tx_bandwidth || 0 }} Mbps
          </span>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template #default="{ row }">
          <template v-if="row.migrating">
            <div class="migrate-inline-status">
              <span class="migrate-inline-label">迁移中</span>
              <el-progress
                v-if="migrateProgressMap[row.id] != null"
                :percentage="Math.min(migrateProgressMap[row.id], 100)"
                :stroke-width="6" :show-text="false" status="warning"
                style="flex:1;min-width:50px"
              />
              <span class="migrate-inline-pct" v-if="migrateProgressMap[row.id] != null">{{ migrateProgressMap[row.id] }}%</span>
            </div>
          </template>
          <el-tag v-else :type="vmStatusType(row.status)" size="small">{{ vmStatusLabel(row.status) }}</el-tag>
        </template>
      </el-table-column>
      <!-- <el-table-column label="宿主机" width="140">
        <template #default="{ row }">{{ getHostLabel(row.host_id) }}</template>
      </el-table-column> -->
      <!-- <el-table-column prop="user_id" label="用户" width="80" /> -->
      <el-table-column label="操作" width="280" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleGoDetail(row)">详情</el-button>
          <el-button link type="success" size="small" @click="handlePower(row, 'start')" :disabled="row.status === 'running'">启动</el-button>
          <el-button link type="warning" size="small" @click="handlePower(row, 'stop')" :disabled="row.status === 'stopped' || row.status === 'stop'">关机</el-button>
          <el-dropdown trigger="click" @command="cmd => handleMoreAction(row, cmd)" style="margin-left: 10px;margin-top: 4.5px">
            <el-button link type="info" size="small">更多<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="reboot">重启</el-dropdown-item>
                <el-dropdown-item command="suspend">暂停</el-dropdown-item>
                <el-dropdown-item command="resume" v-if="row.status === 'paused'">恢复</el-dropdown-item>
                <el-dropdown-item command="rebuild" divided>重装</el-dropdown-item>
                <el-dropdown-item command="rescue">救援模式</el-dropdown-item>
                <el-dropdown-item command="exit_rescue">退出救援</el-dropdown-item>
                <el-dropdown-item command="detail" divided>查看详情</el-dropdown-item>
                <el-dropdown-item command="delete" divided style="color: #f56c6c">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper" v-if="total > 0">
      <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.page_size"
        :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next"
        @size-change="s => { queryParams.page_size = s; queryParams.page = 1; loadList() }"
        @current-change="p => { queryParams.page = p; loadList() }" />
    </div>

    <!-- 创建弹窗 -->
    <el-dialog v-model="createDialogVisible" title="创建虚拟机" width="800px" destroy-on-close class="tk-dialog">
      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
        <div class="tk-section">
          <div class="tk-section-title">基本信息</div>
          <el-form-item label="名称"><el-input v-model="createForm.name" placeholder="不填随机生成" /></el-form-item>
          <el-form-item label="镜像" prop="image_id">
            <div class="bind-selector-row">
              <el-input :model-value="createForm.image_id ? `镜像 #${createForm.image_id}${createForm._imageName ? ' - ' + createForm._imageName : ''}` : '未选择'" disabled style="flex: 1" />
              <el-button type="primary" @click="showCreateImageSelector = true" style="margin-left: 8px">选择</el-button>
              <el-button v-if="createForm.image_id" @click="createForm.image_id = 0; createForm._imageName = ''" style="margin-left: 4px">清除</el-button>
            </div>
          </el-form-item>
          <el-form-item label="用户" prop="user_id">
            <div class="bind-selector-row">
              <el-input :model-value="createForm.user_id ? `${createForm._userName || ''} (ID: ${createForm.user_id})` : '未选择'" disabled style="flex: 1" />
              <el-button type="primary" @click="showUserSelector = true" style="margin-left: 8px">选择</el-button>
              <el-button v-if="createForm.user_id" @click="createForm.user_id = 0; createForm._userName = ''" style="margin-left: 4px">清除</el-button>
            </div>
          </el-form-item>
        </div>

        <div class="tk-section">
          <div class="tk-section-title">宿主机配置</div>
          <template v-if="isEmbeddedHost">
            <el-form-item label="宿主机">
              <el-input :model-value="embeddedHostLabel" disabled />
            </el-form-item>
          </template>
          <template v-else>
            <el-form-item label="分配方式">
              <el-radio-group v-model="hostMode">
                <el-radio value="host">指定宿主机</el-radio>
                <el-radio value="group">指定宿主机组</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="宿主机" v-if="hostMode === 'host'">
              <el-select v-model="createForm.host_id" placeholder="选择宿主机" filterable style="width: 100%" @change="onHostChange">
                <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="宿主机组" v-if="hostMode === 'group'">
              <div class="bind-selector-row">
                <el-input :model-value="createForm.host_group_id ? `${createForm._groupName || ''} (ID: ${createForm.host_group_id})` : '未选择'" disabled style="flex: 1" />
                <el-button type="primary" @click="showHostGroupSelector = true" style="margin-left: 8px">选择</el-button>
                <el-button v-if="createForm.host_group_id" @click="createForm.host_group_id = null; createForm._groupName = ''" style="margin-left: 4px">清除</el-button>
              </div>
            </el-form-item>
          </template>
        </div>

        <div class="tk-section">
          <div class="tk-section-title">资源配置</div>
          <div class="tk-resource-grid">
            <el-form-item label="CPU" required>
              <el-input-number v-model="createForm.vcpu" :min="0" controls-position="right" /><span class="tk-res-unit">核</span>
            </el-form-item>
            <el-form-item label="内存" required>
              <el-input-number v-model="memoryDisplay" :min="0" controls-position="right" />
              <el-select v-model="memoryUnit" class="tk-unit-select">
                <el-option v-for="u in memoryUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
              </el-select>
            </el-form-item>
            <el-form-item label="系统盘" required>
              <el-input-number v-model="diskDisplay" :min="0" controls-position="right" />
              <el-select v-model="diskUnit" class="tk-unit-select">
                <el-option v-for="u in diskUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
              </el-select>
            </el-form-item>
            <el-form-item label="下行带宽">
              <el-input-number v-model="createForm.rx_bandwidth" :min="0" controls-position="right" /><span class="tk-res-unit">Mbps</span>
            </el-form-item>
            <el-form-item label="上行带宽">
              <el-input-number v-model="createForm.tx_bandwidth" :min="0" controls-position="right" /><span class="tk-res-unit">Mbps</span>
            </el-form-item>
            <el-form-item label="流量上限">
              <el-input-number v-model="createForm.traffic_max" :min="0" controls-position="right" /><span class="tk-res-unit">MB</span>
              <div style="font-size:12px;color:#909399;margin-top:2px">0 表示不限流量</div>
            </el-form-item>
            <el-form-item label="耗尽下行限速">
              <el-input-number v-model="createForm.traffic_exhausted_rx_mbps" :min="0" :precision="2" controls-position="right" /><span class="tk-res-unit">Mbps（0 不限）</span>
            </el-form-item>
            <el-form-item label="耗尽上行限速">
              <el-input-number v-model="createForm.traffic_exhausted_tx_mbps" :min="0" :precision="2" controls-position="right" /><span class="tk-res-unit">Mbps（0 不限）</span>
            </el-form-item>
          </div>
          <el-form-item label="额外数据卷">
            <div style="display:flex;align-items:center;gap:6px">
              <el-input-number v-model="createForm.data_volume_size" :min="0" controls-position="right" style="width:200px" />
              <span class="tk-res-unit">GB</span>
              <span style="font-size:12px;color:#909399;margin-left:8px">0 表示不创建</span>
            </div>
          </el-form-item>
          <el-alert type="warning" :closable="false" show-icon style="margin-top:4px">
            <template #title>系统盘建议不低于 30 GB，否则可能无法重装 Windows 系统</template>
          </el-alert>
        </div>

        <div class="tk-section">
          <div class="tk-section-title">网络配置</div>
          <el-form-item label="IP分配方式">
            <el-radio-group v-model="ipMode">
              <el-radio value="num">按IP数量分配</el-radio>
              <el-radio value="ids">选择网络IP</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="tk-resource-grid" v-if="ipMode === 'num'">
            <el-form-item label="IPv4数量">
              <el-input-number v-model="createForm.ipv4_num" :min="0" controls-position="right" /><span class="tk-res-unit">个</span>
            </el-form-item>
            <el-form-item label="IPv6数量">
              <el-input-number v-model="createForm.ipv6_num" :min="0" controls-position="right" /><span class="tk-res-unit">个</span>
            </el-form-item>
          </div>
          <el-form-item label="网络IP列表" v-if="ipMode === 'ids'">
            <div style="display:flex;align-items:center;gap:8px;width:100%">
              <el-button :disabled="!createForm.host_id" @click="showCreateNetSelector = true">选择网络</el-button>
              <span v-if="createNetSelected.length" style="font-size:13px;color:#606266">已选 {{ createNetSelected.length }} 个</span>
              <span v-else style="font-size:13px;color:#909399">{{ createForm.host_id ? '未选择' : '请先选择宿主机' }}</span>
            </div>
            <div v-if="createNetSelected.length" style="margin-top:6px;display:flex;flex-wrap:wrap;gap:4px">
              <el-tag v-for="n in createNetSelected" :key="n.id" closable size="small" @close="removeCreateNet(n.id)">
                {{ n.name || n.bridge_name || n.id }} - {{ n.address || '' }} (ID:{{ n.id }})
              </el-tag>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="tk-dialog-footer">
          <el-button @click="createDialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="submitCreate">创建</el-button>
        </div>
      </template>
    </el-dialog>

    <NetworkSelectorPopup ref="createNetSelectorRef" v-model="showCreateNetSelector"
      :service-id="serviceId" :host-id="createForm.host_id || 0"
      filter-type="bridge" filter-used="false" :multiple="true"
      @confirm="handleCreateNetConfirm" @create="handleCreateNetCreate" />

    <!-- 创建网络弹窗 -->
    <el-dialog v-model="netCreateVisible" title="创建网络" width="600px" destroy-on-close append-to-body class="tk-dialog">
      <el-form ref="netCreateFormRef" :model="netCreateForm" :rules="netCreateRules" label-width="100px">
        <div class="tk-section">
          <div class="tk-section-title">基本信息</div>
          <el-form-item label="名称" prop="name"><el-input v-model="netCreateForm.name" placeholder="网络名称" /></el-form-item>
          <el-form-item label="网络类型" prop="type">
            <el-select v-model="netCreateForm.type" style="width: 100%">
              <el-option label="网桥(Bridge/外网)" value="bridge" />
              <el-option label="内网(NAT)" value="nat" />
            </el-select>
          </el-form-item>
          <el-form-item label="IP" prop="address">
            <div style="display:flex;align-items:center;gap:8px;width:100%">
              <el-input v-model="netCreateForm.address" placeholder="例如 192.168.1.0/24" />
              <span style="color:#909399;white-space:nowrap">CIDR</span>
            </div>
          </el-form-item>
          <el-form-item label="网关地址" prop="gateway"><el-input v-model="netCreateForm.gateway" placeholder="例如 192.168.1.1" /></el-form-item>
          <el-form-item label="DNS 服务器"><el-input v-model="netCreateForm.nameservers" placeholder="默认 114.114.114.114,8.8.8.8" /></el-form-item>
        </div>
        <div class="tk-section">
          <div class="tk-section-title">高级配置</div>
          <el-form-item label="MAC 地址"><el-input v-model="netCreateForm.mac_address" placeholder="不填则随机" /></el-form-item>
          <el-form-item label="虚拟网桥名"><el-input v-model="netCreateForm.bridge_name" placeholder="不填使用默认" /></el-form-item>
          <el-form-item label="逻辑网桥名"><el-input v-model="netCreateForm.ls_bridge_name" placeholder="不填使用默认" /></el-form-item>
          <el-form-item label="逻辑端口名"><el-input v-model="netCreateForm.ls_name" placeholder="不填使用默认" /></el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div style="display:flex;justify-content:flex-end;gap:8px">
          <el-button @click="netCreateVisible = false">取消</el-button>
          <el-button type="primary" :loading="netCreateLoading" @click="submitNetCreate">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 重装弹窗 -->
    <el-dialog v-model="rebuildDialogVisible" title="重装虚拟机" width="480px" destroy-on-close class="tk-dialog">
      <el-form label-width="100px">
        <div class="tk-section">
          <div class="tk-section-title">重装信息</div>
          <el-alert title="重装会使用新镜像重置虚拟机，原数据可能丢失" type="warning" :closable="false" show-icon style="margin-bottom: 16px" />
          <el-form-item label="虚拟机">{{ rebuildTarget?.name }} (#{{ rebuildTarget?.id }})</el-form-item>
          <el-form-item label="新镜像" required>
            <div class="bind-selector-row">
              <el-input :model-value="rebuildImageId ? `镜像 #${rebuildImageId}${rebuildImageName ? ' - ' + rebuildImageName : ''}` : '未选择'" disabled style="flex: 1" />
              <el-button type="primary" @click="showRebuildImageSelector = true" style="margin-left: 8px">选择</el-button>
            </div>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="tk-dialog-footer">
          <el-button @click="rebuildDialogVisible = false">取消</el-button>
          <el-button type="danger" :loading="submitLoading" @click="submitRebuild">确认重装</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="虚拟机详情" width="720px" destroy-on-close>
      <div v-loading="detailLoading">
        <el-descriptions :column="2" border v-if="currentDetail">
          <el-descriptions-item label="ID">{{ currentDetail.id }}</el-descriptions-item>
          <el-descriptions-item label="名称">{{ currentDetail.name }}</el-descriptions-item>
          <el-descriptions-item label="CPU">{{ currentDetail.vcpu }} 核</el-descriptions-item>
          <el-descriptions-item label="内存">{{ formatMemory(currentDetail.memory) }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="vmStatusType(currentDetail.status)" size="small">{{ vmStatusLabel(currentDetail.status) }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="下行带宽">{{ currentDetail.rx_bandwidth || 0 }} Mbps</el-descriptions-item>
          <el-descriptions-item label="上行带宽">{{ currentDetail.tx_bandwidth || 0 }} Mbps</el-descriptions-item>
          <el-descriptions-item label="SSH端口">{{ currentDetail.ssh_port || '-' }}</el-descriptions-item>
          <el-descriptions-item label="IP" :span="2">{{ currentDetail.ips || '-' }}</el-descriptions-item>
          <el-descriptions-item label="UUID" :span="2">
            <span style="font-family: Consolas, monospace; font-size: 12px">{{ currentDetail.uuid || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="Mate Data ID" :span="2">
            <span style="font-family: Consolas, monospace; font-size: 12px">{{ currentDetail.mate_data_id || '-' }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="Root密码" v-if="currentDetail.root_password">
            <span style="font-family: Consolas, monospace">{{ currentDetail.root_password }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="流量上限" v-if="currentDetail.traffic_max">{{ currentDetail.traffic_max }} GB</el-descriptions-item>
          <el-descriptions-item label="快照上限" v-if="currentDetail.snapshot_num">{{ currentDetail.snapshot_num }}</el-descriptions-item>
          <el-descriptions-item label="备份上限" v-if="currentDetail.backup_num">{{ currentDetail.backup_num }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ formatTimestamp(currentDetail.created_at) }}</el-descriptions-item>
          <el-descriptions-item label="更新时间">{{ formatTimestamp(currentDetail.updated_at) }}</el-descriptions-item>
        </el-descriptions>

        <!-- 网络信息 -->
        <template v-if="currentDetail?.networks && currentDetail.networks.length">
          <h4 style="margin: 16px 0 8px">网络</h4>
          <el-table :data="currentDetail.networks" size="small" stripe border>
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="name" label="名称" min-width="120" />
            <el-table-column prop="type" label="类型" width="80" />
            <el-table-column prop="address" label="地址" min-width="140" />
            <el-table-column prop="gateway" label="网关" width="120" />
          </el-table>
        </template>

        <!-- 数据卷信息 -->
        <template v-if="currentDetail?.volumes && currentDetail.volumes.length">
          <h4 style="margin: 16px 0 8px">数据卷</h4>
          <el-table :data="currentDetail.volumes" size="small" stripe border>
            <el-table-column prop="id" label="ID" width="60" />
            <el-table-column prop="name" label="名称" min-width="120" />
            <el-table-column label="大小" width="80">
              <template #default="{ row }">{{ row.size }} GB</template>
            </el-table-column>
            <el-table-column label="系统卷" width="80">
              <template #default="{ row }">{{ row.is_system ? '是' : '否' }}</template>
            </el-table-column>
            <el-table-column prop="path" label="路径" min-width="180" show-overflow-tooltip />
          </el-table>
        </template>

        <!-- 镜像信息 -->
        <template v-if="currentDetail?.image">
          <h4 style="margin: 16px 0 8px">镜像</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="ID">{{ currentDetail.image.id }}</el-descriptions-item>
            <el-descriptions-item label="名称">{{ currentDetail.image.name }}</el-descriptions-item>
            <el-descriptions-item label="类型">{{ currentDetail.image.os_type }} / {{ currentDetail.image.type }}</el-descriptions-item>
            <el-descriptions-item label="状态">{{ currentDetail.image.status }}</el-descriptions-item>
          </el-descriptions>
        </template>

        <div class="detail-actions" v-if="currentDetail">
          <el-button size="small" type="primary" @click="fetchVmStatus(currentDetail)">刷新状态</el-button>
          <el-button size="small" @click="fetchVmMetrics(currentDetail)">查看指标</el-button>
        </div>

        <!-- 指标 -->
        <template v-if="vmMetricsData">
          <h4 style="margin: 16px 0 8px">最新指标 <span style="font-size:12px; font-weight:400; color:#86909c">{{ formatBucket(vmMetricsData.bucket) }}</span></h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="CPU使用率">
              <span :style="{ color: (vmMetricsData.cpu_usage ?? 0) > 90 ? '#F56C6C' : (vmMetricsData.cpu_usage ?? 0) > 60 ? '#E6A23C' : '#67C23A' }">
                {{ (vmMetricsData.cpu_usage ?? 0).toFixed(1) }}%
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="内存">{{ formatMemKB(vmMetricsData.mem_used) }} / {{ formatMemKB(vmMetricsData.mem_total) }}</el-descriptions-item>
            <el-descriptions-item label="磁盘读取">{{ formatBytesRaw(vmMetricsData.disk_read) }}</el-descriptions-item>
            <el-descriptions-item label="磁盘写入">{{ formatBytesRaw(vmMetricsData.disk_write) }}</el-descriptions-item>
            <el-descriptions-item label="网络接收">{{ formatNetSpeed(vmMetricsData.net_rx) }}</el-descriptions-item>
            <el-descriptions-item label="网络发送">{{ formatNetSpeed(vmMetricsData.net_tx) }}</el-descriptions-item>
            <el-descriptions-item label="累计流量">{{ vmMetricsData.traffic_used_mb != null ? vmMetricsData.traffic_used_mb + ' MB' : '-' }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </div>
      <template #footer><el-button @click="detailVisible = false">关闭</el-button></template>
    </el-dialog>

    <!-- 镜像选择器 (创建) -->
    <ImageSelectorPopup v-model="showCreateImageSelector" :service-id="serviceId" :current-id="createForm.image_id" @confirm="handleCreateImageSelected" />
    <!-- 镜像选择器 (重装) -->
    <ImageSelectorPopup v-model="showRebuildImageSelector" :service-id="serviceId" :current-id="rebuildImageId" @confirm="handleRebuildImageSelected" />
    <!-- 宿主机组选择器 -->
    <HostGroupSelectorPopup v-model="showHostGroupSelector" :service-id="serviceId" :current-id="createForm.host_group_id" @confirm="handleHostGroupSelected" />
    <!-- 用户选择器 -->
    <UserListSelector v-model="showUserSelector" :current-user-id="createForm.user_id" @confirm="handleUserSelected" />

    <!-- 电源操作确认弹窗 -->
    <el-dialog v-model="powerDialogVisible" :title="`${powerLabels[powerAction] || ''}虚拟机`" width="400px" destroy-on-close>
      <div style="display: flex; align-items: flex-start; gap: 12px; padding: 8px 0">
        <el-icon :size="22" :style="{ color: powerAction === 'stop' ? '#F56C6C' : powerAction === 'reboot' ? '#E6A23C' : '#409EFF', flexShrink: 0, marginTop: '2px' }">
          <WarningFilled />
        </el-icon>
        <div>
          <div style="font-size: 15px; font-weight: 500; color: #303133; margin-bottom: 12px">
            确定要{{ powerLabels[powerAction] }}虚拟机「{{ powerRow?.name }}」吗？
          </div>
          <el-checkbox v-model="powerForce" style="margin-bottom: 4px">强制执行</el-checkbox>
          <div style="font-size: 12px; color: #909399; padding-left: 24px">勾选后将强制{{ powerLabels[powerAction] }}，可能导致数据丢失</div>
        </div>
      </div>
      <template #footer>
        <el-button @click="powerDialogVisible = false">取消</el-button>
        <el-button :type="powerAction === 'stop' ? 'danger' : 'primary'" @click="submitPower">确定{{ powerLabels[powerAction] }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, inject, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Search, ArrowLeft, ArrowDown, WarningFilled, VideoPlay, SwitchButton, Delete } from '@element-plus/icons-vue'
import {
  getRemoteHostList, getVmList, getVmDetail, getVmStatus,
  createVm, rebuildVm, startVm, stopVm, rebootVm, suspendVm,
  resumeVm, rescueVm, exitRescueVm, deleteVm, getNetworkList, createNetwork, getMetricsHistory,
  getDataMigrateProgress
} from '@/api/admin/kvmService'
import { extractApiError } from '@/utils/kvmErrorUtil'
import ImageSelectorPopup from '@/components/admin/ImageSelectorPopup.vue'
import HostGroupSelectorPopup from '@/components/admin/HostGroupSelectorPopup.vue'
import UserListSelector from '@/components/admin/UserListSelector.vue'
import NetworkSelectorPopup from '@/components/admin/NetworkSelectorPopup.vue'

const route = useRoute()
const router = useRouter()
const embedded = inject('embedded', false)
const injectedServiceId = inject('serviceId', null)
const injectedServiceName = inject('serviceName', null)
const injectedHostId = inject('hostId', null)
const injectedHostDetail = inject('hostDetail', null)
const serviceId = computed(() => injectedServiceId?.value || parseInt(route.query.service_id) || 0)
const hostId = computed(() => injectedHostId?.value || parseInt(route.query.host_id) || 0)
const isEmbeddedHost = computed(() => !!(embedded && injectedHostId?.value))
const embeddedHostLabel = computed(() => {
  const d = injectedHostDetail?.value
  if (!d) return `宿主机 (ID: ${injectedHostId?.value || ''})`
  return `${d.name || ''} (${d.ip || d.id || ''})`
})
const serviceName = computed(() => injectedServiceName?.value || route.query.service_name || '')

const loading = ref(false)
const submitLoading = ref(false)
const detailLoading = ref(false)
const batchLoading = ref(false)
const vmList = ref([])
const total = ref(0)
const keyword = ref('')
const filterStatus = ref('')
const hostOptions = ref([])
const queryParams = reactive({ page: 1, page_size: 10 })

// 批量操作
const vmTableRef = ref(null)
const selectedVms = ref([])
const handleSelectionChange = (selection) => { selectedVms.value = selection }
const clearSelection = () => { vmTableRef.value?.clearSelection() }

// 选择器
const showCreateImageSelector = ref(false)
const showRebuildImageSelector = ref(false)
const showHostGroupSelector = ref(false)
const showUserSelector = ref(false)

// 创建表单模式切换
const hostMode = ref('host')
const ipMode = ref('num')
const networkOptions = ref([])
const showCreateNetSelector = ref(false)
const createNetSelectorRef = ref(null)
const createNetSelected = ref([])

// 内存单位: API传输单位为 bytes
const memoryUnitOptions = [
  { label: 'MB', factor: 1024 },
  { label: 'GB', factor: 1048576 }
]
const memoryUnit = ref('GB')
const getMemFactor = () => memoryUnitOptions.find(u => u.label === memoryUnit.value)?.factor || 1
const memoryDisplay = computed({
  get: () => Math.round(createForm.memory / getMemFactor()),
  set: (v) => { createForm.memory = Math.round(v * getMemFactor()) }
})

// 系统盘: API传输单位为 GB
const diskUnitOptions = [
  { label: 'GB', factor: 1 },
  { label: 'TB', factor: 1024 }
]
const diskUnit = ref('GB')
const getDiskFactor = () => diskUnitOptions.find(u => u.label === diskUnit.value)?.factor || 1
const diskDisplay = computed({
  get: () => {
    const f = getDiskFactor()
    return f === 1 ? createForm.system_size : +(createForm.system_size / f).toFixed(2)
  },
  set: (v) => { createForm.system_size = Math.round(v * getDiskFactor()) }
})

const loadNetworkOptions = async (hid) => {
  if (!hid) return
  try {
    const params = { service_id: serviceId.value, host_id: hid, used: false, page: 1, count: 10 }
    if (injectedHostId?.value) params.type = 'bridge'
    const res = await getNetworkList(params)
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      const inner = body.data
      networkOptions.value = inner.networks || inner.data || (Array.isArray(inner) ? inner : [])
    }
  } catch { networkOptions.value = [] }
}

const onHostChange = (v) => {
  createNetSelected.value = []
  createForm.network_ids = []
  loadNetworkOptions(v)
}

const handleCreateNetConfirm = (items) => {
  const arr = Array.isArray(items) ? items : [items]
  const existIds = new Set(createNetSelected.value.map(n => n.id))
  arr.forEach(n => { if (!existIds.has(n.id)) createNetSelected.value.push(n) })
  createForm.network_ids = createNetSelected.value.map(n => n.id)
}
const removeCreateNet = (id) => {
  createNetSelected.value = createNetSelected.value.filter(n => n.id !== id)
  createForm.network_ids = createNetSelected.value.map(n => n.id)
}
const netCreateVisible = ref(false)
const netCreateLoading = ref(false)
const netCreateFormRef = ref(null)
const netCreateForm = reactive({ name: '', address: '', gateway: '', nameservers: '', type: 'bridge', mac_address: '', bridge_name: '', ls_bridge_name: '', ls_name: '' })
const netCreateRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  address: [{ required: true, message: '请输入 CIDR 格式网段', trigger: 'blur' }],
  gateway: [{ required: true, message: '请输入网关', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }]
}

const handleCreateNetCreate = () => {
  Object.assign(netCreateForm, { name: '', address: '', gateway: '', nameservers: '', type: 'bridge', mac_address: '', bridge_name: '', ls_bridge_name: '', ls_name: '' })
  netCreateVisible.value = true
}

const submitNetCreate = () => {
  netCreateFormRef.value?.validate(async (valid) => {
    if (!valid) return
    netCreateLoading.value = true
    try {
      const fd = new FormData()
      fd.append('service_id', serviceId.value)
      fd.append('name', netCreateForm.name)
      fd.append('address', netCreateForm.address)
      fd.append('gateway', netCreateForm.gateway)
      fd.append('type', netCreateForm.type)
      fd.append('host_id', createForm.host_id)
      if (netCreateForm.nameservers) fd.append('nameservers', netCreateForm.nameservers)
      if (netCreateForm.mac_address) fd.append('mac_address', netCreateForm.mac_address)
      if (netCreateForm.bridge_name) fd.append('bridge_name', netCreateForm.bridge_name)
      if (netCreateForm.ls_bridge_name) fd.append('ls_bridge_name', netCreateForm.ls_bridge_name)
      if (netCreateForm.ls_name) fd.append('ls_name', netCreateForm.ls_name)
      const res = await createNetwork(fd)
      if (res?.data?.code === 200) {
        ElMessage.success('创建成功')
        netCreateVisible.value = false
        nextTick(() => createNetSelectorRef.value?.loadList())
      } else ElMessage.error(extractApiError(res?.data, '创建失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '创建失败')) } finally { netCreateLoading.value = false }
  })
}

const getHostLabel = (hid) => {
  const h = hostOptions.value.find(x => x.id === hid)
  return h ? `${h.name}` : (hid || '-')
}

const loadHostOptions = async () => {
  try {
    const res = await getRemoteHostList({ service_id: serviceId.value, page: 1, page_size: 10 })
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      const inner = body.data
      hostOptions.value = Array.isArray(inner) ? inner : (inner.hosts || inner.list || inner.data || [])
    }
  } catch (e) { console.error('加载宿主机列表失败:', e) }
}

const vmStatuses = [
  { label: '等待中', value: 'pending' }, { label: '创建中', value: 'creating' },
  { label: '就绪', value: 'ready' }, { label: '运行中', value: 'running' },
  { label: '已停止', value: 'stopped' }, { label: '已停止', value: 'stop' },
  { label: '已关闭', value: 'shutoff' },
  { label: '错误', value: 'error' }, { label: '已暂停', value: 'paused' },
  { label: '重启中', value: 'reboot' }, { label: '已关机', value: 'poweroff' },
  { label: '未知', value: 'unknown' }
]

const createDialogVisible = ref(false)
const createFormRef = ref(null)
const rebuildDialogVisible = ref(false)
const detailVisible = ref(false)
const currentDetail = ref(null)
const rebuildTarget = ref(null)
const rebuildImageId = ref(0)
const rebuildImageName = ref('')
const vmMetricsData = ref(null)

const createForm = reactive({
  name: '', host_id: null, image_id: 0, vcpu: 0, memory: 0,
  system_size: 0, rx_bandwidth: 0, tx_bandwidth: 0, data_volume_size: 0,
  host_group_id: null, user_id: 0, ipv4_num: 0, ipv6_num: 0, network_ids: [],
  _imageName: '', _groupName: '', _userName: '',
  traffic_max: 0, traffic_exhausted_rx_mbps: 0, traffic_exhausted_tx_mbps: 0
})

const createRules = {
  image_id: [{ required: true, message: '请选择镜像', trigger: 'blur', type: 'number', min: 1 }],
  vcpu: [{ required: true, message: '请输入CPU核数', trigger: 'blur' }],
  memory: [{ required: true, message: '请输入内存', trigger: 'blur' }],
  system_size: [{ required: true, message: '请输入系统盘大小', trigger: 'blur' }],
  user_id: [{ required: true, message: '请选择用户', trigger: 'change', type: 'number', min: 1 }]
}

const vmStatusType = (s) => ({
  running: 'success', ready: 'success', creating: 'warning', pending: 'info',
  stopped: 'danger', stop: 'danger', shutoff: 'danger', error: 'danger', paused: 'warning',
  reboot: 'warning', poweroff: 'info', unknown: 'info'
}[s] || 'info')

const vmStatusLabel = (s) => ({
  running: '运行中', ready: '就绪', creating: '创建中', pending: '等待中',
  stopped: '已停止', stop: '已停止', shutoff: '已关闭', error: '错误', paused: '已暂停',
  reboot: '重启中', poweroff: '已关机', unknown: '未知'
}[s] || s || '-')

const formatMemKB = (kb) => {
  if (!kb) return '-'
  kb = Number(kb)
  if (kb >= 1073741824) return (kb / 1073741824).toFixed(1) + ' TB'
  if (kb >= 1048576) return (kb / 1048576).toFixed(1) + ' GB'
  if (kb >= 1024) return (kb / 1024).toFixed(0) + ' MB'
  return kb + ' KB'
}
const formatMemory = formatMemKB

const formatTimestamp = (ts) => {
  if (!ts) return '-'
  if (typeof ts === 'object' && ts.seconds) {
    return new Date(Number(ts.seconds) * 1000).toLocaleString('zh-CN')
  }
  if (typeof ts === 'string' || typeof ts === 'number') {
    const d = new Date(ts)
    return isNaN(d.getTime()) ? String(ts) : d.toLocaleString('zh-CN')
  }
  return '-'
}

const formatBytesRaw = (val) => {
  if (!val && val !== 0) return '-'
  val = Number(val)
  if (val >= 1099511627776) return (val / 1099511627776).toFixed(2) + ' TB'
  if (val >= 1073741824) return (val / 1073741824).toFixed(2) + ' GB'
  if (val >= 1048576) return (val / 1048576).toFixed(2) + ' MB'
  if (val >= 1024) return (val / 1024).toFixed(1) + ' KB'
  return val + ' B'
}

const formatNetSpeed = (v) => {
  if (!v && v !== 0) return '0 B/s'
  v = Number(v)
  if (v >= 1073741824) return (v / 1073741824).toFixed(1) + ' GB/s'
  if (v >= 1048576) return (v / 1048576).toFixed(1) + ' MB/s'
  if (v >= 1024) return (v / 1024).toFixed(1) + ' KB/s'
  return v.toFixed(0) + ' B/s'
}

const formatBucket = (bucket) => {
  if (!bucket) return '-'
  const d = new Date(bucket)
  return isNaN(d.getTime()) ? String(bucket) : d.toLocaleString('zh-CN')
}

// 选择器回调
const handleCreateImageSelected = (img) => { createForm.image_id = img.id; createForm._imageName = img.name }
const handleRebuildImageSelected = (img) => { rebuildImageId.value = img.id; rebuildImageName.value = img.name }
const handleHostGroupSelected = (group) => { createForm.host_group_id = group.id; createForm._groupName = group.name || '' }
const handleUserSelected = (user) => { createForm.user_id = user.user_id || user.id; createForm._userName = user.user_name || user.name || '' }

const loadList = async () => {
  if (!serviceId.value) return
  loading.value = true
  try {
    const params = { service_id: serviceId.value, page: queryParams.page, count: queryParams.page_size }
    if (hostId.value) params.host_id = hostId.value
    if (keyword.value) params.key = keyword.value
    if (filterStatus.value) params.status = filterStatus.value
    const res = await getVmList(params)
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      const inner = body.data
      vmList.value = inner.data || inner.vms || (Array.isArray(inner) ? inner : [])
      total.value = inner.meta?.count ?? inner.all_count ?? inner.total ?? vmList.value.length
    } else { vmList.value = []; total.value = 0 }
    handleMigrateAutoRefresh()
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '获取虚拟机列表失败')) } finally { loading.value = false }
}

const migrateProgressMap = reactive({})
let migrateAutoRefreshTimer = null

const fetchMigrateProgress = async () => {
  const migratingVms = vmList.value.filter(v => v.migrating && v.migrate_task_id)
  for (const vm of migratingVms) {
    try {
      const res = await getDataMigrateProgress({
        service_id: serviceId.value,
        migration_id: vm.migrate_task_id
      })
      if (res?.data?.code === 200 && res.data.data) {
        migrateProgressMap[vm.id] = res.data.data.progress ?? null
      }
    } catch { /* ignore */ }
  }
}

const handleMigrateAutoRefresh = () => {
  const hasMigrating = vmList.value.some(v => v.migrating)
  if (hasMigrating) {
    fetchMigrateProgress()
    if (!migrateAutoRefreshTimer) {
      migrateAutoRefreshTimer = setInterval(() => { loadList() }, 3000)
    }
  } else {
    stopMigrateAutoRefresh()
  }
}

const stopMigrateAutoRefresh = () => {
  if (migrateAutoRefreshTimer) { clearInterval(migrateAutoRefreshTimer); migrateAutoRefreshTimer = null }
}

onBeforeUnmount(() => stopMigrateAutoRefresh())

const handleSearch = () => { queryParams.page = 1; loadList() }

const handleAdd = () => {
  Object.assign(createForm, {
    name: '', host_id: injectedHostId?.value || null, image_id: 0,
    vcpu: 0, memory: 0, system_size: 0,
    rx_bandwidth: 0, tx_bandwidth: 0, data_volume_size: 0,
    host_group_id: null, user_id: 0, ipv4_num: 0, ipv6_num: 0, network_ids: [],
    _imageName: '', _groupName: '', _userName: ''
  })
  memoryUnit.value = 'GB'
  diskUnit.value = 'GB'
  hostMode.value = 'host'
  ipMode.value = 'num'
  networkOptions.value = []
  createNetSelected.value = []
  loadHostOptions()
  createDialogVisible.value = true
  if (injectedHostId?.value) {
    loadNetworkOptions(injectedHostId.value)
  }
}

const submitCreate = () => {
  if (hostMode.value === 'host' && !createForm.host_id) { ElMessage.warning('请选择宿主机'); return }
  if (hostMode.value === 'group' && !createForm.host_group_id) { ElMessage.warning('请选择宿主机组'); return }
  if (ipMode.value === 'ids' && !createForm.network_ids.length) { ElMessage.warning('请选择网络IP'); return }
  if (ipMode.value === 'num' && !createForm.ipv4_num && !createForm.ipv6_num) { ElMessage.warning('请输入IPv4或IPv6数量'); return }

  createFormRef.value?.validate(async (valid) => {
    if (!valid) return
    if (createForm.system_size > 0 && createForm.system_size < 30) {
      try {
        await ElMessageBox.confirm('系统盘小于 30 GB，可能无法正常重装 Windows 系统，是否继续？', '系统盘容量提示', { type: 'warning', confirmButtonText: '继续创建', cancelButtonText: '返回修改' })
      } catch { return }
    }
    submitLoading.value = true
    try {
      const fd = new FormData()
      fd.append('service_id', serviceId.value)
      fd.append('image_id', createForm.image_id)
      fd.append('vcpu', createForm.vcpu)
      fd.append('memory', createForm.memory)
      fd.append('system_size', createForm.system_size)
      fd.append('user_id', createForm.user_id)
      if (createForm.name) fd.append('name', createForm.name)
      if (createForm.rx_bandwidth) fd.append('rx_bandwidth', createForm.rx_bandwidth)
      if (createForm.tx_bandwidth) fd.append('tx_bandwidth', createForm.tx_bandwidth)
      if (createForm.data_volume_size > 0) fd.append('data_volume_size', createForm.data_volume_size)
      if (hostMode.value === 'host') fd.append('host_id', createForm.host_id)
      else fd.append('host_group_id', createForm.host_group_id)
      if (ipMode.value === 'num') {
        if (createForm.ipv4_num) fd.append('ipv4_num', createForm.ipv4_num)
        if (createForm.ipv6_num) fd.append('ipv6_num', createForm.ipv6_num)
      } else createForm.network_ids.forEach(id => fd.append('network_ids', id))
      if (createForm.traffic_max > 0) fd.append('traffic_max', createForm.traffic_max)
      if (createForm.traffic_exhausted_rx_mbps > 0) fd.append('traffic_exhausted_rx_mbps', createForm.traffic_exhausted_rx_mbps)
      if (createForm.traffic_exhausted_tx_mbps > 0) fd.append('traffic_exhausted_tx_mbps', createForm.traffic_exhausted_tx_mbps)
      const res = await createVm(fd)
      if (res?.data?.code === 200) { ElMessage.success('创建成功'); createDialogVisible.value = false; loadList() }
      else ElMessage.error(extractApiError(res?.data, '创建失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '创建失败')) }
    finally { submitLoading.value = false }
  })
}

const powerDialogVisible = ref(false)
const powerAction = ref('')
const powerRow = ref(null)
const powerForce = ref(false)
const powerLabels = { start: '启动', stop: '停止', reboot: '重启', suspend: '暂停', resume: '恢复' }

const handlePower = (row, action) => {
  powerRow.value = row
  powerAction.value = action
  powerForce.value = false
  powerDialogVisible.value = true
}

const submitPower = async () => {
  const action = powerAction.value
  const row = powerRow.value
  const label = powerLabels[action]
  powerDialogVisible.value = false
  try {
    const apis = { start: startVm, stop: stopVm, reboot: rebootVm, suspend: suspendVm, resume: resumeVm }
    const fd = new FormData()
    fd.append('service_id', serviceId.value)
    fd.append('vm_id', row.id)
    if (powerForce.value) fd.append('force', true)
    const res = await apis[action](fd)
    if (res?.data?.code === 200) { ElMessage.success(`${label}成功`); loadList() }
    else ElMessage.error(extractApiError(res?.data, `${label}失败`))
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, `${label}失败`)) }
}

const handleMoreAction = (row, command) => {
  const powerActions = ['reboot', 'suspend', 'resume']
  if (powerActions.includes(command)) { handlePower(row, command); return }
  if (command === 'rebuild') handleRebuild(row)
  else if (command === 'rescue') handleRescue(row)
  else if (command === 'exit_rescue') handleExitRescue(row)
  else if (command === 'detail') handleViewDetail(row)
  else if (command === 'delete') handleDelete(row)
}

const handleRebuild = (row) => {
  rebuildTarget.value = row
  rebuildImageId.value = row.image_id || 0
  rebuildImageName.value = ''
  rebuildDialogVisible.value = true
}

const submitRebuild = async () => {
  if (!rebuildImageId.value) { ElMessage.warning('请选择镜像'); return }
  submitLoading.value = true
  try {
    const fd = new FormData()
    fd.append('service_id', serviceId.value)
    fd.append('vm_id', rebuildTarget.value.id)
    fd.append('image_id', rebuildImageId.value)
    const res = await rebuildVm(fd)
    if (res?.data?.code === 200) { ElMessage.success('重装成功'); rebuildDialogVisible.value = false; loadList() }
    else ElMessage.error(extractApiError(res?.data, '重装失败'))
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '重装失败')) } finally { submitLoading.value = false }
}

const handleRescue = (row) => {
  ElMessageBox.confirm(`确定让虚拟机「${row.name}」进入救援模式吗？`, '救援模式', {
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
  }).then(async () => {
    try {
      const fd = new FormData()
      fd.append('service_id', serviceId.value)
      fd.append('vm_id', row.id)
      const res = await rescueVm(fd)
      if (res?.data?.code === 200) { ElMessage.success('已进入救援模式'); loadList() }
      else ElMessage.error(extractApiError(res?.data, '操作失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '操作失败')) }
  }).catch(() => {})
}

const handleExitRescue = (row) => {
  ElMessageBox.confirm(`确定让虚拟机「${row.name}」退出救援模式吗？`, '退出救援', {
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'info'
  }).then(async () => {
    try {
      const fd = new FormData()
      fd.append('service_id', serviceId.value)
      fd.append('vm_id', row.id)
      const res = await exitRescueVm(fd)
      if (res?.data?.code === 200) { ElMessage.success('已退出救援模式'); loadList() }
      else ElMessage.error(extractApiError(res?.data, '操作失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '操作失败')) }
  }).catch(() => {})
}

const handleViewDetail = async (row) => {
  detailVisible.value = true
  detailLoading.value = true
  currentDetail.value = row
  vmMetricsData.value = null
  try {
    const res = await getVmDetail({ service_id: serviceId.value, vm_id: row.id })
    if (res?.data?.code === 200 && res?.data?.data) {
      const d = res.data.data
      const vm = d.data ?? d.vm ?? d
      vm.networks = d.networks || []
      vm.volumes = d.volumes || []
      vm.image = d.image || null
      vm.in_port_group = d.in_port_group || null
      if (!vm.ips && vm.networks?.length) vm.ips = vm.networks.map(n => n.address?.split('/')[0]).filter(Boolean).join(', ')
      currentDetail.value = vm
    }
  } catch { /* fallback */ } finally { detailLoading.value = false }
}

const fetchVmStatus = async (vm) => {
  try {
    const res = await getVmStatus({ service_id: serviceId.value, vm_id: vm.id })
    if (res?.data?.code === 200 && res?.data?.data) {
      const outer = res.data.data
      const inner = outer.data ?? outer
      const state = inner.state ?? inner.status ?? inner
      const desc = inner.desc || ''
      currentDetail.value = { ...currentDetail.value, status: state }
      ElMessage.success(`状态已刷新: ${desc || vmStatusLabel(state)}`)
    }
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '获取状态失败')) }
}

const fetchVmMetrics = async (vm) => {
  try {
    const now = new Date()
    const start = new Date(now.getTime() - 60 * 60 * 1000)
    const res = await getMetricsHistory({
      service_id: serviceId.value,
      host_id: vm.host_id || hostId.value,
      vm_name: vm.name,
      start: start.toISOString(),
      end_time: now.toISOString(),
      interval: '1m'
    })
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      const arr = Array.isArray(body.data) ? body.data : (body.data.data || [])
      vmMetricsData.value = arr.length ? arr[arr.length - 1] : null
      if (!vmMetricsData.value) ElMessage.warning('暂无指标数据')
    } else {
      ElMessage.warning('暂无指标数据')
    }
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '获取指标失败')) }
}

const handleGoDetail = (row) => {
  router.push({ path: '/virtualization/vm-detail', query: { service_id: serviceId.value, service_name: serviceName.value, vm_id: row.id } })
}

const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除虚拟机「${row.name}」吗？`, '删除确认', {
    confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteVm({ service_id: serviceId.value, vm_id: row.id })
      if (res?.data?.code === 200) { ElMessage.success('删除成功'); loadList() }
      else ElMessage.error(extractApiError(res?.data, '删除失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '删除失败')) }
  }).catch(() => {})
}

// 批量电源操作（开机/关机）
const handleBatchPower = (action) => {
  const label = action === 'start' ? '开机' : '关机'
  const targets = selectedVms.value
  const skipped = targets.filter(v =>
    action === 'start' ? v.status === 'running' : (v.status === 'stopped' || v.status === 'stop')
  )
  const toOperate = targets.filter(v => !skipped.includes(v))

  if (!toOperate.length) {
    ElMessage.warning(`所选虚拟机均已处于目标状态，无需${label}`)
    return
  }

  const msg = skipped.length
    ? `将对 ${toOperate.length} 台虚拟机执行${label}（${skipped.length} 台已跳过），是否继续？`
    : `确定要对 ${toOperate.length} 台虚拟机执行批量${label}吗？`

  ElMessageBox.confirm(msg, `批量${label}`, {
    confirmButtonText: '确定', cancelButtonText: '取消',
    type: action === 'stop' ? 'warning' : 'info'
  }).then(async () => {
    batchLoading.value = true
    const api = action === 'start' ? startVm : stopVm
    let success = 0, fail = 0
    await Promise.allSettled(toOperate.map(async (vm) => {
      try {
        const fd = new FormData()
        fd.append('service_id', serviceId.value)
        fd.append('vm_id', vm.id)
        const res = await api(fd)
        if (res?.data?.code === 200) success++
        else fail++
      } catch { fail++ }
    }))
    batchLoading.value = false
    clearSelection()
    ElMessage[fail ? 'warning' : 'success'](`批量${label}完成：成功 ${success}，失败 ${fail}`)
    loadList()
  }).catch(() => {})
}

// 批量删除
const handleBatchDelete = () => {
  const count = selectedVms.value.length
  ElMessageBox.confirm(
    `确定要删除选中的 ${count} 台虚拟机吗？此操作不可恢复。`,
    '批量删除',
    { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' }
  ).then(async () => {
    batchLoading.value = true
    let success = 0, fail = 0
    await Promise.allSettled(selectedVms.value.map(async (vm) => {
      try {
        const res = await deleteVm({ service_id: serviceId.value, vm_id: vm.id })
        if (res?.data?.code === 200) success++
        else fail++
      } catch { fail++ }
    }))
    batchLoading.value = false
    clearSelection()
    ElMessage[fail ? 'warning' : 'success'](`批量删除完成：成功 ${success}，失败 ${fail}`)
    loadList()
  }).catch(() => {})
}

const goBack = () => { router.push('/virtualization/kvm-service') }

onMounted(async () => {
  if (serviceId.value) {
    await loadHostOptions()
    loadList()
  }
})

defineExpose({ loadList })
</script>

<style scoped>
.vm-manage-container { padding: 20px; }
.vm-config { display: flex; gap: 4px; flex-wrap: wrap; }
.migrate-inline-status { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.migrate-inline-label { color: #e6a23c; font-size: 13px; font-weight: 600; white-space: nowrap; }
.migrate-inline-pct { color: #e6a23c; font-size: 12px; white-space: nowrap; }
.batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: #ecf5ff;
  border: 1px solid #d9ecff;
  border-radius: 6px;
}
.batch-info {
  font-size: 13px;
  color: #409eff;
  margin-right: 4px;
}
</style>
