<template>
  <div class="host-detail-page">
    <!-- 顶部返回栏 -->
    <div class="page-header">
      <div class="header-left">
        <el-button @click="goBack" link class="back-btn"><el-icon><ArrowLeft /></el-icon> 返回宿主机列表</el-button>
      </div>
      <div class="header-right">
        <el-button plain :icon="Refresh" @click="loadDetail" :loading="loading">刷新</el-button>
      </div>
    </div>

    <div class="main-content" v-loading="loading">
      <!-- 实例概览栏 -->
      <div class="instance-overview" v-if="detail">
        <div class="overview-left">
          <h2 class="instance-name">{{ detail.name || '-' }} <span class="instance-id">{{ detail.id }}</span></h2>
        </div>
        <div class="overview-actions">
          <el-button type="primary" plain @click="handleEdit">编辑宿主机</el-button>
          <el-button type="danger" plain @click="handleDelete">删除</el-button>
        </div>
      </div>

      <!-- 状态概览条 -->
      <div class="status-bar" v-if="detail">
        <div class="status-item">
          <span class="status-label">状态</span>
          <span class="status-value">
            <span class="status-dot" :class="detail.is_active ? 'dot-running' : 'dot-other'"></span>
            {{ detail.is_active ? '启用' : '禁用' }}
          </span>
        </div>
        <div class="status-item">
          <span class="status-label">IP 地址</span>
          <span class="status-value">{{ detail.ip || '-' }}</span>
        </div>
        <div class="status-item">
          <span class="status-label">资源</span>
          <span class="status-value">{{ detail.max_cpu || 0 }}核 | {{ formatMemKB(detail.max_memory) }} | {{ formatDiskGB(detail.max_disk) }}</span>
        </div>
        <div class="status-item">
          <span class="status-label">带宽</span>
          <span class="status-value">↓{{ detail.rx_bandwidth || 0 }} / ↑{{ detail.tx_bandwidth || 0 }} Mbps</span>
        </div>
        <div class="status-item">
          <span class="status-label">创建时间</span>
          <span class="status-value">{{ formatTimestamp(detail.created_at) }}</span>
        </div>
      </div>

      <!-- 标签页 -->
      <el-tabs v-model="activeTab" class="detail-tabs" v-if="detail">
        <el-tab-pane label="基本信息" name="info">
          <div class="section-block">
            <h3 class="section-title">配置信息</h3>
            <div class="config-grid">
              <div class="config-row">
                <div class="config-cell">
                  <span class="config-label">服务地址</span>
                  <span class="config-value mono-text">{{ detail.base_url || '-' }}</span>
                </div>
                <div class="config-cell">
                  <span class="config-label">SSH 端口</span>
                  <span class="config-value">{{ detail.port || '-' }}</span>
                </div>
                <div class="config-cell">
                  <span class="config-label">SSH 用户</span>
                  <span class="config-value">{{ detail.user || '-' }}</span>
                </div>
              </div>
              <div class="config-row">
                <div class="config-cell">
                  <span class="config-label">认证Token</span>
                  <span class="config-value">
                    <template v-if="detail.token">
                      <code>{{ showToken ? detail.token : '••••••••••••' }}</code>
                      <el-button link type="primary" size="small" @click="showToken = !showToken">{{ showToken ? '隐藏' : '显示' }}</el-button>
                    </template>
                    <span v-else class="text-muted">未设置</span>
                  </span>
                </div>
                <div class="config-cell">
                  <span class="config-label">SSH 密码</span>
                  <span class="config-value">
                    <template v-if="detail.password">
                      <code>{{ showPassword ? detail.password : '••••••••' }}</code>
                      <el-button link type="primary" size="small" @click="showPassword = !showPassword">{{ showPassword ? '隐藏' : '显示' }}</el-button>
                    </template>
                    <span v-else class="text-muted">未设置</span>
                  </span>
                </div>
                <div class="config-cell">
                  <span class="config-label">私钥路径</span>
                  <span class="config-value mono-text">{{ detail.private_key_path || '-' }}</span>
                </div>
              </div>
              <div class="config-row">
                <div class="config-cell">
                  <span class="config-label">宿主机组</span>
                  <span class="config-value">{{ detail.host_group_id ? `#${detail.host_group_id}` : '-' }}</span>
                </div>
                <div class="config-cell">
                  <span class="config-label">介绍</span>
                  <span class="config-value">{{ detail.description || '-' }}</span>
                </div>
                <div class="config-cell">
                  <span class="config-label">更新时间</span>
                  <span class="config-value">{{ formatTimestamp(detail.updated_at) }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>

        <el-tab-pane label="监控" name="monitor">
          <div class="section-block">
            <div class="section-header">
              <h3 class="section-title">实时指标</h3>
              <div style="display: flex; align-items: center; gap: 8px;">
                <el-tag v-if="pollingActive" type="success" size="small" effect="plain">自动刷新中</el-tag>
                <el-button size="small" :icon="Refresh" @click="loadMetrics" :loading="metricsLoading">刷新指标</el-button>
              </div>
            </div>
            <template v-if="metricsData">
              <el-row :gutter="16">
                <el-col :span="12" v-if="metricsData.cpu">
                  <el-card shadow="hover" class="metrics-card">
                    <template #header><span class="metrics-title"><el-icon><Monitor /></el-icon> CPU 使用率 {{ (metricsData.cpu.cpu_usage_percent ?? 0).toFixed(1) }}% ({{ metricsData.cpu.cpu_count ?? '-' }}核)</span></template>
                    <div ref="cpuChartRef" class="chart-container"></div>
                  </el-card>
                </el-col>
                <el-col :span="12" v-if="metricsData.memory">
                  <el-card shadow="hover" class="metrics-card">
                    <template #header><span class="metrics-title"><el-icon><Coin /></el-icon> 内存 {{ formatBytesRaw(metricsData.memory.used) }} / {{ formatBytesRaw(metricsData.memory.total) }} ({{ metricsData.memory.percent ?? 0 }}%)</span></template>
                    <div ref="memChartRef" class="chart-container"></div>
                  </el-card>
                </el-col>
              </el-row>
              <el-row :gutter="16" style="margin-top: 16px">
                <el-col :span="12" v-if="metricsData.disk">
                  <el-card shadow="hover" class="metrics-card">
                    <template #header><span class="metrics-title"><el-icon><Box /></el-icon> 磁盘</span></template>
                    <div v-for="(info, path) in metricsData.disk" :key="path" class="disk-item">
                      <div class="disk-path">{{ path }}</div>
                      <el-descriptions :column="2" border size="small">
                        <el-descriptions-item label="总计">{{ formatBytesRaw(info.total) }}</el-descriptions-item>
                        <el-descriptions-item label="已用">{{ formatBytesRaw(info.used) }}</el-descriptions-item>
                        <el-descriptions-item label="空闲">{{ formatBytesRaw(info.free) }}</el-descriptions-item>
                        <el-descriptions-item label="使用率">{{ info.percent ?? '-' }}%</el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12" v-if="metricsData.network || metricsData.internet_speed">
                  <el-card shadow="hover" class="metrics-card">
                    <template #header><span class="metrics-title"><el-icon><Connection /></el-icon> 网络</span></template>
                    <div ref="netChartRef" class="chart-container"></div>
                  </el-card>
                </el-col>
              </el-row>
            </template>
            <el-empty v-else description="加载指标数据中..." />
          </div>
        </el-tab-pane>

        <el-tab-pane label="镜像管理" name="image">
          <ImageManage v-if="hostTabLoaded['image']" />
        </el-tab-pane>
        <el-tab-pane label="网络管理" name="network">
          <NetworkManage v-if="hostTabLoaded['network']" />
        </el-tab-pane>
        <el-tab-pane label="数据卷管理" name="volume">
          <VolumeManage v-if="hostTabLoaded['volume']" />
        </el-tab-pane>
        <el-tab-pane label="虚拟机管理" name="vm">
          <VmManage v-if="hostTabLoaded['vm']" />
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="editDialogVisible" title="编辑宿主机" width="890px" destroy-on-close>
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
        <el-form-item label="名称" prop="name"><el-input v-model="formData.name" /></el-form-item>
        <el-form-item label="服务地址" prop="base_url"><el-input v-model="formData.base_url" /></el-form-item>
        <el-form-item label="IP 地址" prop="ip"><el-input v-model="formData.ip" /></el-form-item>
        <el-form-item label="认证Token"><el-input v-model="formData.token" show-password /></el-form-item>
        <el-divider content-position="left">SSH 配置</el-divider>
        <el-form-item label="SSH 端口"><el-input-number v-model="formData.port" :min="0" :max="65535" style="width: 100%" /></el-form-item>
        <el-form-item label="SSH 用户名"><el-input v-model="formData.user" /></el-form-item>
        <el-form-item label="SSH 密码"><el-input v-model="formData.password" show-password /></el-form-item>
        <el-form-item label="私钥路径"><el-input v-model="formData.private_key_path" /></el-form-item>
        <el-divider content-position="left">资源限制</el-divider>
        <el-form-item label="最大CPU（核）"><el-input-number v-model="formData.max_cpu" :min="0" controls-position="right" style="width: 100%" /></el-form-item>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="最大内存">
              <div class="unit-input-row">
                <el-select v-model="memoryUnit" style="width: 70px; flex-shrink: 0;" size="default">
                  <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="wide-number" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最大磁盘">
              <div class="unit-input-row">
                <el-select v-model="diskUnit" style="width: 70px; flex-shrink: 0;" size="default">
                  <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="wide-number" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="16">
          <el-col :span="12"><el-form-item label="下行带宽(Mbps)"><el-input-number v-model="formData.rx_bandwidth" :min="0" controls-position="right" style="width: 100%" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="上行带宽(Mbps)"><el-input-number v-model="formData.tx_bandwidth" :min="0" controls-position="right" style="width: 100%" /></el-form-item></el-col>
        </el-row>
        <el-form-item label="宿主机组">
          <div style="display: flex; gap: 8px; width: 100%">
            <el-input :model-value="formData.host_group_id ? `宿主机组 #${formData.host_group_id}` : '未选择'" disabled style="flex: 1" />
            <el-button type="primary" @click="showGroupSelector = true">选择</el-button>
            <el-button v-if="formData.host_group_id" @click="formData.host_group_id = 0">清除</el-button>
          </div>
        </el-form-item>
        <el-form-item label="介绍"><el-input v-model="formData.description" type="textarea" :rows="3" /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>

    <HostGroupSelectorPopup v-model="showGroupSelector" :service-id="serviceId" :current-id="formData.host_group_id" @confirm="g => formData.host_group_id = g.id" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onActivated, onDeactivated, onBeforeUnmount, watch, nextTick, provide } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowLeft, Refresh, Edit, Delete, Monitor, Coin, Box, Connection } from '@element-plus/icons-vue'
