<template>
  <div class="network-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 }} | 宿主机：{{ selectedHostName || '请选择' }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建网络</el-button>
        <el-button type="success" @click="handleBatchAdd">批量创建</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 type="success" @click="handleBatchAdd">批量创建</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="filterType" placeholder="网络类型" clearable style="width: 130px" @change="handleSearch">
        <el-option label="网桥(Bridge)" value="bridge" />
        <el-option label="内网(NAT)" value="nat" />
      </el-select>
      <el-select v-model="filterIpVersion" placeholder="IP版本" clearable style="width: 120px" @change="handleSearch">
        <el-option label="IPv4" value="ipv4" />
        <el-option label="IPv6" value="ipv6" />
      </el-select>
      <el-select v-model="filterUsed" placeholder="使用状态" clearable style="width: 120px" @change="handleSearch">
        <el-option label="已用" value="true" />
        <el-option label="未用" value="false" />
      </el-select>
      <el-select v-model="filterDisable" placeholder="禁用状态" clearable style="width: 120px" @change="handleSearch">
        <el-option label="已禁用" value="true" />
        <el-option label="已启用" value="false" />
      </el-select>
    </div>

    <!-- 网络列表 -->
    <el-table :data="networkList" v-loading="loading" stripe>
      <el-table-column prop="id" label="ID" width="70" />
      <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
      <el-table-column label="类型" width="100">
        <template #default="{ row }">
          <el-tag :type="row.type === 'bridge' ? 'success' : 'warning'" size="small">
            {{ row.type === 'bridge' ? '网桥' : 'NAT' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址(CIDR)" min-width="160" show-overflow-tooltip />
      <el-table-column prop="gateway" label="网关" width="140" />
      <el-table-column prop="nameservers" label="DNS" min-width="140" show-overflow-tooltip />
      <el-table-column prop="bridge_name" label="网桥名称" width="120" show-overflow-tooltip />
      <el-table-column prop="target_device" label="目标设备" width="120" show-overflow-tooltip />
      <el-table-column label="宿主机" width="140">
        <template #default="{ row }">{{ getHostLabel(row.host_id) }}</template>
      </el-table-column>
      <el-table-column label="使用状态" width="90" align="center">
        <template #default="{ row }">
          <el-tag :type="isNetworkUsed(row) ? 'success' : 'info'" size="small">
            {{ isNetworkUsed(row) ? '已用' : '未用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="虚拟机" width="120">
        <template #default="{ row }">
          <el-button v-if="isNetworkUsed(row)" link type="primary" @click="goToVmDetail(row.vm_id)">
            {{ row.vm_id }}
          </el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="禁用" width="80" align="center">
        <template #default="{ row }">
          <el-tag v-if="row.disable" type="danger" size="small">已禁用</el-tag>
          <el-tag v-else type="success" size="small">启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="240" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleViewDetail(row)">详情</el-button>
          <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button link :type="row.disable ? 'success' : 'warning'" @click="handleToggleDisable(row)">
            {{ row.disable ? '启用' : '禁用' }}
          </el-button>
          <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
        </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="dialogVisible" :title="dialogType === 'add' ? '创建网络' : '编辑网络'" width="600px" destroy-on-close class="tk-dialog">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px">
        <div class="tk-section">
          <div class="tk-section-title">基本信息</div>
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="网络名称" />
          </el-form-item>
          <el-form-item label="宿主机" prop="host_id">
            <el-select v-model="formData.host_id" placeholder="选择宿主机" filterable style="width: 100%">
              <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="网络类型" prop="type">
            <el-select v-model="formData.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(CIDR)" prop="address">
            <el-input v-model="formData.address" placeholder="例如 192.168.1.0/24" />
          </el-form-item>
          <el-form-item label="网关地址" prop="gateway">
            <el-input v-model="formData.gateway" placeholder="例如 192.168.1.1" />
          </el-form-item>
          <el-form-item label="DNS 服务器">
            <el-input v-model="formData.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="formData.mac_address" placeholder="不填则随机" />
          </el-form-item>
          <el-form-item label="虚拟网桥名">
            <el-input v-model="formData.bridge_name" placeholder="不填使用默认" />
          </el-form-item>
          <el-form-item label="逻辑网桥名">
            <el-input v-model="formData.ls_bridge_name" placeholder="不填使用默认" />
          </el-form-item>
          <el-form-item label="逻辑端口名">
            <el-input v-model="formData.ls_name" placeholder="不填使用默认" />
          </el-form-item>
          <el-form-item label="禁用网络" v-if="dialogType === 'edit'">
            <el-switch v-model="formData.disable" active-text="禁用" inactive-text="启用" />
            <div style="font-size: 12px; color: #909399; margin-top: 4px">禁用后该网络不参与自动分配</div>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="tk-dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 详情弹窗 -->
    <el-dialog v-model="detailVisible" title="网络详情" width="600px" destroy-on-close>
      <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="类型">
          <el-tag :type="currentDetail.type === 'bridge' ? 'success' : 'warning'" size="small">
            {{ currentDetail.type === 'bridge' ? '网桥' : 'NAT' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="宿主机">{{ getHostLabel(currentDetail.host_id) }}</el-descriptions-item>
        <el-descriptions-item label="地址(CIDR)">{{ currentDetail.address }}</el-descriptions-item>
        <el-descriptions-item label="网关">{{ currentDetail.gateway }}</el-descriptions-item>
        <el-descriptions-item label="DNS">{{ currentDetail.nameservers || '-' }}</el-descriptions-item>
        <el-descriptions-item label="MAC 地址">{{ currentDetail.mac_address || '-' }}</el-descriptions-item>
        <el-descriptions-item label="虚拟网桥">{{ currentDetail.bridge_name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="逻辑网桥">{{ currentDetail.ls_bridge_name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="逻辑端口">{{ currentDetail.ls_name || '-' }}</el-descriptions-item>
        <el-descriptions-item label="目标设备">{{ currentDetail.target_device || '-' }}</el-descriptions-item>
        <el-descriptions-item label="使用状态">
          <el-tag :type="isNetworkUsed(currentDetail) ? 'success' : 'info'" size="small">
            {{ isNetworkUsed(currentDetail) ? '已用' : '未用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="虚拟机">
          <el-button v-if="isNetworkUsed(currentDetail)" link type="primary" @click="goToVmDetail(currentDetail.vm_id)">
            {{ currentDetail.vm_id }}
          </el-button>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="主网卡">
          <el-tag :type="currentDetail.is_primary ? 'warning' : 'info'" size="small">
            {{ currentDetail.is_primary ? '是' : '否' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="禁用状态">
          <el-tag :type="currentDetail.disable ? 'danger' : 'success'" size="small">
            {{ currentDetail.disable ? '已禁用' : '启用' }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer><el-button @click="detailVisible = false">关闭</el-button></template>
    </el-dialog>

    <!-- 批量创建弹窗 -->
    <el-dialog v-model="batchDialogVisible" title="批量创建网络" width="560px" destroy-on-close class="tk-dialog">
      <el-form ref="batchFormRef" :model="batchForm" :rules="batchFormRules" label-width="100px">
        <el-alert type="info" :closable="false" show-icon style="margin-bottom: 16px">通过指定 IP 范围（start_ip ~ end_ip）批量创建网络条目</el-alert>
        <div class="tk-section">
          <div class="tk-section-title">IP 范围</div>
          <el-form-item label="宿主机" prop="host_id">
            <el-select v-model="batchForm.host_id" placeholder="选择宿主机" filterable style="width: 100%">
              <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="起始IP" prop="start_ip">
            <el-input v-model="batchForm.start_ip" placeholder="如 192.168.1.10" />
          </el-form-item>
          <el-form-item label="结束IP" prop="end_ip">
            <el-input v-model="batchForm.end_ip" placeholder="如 192.168.1.50" />
          </el-form-item>
        </div>
        <div class="tk-section">
          <div class="tk-section-title">网络配置</div>
          <el-form-item label="网关">
            <el-input v-model="batchForm.gateway" placeholder="可选，如 192.168.1.1" />
          </el-form-item>
          <el-form-item label="子网掩码">
            <el-input v-model="batchForm.mask" placeholder="可选，如 24" />
          </el-form-item>
          <el-form-item label="DNS">
            <el-input v-model="batchForm.nameservers" placeholder="可选，如 114.114.114.114,8.8.8.8" />
          </el-form-item>
          <el-form-item label="网桥名称">
            <el-input v-model="batchForm.bridge_name" placeholder="可选" />
          </el-form-item>
          <el-form-item label="网络类型">
            <el-select v-model="batchForm.type" style="width: 100%">
              <el-option label="网桥(Bridge)" value="bridge" />
              <el-option label="内网(NAT)" value="nat" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <div class="tk-dialog-footer">
          <el-button @click="batchDialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="handleBatchSubmit">确定创建</el-button>
        </div>
      </template>
    </el-dialog>
  </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 } from '@element-plus/icons-vue'
import { getRemoteHostList, getNetworkList, getNetworkDetail, createNetwork, batchCreateNetwork, updateNetwork, deleteNetwork } from '@/api/admin/kvmService'
import { extractApiError } from '@/utils/kvmErrorUtil'

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 networkList = ref([])
const total = ref(0)
const keyword = ref('')
const filterType = ref('')
const filterIpVersion = ref('')
const filterUsed = ref('')
const filterDisable = ref('')

const isNetworkUsed = (row) => !!row?.vm_id

const goToVmDetail = (vmId) => {
  if (!vmId) return
  router.push({ path: '/virtualization/vm-detail', query: { service_id: serviceId.value, service_name: serviceName.value, vm_id: vmId } })
}
const hostIdInput = ref(0)
const hostOptions = ref([])
const queryParams = reactive({ page: 1, page_size: 10 })

const selectedHostName = computed(() => {
  const h = hostOptions.value.find(x => x.id === hostIdInput.value)
  return h ? `${h.name} (${h.ip || h.id})` : (hostIdInput.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: 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 dialogVisible = ref(false)
const dialogType = ref('add')
const formRef = ref(null)
const detailVisible = ref(false)
const currentDetail = ref(null)

const formData = reactive({
  id: undefined, name: '', address: '', gateway: '', nameservers: '',
  type: 'bridge', mac_address: '', bridge_name: '', ls_bridge_name: '', ls_name: '', host_id: 0,
  disable: false
})

const formRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  address: [{ required: true, message: '请输入IP地址(CIDR)', trigger: 'blur' }],
  gateway: [{ required: true, message: '请输入网关', trigger: 'blur' }],
  type: [{ required: true, message: '请选择类型', trigger: 'change' }],
  host_id: [{ required: true, message: '请选择宿主机', trigger: 'change' }]
}

const loadList = async () => {
  if (!serviceId.value) return
  const hid = hostIdInput.value || hostId.value
  if (!hid) { ElMessage.warning('请先选择宿主机'); return }
  loading.value = true
  try {
    const params = { service_id: serviceId.value, host_id: hid, page: queryParams.page, count: queryParams.page_size }
    if (keyword.value) params.key = keyword.value
    if (filterType.value) params.type = filterType.value
    if (filterIpVersion.value) params.ip_version = filterIpVersion.value
    if (filterUsed.value !== '') params.used = filterUsed.value
    if (filterDisable.value !== '') params.disable = filterDisable.value
    const res = await getNetworkList(params)
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      const inner = body.data
      networkList.value = inner.data || []
      total.value = inner.meta?.count ?? inner.all_count ?? 0
    } else {
      networkList.value = []
      total.value = 0
    }
  } catch (e) {
    console.error('获取网络列表失败:', e)
    ElMessage.error('获取网络列表失败')
  } finally { loading.value = false }
}

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

const handleAdd = () => {
  dialogType.value = 'add'
  Object.assign(formData, { id: undefined, name: '', address: '', gateway: '', nameservers: '', type: 'bridge', mac_address: '', bridge_name: '', ls_bridge_name: '', ls_name: '', host_id: hostIdInput.value || hostId.value || 0, disable: false })
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogType.value = 'edit'
  Object.assign(formData, {
    id: row.id, name: row.name, address: row.address, gateway: row.gateway,
    nameservers: row.nameservers || '', type: row.type, mac_address: row.mac_address || '',
    bridge_name: row.bridge_name || '', ls_bridge_name: row.ls_bridge_name || '',
    ls_name: row.ls_name || '', host_id: row.host_id, disable: !!row.disable
  })
  dialogVisible.value = true
}

const handleSubmit = () => {
  formRef.value?.validate(async (valid) => {
    if (!valid) return
    submitLoading.value = true
    try {
      const fd = new FormData()
      fd.append('service_id', serviceId.value)
      fd.append('name', formData.name)
      fd.append('address', formData.address)
      fd.append('gateway', formData.gateway)
      fd.append('type', formData.type)
      fd.append('host_id', formData.host_id)
      if (formData.nameservers) fd.append('nameservers', formData.nameservers)
      if (formData.mac_address) fd.append('mac_address', formData.mac_address)
      if (formData.bridge_name) fd.append('bridge_name', formData.bridge_name)
      if (formData.ls_bridge_name) fd.append('ls_bridge_name', formData.ls_bridge_name)
      if (formData.ls_name) fd.append('ls_name', formData.ls_name)
      let res
      if (dialogType.value === 'add') {
        res = await createNetwork(fd)
      } else {
        fd.append('id', formData.id)
        fd.append('disable', formData.disable)
        res = await updateNetwork(fd)
      }
      if (res?.data?.code === 200) {
        ElMessage.success(dialogType.value === 'add' ? '创建成功' : '修改成功')
        dialogVisible.value = false
        loadList()
      } else {
        ElMessage.error(extractApiError(res?.data, '操作失败'))
      }
    } catch (e) {
      ElMessage.error(extractApiError(e?.response?.data, '操作失败'))
    } finally { submitLoading.value = false }
  })
}

const handleViewDetail = async (row) => {
  detailVisible.value = true
  currentDetail.value = row
  try {
    const res = await getNetworkDetail({ service_id: serviceId.value, network_id: row.id, host_id: row.host_id })
    if (res?.data?.code === 200 && res?.data?.data) {
      const d = res.data.data
      currentDetail.value = d.network ?? d.data ?? d
    }
  } catch { /* fallback */ }
}

const handleToggleDisable = (row) => {
  const nextState = !row.disable
  const actionText = nextState ? '禁用' : '启用'
  ElMessageBox.confirm(`确定要${actionText}网络「${row.name}」吗？${nextState ? '禁用后该网络不参与自动分配。' : ''}`, `${actionText}确认`, {
    confirmButtonText: `确定${actionText}`, cancelButtonText: '取消', type: 'warning'
  }).then(async () => {
    try {
      const fd = new FormData()
      fd.append('service_id', serviceId.value)
      fd.append('id', row.id)
      fd.append('host_id', row.host_id)
      fd.append('disable', nextState)
      const res = await updateNetwork(fd)
      if (res?.data?.code === 200) { ElMessage.success(`${actionText}成功`); loadList() }
      else ElMessage.error(extractApiError(res?.data, `${actionText}失败`))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, `${actionText}失败`)) }
  }).catch(() => {})
}

const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除网络「${row.name}」吗？`, '删除确认', {
    confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteNetwork({ service_id: serviceId.value, network_id: row.id, host_id: row.host_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 batchDialogVisible = ref(false)
const batchFormRef = ref(null)
const batchForm = reactive({
  host_id: 0, start_ip: '', end_ip: '', gateway: '', mask: '',
  nameservers: '', bridge_name: '', type: 'bridge'
})
const batchFormRules = {
  host_id: [{ required: true, message: '请选择宿主机', trigger: 'change' }],
  start_ip: [{ required: true, message: '请输入起始IP', trigger: 'blur' }],
  end_ip: [{ required: true, message: '请输入结束IP', trigger: 'blur' }]
}

const handleBatchAdd = () => {
  Object.assign(batchForm, {
    host_id: hostIdInput.value || hostId.value || 0,
    start_ip: '', end_ip: '', gateway: '', mask: '',
    nameservers: '', bridge_name: '', type: 'bridge'
  })
  batchDialogVisible.value = true
}

const handleBatchSubmit = () => {
  batchFormRef.value?.validate(async (valid) => {
    if (!valid) return
    submitLoading.value = true
    try {
      const fd = new FormData()
      fd.append('service_id', serviceId.value)
      fd.append('host_id', batchForm.host_id)
      fd.append('start_ip', batchForm.start_ip)
      fd.append('end_ip', batchForm.end_ip)
      if (batchForm.gateway) fd.append('gateway', batchForm.gateway)
      if (batchForm.mask) fd.append('mask', batchForm.mask)
      if (batchForm.nameservers) fd.append('nameservers', batchForm.nameservers)
      if (batchForm.bridge_name) fd.append('bridge_name', batchForm.bridge_name)
      if (batchForm.type) fd.append('type', batchForm.type)
      const res = await batchCreateNetwork(fd)
      if (res?.data?.code === 200) {
        ElMessage.success('批量创建成功')
        batchDialogVisible.value = false
        loadList()
      } else {
        ElMessage.error(extractApiError(res?.data, '批量创建失败'))
      }
    } catch (e) {
      ElMessage.error(extractApiError(e?.response?.data, '批量创建失败'))
    } finally { submitLoading.value = false }
  })
}

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

onMounted(async () => {
  if (serviceId.value) {
    await loadHostOptions()
    if (hostId.value) {
      hostIdInput.value = hostId.value
    } else if (hostOptions.value.length > 0) {
      hostIdInput.value = hostOptions.value[0].id
    }
    if (hostIdInput.value) loadList()
  }
})

defineExpose({ loadList })
</script>

<style scoped>
.network-manage-container { padding: 20px; }
</style>
