<template>
  <n-modal
    v-model:show="visible"
    preset="dialog"
    :title="editing ? t('Edit Paragraph') : t('Add Paragraph')"
    :positive-text="editing ? t('Save') : t('Add')"
    :negative-text="t('Cancel')"
    @positive-click="handleSubmit"
    @negative-click="handleCancel"
    style="width: 500px;"
  >
    <div class="dialog-content">
      <div class="form-field">
        <label class="field-label">
          {{ t('Paragraph Text') }}
          <span class="required">*</span>
        </label>
        <n-input
          v-model:value="formData.text"
          type="textarea"
          :rows="4"
          :placeholder="t('Enter paragraph text')"
        />
      </div>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import { reactive, watch, computed } from 'vue'
import { NModal, NInput, useMessage } from 'naive-ui'
import { t } from '@/shared/i18n'

const props = defineProps<{
  show: boolean
  values?: {
    text?: string
    name?: string
  }
}>()

const emit = defineEmits<{
  'update:show': [value: boolean]
  'submit': [data: any]
}>()

const message = useMessage()

const visible = computed({
  get: () => props.show,
  set: (val) => emit('update:show', val)
})

const editing = computed(() => !!props.values?.name)

const formData = reactive({
  text: '',
  name: ''
})

watch(() => props.show, (newVal) => {
  if (newVal) {
    if (props.values) {
      formData.text = props.values.text || ''
      formData.name = props.values.name || ''
    } else {
      formData.text = ''
      formData.name = ''
    }
  }
}, { immediate: true })

function handleSubmit() {
  if (!formData.text.trim()) {
    message.error(t('Please enter paragraph text'))
    return false
  }
  
  const data = { ...formData }
  
  if (!editing.value && !data.name) {
    data.name = `paragraph-${Math.random().toString(36).substring(2, 12)}`
  }
  
  emit('submit', data)
  visible.value = false
  return true
}

function handleCancel() {
  visible.value = false
}
</script>

<style scoped>
.dialog-content {
  padding: 16px 0;
}

.form-field {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.required {
  color: #e03131;
  margin-left: 2px;
}
</style>