import {
  getRemoteHostDetail, getRemoteHostMetrics, updateRemoteHost, deleteRemoteHost
} from '@/api/admin/kvmService'
import { extractApiError } from '@/utils/kvmErrorUtil'
import HostGroupSelectorPopup from '@/components/admin/HostGroupSelectorPopup.vue'
import ImageManage from '@/views/virtualization/ImageManage.vue'
import NetworkManage from '@/views/virtualization/NetworkManage.vue'
import VolumeManage from '@/views/virtualization/VolumeManage.vue'
import VmManage from '@/views/virtualization/VmManage.vue'
import { useTagsViewStore } from '@/store/tagsViewStore'
import * as echarts from 'echarts'

const route = useRoute()
const router = useRouter()
const tagsViewStore = useTagsViewStore()

const serviceId = computed(() => parseInt(route.query.service_id) || 0)
const serviceName = computed(() => route.query.service_name || '')
const hostId = computed(() => parseInt(route.query.id) || 0)

const activeTab = ref('info')
const hostTabLoaded = reactive({ image: false, network: false, volume: false, vm: false })

watch(activeTab, (tab) => {
  if (!['info', 'monitor'].includes(tab) && !hostTabLoaded[tab]) hostTabLoaded[tab] = true
  if (tab === 'monitor' && detail.value) { loadMetrics(); startPolling() }
  else stopPolling()
})

