<!-- SPEC: MDTODO 三栏任务工作区. -->
<!-- Responsibility: 报告检查器、调宽栏位、关闭与独立全屏。 -->

<script setup lang="ts">
import { ChevronLeft, FileText, Maximize2 } from "lucide-vue-next";
import type { MdtodoReportPreviewRecord, MdtodoTaskLinkRecord } from "@/api";
import BaseDialog from "@/components/common/BaseDialog.vue";
import ContentViewer from "@/components/common/ContentViewer.vue";
import RefreshBoundary from "@/components/common/RefreshBoundary.vue";
import InspectorPanel from "@/components/console/InspectorPanel.vue";

defineProps<{
  report: MdtodoReportPreviewRecord | null;
  activeLink: MdtodoTaskLinkRecord | null;
  loading: boolean;
  error: string | null;
  collapsed: boolean;
  showFullscreen: boolean;
}>();

const emit = defineEmits<{
  "update:collapsed": [value: boolean];
  close: [];
  openFullscreen: [];
  closeFullscreen: [];
}>();
</script>

<template>
  <aside
    class="report-inspector"
    data-testid="mdtodo-report-sidebar"
    :data-collapsed="collapsed"
  >
    <button
      v-if="collapsed"
      class="report-rail"
      type="button"
      data-testid="mdtodo-report-sidebar-toggle"
      aria-label="展开报告"
      title="展开报告"
      @click="emit('update:collapsed', false)"
    >
      <ChevronLeft :size="16" aria-hidden="true" />
      <FileText :size="16" aria-hidden="true" />
      <span>报告</span>
    </button>

    <InspectorPanel
      v-else
      :title="activeLink?.label || report?.relativePath || '任务报告'"
      :subtitle="report?.relativePath || 'Source/File 报告预览'"
      @close="emit('close')"
    >
      <template #tabs>
        <button
          class="report-tab"
          type="button"
          role="tab"
          aria-selected="true"
        >
          Markdown
        </button>
        <button
          class="icon-button"
          type="button"
          data-testid="mdtodo-report-sidebar-toggle"
          title="收起报告"
          aria-label="收起报告"
          @click="emit('update:collapsed', true)"
        >
          <ChevronLeft :size="15" aria-hidden="true" />
        </button>
      </template>

      <RefreshBoundary
        class="report-boundary"
        :loading="loading"
        mode="persistent"
        :has-content="Boolean(report)"
        label="读取报告"
      >
        <ContentViewer
          class="report-markdown"
          data-testid="mdtodo-report-preview"
          :content="report?.content || ''"
          mode="markdown"
          title="报告预览"
          :filename="report?.relativePath || 'report.md'"
          :line-numbers="false"
          :fullscreen-enabled="false"
        />
        <template #empty>
          <div class="report-empty">报告内容尚未加载。</div>
        </template>
      </RefreshBoundary>
      <p v-if="error" class="report-error" role="alert">{{ error }}</p>

      <template #footer>
        <span class="report-authority">read-only source report</span>
        <button
          class="btn"
          type="button"
          data-testid="mdtodo-report-fullscreen"
          :disabled="!report"
          @click="emit('openFullscreen')"
        >
          <Maximize2 :size="15" aria-hidden="true" />
          全屏
        </button>
      </template>
    </InspectorPanel>
  </aside>

  <BaseDialog
    :open="showFullscreen && Boolean(report)"
    :title="activeLink?.label || report?.relativePath || '任务报告'"
    description="Markdown 报告只读预览"
    fullscreen
    @close="emit('closeFullscreen')"
  >
    <ContentViewer
      class="report-markdown"
      data-testid="mdtodo-report-fullscreen-dialog"
      :content="report?.content || ''"
      mode="markdown"
      :title="activeLink?.label || report?.relativePath || '任务报告'"
      :filename="report?.relativePath || 'report.md'"
      :line-numbers="false"
      :fullscreen-enabled="false"
    />
    <template #footer>
      <button class="btn" type="button" @click="emit('closeFullscreen')">
        关闭
      </button>
    </template>
  </BaseDialog>
</template>

<style scoped>
.report-inspector {
  min-width: 0;
  min-height: 0;
  height: 100%;
  background: var(--console-surface, #fff);
}
.report-inspector[data-collapsed="true"] {
  width: 40px;
}
.report-inspector :deep(.operations-inspector-panel) {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.report-inspector :deep(.operations-inspector-body) {
  min-height: 0;
  overflow: hidden;
  padding: 8px;
}
.report-inspector :deep(.operations-inspector-footer) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.report-rail {
  display: grid;
  width: 40px;
  height: 100%;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: 10px;
  border: 0;
  border-left: 1px solid var(--console-border, #bdcbd2);
  background: var(--console-surface-subtle, #f3f7f8);
  padding: 10px 0;
  color: var(--console-accent, #1f718c);
}
.report-rail span {
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}
.report-tab {
  border: 0;
  border-bottom: 2px solid var(--console-accent, #1f718c);
  background: transparent;
  color: var(--console-text, #172830);
  font-size: 11px;
  font-weight: 800;
}
.report-boundary,
.report-markdown {
  min-width: 0;
  min-height: 0;
  height: 100%;
}
.report-markdown {
  overflow: auto;
}
.report-empty {
  padding: 22px 10px;
  color: var(--console-text-muted, #607680);
  text-align: center;
}
.report-error {
  margin: 8px 0 0;
  border: 1px solid #e4b6ae;
  background: #fff1ef;
  padding: 7px;
  color: #963f32;
  font-size: 11px;
}
.report-authority {
  color: var(--console-text-muted, #607680);
  font: 700 9px ui-monospace, monospace;
  text-transform: uppercase;
}
</style>
