<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>

    <!-- 虚拟机列表 -->
    <el-table :data="vmList" v-loading="loading" stripe>
      <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="100">
        <template #default="{ row }">
          <el-tag :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: 4px">
            <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>
      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="120px">
        <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>

        <el-divider content-position="left">宿主机配置（二选一）</el-divider>
        <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="(v) => loadNetworkOptions(v)">
            <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>

        <el-divider content-position="left">资源配置</el-divider>
        <div class="resource-row">
          <div class="resource-item">
            <span class="resource-label">* 内存</span>
            <el-select v-model="memoryUnit" class="resource-unit-select">
              <el-option v-for="u in memoryUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
            </el-select>
            <el-input-number v-model="memoryDisplay" :min="0" controls-position="right" class="resource-input" />
          </div>
          <div class="resource-item">
            <span class="resource-label">* 系统盘</span>
            <el-select v-model="diskUnit" class="resource-unit-select">
              <el-option v-for="u in diskUnitOptions" :key="u.label" :label="u.label" :value="u.label" />
            </el-select>
            <el-input-number v-model="diskDisplay" :min="0" controls-position="right" class="resource-input" />
          </div>
        </div>
        <div class="resource-row">
          <div class="resource-item">
            <span class="resource-label">* CPU(核)</span>
            <el-input-number v-model="createForm.vcpu" :min="0" controls-position="right" class="resource-input" />
          </div>
          <div class="resource-item">
            <span class="resource-label">下行带宽(Mbps)</span>
            <el-input-number v-model="createForm.rx_bandwidth" :min="0" controls-position="right" class="resource-input" />
          </div>
          <div class="resource-item">
            <span class="resource-label">上行带宽(Mbps)</span>
            <el-input-number v-model="createForm.tx_bandwidth" :min="0" controls-position="right" class="resource-input" />
          </div>
        </div>

        <el-divider content-position="left">网络配置（二选一）</el-divider>
        <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>
        <el-form-item label="IP数量" v-if="ipMode === 'num'">
          <el-input-number v-model="createForm.ip_num" :min="1" controls-position="right" style="width: 100%" />
        </el-form-item>
        <el-form-item label="网络IP列表" v-if="ipMode === 'ids'">
          <el-select v-model="createForm.network_ids" multiple filterable placeholder="选择可用网络IP" style="width: 100%">
            <el-option v-for="n in networkOptions" :key="n.id" :label="`${n.name || ''} - ${n.address || n.ip || ''}`" :value="n.id" />
          </el-select>
          <div class="form-tip" v-if="!networkOptions.length">请先选择宿主机以加载可用网络（仅显示未使用的网络）</div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitCreate">创建</el-button>
      </template>
    </el-dialog>

    <!-- 重建弹窗 -->
    <el-dialog v-model="rebuildDialogVisible" title="重建虚拟机" width="440px" destroy-on-close>
      <el-alert title="重建会使用新镜像重置虚拟机，原数据可能丢失" type="warning" :closable="false" show-icon style="margin-bottom: 16px" />
      <el-form label-width="100px">
        <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>
      </el-form>
      <template #footer>
        <el-button @click="rebuildDialogVisible = false">取消</el-button>
        <el-button type="danger" :loading="submitLoading" @click="submitRebuild">确认重建</el-button>
      </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="系统盘">{{ currentDetail.system_size }} GB</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="宿主机">{{ getHostLabel(currentDetail.host_id) }}</el-descriptions-item>
          <el-descriptions-item label="镜像ID">{{ currentDetail.image_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ currentDetail.user_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="宿主机组ID">{{ currentDetail.host_group_id || '-' }}</el-descriptions-item>
          <el-descriptions-item label="IP" :span="2">{{ currentDetail.ip || '-' }}</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">实时指标</h4>
          <el-descriptions :column="2" border size="small">
            <el-descriptions-item label="虚拟机">{{ vmMetricsData.vm_name || '-' }}</el-descriptions-item>
            <el-descriptions-item label="CPU使用率">
              <span :style="{ color: vmMetricsData.cpu_usage_percent > 90 ? '#F56C6C' : vmMetricsData.cpu_usage_percent > 60 ? '#E6A23C' : '#67C23A' }">
                {{ (vmMetricsData.cpu_usage_percent ?? 0).toFixed(1) }}%
              </span>
            </el-descriptions-item>
            <template v-if="vmMetricsData.internet_speed && Object.keys(vmMetricsData.internet_speed).length">
              <el-descriptions-item label="网络速率" :span="2">
                <div v-for="(val, key) in vmMetricsData.internet_speed" :key="key">{{ key }}: {{ val }}</div>
              </el-descriptions-item>
            </template>
          </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" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, inject, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Search, ArrowLeft, ArrowDown } from '@element-plus/icons-vue'
import {
  getRemoteHostList, getVmList, getVmDetail, getVmStatus, getVmMetrics,
  createVm, rebuildVm, startVm, stopVm, rebootVm, suspendVm,
  resumeVm, rescueVm, exitRescueVm, deleteVm, getNetworkList
} 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'

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 serviceId = computed(() => injectedServiceId?.value || parseInt(route.query.service_id) || 0)
const hostId = computed(() => injectedHostId?.value || parseInt(route.query.host_id) || 0)
const serviceName = computed(() => injectedServiceName?.value || route.query.service_name || '')

const loading = ref(false)
const submitLoading = ref(false)
const detailLoading = 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 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([])

// 内存单位: 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 (hostId) => {
  if (!hostId) return
  try {
    const res = await getNetworkList({ service_id: serviceId.value, host_id: hostId, used: false, page: 1, page_size: 200 })
    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 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: 100 })
    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: '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,
  host_group_id: null, user_id: 0, ip_num: 0, network_ids: [],
  _imageName: '', _groupName: '', _userName: ''
})

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', error: 'danger', paused: 'warning',
  reboot: 'warning', poweroff: 'info', unknown: 'info'
}[s] || 'info')

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