provide('embedded', true)
provide('serviceId', serviceId)
provide('serviceName', serviceName)
provide('hostId', hostId)

const loading = ref(false)
const submitLoading = ref(false)
const metricsLoading = ref(false)
const detail = ref(null)
const showToken = ref(false)
const showPassword = ref(false)
const metricsData = ref(null)
const editDialogVisible = ref(false)
const showGroupSelector = ref(false)
const formRef = ref(null)

const formData = reactive({
  name: '', base_url: '', ip: '', token: '', port: 22, user: '', password: '', private_key_path: '',
  max_cpu: 0, max_memory: 0, max_disk: 0, rx_bandwidth: 0, tx_bandwidth: 0, host_group_id: 0, description: ''
})
const formRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  base_url: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
  ip: [{ required: true, message: '请输入IP', trigger: 'blur' }]
}

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 formatMemKB = (v) => {
  if (!v) return '-'; v = Number(v)
  if (v >= 1073741824) return (v / 1073741824).toFixed(1) + ' TB'
  if (v >= 1048576) return (v / 1048576).toFixed(1) + ' GB'
  if (v >= 1024) return (v / 1024).toFixed(1) + ' MB'
  return v + ' KB'
}
const formatDiskGB = (v) => {
  if (!v) return '-'; v = Number(v)
  if (v >= 1024) return (v / 1024).toFixed(1) + ' TB'
  return v.toFixed(1) + ' GB'
}

