<template>
  <div class="page-container" v-loading="loading">
    <!-- Header -->
    <div class="detail-header">
      <el-page-header @back="$router.back()" title="返回列表">
        <template #content>
          <div class="header-device">
            <div class="device-avatar-lg" :class="device?.status">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="width:24px;height:24px">
                <rect x="2" y="3" width="20" height="14" rx="2" />
                <line x1="8" y1="21" x2="16" y2="21" />
                <line x1="12" y1="17" x2="12" y2="21" />
              </svg>
            </div>
            <div>
              <div class="header-name">{{ device?.hostname || deviceUid }}</div>
              <div class="header-meta">
                <el-tag v-if="device" :type="device.status === 'online' ? 'success' : 'info'" size="small" effect="light">
                  {{ device.status === 'online' ? '在线' : '离线' }}
                </el-tag>
                <span class="meta-text">{{ device?.ip_address }}</span>
                <el-tag v-if="device?.group_name" size="small" effect="plain" round>{{ device.group_name }}</el-tag>
              </div>
            </div>
          </div>
        </template>
      </el-page-header>
    </div>

    <!-- Tabs -->
    <el-tabs v-model="activeTab" class="detail-tabs">
      <!-- Tab 1: 概览 -->
      <el-tab-pane label="概览" name="overview">
        <el-row :gutter="16">
          <el-col :span="8">
            <div class="csm-card">
              <div class="card-section-title">基本信息</div>
              <div class="info-list">
                <div class="info-row" v-for="item in basicInfo" :key="item.label">
                  <span class="info-label">{{ item.label }}</span>
                  <span class="info-value" :title="item.value">{{ item.value || '-' }}</span>
                </div>
              </div>
            </div>
          </el-col>

          <el-col :span="16">
            <div class="csm-card" style="margin-bottom: 16px">
              <div class="card-section-title">实时状态</div>
              <div class="metrics-grid" v-if="status">
                <div class="metric-card">
                  <div class="metric-label">CPU</div>
                  <el-progress type="dashboard" :percentage="Math.round(status.cpu_usage)" :width="90"
                    :color="progressColor(status.cpu_usage)" :stroke-width="6" />
                </div>
                <div class="metric-card">
                  <div class="metric-label">内存</div>
                  <el-progress type="dashboard" :percentage="Math.round(status.memory_usage)" :width="90"
                    :color="progressColor(status.memory_usage)" :stroke-width="6" />
                  <div class="metric-sub">{{ formatMB(status.memory_total_mb) }}</div>
                </div>
                <div class="metric-card">
                  <div class="metric-label">磁盘</div>
                  <el-progress type="dashboard" :percentage="Math.round(status.disk_usage)" :width="90"
                    :color="progressColor(status.disk_usage)" :stroke-width="6" />
                  <div class="metric-sub">{{ formatMB(status.disk_total_mb) }}</div>
                </div>
                <div class="metric-card">
                  <div class="metric-label">进程</div>
                  <div class="metric-big-number">{{ status.running_procs }}</div>
                </div>
              </div>
              <el-empty v-else description="暂无状态数据" :image-size="64" />
            </div>

            <div class="csm-card">
              <div class="card-section-title">Top 进程</div>
              <el-table :data="status?.top_processes || []" size="small" max-height="200" style="width:100%">
                <el-table-column prop="name" label="进程名" />
                <el-table-column prop="pid" label="PID" width="80">
                  <template #default="{ row }"><span class="mono-text">{{ row.pid }}</span></template>
                </el-table-column>
                <el-table-column label="CPU" width="120">
                  <template #default="{ row }">
                    <el-progress :percentage="Math.min(Math.round(row.cpu_usage), 100)" :stroke-width="6" :color="progressColor(row.cpu_usage)" />
                  </template>
                </el-table-column>
                <el-table-column label="内存" width="100">
                  <template #default="{ row }"><span class="mono-text">{{ formatMB(row.memory_mb) }}</span></template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>

      <!-- Tab 2: 硬件资产 -->
      <el-tab-pane label="硬件资产" name="hardware">
        <div class="csm-card">
          <el-table :data="hardware" v-loading="hwLoading" style="width:100%">
            <el-table-column prop="cpu_model" label="CPU型号" min-width="200" />
            <el-table-column prop="cpu_cores" label="核心数" width="80" />
            <el-table-column label="内存" width="100">
              <template #default="{ row }"><span class="mono-text">{{ formatMB(row.memory_total_mb) }}</span></template>
            </el-table-column>
            <el-table-column prop="gpu_model" label="GPU" min-width="150">
              <template #default="{ row }"><span>{{ row.gpu_model || '-' }}</span></template>
            </el-table-column>
            <el-table-column prop="motherboard" label="主板" min-width="140">
              <template #default="{ row }"><span>{{ row.motherboard || '-' }}</span></template>
            </el-table-column>
            <el-table-column prop="disk_model" label="磁盘" min-width="140">
              <template #default="{ row }"><span>{{ row.disk_model || '-' }}</span></template>
            </el-table-column>
            <el-table-column label="磁盘容量" width="100">
              <template #default="{ row }"><span class="mono-text">{{ formatMB(row.disk_total_mb) }}</span></template>
            </el-table-column>
            <el-table-column prop="serial_number" label="序列号" width="160">
              <template #default="{ row }"><span class="mono-text">{{ row.serial_number || '-' }}</span></template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- Tab 3: 软件资产 -->
      <el-tab-pane label="软件资产" name="software">
        <div class="toolbar-inline">
          <el-input v-model="swSearch" placeholder="搜索软件名称 / 发行商" style="width: 260px" clearable :prefix-icon="Search" @input="fetchSoftware" />
        </div>
        <div class="csm-card">
          <el-table :data="software" v-loading="swLoading" style="width:100%">
            <el-table-column prop="name" label="软件名称" min-width="200">
              <template #default="{ row }"><span style="font-weight:500">{{ row.name }}</span></template>
            </el-table-column>
            <el-table-column prop="version" label="版本" width="120">
              <template #default="{ row }"><span class="mono-text">{{ row.version || '-' }}</span></template>
            </el-table-column>
            <el-table-column prop="publisher" label="发行商" min-width="150">
              <template #default="{ row }"><span>{{ row.publisher || '-' }}</span></template>
            </el-table-column>
            <el-table-column prop="install_date" label="安装日期" width="120">
              <template #default="{ row }"><span class="secondary-text">{{ row.install_date || '-' }}</span></template>
            </el-table-column>
            <el-table-column prop="install_path" label="安装路径" min-width="250" show-overflow-tooltip>
              <template #default="{ row }"><span class="mono-text secondary-text">{{ row.install_path || '-' }}</span></template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- Tab 4: 变更记录 -->
      <el-tab-pane label="变更记录" name="changes">
        <div class="csm-card">
          <el-table :data="changes" v-loading="chLoading" style="width:100%">
            <el-table-column prop="change_type" label="变更类型" width="120">
              <template #default="{ row }">
                <el-tag :type="changeTag(row.change_type)" size="small" effect="light">{{ changeLabel(row.change_type) }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="change_detail" label="详情" min-width="400" show-overflow-tooltip />
            <el-table-column prop="detected_at" label="检测时间" width="170">
              <template #default="{ row }"><span class="secondary-text">{{ row.detected_at }}</span></template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { api } from '@/lib/api'

const route = useRoute()
const deviceUid = route.params.uid as string

const loading = ref(true)
const device = ref<any>(null)
const status = ref<any>(null)
const activeTab = ref('overview')

// --- Overview data ---
const basicInfo = computed(() => {
  if (!device.value) return []
  return [
    { label: '设备UID', value: device.value.device_uid },
    { label: '主机名', value: device.value.hostname },
    { label: 'IP地址', value: device.value.ip_address },
    { label: 'MAC地址', value: device.value.mac_address },
    { label: '操作系统', value: device.value.os_version },
    { label: '客户端版本', value: device.value.client_version },
    { label: '分组', value: device.value.group_name },
    { label: '注册时间', value: device.value.registered_at },
    { label: '最后心跳', value: device.value.last_heartbeat },
  ]
})

// --- Hardware data ---
const hardware = ref<any[]>([])
const hwLoading = ref(false)

async function fetchHardware() {
  hwLoading.value = true
  try {
    const data = await api.get<any>(`/api/assets/hardware?device_uid=${deviceUid}`)
    hardware.value = data.hardware || []
  } catch { /* ignore */ } finally { hwLoading.value = false }
}

// --- Software data ---
const software = ref<any[]>([])
const swLoading = ref(false)
const swSearch = ref('')

async function fetchSoftware() {
  swLoading.value = true
  try {
    const params = new URLSearchParams({ device_uid: deviceUid })
    if (swSearch.value) params.set('search', swSearch.value)
    const data = await api.get<any>(`/api/assets/software?${params}`)
    software.value = data.software || []
  } catch { /* ignore */ } finally { swLoading.value = false }
}

// --- Changes data ---
const changes = ref<any[]>([])
const chLoading = ref(false)

async function fetchChanges() {
  chLoading.value = true
  try {
    const data = await api.get<any>(`/api/assets/changes?device_uid=${deviceUid}`)
    changes.value = data.changes || []
  } catch { /* ignore */ } finally { chLoading.value = false }
}

// --- Helpers ---
function progressColor(value: number) {
  if (value > 90) return '#dc2626'
  if (value > 70) return '#d97706'
  return '#16a34a'
}

function formatMB(mb: number) {
  if (!mb) return '-'
  if (mb >= 1024) return `${(mb / 1024).toFixed(1)} GB`
  return `${mb} MB`
}

function changeTag(type: string) {
  const map: Record<string, string> = { hardware: 'warning', software_added: 'success', software_removed: 'danger' }
  return map[type] || 'info'
}

function changeLabel(type: string) {
  const map: Record<string, string> = { hardware: '硬件变更', software_added: '软件安装', software_removed: '软件卸载' }
  return map[type] || type
}

// --- Tab switching ---
watch(activeTab, (tab) => {
  if (tab === 'hardware' && hardware.value.length === 0) fetchHardware()
  else if (tab === 'software' && software.value.length === 0) fetchSoftware()
  else if (tab === 'changes' && changes.value.length === 0) fetchChanges()
})

// --- Init ---
onMounted(async () => {
  try {
    const [devData, statData] = await Promise.all([
      api.get<any>(`/api/devices/${deviceUid}`),
      api.get<any>(`/api/devices/${deviceUid}/status`),
    ])
    device.value = devData
    status.value = statData
  } catch { /* api.ts handles 401 */ } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.detail-header {
  background: #fff;
  padding: 16px 24px;
  border-radius: 10px;
  border: 1px solid var(--csm-border-color);
}

.header-device {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--csm-text-primary);
}

.header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.meta-text {
  font-size: 12px;
  color: var(--csm-text-tertiary);
  font-family: var(--csm-font-mono);
}

.device-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.device-avatar-lg.online {
  background: #f0fdf4;
  color: #16a34a;
}

.device-avatar-lg.offline {
  background: #f1f5f9;
  color: #94a3b8;
}

/* Tabs */
.detail-tabs {
  margin-top: 16px;
}

.detail-tabs :deep(.el-tabs__header) {
  margin: 0 0 16px 0;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--csm-border-color);
  padding: 0 20px;
}

.detail-tabs :deep(.el-tabs__item) {
  height: 46px;
  line-height: 46px;
}

.toolbar-inline {
  margin-bottom: 12px;
}

/* Cards */
.card-section-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--csm-text-primary);
  padding: 14px 20px;
  border-bottom: 1px solid var(--csm-border-color);
}

.info-list {
  padding: 8px 20px 16px;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f8fafc;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 13px;
  color: var(--csm-text-secondary);
  flex-shrink: 0;
}

.info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--csm-text-primary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px;
}

.metric-card {
  text-align: center;
  padding: 8px 0;
}

.metric-label {
  font-size: 13px;
  color: var(--csm-text-secondary);
  margin-bottom: 8px;
}

.metric-big-number {
  font-size: 36px;
  font-weight: 700;
  color: var(--csm-text-primary);
  margin-top: 16px;
  line-height: 1;
}

.metric-sub {
  font-size: 12px;
  color: var(--csm-text-tertiary);
  margin-top: 4px;
}

.mono-text {
  font-family: var(--csm-font-mono);
  font-size: 12px;
  color: var(--csm-text-secondary);
}

.secondary-text {
  font-size: 12px;
  color: var(--csm-text-tertiary);
}
</style>
