<template>
  <div class="container">
    <search-table
      :form-model="formModel"
      :form-items="formItems"
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      title="服务器管理"
      search-button-text="查询"
      reset-button-text="重置"
      @update:form-model="handleFormModelUpdate"
      @search="handleSearch"
      @reset="handleReset"
      @page-change="handlePageChange"
      @refresh="handleRefresh"
    >
      <template #toolbar-left>
        <a-button type="primary" @click="handleAdd">
          <template #icon>
            <icon-plus />
          </template>
          新增服务器
        </a-button>
      </template>

      <!-- ID -->
      <template #id="{ record }">
        {{ record.id }}
      </template>

      <!-- 关联资产 -->
      <template #asset_id="{ record }">
        <a-tag :color="record.asset_id ? 'green' : 'gray'">
          {{ record.asset_id ? `已关联 #${record.asset_id}` : '未关联' }}
        </a-tag>
      </template>

      <!-- 远程访问 -->
      <template #remote_access="{ record }">
        <a-tag :color="record.remote_access ? 'green' : 'gray'">
          {{ record.remote_access ? '已开启' : '未开启' }}
        </a-tag>
      </template>

      <!-- Agent 配置 -->
      <template #agent_config="{ record }">
        <a-tag :color="record.agent_config ? 'green' : 'gray'">
          {{ record.agent_config ? '已配置' : '未配置' }}
        </a-tag>
      </template>

      <!-- CPU -->
      <template #cpu="{ record }">
        <div class="resource-display">
          <div class="resource-info">
            <span class="resource-label">CPU</span>
            <span class="resource-value">{{ record.cpu_info?.value || 0 }}%</span>
          </div>
          <a-progress
            :percent="(record.cpu_info?.value || 0) / 100"
            :color="getProgressColor(record.cpu_info?.value || 0)"
            size="small"
            :show-text="false"
          />
        </div>
      </template>

      <!-- 内存 -->
      <template #memory="{ record }">
        <div class="resource-display">
          <div class="resource-info">
            <span class="resource-label">内存</span>
            <span class="resource-value">{{ record.memory_info?.value || 0 }}%</span>
          </div>
          <a-progress
            :percent="(record.memory_info?.value || 0) / 100"
            :color="getProgressColor(record.memory_info?.value || 0)"
            size="small"
            :show-text="false"
          />
        </div>
      </template>

      <!-- 硬盘 -->
      <template #disk="{ record }">
        <div class="resource-display">
          <div class="resource-info">
            <span class="resource-label">硬盘</span>
            <span class="resource-value">{{ record.disk_info?.value || 0 }}%</span>
          </div>
          <a-progress
            :percent="(record.disk_info?.value || 0) / 100"
            :color="getProgressColor(record.disk_info?.value || 0)"
            size="small"
            :show-text="false"
          />
        </div>
      </template>

      <!-- 数据采集 -->
      <template #data_collection="{ record }">
        <a-tag :color="record.collect_on ? 'green' : 'gray'">
          {{ record.collect_on ? '已启用' : '未启用' }}
        </a-tag>
      </template>

      <!-- 状态 -->
      <template #status="{ record }">
        <a-tag :color="getStatusColor(record.status)">
          {{ getStatusText(record.status) }}
        </a-tag>
      </template>

      <!-- 最后检查时间 -->
      <template #last_check_time="{ record }">
        {{ formatDateTime(record.last_check_time) }}
      </template>

      <!-- 操作栏 - 下拉菜单 -->
      <template #actions="{ record }">
        <a-space>
          <a-dropdown trigger="hover">
            <a-button type="primary" size="small">
              管理
              <icon-down />
            </a-button>
            <template #content>
              <a-doption :disabled="isCollecting(record) || !record.server_identity" @click="handleCollectNow(record)">
                <template #icon>
                  <icon-refresh />
                </template>
                {{ isCollecting(record) ? '采集中' : '立即采集' }}
              </a-doption>
              <a-doption @click="handleQuickConfig(record)">
                <template #icon>
                  <icon-settings />
                </template>
                快捷配置
              </a-doption>
              <!-- <a-doption @click="handleRestart(record)">
                <template #icon>
                  <icon-refresh />
                </template>
                重启
              </a-doption>
              <a-doption @click="handleDetail(record)">
                <template #icon>
                  <icon-eye />
                </template>
                详情
              </a-doption> -->
              <a-doption @click="handleHardwareDeviceConfig(record)">
                <template #icon>
                  <icon-storage />
                </template>
                硬件设备配置
              </a-doption>
              <a-doption @click="handleEdit(record)">
                <template #icon>
                  <icon-edit />
                </template>
                编辑
              </a-doption>
              <!-- <a-doption @click="handleRemoteControl(record)">
                <template #icon>
                  <icon-desktop />
                </template>
                远程控制
              </a-doption> -->
              <a-doption @click="handleDelete(record)" style="color: rgb(var(--danger-6))">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-doption>
            </template>
          </a-dropdown>
        </a-space>
      </template>
    </search-table>

    <!-- 新增/编辑对话框 -->
    <ServerFormDialog v-model:visible="formDialogVisible" :record="currentRecord" @success="handleFormSuccess" />

    <!-- 快捷配置对话框 -->
    <QuickConfigDialog v-model:visible="quickConfigVisible" :record="currentRecord" @success="handleFormSuccess" />

    <HardwareDeviceConfigDialog v-model:visible="hardwareConfigVisible" :record="currentRecord" @success="handleHardwareConfigSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'