const memoryUnit = ref('GB')
const diskUnit = ref('GB')
const memoryUnitOptions = [
  { label: 'KB', factor: 1 },
  { label: 'MB', factor: 1024 },
  { label: 'GB', factor: 1048576 },
  { label: 'TB', factor: 1073741824 }
]
const diskUnitOptions = [
  { label: 'GB', factor: 1 },
  { label: 'TB', factor: 1024 }
]
const getMemFactor = () => memoryUnitOptions.find(u => u.label === memoryUnit.value)?.factor || 1048576
const getDiskFactor = () => diskUnitOptions.find(u => u.label === diskUnit.value)?.factor || 1

const memoryDisplay = computed({
  get: () => formData.max_memory ? +(formData.max_memory / getMemFactor()).toFixed(2) : 0,
  set: (v) => { formData.max_memory = Math.round((v || 0) * getMemFactor()) }
})
const diskDisplay = computed({
  get: () => formData.max_disk ? +(formData.max_disk / getDiskFactor()).toFixed(2) : 0,
  set: (v) => { formData.max_disk = Math.round((v || 0) * getDiskFactor()) }
})
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 loadDetail = async () => {
  if (!serviceId.value || !hostId.value) return
  loading.value = true
  try {
    const res = await getRemoteHostDetail({ service_id: serviceId.value, id: hostId.value })
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      detail.value = body.data.host ?? body.data.data ?? body.data
    } else { ElMessage.error(extractApiError(body, '加载失败')) }
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '加载失败')) } finally { loading.value = false }
}

const cpuChartRef = ref(null)
const memChartRef = ref(null)
const netChartRef = ref(null)
let cpuChart = null
let memChart = null
let netChart = null

const MAX_HISTORY = 60
const metricsHistory = reactive({
  times: [],
  cpu: [],
  memPercent: [],
  netRx: [],
  netTx: []
})
const pollingActive = ref(false)
let pollTimer = null
let isPageActive = false