const formatMemory = (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 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 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, page_size: queryParams.page_size }
    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 }
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '获取虚拟机列表失败')) } finally { loading.value = false }
}

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

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

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.ip_num) { ElMessage.warning('请输入IP数量'); return }

  createFormRef.value?.validate(async (valid) => {
    if (!valid) return
    submitLoading.value = true
    try {
      const payload = {
        service_id: serviceId.value,
        image_id: createForm.image_id,
        vcpu: createForm.vcpu, memory: createForm.memory, system_size: createForm.system_size,
        user_id: createForm.user_id
      }
      if (createForm.name) payload.name = createForm.name
      if (createForm.rx_bandwidth) payload.rx_bandwidth = createForm.rx_bandwidth
      if (createForm.tx_bandwidth) payload.tx_bandwidth = createForm.tx_bandwidth
      if (hostMode.value === 'host') payload.host_id = createForm.host_id
      else payload.host_group_id = createForm.host_group_id
      if (ipMode.value === 'num') payload.ip_num = createForm.ip_num
      else payload.network_ids = createForm.network_ids
      const res = await createVm(payload)
      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 handlePower = (row, action) => {
  const labels = { start: '启动', stop: '停止', reboot: '重启', suspend: '暂停', resume: '恢复' }
  ElMessageBox.confirm(`确定要${labels[action]}虚拟机「${row.name}」吗？`, `${labels[action]}确认`, {
    confirmButtonText: '确定', cancelButtonText: '取消',
    type: action === 'stop' ? 'warning' : 'info'
  }).then(async () => {
    try {
      const apis = { start: startVm, stop: stopVm, reboot: rebootVm, suspend: suspendVm, resume: resumeVm }
      const payload = { service_id: serviceId.value, vm_id: row.id }
      // resume uses FormData
      let res
      if (action === 'resume') {
        const fd = new FormData()
        fd.append('service_id', serviceId.value)
        fd.append('vm_id', row.id)
        res = await resumeVm(fd)
      } else {
        res = await apis[action](payload)
      }
      if (res?.data?.code === 200) { ElMessage.success(`${labels[action]}成功`); loadList() }
      else ElMessage.error(extractApiError(res?.data, `${labels[action]}失败`))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, `${labels[action]}失败`)) }
  }).catch(() => {})
}

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 res = await rebuildVm({ service_id: serviceId.value, vm_id: rebuildTarget.value.id, image_id: rebuildImageId.value })
    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
      // API may return data.vm nested, or data.data, or flat
      currentDetail.value = d.vm ?? d.data ?? d
    }
  } 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 statusData = res.data.data
      currentDetail.value = { ...currentDetail.value, status: statusData.status ?? statusData }
      ElMessage.success('状态已刷新: ' + vmStatusLabel(currentDetail.value.status))
    }
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '获取状态失败')) }
}

const fetchVmMetrics = async (vm) => {
  try {
    const res = await getVmMetrics({ service_id: serviceId.value, vm_name: vm.name })
    if (res?.data?.code === 200) vmMetricsData.value = res.data.data?.data ?? res.data.data
    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 goBack = () => { router.push('/virtualization/kvm-service') }

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

<style scoped>
.vm-manage-container { padding: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
.header-left { display: flex; align-items: center; gap: 16px; }
.header-info h3 { margin: 0; font-size: 18px; color: #303133; }
.sub-info { font-size: 13px; color: #909399; }
.header-right { display: flex; gap: 8px; }
.embedded-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.filter-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.vm-config { display: flex; gap: 4px; flex-wrap: wrap; }
.text-muted { color: #c0c4cc; }
.pagination-wrapper { display: flex; justify-content: flex-end; margin-top: 16px; }
.detail-actions { margin-top: 16px; display: flex; gap: 8px; }
.bind-selector-row { display: flex; align-items: center; width: 100%; }
:deep(.el-table) { --el-table-header-bg-color: #fafafa; }
:deep(.el-table th) { font-weight: 600; color: #303133; font-size: 13px; }
.resource-row { display: flex; gap: 20px; margin-bottom: 18px; }
.resource-item { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.resource-label { white-space: nowrap; font-size: 14px; color: #606266; flex-shrink: 0; }
.resource-unit-select { width: 72px; flex-shrink: 0; }
.resource-input { flex: 1; min-width: 0; }
</style>
