<template>
  <!-- 人工审批对话框(从 ProjectDetail.vue 抽离 UX-260618-17 submitting 保留)-->
  <div v-if="visible" class="modal-overlay">
    <div class="modal-box" style="width: 500px">
      <h3 class="modal-title">{{ $t('projectDetail.approvalTitle') }}</h3>
      <div v-if="pendingApproval">
        <h3>{{ pendingApproval.title }}</h3>
        <p style="margin: 16px 0; color: var(--df-text-secondary);">{{ pendingApproval.description }}</p>
        <div style="margin-bottom: 20px;">
          <p style="margin-bottom: 8px; font-size: 14px;">{{ $t('projectDetail.approvalHint') }}</p>
          <!-- F-260615-01: select_type=multiple → checkbox 多选,缺省 single → 按钮单选 -->
          <template v-if="isMultipleSelect">
            <div style="display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;">
              <label
                v-for="(option, idx) in pendingApproval.options"
                :key="idx"
                style="display: flex; align-items: center; gap: 8px; cursor: pointer;"
              >
                <input type="checkbox" :value="option" v-model="multiDecisions" />
                <span>{{ option }}</span>
              </label>
            </div>
            <button
              class="btn btn-primary"
              :disabled="submitting || multiDecisions.length === 0"
              @click="handleApprovalMulti"
            >
              {{ $t('projectDetail.approvalConfirm', { count: multiDecisions.length }) }}
            </button>
          </template>
          <template v-else>
            <div style="display: flex; gap: 12px; flex-wrap: wrap;">
              <button
                v-for="(option, idx) in pendingApproval.options"
                :key="idx"
                class="btn"
                :class="idx === 0 ? 'btn-primary' : 'btn-ghost'"
                :disabled="submitting"
                @click="handleApproval(option)"
              >
                {{ option }}
              </button>
            </div>
          </template>
        </div>
      </div>
      <div class="modal-actions">
        <button class="btn btn-ghost" @click="emit('cancel')">{{ $t('projectDetail.approvalCancel') }}</button>
        <button class="btn btn-ghost" @click="emit('later')">{{ $t('projectDetail.approvalLater') }}</button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useProjectStore } from '@/stores/project'

// 抽离自 ProjectDetail.vue(L175-225 模板 + L416-471 审批逻辑/watch)
// store 共享:父级 useProjectStore() 实例传入(同源 store,响应式共享 pendingApproval)
// submitting 自治:本组件持有禁用态(UX-260618-17 双击防抖)
// ProjectStore 类型未 export(store.ts:135 内部 type),用 ReturnType 自推导同源类型
type ProjectStore = ReturnType<typeof useProjectStore>

const props = defineProps<{
  visible: boolean
  store: ProjectStore
}>()

const emit = defineEmits<{
  cancel: []
  later: []
}>()

const pendingApproval = computed(() => props.store.pendingApproval)
const isMultipleSelect = computed(() => pendingApproval.value?.select_type === 'multiple')
const multiDecisions = ref<string[]>([])
const submitting = ref(false)

async function handleApproval(decision: string) {
  submitting.value = true
  try {
    await props.store.approveHumanApproval([decision])
    emit('cancel')
  } finally {
    submitting.value = false
  }
}

// F-260615-01: 多选审批(UX-260618-17 submitting 防双击保留)
async function handleApprovalMulti() {
  if (multiDecisions.value.length === 0) return
  submitting.value = true
  try {
    // 统一传 decisions 数组,store 按 select_type 分派单/多选
    await props.store.approveHumanApproval([...multiDecisions.value])
    multiDecisions.value = []
    emit('cancel')
  } finally {
    submitting.value = false
  }
}

// F-260615-01: 每次新审批清空多选状态(避免上轮残留)
watch(() => pendingApproval.value, (newApproval) => {
  if (newApproval) {
    multiDecisions.value = []
  }
}, { immediate: true })
</script>