const loadMetrics = async () => {
  if (!serviceId.value || !hostId.value || !isPageActive) return
  metricsLoading.value = true
  try {
    const res = await getRemoteHostMetrics({ service_id: serviceId.value, host_id: hostId.value })
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      metricsData.value = body.data.data ?? body.data
      pushHistory(metricsData.value)
      await nextTick()
      renderCharts()
    }
  } catch { /* silent for polling */ } finally { metricsLoading.value = false }
}

const pushHistory = (d) => {
  const now = new Date().toLocaleTimeString('zh-CN', { hour12: false })
  metricsHistory.times.push(now)
  metricsHistory.cpu.push(d.cpu?.cpu_usage_percent ?? 0)
  metricsHistory.memPercent.push(d.memory?.percent ?? 0)
  metricsHistory.netRx.push(d.internet_speed?.rx_bytes ?? 0)
  metricsHistory.netTx.push(d.internet_speed?.tx_bytes ?? 0)
  if (metricsHistory.times.length > MAX_HISTORY) {
    metricsHistory.times.shift()
    metricsHistory.cpu.shift()
    metricsHistory.memPercent.shift()
    metricsHistory.netRx.shift()
    metricsHistory.netTx.shift()
  }
}

const makeLineOption = (title, seriesData, color, yFormatter) => ({
  tooltip: { trigger: 'axis', formatter: (params) => {
    const p = params[0]
    return `${p.axisValue}<br/>${p.marker} ${p.seriesName}: ${yFormatter ? yFormatter(p.value) : p.value}`
  }},
  grid: { top: 10, right: 16, bottom: 24, left: 50 },
  xAxis: { type: 'category', data: metricsHistory.times, boundaryGap: false, axisLabel: { fontSize: 10 } },
  yAxis: { type: 'value', min: 0, axisLabel: { fontSize: 10, formatter: yFormatter || (v => v) } },
  series: Array.isArray(seriesData)
    ? seriesData.map(s => ({ name: s.name, type: 'line', smooth: true, symbol: 'none', areaStyle: { opacity: 0.15 }, lineStyle: { width: 2 }, data: s.data, itemStyle: { color: s.color } }))
    : [{ name: title, type: 'line', smooth: true, symbol: 'none', areaStyle: { opacity: 0.15 }, lineStyle: { width: 2, color }, itemStyle: { color }, data: seriesData }]
})

const formatNetLabel = (v) => {
  if (!v) return '0 B/s'
  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 + ' B/s'
}

