<!-- SPEC: MDTODO 三栏任务工作区. -->
<!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
<script setup lang="ts">
import type {
  MdtodoFileRecord,
  MdtodoTaskPage,
  MdtodoTaskRecord,
  ProjectNavigationResponse,
  ProjectSource,
  ProjectWorkbenchLinkRecord,
} from "@/api";
import BaseDialog from "@/components/common/BaseDialog.vue";
import { displayDate } from "@/composables/mdtodo/useMdtodoDisplay";
import { useClipboard } from "@/composables/useClipboard";

const props = defineProps<{
  show: boolean;
  sources: ProjectSource[];
  selectedSource: ProjectSource | null;
  selectedSourceId: string | null;
  selectedFile: MdtodoFileRecord | null;
  selectedFileRef: string | null;
  selectedFileName: string;
  selectedTask: MdtodoTaskRecord | null;
  links: ProjectWorkbenchLinkRecord[];
  taskPage: MdtodoTaskPage | null;
  fileScopedTaskCount: number;
  taskStatusCounts: Record<string, number>;
  navigation: ProjectNavigationResponse | null;
}>();
const emit = defineEmits<{ close: [] }>();
const { copied, copy } = useClipboard();

function copyIdentifiers(): void {
  const lines = [
    identifier("sourceId", props.selectedSourceId),
    identifier("fileRef", props.selectedFileRef),
    identifier("fingerprint", props.selectedFile?.fingerprint),
    identifier("taskRef", props.selectedTask?.taskRef),
  ].filter((line): line is string => Boolean(line));
  props.links.slice(0, 8).forEach((link, index) => {
    const prefix = `link[${index}]`;
    lines.push(
      ...[
        identifier(`${prefix}.linkId`, link.linkId),
        identifier(`${prefix}.sessionId`, link.sessionId),
        identifier(`${prefix}.traceId`, link.traceId),
        identifier(`${prefix}.taskRef`, link.taskRef),
        identifier(`${prefix}.projectId`, link.projectId),
      ].filter((line): line is string => Boolean(line)),
    );
  });
  void copy(lines.join("\n"));
}

function identifier(
  label: string,
  value: string | null | undefined,
): string | null {
  const normalized = value?.trim();
  return normalized ? `${label}=${normalized}` : null;
}
</script>

<template>
  <BaseDialog
    :open="show"
    title="MDTODO 信息"
    description="稳定 ID、Source authority、并发 fingerprint 与 Workbench 公共链接。"
    wide
    @close="emit('close')"
  >
    <div class="info-grid" data-testid="mdtodo-info-popover">
      <section>
        <h3>Source / File</h3>
        <dl>
          <div>
            <dt>Source</dt>
            <dd>
              {{ selectedSource?.displayName || selectedSourceId || "-" }}
            </dd>
          </div>
          <div>
            <dt>Source ID</dt>
            <dd>
              <code>{{ selectedSourceId || "-" }}</code>
            </dd>
          </div>
          <div>
            <dt>Status</dt>
            <dd>{{ selectedSource?.status || "-" }}</dd>
          </div>
          <div>
            <dt>File</dt>
            <dd>{{ selectedFile?.relativePath || selectedFileName }}</dd>
          </div>
          <div>
            <dt>File Ref</dt>
            <dd>
              <code>{{ selectedFileRef || "-" }}</code>
            </dd>
          </div>
          <div>
            <dt>Fingerprint</dt>
            <dd>
              <code>{{ selectedFile?.fingerprint || "-" }}</code>
            </dd>
          </div>
        </dl>
      </section>
      <section>
        <h3>Task / Window</h3>
        <dl>
          <div>
            <dt>Task</dt>
            <dd>
              {{ selectedTask?.taskId || selectedTask?.rxxId || "-" }}
              {{ selectedTask?.title }}
            </dd>
          </div>
          <div>
            <dt>Task Ref</dt>
            <dd>
              <code>{{ selectedTask?.taskRef || "-" }}</code>
            </dd>
          </div>
          <div>
            <dt>Updated</dt>
            <dd>{{ displayDate(selectedTask?.updatedAt) }}</dd>
          </div>
          <div>
            <dt>Window</dt>
            <dd>
              {{ fileScopedTaskCount
              }}<span v-if="taskPage?.total != null">
                / {{ taskPage.total }}</span
              >
            </dd>
          </div>
          <div>
            <dt>State</dt>
            <dd>
              open {{ taskStatusCounts.open || 0 }} · progress
              {{ taskStatusCounts.in_progress || 0 }} · completed
              {{ taskStatusCounts.completed || 0 }}
            </dd>
          </div>
        </dl>
      </section>
      <section class="wide">
        <h3>Workbench Public Links</h3>
        <p>
          {{
            navigation?.navigation?.capabilities?.workbenchLaunch === true
              ? "Launch enabled"
              : "Launch unavailable"
          }}
          · {{ links.length }} links · {{ sources.length }} sources
        </p>
        <ul>
          <li v-for="link in links.slice(0, 8)" :key="link.linkId">
            <strong>{{ link.sessionId || link.linkId }}</strong>
            <code>{{
              link.traceId || link.taskRef || link.projectId || "-"
            }}</code>
          </li>
        </ul>
      </section>
    </div>
    <template #footer>
      <button
        type="button"
        data-testid="mdtodo-info-copy"
        @click="copyIdentifiers"
      >
        {{ copied ? "已复制" : "复制标识" }}
      </button>
      <button type="button" @click="emit('close')">关闭</button>
    </template>
  </BaseDialog>
</template>

<style scoped>
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.info-grid section {
  border: 1px solid #bac9d0;
  background: #f7fafb;
  padding: 10px;
}
.info-grid .wide {
  grid-column: 1 / -1;
}
.info-grid h3 {
  margin: 0 0 8px;
  color: #294b59;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0;
}
.info-grid dl {
  display: grid;
  gap: 6px;
  margin: 0;
}
.info-grid dl div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  border-bottom: 1px solid #d5dfe3;
  padding-bottom: 5px;
}
.info-grid dt {
  color: #687d86;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}
.info-grid dd,
.info-grid p {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #1c333d;
  font-size: 12px;
}
.info-grid code {
  color: #17627d;
  font:
    11px ui-monospace,
    monospace;
}
.info-grid ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.info-grid li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
@media (max-width: 600px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
  .info-grid .wide {
    grid-column: auto;
  }
}
</style>
