<template>
  <n-modal
    v-model:show="visible"
    preset="dialog"
    :title="editing ? t('Edit Chart') : t('Add Chart')"
    :positive-text="editing ? t('Save') : t('Add')"
    :negative-text="t('Cancel')"
    @positive-click="handleSubmit"
    @negative-click="handleCancel"
    style="width: 500px;"
  >
    <div class="dialog-content">
      <LinkField
        v-model="formData.chart_name"
        :options="'Dashboard Chart'"
        :label="t('Chart Name')"
        :required="true"
        placeholder=""
        :enable-create="true"
        @create="handleCreateNewChart"
      />
      
      <div class="form-field">
        <label class="field-label">{{ t('Label') }}</label>
        <n-input
          v-model:value="formData.label"
          placeholder=""
        />
      </div>
    </div>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { NModal, NInput, useMessage } from 'naive-ui'
import { t } from '@/shared/i18n'
import { pageTypeToSlug } from '@/shared/utils/slug'
import LinkField from './LinkField.vue'

const router = useRouter()

const props = defineProps<{
  show: boolean
  values?: {
    chart_name?: string
    label?: 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({
  chart_name: '',
  label: '',
  name: ''
})

// Reset form when dialog opens
watch(() => props.show, (newVal) => {
  if (newVal) {
    if (props.values) {
      formData.chart_name = props.values.chart_name || ''
      formData.label = props.values.label || ''
      formData.name = props.values.name || ''
    } else {
      formData.chart_name = ''
      formData.label = ''
      formData.name = ''
    }
  }
}, { immediate: true })

function handleSubmit() {
  if (!formData.chart_name) {
    message.error(t('Please select a chart'))
    return false
  }
  
  const data = {
    ...formData,
    label: formData.label || formData.chart_name
  }
  
  if (!editing.value && !data.name) {
    data.name = `chart-${formData.label || formData.chart_name}-${Math.random().toString(36).substring(2, 12)}`
  }
  
  emit('submit', data)
  visible.value = false
  return true
}

function handleCancel() {
  visible.value = false
}

function handleCreateNewChart() {
  // Close dialog and navigate to new Dashboard Chart page with legacy route format
  visible.value = false
  const pagetypeSlug = pageTypeToSlug('Dashboard Chart')
  const randomStr = Math.random().toString(36).substring(2, 12)
  const tempName = `new-${pagetypeSlug}-${randomStr}`
  router.push(`/app/${pagetypeSlug}/${tempName}`)
}
</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;
}
</style>
