<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useI18n } from '@vben/locales'
import {
  ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage,
} from 'element-plus'
import { ZqDialog } from '#/components/zq-dialog'
import { useWikiStore } from '#/store/wiki'
import type { WikiSpace } from '#/types/zq-smart-table/table'
import ImageSelector from '#/components/zq-form/image-selector/image-selector.vue'

const props = defineProps<{
  modelValue: boolean
  space: WikiSpace | null
}>()
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  updated: [spaceId: string]
}>()

const { t } = useI18n()
const wikiStore = useWikiStore()

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

const saving = ref(false)
const form = ref({
  name: '',
  description: '',
  category: 'default',
  visibility: 'private',
  avatar: undefined as string | undefined,
})

const categories = computed(() => [
  { value: 'default', label: t('wiki.categoryDefault') },
  { value: 'tech', label: t('wiki.categoryTech') },
  { value: 'product', label: t('wiki.categoryProduct') },
  { value: 'design', label: t('wiki.categoryDesign') },
  { value: 'business', label: t('wiki.categoryBusiness') },
  { value: 'other', label: t('wiki.categoryOther') },
])

const visibilityOptions = computed(() => [
  { value: 'private', label: t('wiki.private') },
  { value: 'team', label: t('wiki.team') },
  { value: 'public', label: t('wiki.public') },
])

watch(() => props.modelValue, (v) => {
  if (v && props.space) {
    form.value = {
      name: props.space.name,
      description: props.space.description || '',
      category: props.space.category || 'default',
      visibility: props.space.visibility || 'private',
      avatar: props.space.avatar || undefined,
    }
  }
})

async function handleSave() {
  if (!props.space) return
  const name = form.value.name.trim()
  if (!name) {
    ElMessage.warning(t('wiki.spaceNamePlaceholder'))
    return
  }
  saving.value = true
  try {
    await wikiStore.updateSpace(props.space.id, {
      name,
      description: form.value.description.trim() || null,
      category: form.value.category,
      visibility: form.value.visibility,
      avatar: form.value.avatar || null,
    })
    ElMessage.success(t('wiki.editSpaceSuccess'))
    visible.value = false
    emit('updated', props.space.id)
  } catch {
    ElMessage.error('Failed')
  } finally {
    saving.value = false
  }
}
</script>

<template>
  <ZqDialog
    v-model="visible"
    :title="t('wiki.editSpace')"
    width="480px"
    :confirm-loading="saving"
    @confirm="handleSave"
  >
    <ElForm label-position="top">
      <ElFormItem :label="t('wiki.avatar')">
        <ImageSelector
          v-model="form.avatar"
          :size="72"
          enable-crop
          :crop-aspect-ratio="1"
          crop-shape="circle"
          source="wiki"
        />
      </ElFormItem>
      <ElFormItem :label="t('wiki.spaceName')" required>
        <ElInput
          v-model="form.name"
          :placeholder="t('wiki.spaceNamePlaceholder')"
          maxlength="200"
          show-word-limit
          @keyup.enter="handleSave"
        />
      </ElFormItem>
      <ElFormItem :label="t('wiki.spaceDescription')">
        <ElInput
          v-model="form.description"
          type="textarea"
          :rows="3"
          :placeholder="t('wiki.spaceDescriptionPlaceholder')"
          maxlength="500"
        />
      </ElFormItem>
      <ElFormItem :label="t('wiki.category')">
        <ElSelect v-model="form.category" class="w-full">
          <ElOption
            v-for="c in categories"
            :key="c.value"
            :label="c.label"
            :value="c.value"
          />
        </ElSelect>
      </ElFormItem>
      <ElFormItem :label="t('wiki.visibility')">
        <ElSelect v-model="form.visibility" class="w-full">
          <ElOption
            v-for="v in visibilityOptions"
            :key="v.value"
            :label="v.label"
            :value="v.value"
          />
        </ElSelect>
      </ElFormItem>
    </ElForm>
  </ZqDialog>
</template>