import {
  IconPlus,
  IconDown,
  IconEdit,
  IconDesktop,
  IconDelete,
  IconRefresh,
  IconEye,
  IconSettings,
  IconStorage,
} from '@arco-design/web-vue/es/icon'
import type { FormItem } from '@/components/search-form/types'
import SearchTable from '@/components/search-table/index.vue'
import { searchFormConfig } from './config/search-form'
import ServerFormDialog from './components/ServerFormDialog.vue'
import QuickConfigDialog from './components/QuickConfigDialog.vue'
import HardwareDeviceConfigDialog from './components/HardwareDeviceConfigDialog.vue'
import { columns as columnsConfig } from './config/columns'
import { fetchServerList, deleteServer, fetchServerMetricsSummary, collectServerMetricsNow, type HostMetricsSummary } from '@/api/ops/server'

const router = useRouter()

// 状态管理
const loading = ref(false)
const tableData = ref<any[]>([])
const formDialogVisible = ref(false)
const quickConfigVisible = ref(false)
const hardwareConfigVisible = ref(false)
const currentRecord = ref<any>(null)
const collectingMap = reactive<Record<string, boolean>>({})
const formModel = ref({
  keyword: '',
  collect_on: undefined as boolean | undefined,
})

const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
})

// 表单项配置
const formItems = computed<FormItem[]>(() =>
  searchFormConfig.map((item) => {
    if (item.field === 'collect_on') {
      return {
        ...item,
        options: [
          { label: '是', value: true },
          { label: '否', value: false },
        ],
      }
    }
    return item
  })
)

// 表格列配置
const columns = computed(() => columnsConfig)

// 获取状态颜色
const getStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    online: 'green',
    offline: 'red',
    unknown: 'gray',
  }
  return colorMap[status || ''] || 'gray'
}

// 获取状态文本
const getStatusText = (status?: string) => {
  const textMap: Record<string, string> = {
    online: '在线',
    offline: '离线',
    unknown: '未知',
  }
  return textMap[status || ''] || '-'
}

// 获取进度条颜色
const getProgressColor = (value: number) => {
  if (value >= 90) return '#F53F3F' // 红色
  if (value >= 70) return '#FF7D00' // 橙色
  if (value >= 50) return '#FFD00B' // 黄色
  return '#00B42A' // 绿色
}

