<template>
  <div class="art-page-view">
    <!-- 1. 顶部操作区 -->
    <ElCard class="mb-4" shadow="never">
      <div class="flex flex-wrap items-center justify-between gap-3">
        <div class="text-lg font-semibold">
          {{
            isEditMode ? $t('tenant.announcement.editTitle') : $t('tenant.announcement.createTitle')
          }}
        </div>
        <div class="flex items-center gap-2">
          <ElTag v-if="draftStatus" type="info">{{ draftStatus }}</ElTag>
          <ElButton @click="handleBack">{{ $t('tenant.announcement.action.back') }}</ElButton>
          <ElButton type="primary" :loading="loading" @click="handleSubmit" v-ripple>
            {{
              isEditMode
                ? $t('tenant.announcement.action.update')
                : $t('tenant.announcement.action.create')
            }}
          </ElButton>
        </div>
      </div>
    </ElCard>

    <ElAlert v-if="errorMessage" type="error" show-icon :title="errorMessage" class="mb-4" />
    <ElAlert
      v-else
      type="info"
      show-icon
      :title="$t('tenant.announcement.tip.tenantScope')"
      class="mb-4"
    />

    <ElAlert
      v-if="draftLoaded"
      type="success"
      show-icon
      :title="$t('tenant.announcement.tip.draftLoaded')"
      class="mb-4"
    />

    <!-- 2. 表单区 -->
    <ElCard shadow="never" v-loading="loading || loadingData">
      <ElForm ref="formRef" :model="formState" :rules="rules" label-width="110px">
        <!-- 2.1 基础信息 -->
        <ElRow :gutter="16">
          <ElCol :span="12">
            <ElFormItem :label="$t('tenant.announcement.field.title')" prop="title">
              <ElInput
                v-model="formState.title"
                :placeholder="$t('tenant.announcement.placeholder.title')"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem
              :label="$t('tenant.announcement.field.announcementType')"
              prop="announcementType"
            >
              <ElSelect
                v-model="formState.announcementType"
                :placeholder="$t('tenant.announcement.placeholder.type')"
                class="w-full"
              >
                <ElOption
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="6">
            <ElFormItem :label="$t('tenant.announcement.field.priority')" prop="priority">
              <ElInputNumber
                v-model="formState.priority"
                :min="1"
                :max="10"
                controls-position="right"
                class="w-full"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>

        <ElRow :gutter="16">
          <ElCol :span="12">
            <ElFormItem
              :label="$t('tenant.announcement.field.effectiveRange')"
              prop="effectiveRange"
            >
              <ElDatePicker
                v-model="formState.effectiveRange"
                type="datetimerange"
                value-format="YYYY-MM-DD HH:mm:ss"
                :placeholder="$t('tenant.announcement.placeholder.effectiveRange')"
                class="w-full"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem :label="$t('tenant.announcement.field.targetType')" prop="targetType">
              <ElSelect
                v-model="formState.targetType"
                :placeholder="$t('tenant.announcement.placeholder.targetType')"
                class="w-full"
              >
                <ElOption
                  v-for="item in targetTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
        </ElRow>

        <ElDivider class="my-4" />

        <!-- 2.2 公告内容 -->
        <div class="mb-3 text-sm font-semibold">
          {{ $t('tenant.announcement.section.content') }}
        </div>
        <ElFormItem :label="$t('tenant.announcement.field.content')" prop="content">
          <RichTextEditor
            v-model="formState.content"
            :placeholder="$t('tenant.announcement.placeholder.content')"
            height="320px"
          />
        </ElFormItem>

        <ElDivider class="my-4" />

        <!-- 2.3 目标受众 -->
        <div class="mb-3 text-sm font-semibold">
          {{ $t('tenant.announcement.section.audience') }}
        </div>
        <ElRow :gutter="16">
          <ElCol :span="12" v-if="formState.targetType === 'roles'">
            <ElFormItem :label="$t('tenant.announcement.field.targetParameters')">
              <ElInput
                v-model="formState.roleIds"
                :placeholder="$t('tenant.announcement.placeholder.roleIds')"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12" v-if="formState.targetType === 'users'">
            <ElFormItem :label="$t('tenant.announcement.field.targetParameters')">
              <ElInput
                v-model="formState.userIds"
                :placeholder="$t('tenant.announcement.placeholder.userIds')"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12" v-if="formState.targetType === 'manual'">
            <ElFormItem :label="$t('tenant.announcement.field.targetParameters')">
              <ElInput
                v-model="formState.userIds"
                :placeholder="$t('tenant.announcement.placeholder.userIds')"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>

        <ElRow :gutter="16" v-if="formState.targetType === 'rules'">
          <ElCol :span="8">
            <ElFormItem :label="$t('tenant.announcement.field.departmentIds')">
              <ElInput
                v-model="formState.departmentIds"
                :placeholder="$t('tenant.announcement.placeholder.departmentIds')"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem :label="$t('tenant.announcement.field.roleIds')">
              <ElInput
                v-model="formState.roleIds"
                :placeholder="$t('tenant.announcement.placeholder.roleIds')"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="8">
            <ElFormItem :label="$t('tenant.announcement.field.tagIds')">
              <ElInput
                v-model="formState.tagIds"
                :placeholder="$t('tenant.announcement.placeholder.tagIds')"
              />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
  import { computed, onBeforeUnmount, reactive, ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { storeToRefs } from 'pinia'
  import {
    ElAlert,
    ElButton,
    ElCard,
    ElCol,
    ElDatePicker,
    ElDivider,
    ElForm,
    ElFormItem,
    ElInput,
    ElInputNumber,
    ElMessage,
    ElOption,
    ElRow,
    ElSelect,
    ElTag,
    type FormInstance,
    type FormRules
  } from 'element-plus'
  import { useAnnouncementStore } from '@/store/modules/announcement'
  import { useUserStore } from '@/store/modules/user'
  import { normalizeAnnouncementStatus } from '@/utils/announcementStatus'
  import type {
    AnnouncementFormData,
    AnnouncementTargetType,
    TargetRules
  } from '@/types/announcement'
  import { TenantAnnouncementType } from '@/types/announcement'
  import RichTextEditor from '@/components/common/RichTextEditor.vue'
  import { tenantAnnouncementApi } from '@/api/announcement'
  import type { TenantAnnouncementDto } from '@/types/announcement'

  defineOptions({ name: 'TenantAnnouncementCreate' })

  const { t } = useI18n()
  const route = useRoute()
  const router = useRouter()
  const userStore = useUserStore()
  const announcementStore = useAnnouncementStore()

  const { loading, currentDraft } = storeToRefs(announcementStore)

  // 1. 租户ID（优先路由参数，其次用户信息）
  const tenantId = computed(() => {
    const paramId = route.params.tenantId
    const queryId = route.query.tenantId
    const rawId = Array.isArray(paramId)
      ? paramId[0]
      : paramId || (Array.isArray(queryId) ? queryId[0] : queryId)
    return String(rawId || userStore.info?.tenantId || '')
  })

  // 1.5 编辑模式检测与数据加载
  const announcementId = computed(() => {
    const routeId = route.params.id
    return Array.isArray(routeId) ? routeId[0] : routeId
  })

  const isEditMode = computed(() => !!announcementId.value)
  const loadingData = ref(false)
  const currentRowVersion = ref<string | null>(null)

  // 加载公告数据（编辑模式）
  const loadAnnouncementData = async () => {
    if (!isEditMode.value || !tenantId.value || !announcementId.value) return

    loadingData.value = true
    errorMessage.value = null
    try {
      const data = await tenantAnnouncementApi.detail(tenantId.value, announcementId.value)

      // 检查是否只有草稿可编辑
      if (normalizeAnnouncementStatus(data.status) !== 'Draft') {
        errorMessage.value = t('tenant.announcement.message.onlyDraftEditable')
        return
      }

      // 保存 RowVersion
      currentRowVersion.value = data.rowVersion || null

      // 映射 DTO 到表单数据
      const dtoToFormData = (dto: TenantAnnouncementDto): Partial<AnnouncementFormData> => {
        let targetRules: TargetRules | undefined
        let targetUserIds: string[] | undefined

        // 解析 targetParameters JSON 字符串
        if (dto.targetParameters) {
          try {
            const params = JSON.parse(dto.targetParameters)
            if (dto.targetType === 'rules') {
              targetRules = params
            } else if (dto.targetType === 'users' || dto.targetType === 'manual') {
              targetUserIds = params.userIds || []
            } else if (dto.targetType === 'roles') {
              targetRules = { roles: params.roles || [] }
            }
          } catch (error) {
            console.error('Failed to parse targetParameters:', error)
          }
        }

        return {
          title: dto.title,
          content: dto.content,
          announcementType: dto.announcementType,
          priority: dto.priority,
          effectiveFrom: dto.effectiveFrom,
          effectiveTo: dto.effectiveTo,
          targetType: dto.targetType,
          targetRules,
          targetUserIds
        }
      }

      applyDraftToForm(dtoToFormData(data))
    } catch (error: any) {
      console.error('Failed to load announcement:', error)
      errorMessage.value =
        error?.response?.data?.message || t('tenant.announcement.message.loadFailed')
    } finally {
      loadingData.value = false
    }
  }

  // 2. 错误提示与草稿状态
  const errorMessage = ref<string | null>(null)
  const draftLoaded = ref(false)

  const draftStatus = computed(() => {
    if (!currentDraft.value?.lastSaved) {
      return t('tenant.announcement.tip.draftAutoSave')
    }
    return t('tenant.announcement.tip.draftSaved', {
      time: formatDateTime(currentDraft.value.lastSaved)
    })
  })

  // 3. 表单数据（UI 形态）
  interface AnnouncementFormState {
    title: string
    content: string
    announcementType: TenantAnnouncementType
    priority: number
    effectiveRange: string[]
    targetType: AnnouncementTargetType
    roleIds: string
    userIds: string
    departmentIds: string
    tagIds: string
  }

  const formState = reactive<AnnouncementFormState>({
    title: '',
    content: '',
    announcementType: TenantAnnouncementType.TENANT_INTERNAL,
    priority: 3,
    effectiveRange: [],
    targetType: 'all',
    roleIds: '',
    userIds: '',
    departmentIds: '',
    tagIds: ''
  })

  // 4. 草稿数据（对接 Store）
  const draftState = reactive<AnnouncementFormData>({
    title: '',
    content: '',
    announcementType: TenantAnnouncementType.TENANT_INTERNAL,
    priority: 3,
    effectiveFrom: '',
    effectiveTo: null,
    targetType: 'all'
  })

  // 5. 选项数据
  const typeOptions = computed(() => [
    { label: t('tenant.announcement.type.system'), value: TenantAnnouncementType.System },
    { label: t('tenant.announcement.type.billing'), value: TenantAnnouncementType.Billing },
    { label: t('tenant.announcement.type.operation'), value: TenantAnnouncementType.Operation },
    {
      label: t('tenant.announcement.type.systemPlatformUpdate'),
      value: TenantAnnouncementType.SYSTEM_PLATFORM_UPDATE
    },
    {
      label: t('tenant.announcement.type.systemSecurityNotice'),
      value: TenantAnnouncementType.SYSTEM_SECURITY_NOTICE
    },
    {
      label: t('tenant.announcement.type.systemCompliance'),
      value: TenantAnnouncementType.SYSTEM_COMPLIANCE
    },
    {
      label: t('tenant.announcement.type.tenantInternal'),
      value: TenantAnnouncementType.TENANT_INTERNAL
    },
    {
      label: t('tenant.announcement.type.tenantFinance'),
      value: TenantAnnouncementType.TENANT_FINANCE
    },
    {
      label: t('tenant.announcement.type.tenantOperation'),
      value: TenantAnnouncementType.TENANT_OPERATION
    }
  ])

  const targetTypeOptions = computed(() => [
    { label: t('tenant.announcement.targetType.all'), value: 'all' },
    { label: t('tenant.announcement.targetType.roles'), value: 'roles' },
    { label: t('tenant.announcement.targetType.users'), value: 'users' },
    { label: t('tenant.announcement.targetType.rules'), value: 'rules' },
    { label: t('tenant.announcement.targetType.manual'), value: 'manual' }
  ])

  // 6. 表单验证
  const rules: FormRules = {
    title: [
      {
        required: true,
        message: t('tenant.announcement.validation.titleRequired'),
        trigger: 'blur'
      },
      {
        min: 2,
        max: 128,
        message: t('tenant.announcement.validation.titleLength'),
        trigger: 'blur'
      }
    ],
    content: [
      {
        required: true,
        message: t('tenant.announcement.validation.contentRequired'),
        trigger: 'blur'
      }
    ],
    announcementType: [
      {
        required: true,
        message: t('tenant.announcement.validation.typeRequired'),
        trigger: 'change'
      }
    ],
    priority: [
      {
        required: true,
        message: t('tenant.announcement.validation.priorityRequired'),
        trigger: 'change'
      }
    ],
    effectiveRange: [
      {
        required: true,
        type: 'array',
        min: 2,
        message: t('tenant.announcement.validation.effectiveRangeRequired'),
        trigger: 'change'
      }
    ],
    targetType: [
      {
        required: true,
        message: t('tenant.announcement.validation.targetTypeRequired'),
        trigger: 'change'
      }
    ]
  }

  const formRef = ref<FormInstance>()

  // 7. 时间处理
  const formatDateTime = (value?: string | null) => {
    if (!value) return '-'
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return '-'
    return date.toLocaleString()
  }

  const toIsoDateTime = (value: string) => {
    if (!value) return ''
    const normalized = value.includes('T') ? value : value.replace(' ', 'T')
    const date = new Date(normalized)
    if (Number.isNaN(date.getTime())) return ''
    return date.toISOString()
  }

  const formatDateTimeInput = (value?: string | null) => {
    if (!value) return ''
    const date = new Date(value)
    if (Number.isNaN(date.getTime())) return ''
    const pad = (num: number) => String(num).padStart(2, '0')
    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(
      date.getHours()
    )}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
  }

  // 8. 目标受众处理
  const splitIds = (value: string) => {
    return value
      .split(/[，,\s]+/)
      .map((item) => item.trim())
      .filter(Boolean)
  }

  const buildTargetRules = () => {
    if (formState.targetType === 'roles') {
      return { roles: splitIds(formState.roleIds) }
    }
    if (formState.targetType === 'rules') {
      return {
        departments: splitIds(formState.departmentIds),
        roles: splitIds(formState.roleIds),
        tags: splitIds(formState.tagIds)
      }
    }
    return undefined
  }

  const buildTargetUserIds = () => {
    if (formState.targetType === 'users' || formState.targetType === 'manual') {
      return splitIds(formState.userIds)
    }
    return undefined
  }

  const validateTargetInputs = () => {
    if (formState.targetType === 'roles' && splitIds(formState.roleIds).length === 0) {
      ElMessage.warning(t('tenant.announcement.validation.roleIdsRequired'))
      return false
    }

    if (
      (formState.targetType === 'users' || formState.targetType === 'manual') &&
      splitIds(formState.userIds).length === 0
    ) {
      ElMessage.warning(t('tenant.announcement.validation.userIdsRequired'))
      return false
    }

    if (formState.targetType === 'rules') {
      const hasRule =
        splitIds(formState.departmentIds).length > 0 ||
        splitIds(formState.roleIds).length > 0 ||
        splitIds(formState.tagIds).length > 0
      if (!hasRule) {
        ElMessage.warning(t('tenant.announcement.validation.targetRuleRequired'))
        return false
      }
    }

    return true
  }

  // 9. 同步草稿数据
  const syncDraftState = () => {
    // 1. 同步基础字段
    const [start, end] = formState.effectiveRange
    draftState.title = formState.title
    draftState.content = formState.content
    draftState.announcementType = formState.announcementType
    draftState.priority = formState.priority

    // 2. 同步有效期
    draftState.effectiveFrom = toIsoDateTime(start)
    draftState.effectiveTo = end ? toIsoDateTime(end) : null

    // 3. 同步受众参数
    draftState.targetType = formState.targetType
    draftState.targetRules = buildTargetRules()
    draftState.targetUserIds = buildTargetUserIds()
  }

  const applyDraftToForm = (draft: Partial<AnnouncementFormData>) => {
    // 1. 回填基础字段
    formState.title = draft.title || ''
    formState.content = draft.content || ''
    formState.announcementType = draft.announcementType ?? TenantAnnouncementType.TENANT_INTERNAL
    formState.priority = draft.priority ?? 3
    formState.targetType = draft.targetType ?? 'all'

    // 2. 回填有效期
    const start = formatDateTimeInput(draft.effectiveFrom)
    const end = formatDateTimeInput(draft.effectiveTo ?? null)
    formState.effectiveRange = start && end ? [start, end] : []

    // 3. 回填受众参数
    formState.roleIds = draft.targetRules?.roles?.join(',') || ''
    formState.departmentIds = draft.targetRules?.departments?.join(',') || ''
    formState.tagIds = draft.targetRules?.tags?.join(',') || ''
    formState.userIds = draft.targetUserIds?.join(',') || ''
  }

  // 10. 草稿自动保存
  const stopAutoSave = ref<(() => void) | null>(null)

  const initDraft = () => {
    // 1. 同步草稿数据
    syncDraftState()

    // 2. 若无草稿则先写入本地
    if (!currentDraft.value) {
      announcementStore.saveDraft(draftState)
    }

    // 3. 启动自动保存
    stopAutoSave.value = announcementStore.autoSaveDraft(draftState, 30000)
  }

  // 11. 提交创建/更新
  const handleSubmit = async () => {
    if (!formRef.value) return

    if (!tenantId.value) {
      ElMessage.error(t('tenant.announcement.message.tenantIdMissing'))
      return
    }

    try {
      // 1. 表单校验
      await formRef.value.validate()
      if (!validateTargetInputs()) return

      // 2. 组装请求参数
      syncDraftState()
      const payload: AnnouncementFormData = {
        ...draftState,
        title: formState.title.trim(),
        content: formState.content.trim()
      }

      // 3. 编辑模式：包含 RowVersion
      if (isEditMode.value && announcementId.value) {
        if (currentRowVersion.value) {
          payload.rowVersion = currentRowVersion.value
        }

        const result = await tenantAnnouncementApi.update(
          tenantId.value,
          announcementId.value,
          payload
        )
        ElMessage.success(t('tenant.announcement.message.updateSuccess'))

        // 跳转详情页
        router.push({
          path: `${listPath.value}/${result.id}`,
          query: tenantId.value ? { tenantId: tenantId.value } : undefined
        })
        return
      }

      // 4. 创建模式
      const result = await announcementStore.createAnnouncement(payload, {
        scope: 'tenant',
        tenantId: tenantId.value
      })

      if (result) {
        ElMessage.success(t('tenant.announcement.message.createSuccess'))

        // 5. 清理草稿
        if (currentDraft.value?.draftId) {
          announcementStore.clearDraft(currentDraft.value.draftId)
        }

        // 6. 跳转详情页
        router.push({
          path: `${listPath.value}/${result.id}`,
          query: tenantId.value ? { tenantId: tenantId.value } : undefined
        })
      }
    } catch (error: any) {
      console.error(error)
      // 处理并发冲突
      if (error?.response?.status === 409) {
        ElMessage.error(t('tenant.announcement.message.concurrentConflict'))
      } else {
        ElMessage.error(
          error?.response?.data?.message || t('tenant.announcement.message.operationFailed')
        )
      }
    }
  }

  // 12. 返回列表
  const listPath = computed(() => route.path.replace(/\/(create|edit\/[^/]+)$/, ''))

  const handleBack = () => {
    router.push({
      path: listPath.value,
      query: tenantId.value ? { tenantId: tenantId.value } : undefined
    })
  }

  // 13. 初始化草稿与错误提示
  watch(
    tenantId,
    (value) => {
      if (!value) {
        errorMessage.value = t('tenant.announcement.message.tenantIdMissing')
      } else {
        errorMessage.value = null
      }
    },
    { immediate: true }
  )

  watch(
    formState,
    () => {
      // 1. 表单变化时同步草稿数据
      syncDraftState()
    },
    { deep: true }
  )

  const draftIdFromRoute = computed(() => {
    const draftId = route.query.draftId
    return Array.isArray(draftId) ? draftId[0] : draftId
  })

  // 14. 初始化逻辑
  if (isEditMode.value) {
    // 编辑模式：加载公告数据
    loadAnnouncementData()
  } else if (draftIdFromRoute.value) {
    // 创建模式：加载草稿
    const draft = announcementStore.loadDraft(String(draftIdFromRoute.value))
    if (draft) {
      applyDraftToForm(draft)
      draftLoaded.value = true
    }
  }

  // 创建模式下初始化草稿自动保存
  if (!isEditMode.value) {
    initDraft()
  }

  onBeforeUnmount(() => {
    // 1. 组件卸载时停止自动保存
    stopAutoSave.value?.()
  })
</script>
