<!-- SPEC: MDTODO 三栏任务工作区. -->
<!-- Implementation reference: MDTODO R2 / PJ2026-010405 云端控制台. -->
<script setup lang="ts">
import BaseDialog from "@/components/common/BaseDialog.vue";
defineProps<{
  show: boolean;
  newTitle: string;
  newBody: string;
  loading: boolean;
  disabled: boolean;
  disabledReason: string | null;
  error: string | null;
  hasSelectedTask: boolean;
}>();
const emit = defineEmits<{
  close: [];
  "update:newTitle": [value: string];
  "update:newBody": [value: string];
  create: [kind: "root" | "subtask" | "continue"];
}>();
</script>
<template>
  <BaseDialog
    :open="show"
    title="创建 MDTODO 任务"
    description="写入当前 Source/File；层级关系由 Project Management API 生成。"
    :busy="loading"
    @close="emit('close')"
  >
    <form
      class="task-form"
      data-testid="mdtodo-task-create-dialog"
      @submit.prevent="emit('create', hasSelectedTask ? 'continue' : 'root')"
    >
      <label>
        任务标题
        <input
          data-testid="mdtodo-new-title"
          autofocus
          :value="newTitle"
          :disabled="loading || disabled"
          @input="
            emit('update:newTitle', ($event.target as HTMLInputElement).value)
          "
        />
      </label>
      <label
        >Markdown 正文<textarea
          data-testid="mdtodo-new-body"
          rows="7"
          :value="newBody"
          :disabled="loading || disabled"
          @input="
            emit('update:newBody', ($event.target as HTMLTextAreaElement).value)
          "
        />
      </label>
      <p
        v-if="disabled"
        class="dialog-alert"
        data-testid="mdtodo-task-create-disabled"
      >
        {{ disabledReason || "当前上下文不可写" }}
      </p>
      <p
        v-if="error"
        class="dialog-alert"
        data-testid="mdtodo-task-mutation-error"
      >
        {{ error }}
      </p>
    </form>
    <template #footer>
      <button type="button" :disabled="loading" @click="emit('close')">
        取消
      </button>
      <button
        type="button"
        data-testid="mdtodo-add-root"
        :disabled="loading || disabled"
        @click="emit('create', 'root')"
      >
        根任务
      </button>
      <button
        type="button"
        data-testid="mdtodo-add-subtask"
        :disabled="loading || disabled || !hasSelectedTask"
        @click="emit('create', 'subtask')"
      >
        子任务
      </button>
      <button
        type="button"
        data-testid="mdtodo-continue-task"
        :disabled="loading || disabled || !hasSelectedTask"
        @click="emit('create', 'continue')"
      >
        延续同级
      </button>
    </template>
  </BaseDialog>
</template>
<style scoped>
.task-form {
  display: grid;
  gap: 12px;
}
.task-form label {
  display: grid;
  gap: 5px;
  color: #38515c;
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: 0;
}
.task-form input,
.task-form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #9fb2bb;
  background: #f9fbfc;
  padding: 8px;
}
.task-form input,
.task-form textarea {
  color: #172d36;
  font: 13px/1.45 system-ui;
  text-transform: none;
  letter-spacing: 0;
}
.task-form textarea {
  resize: vertical;
  font-family: ui-monospace, monospace;
}
.dialog-alert {
  margin: 0;
  border: 1px solid #e2b2aa;
  background: #fff1ef;
  padding: 8px;
  color: #963f32;
  font-size: 12px;
}
</style>
