<script setup lang="ts">
import { computed, ref } from "vue";
import StatusBadge from "@/components/common/StatusBadge.vue";
import type { LiveSurface } from "@/types";
import { formatTimestamp, summarizeProbeRows } from "@/stores/workbench-live";

const props = defineProps<{ live: LiveSurface | null }>();
const open = ref(false);
const summary = computed(() => summarizeProbeRows(props.live));
</script>

<template>
  <section class="probe-card" data-probe-card>
    <button class="status-chip-button" type="button" aria-haspopup="dialog" @click="open = true">
      <span class="status-chip-label">工作区状态</span>
      <StatusBadge :status="summary.tone" :label="summary.tone === 'ok' ? '健康' : summary.tone === 'blocked' ? '阻塞' : '等待验证'" />
      <span class="status-chip-meta">{{ summary.okCount }}/{{ summary.rows.length }} · {{ formatTimestamp(summary.checkedAt) }}</span>
    </button>
    <div v-if="open" class="workbench-dialog-backdrop" role="presentation" @click.self="open = false">
      <section id="probe-status-dialog" class="workbench-dialog" role="dialog" aria-modal="true" aria-labelledby="probe-status-title">
        <header>
          <strong id="probe-status-title">工作区状态明细</strong>
          <button type="button" class="dialog-close" aria-label="关闭" @click="open = false">x</button>
        </header>
        <ul class="probe-list" role="list">
          <li v-for="row in summary.rows" :key="row.key" class="probe-row" :data-probe-row="row.key">
            <div class="probe-row-head">
              <span class="probe-row-label">{{ row.label }}</span>
              <StatusBadge :status="row.status" :label="row.status === 'ok' ? '通过' : row.status === 'blocked' ? '阻塞' : '等待'" />
            </div>
            <div class="probe-row-meta">
              <span>{{ row.method }}</span>
              <code>{{ row.path }}</code>
              <span>{{ formatTimestamp(row.lastCheckedAt) }}</span>
            </div>
            <p>{{ row.detail }}</p>
          </li>
        </ul>
      </section>
    </div>
  </section>
</template>