// 格式化日期时间
const formatDateTime = (dateTime: string | null | undefined) => {
  if (!dateTime || dateTime === '0001-01-01T00:00:00Z') {
    return '-'
  }
  try {
    const date = new Date(dateTime)
    if (isNaN(date.getTime())) {
      return '-'
    }
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')
    const hours = String(date.getHours()).padStart(2, '0')
    const minutes = String(date.getMinutes()).padStart(2, '0')
    const seconds = String(date.getSeconds()).padStart(2, '0')
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
  } catch {
    return '-'
  }
}

// 获取服务器列表
const fetchServers = async () => {
  loading.value = true

  try {
    const params: any = {
      page: pagination.current,
      size: pagination.pageSize,
    }

    if (formModel.value.keyword) {
      params.keyword = formModel.value.keyword
    }

    if (formModel.value.collect_on !== undefined) {
      params.collect_on = formModel.value.collect_on
    }

    const res: any = await fetchServerList(params)

    if (res.code === 0) {
      const responseData = res.details || {}
      tableData.value = responseData.data || []
      pagination.total = responseData.total || 0

      // 列表加载成功后，获取监控指标
      await getAllMetrics()
    } else {
      Message.error(res.message || '获取服务器列表失败')
      tableData.value = []
      pagination.total = 0
    }
  } catch (error) {
    console.error('获取服务器列表失败:', error)
    Message.error('获取服务器列表失败')
    tableData.value = []
    pagination.total = 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchServers()
}

// 处理表单模型更新
const handleFormModelUpdate = (value: any) => {
  formModel.value = value
}

// 重置
const handleReset = () => {
  formModel.value = {
    keyword: '',
    collect_on: undefined,
  }
  pagination.current = 1
  fetchServers()
}

// 分页变化
const handlePageChange = (current: number) => {
  pagination.current = current
  fetchServers()
}

// 刷新
const handleRefresh = () => {
  fetchServers()
  Message.success('数据已刷新')
}

// 新增服务器
const handleAdd = () => {
  currentRecord.value = null
  formDialogVisible.value = true
}

// 快捷配置
const handleQuickConfig = (record: any) => {
  currentRecord.value = record
  quickConfigVisible.value = true
}

// DC-Hardware 带外硬件设备配置
const handleHardwareDeviceConfig = (record: any) => {
  currentRecord.value = record
  hardwareConfigVisible.value = true
}

const handleHardwareConfigSuccess = () => {
  fetchServers()
}

const getCollectingKey = (record: any) => record.server_identity || String(record.id || '')

const isCollecting = (record: any) => {
  const key = getCollectingKey(record)
  return !!collectingMap[key]
}

// 编辑服务器
const handleEdit = (record: any) => {
  currentRecord.value = record
  formDialogVisible.value = true
}

// 表单提交成功
const handleFormSuccess = () => {
  fetchServers()
}

// 重启服务器
const handleRestart = (record: any) => {
  Modal.confirm({
    title: '确认重启',
    content: `确认重启服务器 ${record.name} 吗？`,
    onOk: () => {
      Message.info('正在发送重启指令...')
    },
  })
}

// 查看详情 - 在当前窗口打开
const handleDetail = (record: any) => {
  router.push({
    path: '/dc/detail',
    query: {
      id: record.id,
      name: record.name,
      ip: record.host || record.ip_address,
      status: record.status,
    },
  })
}

// 远程控制 - 在新窗口打开
const handleRemoteControl = (record: any) => {
  const url = router.resolve({
    path: '/dc/remote',
    query: {
      id: record.id,
      name: record.name,
      ip: record.host || record.ip_address,
      status: record.status,
    },
  }).href
  window.open(url, '_blank')
}

// 删除服务器
const handleDelete = async (record: any) => {
  Modal.confirm({
    title: '确认删除',
    content: `确认删除服务器 ${record.name} 吗？`,
    onOk: async () => {
      try {
        const res: any = await deleteServer(record.id)
        if (res.code === 0) {
          Message.success('删除成功')
          fetchServers()
        } else {
          Message.error(res.message || '删除失败')
        }
      } catch (error) {
        console.error('删除服务器失败:', error)
        Message.error('删除失败')
      }
    },
  })
}

const resetMetrics = (record: any) => {
  record.cpu_info = { value: 0, total: '', used: '' }
  record.memory_info = { value: 0, total: '', used: '' }
  record.disk_info = { value: 0, total: '', used: '' }
}

const applyMetricsSummary = (record: any, summary?: HostMetricsSummary) => {
  if (!summary || !summary.has_data) {
    resetMetrics(record)
    return
  }
  record.cpu_info = {
    value: Number((summary.cpu?.usage_percent || 0).toFixed(2)),
    total: summary.cpu?.logical_cores_total ? `${summary.cpu.logical_cores_total}核` : '',
    used: '',
  }
  record.memory_info = {
    value: Number((summary.memory?.used_percent || 0).toFixed(2)),
    total: summary.memory?.total_bytes ? `${(summary.memory.total_bytes / 1024 / 1024 / 1024).toFixed(1)}GB` : '',
    used: summary.memory?.used_bytes ? `${(summary.memory.used_bytes / 1024 / 1024 / 1024).toFixed(1)}GB` : '',
  }
  record.disk_info = {
    value: Number((summary.disk_root?.used_percent || 0).toFixed(2)),
    total: summary.disk_root?.total_bytes ? `${(summary.disk_root.total_bytes / 1024 / 1024 / 1024).toFixed(0)}GB` : '',
    used: summary.disk_root?.used_bytes ? `${(summary.disk_root.used_bytes / 1024 / 1024 / 1024).toFixed(0)}GB` : '',
  }
  if (summary.timestamp) {
    record.last_check_time = summary.timestamp
  }
}

// 从 dc-control 获取所有服务器最新时序指标
const getAllMetrics = async () => {
  try {
    const metricsPromises = tableData.value.map(async (record) => {
      if (!record.server_identity) {
        resetMetrics(record)
        return
      }
      try {
        const response = await fetchServerMetricsSummary(record.server_identity)
        applyMetricsSummary(record, response.details)
      } catch (error) {
        console.warn(`获取服务器 ${record.name} 的监控指标失败:`, error)
        resetMetrics(record)
      }
    })

    await Promise.all(metricsPromises)
  } catch (error) {
    console.error('获取所有服务器监控指标失败:', error)
  }
}

const handleCollectNow = async (record: any) => {
  if (!record.server_identity) {
    Message.warning('缺少服务器唯一标识，无法采集')
    return
  }
  const key = getCollectingKey(record)
  if (collectingMap[key]) {
    return
  }
  collectingMap[key] = true
  try {
    const response = await collectServerMetricsNow(record.server_identity)
    if (response.code === 0) {
      applyMetricsSummary(record, response.details)
      Message.success('采集完成')
    } else {
      Message.error(response.message || '采集失败')
    }
  } catch (error) {
    console.error('立即采集失败:', error)
    Message.error('采集失败')
  } finally {
    collectingMap[key] = false
  }
}

onMounted(() => {
  fetchServers()
})
</script>

<script lang="ts">
export default {
  name: 'DataCenterServer',
}
</script>

<style scoped lang="less">
.container {
  margin-top: 20px;
}

.resource-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;

  .resource-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    > div {
      display: inline-block;
    }
    .resource-value {
      font-size: 12px;
      font-weight: 500;
      color: rgb(var(--text-1));
    }
  }

  :deep(.arco-progress) {
    margin: 0;

    .arco-progress-bar-bg {
      border-radius: 2px;
    }

    .arco-progress-bar {
      border-radius: 2px;
      transition: all 0.3s ease;
    }
  }
}
</style>
