<!-- SPEC: MDTODO 三栏任务工作区. -->
<!-- Responsibility: Source/File 深链、视图切换与页面级命令。 -->

<script setup lang="ts">
import {
  Info,
  ListTodo,
  PanelsTopLeft,
  Plus,
  RefreshCw,
  Settings,
} from "lucide-vue-next";
import type { MdtodoFileRecord, ProjectSource } from "@/api";
import ViewModeSwitch from "@/components/console/ViewModeSwitch.vue";
import PageCommandBar from "@/components/layout/PageCommandBar.vue";
import { fileDisplayName } from "@/composables/mdtodo/useMdtodoDisplay";
import type { MdtodoViewMode } from "@/composables/mdtodo/useMdtodoViewState";

defineProps<{
  sources: ProjectSource[];
  sourceId: string | null;
  files: MdtodoFileRecord[];
  fileRef: string | null;
  view: MdtodoViewMode;
  busy: boolean;
  createDisabled: boolean;
  createDisabledReason: string | null;
  reindexDisabled: boolean;
}>();

const emit = defineEmits<{
  selectSource: [value: string];
  selectFile: [value: string];
  selectView: [value: MdtodoViewMode];
  create: [];
  configure: [];
  reindex: [];
  info: [];
}>();

function selectView(value: string): void {
  emit("selectView", value === "queue" ? "queue" : "workspace");
}
</script>

<template>
  <PageCommandBar
    class="mdtodo-command"
    data-testid="mdtodo-toolbar"
    eyebrow="Project Management / MDTODO"
    title="任务执行台"
    description="Source 与 File 是路由事实；任务树、正文和报告共享同一选择上下文。"
  >
    <template #actions>
      <small
        v-if="createDisabledReason"
        class="mdtodo-create-blocker"
        data-testid="mdtodo-create-blocker"
        role="status"
        :title="createDisabledReason"
      >{{ createDisabledReason }}</small>
      <button
        class="btn btn-primary"
        type="button"
        data-testid="mdtodo-new-task-open"
        :disabled="createDisabled"
        :title="createDisabledReason || undefined"
        @click="emit('create')"
      >
        <Plus :size="16" aria-hidden="true" />
        新建任务
      </button>
      <button
        class="icon-button"
        type="button"
        data-testid="mdtodo-source-reindex"
        :disabled="busy || reindexDisabled"
        title="重建 Source 索引"
        aria-label="重建 Source 索引"
        @click="emit('reindex')"
      >
        <RefreshCw :size="16" aria-hidden="true" />
      </button>
      <button
        class="icon-button"
        type="button"
        data-testid="mdtodo-source-config-open"
        title="配置 Source"
        aria-label="配置 Source"
        @click="emit('configure')"
      >
        <Settings :size="16" aria-hidden="true" />
      </button>
      <button
        class="icon-button"
        type="button"
        data-testid="mdtodo-info-open"
        title="查看上下文信息"
        aria-label="查看上下文信息"
        @click="emit('info')"
      >
        <Info :size="16" aria-hidden="true" />
      </button>
    </template>

    <template #filters>
      <div class="mdtodo-route-facts" aria-label="MDTODO 路由事实">
        <label>
          <span>Source</span>
          <select
            data-testid="mdtodo-source-select"
            :value="sourceId || ''"
            @change="emit('selectSource', ($event.target as HTMLSelectElement).value)"
          >
            <option
              v-for="item in sources"
              :key="item.sourceId"
              :value="item.sourceId"
            >
              {{ item.displayName || item.sourceId }}
            </option>
          </select>
        </label>
        <span class="route-separator" aria-hidden="true">/</span>
        <label>
          <span>File</span>
          <select
            data-testid="mdtodo-file-select"
            :value="fileRef || ''"
            :disabled="busy"
            @change="emit('selectFile', ($event.target as HTMLSelectElement).value)"
          >
            <option
              v-for="item in files"
              :key="item.fileRef"
              :value="item.fileRef"
            >
              {{ fileDisplayName(item) }}
            </option>
          </select>
        </label>
      </div>
      <ViewModeSwitch
        :model-value="view"
        :options="[
          { value: 'workspace', label: '三栏', icon: PanelsTopLeft },
          { value: 'queue', label: '队列', icon: ListTodo },
        ]"
        @update:model-value="selectView"
      />
    </template>
  </PageCommandBar>
</template>

<style scoped>
.mdtodo-command {
  border-bottom: 1px solid var(--console-border, #b8c7cf);
}
.mdtodo-route-facts {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 8px;
}
.mdtodo-route-facts label {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--console-text-muted, #607680);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.mdtodo-route-facts select {
  min-width: 0;
  max-width: 360px;
  height: 32px;
  border: 1px solid var(--console-border-strong, #a8bbc4);
  background: var(--console-surface, #fff);
  color: var(--console-text, #172830);
}
.route-separator {
  color: var(--console-text-muted, #607680);
  font-family: ui-monospace, monospace;
}
.mdtodo-create-blocker {
  max-width: 260px;
  overflow: hidden;
  color: var(--console-danger, #98503c);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 960px) {
  .mdtodo-route-facts {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .route-separator {
    display: none;
  }
  .mdtodo-route-facts label {
    grid-template-columns: 52px minmax(0, 1fr);
  }
}
@media (max-width: 540px) {
  .mdtodo-route-facts {
    grid-template-columns: 1fr;
  }
  .mdtodo-route-facts select {
    max-width: none;
  }
  .mdtodo-create-blocker {
    display: none;
  }
}
</style>
