<!-- SPEC: HWPOD Devices topology. -->
<!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
<!-- Responsibility: 以 PCB 卡片或共享 DataGrid 展示 HWPOD 设备。 -->

<script setup lang="ts">
import DataGrid, { type DataGridColumn } from "@/components/common/DataGrid.vue";
import ResourceCollection from "@/components/common/ResourceCollection.vue";
import type { HwpodDeviceTopologyItem } from "@/types";
import HwpodDeviceCard from "./HwpodDeviceCard.vue";

defineProps<{ devices: HwpodDeviceTopologyItem[]; selectedId: string | null; view: "cards" | "list"; density: "compact" | "comfortable"; sort: string }>();
const emit = defineEmits<{ select: [device: HwpodDeviceTopologyItem]; sort: [key: string] }>();
const columns: DataGridColumn[] = [{ key: "name", label: "HWPOD", sortable: true, width: "190px" }, { key: "nodeName", label: "Node", width: "170px" }, { key: "status", label: "状态", sortable: true, width: "100px" }, { key: "elements", label: "目标 / 工作区", width: "230px" }, { key: "debugIo", label: "调试 / IO", width: "210px" }, { key: "capabilities", label: "能力", width: "140px" }, { key: "blocker", label: "主要 blocker", width: "220px" }, { key: "operation", label: "用户操作", width: "160px" }];
const statusLabel = (status: string): string => ({ online: "在线", offline: "离线" }[status] || status || "unknown");
</script>

<template>
  <section class="resource-stage">
    <ResourceCollection
      v-if="view === 'cards'"
      class="device-collection"
      :items="devices"
      :item-key="(device) => device.hwpodId"
      :view="view"
      :density="density"
      :selected-id="selectedId"
      :show-controls="false"
      aria-label="HWPOD 设备卡片"
      @select="emit('select', $event)"
    >
      <template #card="{ item, selected, select }">
        <HwpodDeviceCard :device="item" :selected="selected" @select="select" />
      </template>
    </ResourceCollection>
    <DataGrid
      v-else
      :columns="columns"
      :rows="devices"
      :row-key="(device) => device.hwpodId"
      :selected-id="selectedId"
      :density="density"
      :sort="sort"
      aria-label="HWPOD 设备列表"
      @select="emit('select', $event)"
      @sort="emit('sort', $event)"
    >
      <template #cell-name="{ row }"><span class="grid-stack"><strong>{{ row.name }}</strong><code>{{ row.hwpodId }}</code></span></template>
      <template #cell-nodeName="{ row }"><span class="grid-stack"><strong>{{ row.nodeName }}</strong><code>{{ row.nodeId }}</code></span></template>
      <template #cell-status="{ row }"><span class="status-chip" :data-status="row.status">{{ statusLabel(row.status) }}</span></template>
      <template #cell-elements="{ row }"><span class="grid-stack"><strong>{{ row.elements.target.label }}</strong><small>{{ row.elements.workspace.label }}</small></span></template>
      <template #cell-debugIo="{ row }"><span class="grid-stack"><strong>{{ row.elements.debugProbe.label }}</strong><small>{{ row.elements.ioProbe.label }}</small></span></template>
      <template #cell-capabilities="{ row }"><span class="grid-stack"><strong>覆盖 {{ row.capabilityCoverage.matched }}/{{ row.capabilityCoverage.declared }}</strong><small>上报 {{ row.capabilityCoverage.actual }} · 缺 {{ row.capabilityCoverage.missing }} · 额外 {{ row.capabilityCoverage.extra }}</small></span></template>
      <template #cell-blocker="{ row }"><span class="grid-stack"><strong>{{ row.blockers[0]?.code || '无' }}</strong><small>{{ row.blockers[0]?.summary || '当前可操作' }}</small></span></template>
      <template #cell-operation="{ row }"><span class="grid-stack"><strong>{{ row.operation?.status || '无' }}</strong><small>{{ row.operation ? `${row.operation.opCount} ops` : '尚无用户操作' }}</small></span></template>
    </DataGrid>
  </section>
</template>