const renderCharts = () => {
  const times = [...metricsHistory.times]
  const cpuData = [...metricsHistory.cpu]
  const memData = [...metricsHistory.memPercent]
  const rxData = [...metricsHistory.netRx]
  const txData = [...metricsHistory.netTx]

  if (cpuChartRef.value) {
    if (!cpuChart) cpuChart = echarts.init(cpuChartRef.value)
    cpuChart.setOption({
      tooltip: { trigger: 'axis', formatter: (p) => `${p[0].axisValue}<br/>${p[0].marker} CPU: ${p[0].value.toFixed(1)}%` },
      grid: { top: 10, right: 16, bottom: 24, left: 50 },
      xAxis: { type: 'category', data: times, boundaryGap: false, axisLabel: { fontSize: 10 } },
      yAxis: { type: 'value', min: 0, max: 100, axisLabel: { fontSize: 10, formatter: v => v + '%' } },
      series: [{ name: 'CPU', type: 'line', smooth: true, symbol: 'none', areaStyle: { opacity: 0.15 }, lineStyle: { width: 2, color: '#409eff' }, itemStyle: { color: '#409eff' }, data: cpuData }]
    }, true)
  }
  if (memChartRef.value) {
    if (!memChart) memChart = echarts.init(memChartRef.value)
    memChart.setOption({
      tooltip: { trigger: 'axis', formatter: (p) => `${p[0].axisValue}<br/>${p[0].marker} 内存: ${p[0].value.toFixed(1)}%` },
      grid: { top: 10, right: 16, bottom: 24, left: 50 },
      xAxis: { type: 'category', data: times, boundaryGap: false, axisLabel: { fontSize: 10 } },
      yAxis: { type: 'value', min: 0, max: 100, axisLabel: { fontSize: 10, formatter: v => v + '%' } },
      series: [{ name: '内存', type: 'line', smooth: true, symbol: 'none', areaStyle: { opacity: 0.15 }, lineStyle: { width: 2, color: '#67c23a' }, itemStyle: { color: '#67c23a' }, data: memData }]
    }, true)
  }
  if (netChartRef.value) {
    if (!netChart) netChart = echarts.init(netChartRef.value)
    netChart.setOption({
      tooltip: { trigger: 'axis', formatter: (params) => {
        let s = params[0].axisValue
        params.forEach(p => { s += `<br/>${p.marker} ${p.seriesName}: ${formatNetLabel(p.value)}` })
        return s
      }},
      grid: { top: 10, right: 16, bottom: 24, left: 50 },
      xAxis: { type: 'category', data: times, boundaryGap: false, axisLabel: { fontSize: 10 } },
      yAxis: { type: 'value', min: 0, axisLabel: { fontSize: 10, formatter: formatNetLabel } },
      series: [
        { name: '接收', type: 'line', smooth: true, symbol: 'none', areaStyle: { opacity: 0.15 }, lineStyle: { width: 2, color: '#409eff' }, itemStyle: { color: '#409eff' }, data: rxData },
        { name: '发送', type: 'line', smooth: true, symbol: 'none', areaStyle: { opacity: 0.15 }, lineStyle: { width: 2, color: '#e6a23c' }, itemStyle: { color: '#e6a23c' }, data: txData }
      ]
    }, true)
  }
}

const startPolling = () => {
  if (!serviceId.value || !hostId.value || !isPageActive) return
  stopPolling()
  pollingActive.value = true
  pollTimer = setInterval(() => { loadMetrics() }, 3000)
}

const stopPolling = () => {
  pollingActive.value = false
  if (pollTimer) { clearInterval(pollTimer); pollTimer = null }
}

const disposeCharts = () => {
  cpuChart?.dispose(); cpuChart = null
  memChart?.dispose(); memChart = null
  netChart?.dispose(); netChart = null
}

const handleEdit = () => {
  if (!detail.value) return
  const d = detail.value
  Object.assign(formData, {
    name: d.name || '', base_url: d.base_url || '', ip: d.ip || '', token: d.token || '',
    port: d.port || 22, user: d.user || '', password: d.password || '', private_key_path: d.private_key_path || '',
    max_cpu: d.max_cpu || 0, max_memory: d.max_memory || 0, max_disk: d.max_disk || 0,
    rx_bandwidth: d.rx_bandwidth || 0, tx_bandwidth: d.tx_bandwidth || 0,
    host_group_id: d.host_group_id || 0, description: d.description || ''
  })
  editDialogVisible.value = true
}

