<template>
  <n-modal v-model:show="showDialog" preset="dialog" :title="isEdit ? t('Edit Workspace') : t('New Workspace')">
    <n-form :model="form" label-width="100">
      <n-form-item :label="t('Title')" required>
        <n-input v-model:value="form.title" :placeholder="t('Enter workspace title')" />
      </n-form-item>

      <n-form-item :label="t('Parent')">
        <n-select
          v-model:value="form.parent"
          :options="parentOptions"
          clearable
          :placeholder="t('None')"
        />
      </n-form-item>

      <n-form-item :label="t('Public')">
        <n-checkbox
          v-model:checked="form.isPublic"
          :disabled="!hasAccess"
          :checked-value="1"
          :unchecked-value="0"
        >
          {{ t('Public') }}
        </n-checkbox>
      </n-form-item>

      <n-form-item :label="t('Icon')">
        <IconPicker v-model="form.icon" />
      </n-form-item>
    </n-form>
    <template #action>
      <n-space>
        <n-button @click="handleCancel">{{ t('Cancel') }}</n-button>
        <n-button type="primary" :loading="submitting" @click="handleSubmit">
          {{ isEdit ? t('Update') : t('Create') }}
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { NModal, NForm, NFormItem, NInput, NSelect, NCheckbox, NButton, NSpace } from 'naive-ui'
import { t } from '@/shared/i18n'
import IconPicker from '@/core/components/IconPicker.vue'

interface WorkspaceForm {
  title: string
  parent: string
  isPublic: 0 | 1
  icon: string
}

interface Props {
  show: boolean
  isEdit?: boolean
  workspace?: any
  parentOptions: Array<{ label: string; value: string }>
  hasAccess: boolean
}

const props = withDefaults(defineProps<Props>(), {
  isEdit: false
})

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

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

const form = ref<WorkspaceForm>({
  title: '',
  parent: '',
  isPublic: 0,
  icon: 'tabler:layout-dashboard'
})

const submitting = ref(false)

// Watch for workspace changes (when editing)
watch(() => props.workspace, (workspace) => {
  if (workspace && props.isEdit) {
    form.value = {
      title: workspace.label || '',
      parent: workspace.parentId || '',
      isPublic: workspace.workspaceName?.includes('-') ? 0 : 1,
      icon: workspace.icon || 'tabler:layout-dashboard'
    }
  }
}, { immediate: true })

// Reset form when dialog is closed
watch(showDialog, (show) => {
  if (!show && !props.isEdit) {
    form.value = {
      title: '',
      parent: '',
      isPublic: 0,
      icon: 'tabler:layout-dashboard'
    }
    submitting.value = false
  }
})

function handleCancel() {
  showDialog.value = false
}

async function handleSubmit() {
  if (!form.value.title.trim()) {
    return
  }
  
  submitting.value = true
  try {
    emit('submit', { ...form.value })
  } finally {
    submitting.value = false
  }
}
</script>
