<script setup lang="ts">
import { NInput } from 'naive-ui'
import { computed, reactive, ref, watch } from 'vue'

import { createInstances } from '@/api/instances'
import AppInputNumber from '@/components/AppInputNumber.vue'
import FormField from '@/components/FormField.vue'
import FormModal from '@/components/FormModal.vue'
import InstanceSpecForm from '@/components/instance/InstanceSpecForm.vue'
import { defaultResourceName } from '@/composables/useFormat'
import { useToast } from '@/composables/useToast'

/** 租户 / 区间 / 区域直接使用父页面当前值，不在表单中出现 */
const props = defineProps<{
  show: boolean
  cfgId: number | null
  compartmentId?: string
  region?: string
}>()
const emit = defineEmits<{ 'update:show': [boolean]; created: [] }>()

const message = useToast()
const submitting = ref(false)
const specForm = ref<InstanceType<typeof InstanceSpecForm> | null>(null)

const form = reactive({ displayName: '', count: 1 })

watch(
  () => props.show,
  (v) => {
    if (!v) return
    form.displayName = defaultResourceName('instance')
    form.count = 1
    specForm.value?.reset()
  },
)

const canSubmit = computed(
  () =>
    props.cfgId !== null &&
    Boolean(form.displayName.trim()) &&
    (specForm.value?.valid ?? false),
)

async function submit() {
  if (props.cfgId === null || !specForm.value) return
  submitting.value = true
  try {
    const result = await createInstances(props.cfgId, {
      region: props.region || undefined,
      compartmentId: props.compartmentId || undefined,
      displayName: form.displayName.trim(),
      count: form.count,
      ...specForm.value.buildSpec(),
    })
    // 后端 errors / instances 为空时序列化为 null，判空防炸
    const ok = result.instances?.length ?? 0
    const failed = result.errors?.length ?? 0
    if (failed) message.warning(`${ok} 台创建成功，${failed} 台失败：${result.errors![0]}`)
    else message.success(`已创建 ${ok} 台实例`)
    emit('update:show', false)
    emit('created')
  } catch (e) {
    message.error(e instanceof Error ? e.message : '创建失败')
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <FormModal
    :show="show"
    title="创建实例"
    :width="600"
    :submitting="submitting"
    :submit-disabled="!canSubmit"
    submit-text="创建"
    @update:show="emit('update:show', $event)"
    @submit="submit"
  >
    <div class="grid grid-cols-2 gap-3 max-md:grid-cols-1">
      <FormField label="实例名" required>
        <NInput v-model:value="form.displayName" placeholder="instance-20260703-2136" />
      </FormField>
      <FormField label="数量" hint="批量创建，名称自动追加序号">
        <AppInputNumber v-model:value="form.count" :min="1" :max="10" class="w-full" />
      </FormField>
    </div>
    <InstanceSpecForm
      ref="specForm"
      sectioned
      :cfg-id="cfgId"
      :region="region"
      :compartment-id="compartmentId"
    />
    <div
      class="mt-3 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-line-soft bg-wash px-3 py-2 text-xs leading-relaxed text-ink-3"
    >
      <span v-if="specForm?.summary" class="font-medium text-ink-2">
        预估规格:{{ form.count }} 台 · {{ specForm.summary }}
      </span>
      <span>容量不足（Out of host capacity）时可改用抢机任务反复尝试</span>
    </div>
  </FormModal>
</template>