const handleSubmit = () => {
  formRef.value?.validate(async (valid) => {
    if (!valid) return
    submitLoading.value = true
    try {
      const payload = { ...formData, service_id: serviceId.value, id: hostId.value }
      if (!payload.token) delete payload.token
      if (!payload.password) delete payload.password
      if (!payload.private_key_path) delete payload.private_key_path
      if (!payload.description) delete payload.description
      if (!payload.host_group_id) delete payload.host_group_id
      const res = await updateRemoteHost(payload)
      if (res?.data?.code === 200) { ElMessage.success('修改成功'); editDialogVisible.value = false; loadDetail() }
      else ElMessage.error(extractApiError(res?.data, '修改失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '修改失败')) } finally { submitLoading.value = false }
  })
}

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

const goBack = () => {
  tagsViewStore.delVisitedView(route)
  router.push({ path: '/virtualization/kvm-service-detail', query: { service_id: serviceId.value, service_name: serviceName.value } })
}

let loadedHostId = null

const initPage = () => {
  if (!hostId.value || loadedHostId === hostId.value) return
  loadedHostId = hostId.value
  activeTab.value = 'info'
  Object.keys(hostTabLoaded).forEach(k => hostTabLoaded[k] = false)
  detail.value = null
  showToken.value = false
  showPassword.value = false
  metricsData.value = null
  metricsHistory.times.length = 0
  metricsHistory.cpu.length = 0
  metricsHistory.memPercent.length = 0
  metricsHistory.netRx.length = 0
  metricsHistory.netTx.length = 0
  disposeCharts()
  loadDetail()
  if (activeTab.value === 'monitor') loadMetrics().then(() => startPolling())
}

watch(hostId, () => { if (isPageActive) initPage() })
onActivated(() => {
  isPageActive = true
  if (loadedHostId !== hostId.value) initPage()
  else if (activeTab.value === 'monitor') startPolling()
})
onMounted(() => { isPageActive = true; initPage() })
onDeactivated(() => { isPageActive = false; stopPolling() })
onBeforeUnmount(() => { isPageActive = false; stopPolling(); disposeCharts() })
</script>

<style scoped>
.host-detail-page { padding: 0; }
.page-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 24px; background: #fff; border-bottom: 1px solid #e8e8e8; }
.header-left { display: flex; align-items: center; }
.back-btn { font-size: 14px; color: #606266; }
.back-btn:hover { color: #409eff; }
.header-right { display: flex; gap: 8px; }

.main-content { padding: 20px 24px; }

.instance-overview { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 20px 24px; border-radius: 4px 4px 0 0; border: 1px solid #e8e8e8; border-bottom: none; }
.instance-name { margin: 0; font-size: 18px; font-weight: 600; color: #1d2129; }
.instance-id { font-size: 14px; font-weight: 400; color: #86909c; margin-left: 8px; }
.overview-actions { display: flex; gap: 8px; }

.status-bar { display: flex; background: #fff; padding: 16px 24px; border: 1px solid #e8e8e8; border-top: 1px solid #f0f0f0; border-radius: 0 0 4px 4px; margin-bottom: 16px; }
.status-item { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.status-item + .status-item { border-left: 1px solid #e8e8e8; padding-left: 24px; }
.status-label { font-size: 12px; color: #86909c; }
.status-value { font-size: 14px; color: #1d2129; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-running { background: #00b42a; }
.dot-other { background: #c9cdd4; }

.detail-tabs { background: #fff; border-radius: 4px; border: 1px solid #e8e8e8; padding: 0 24px; }
:deep(.detail-tabs > .el-tabs__header) { margin-bottom: 0; }
:deep(.detail-tabs > .el-tabs__content) { padding: 0 0 24px; }

.section-block { margin-top: 20px; }
.section-title { font-size: 15px; font-weight: 600; color: #1d2129; margin: 0 0 16px; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.section-header .section-title { margin-bottom: 0; }

.config-grid { border: 1px solid #e8e8e8; border-radius: 4px; overflow: hidden; }
.config-row { display: flex; border-bottom: 1px solid #e8e8e8; }
.config-row:last-child { border-bottom: none; }
.config-cell { flex: 1; padding: 12px 16px; border-right: 1px solid #e8e8e8; }
.config-cell:last-child { border-right: none; }
.config-label { display: block; font-size: 12px; color: #86909c; margin-bottom: 4px; }
.config-value { display: block; font-size: 14px; color: #1d2129; word-break: break-all; }
.mono-text { font-family: 'Consolas', 'Monaco', monospace; }
.text-muted { color: #c0c4cc; }

.metrics-card { margin-bottom: 0; }
.metrics-title { font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.metrics-title .el-icon { font-size: 16px; color: #409eff; }
.chart-container { width: 100%; height: 220px; }
.disk-item { margin-bottom: 8px; }
.disk-path { font-weight: 500; color: #409eff; font-size: 13px; margin-bottom: 4px; font-family: 'Consolas', monospace; }

.unit-input-row { display: flex; gap: 6px; width: 100%; }
.wide-number { flex: 1; min-width: 140px; }
</style>
