<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import type { Chapter } from '@/types/chapter'
import BaseModal from '@/components/ui/BaseModal.vue'
import BaseInput from '@/components/ui/BaseInput.vue'
import BaseButton from '@/components/ui/BaseButton.vue'

const props = defineProps<{
  show: boolean
  chapter: Chapter | null
  saving: boolean
}>()

const emit = defineEmits<{
  submit: [data: { title: string }]
  close: []
}>()

const title = ref('')

const isEdit = computed(() => !!props.chapter)
const modalTitle = computed(() => isEdit.value ? '重命名章节' : '新建章节')
const canSubmit = computed(() => title.value.trim().length > 0 && !props.saving)

watch(() => props.show, (val) => {
  if (val) {
    title.value = props.chapter?.title ?? ''
  }
})

function handleSubmit() {
  if (!canSubmit.value) return
  emit('submit', { title: title.value.trim() })
}
</script>

<template>
  <BaseModal :show="show" @close="emit('close')">
    <form class="chapter-form" @submit.prevent="handleSubmit">
      <h2 class="form-title">{{ modalTitle }}</h2>

      <BaseInput
        v-model="title"
        label="章节标题"
        :maxlength="200"
        required
      />

      <div class="form-actions">
        <BaseButton variant="secondary" type="button" @click="emit('close')">取消</BaseButton>
        <BaseButton variant="primary" type="submit" :loading="saving" :disabled="!canSubmit">
          {{ isEdit ? '保存' : '创建' }}
        </BaseButton>
      </div>
    </form>
  </BaseModal>
</template>

<style scoped>
.chapter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink-900);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
}
</style>
