<template>
  <div class="space-y-4">
    <a-page-header title="实名认证" sub-title="企业/个人认证与资料提交">
      <template #extra>
        <a-space>
          <a-tag v-if="current" :color="statusTagColor">{{ statusText }}</a-tag>
        </a-space>
      </template>
    </a-page-header>

    <a-card :bordered="false" class="card">
      <a-alert show-icon :type="statusAlertType" :message="statusMessage" :description="statusDescription" />

      <a-divider />

      <a-form ref="formRef" layout="vertical" :model="form" :rules="rules" :disabled="formDisabled">
        <a-form-item label="认证类型" name="type">
          <a-radio-group v-model:value="form.type">
            <a-radio :value="0">个人</a-radio>
            <a-radio :value="1">企业</a-radio>
          </a-radio-group>
        </a-form-item>

        <template v-if="form.type === 0">
          <a-row :gutter="[16, 16]">
            <a-col :xs="24" :lg="12">
              <a-form-item label="真实姓名" name="realName">
                <a-input v-model:value="form.realName" placeholder="请输入真实姓名" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="证件号码" name="idCard">
                <a-input v-model:value="form.idCard" placeholder="请输入身份证/证件号码" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="手机号" name="phone">
                <a-input v-model:value="form.phone" placeholder="用于联系（选填）" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-row :gutter="[16, 16]">
            <a-col :xs="24" :lg="12">
              <a-form-item label="身份证正面" name="sfz1">
                <a-upload
                  v-model:file-list="sfz1List"
                  :disabled="formDisabled"
                  :max-count="1"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  :custom-request="uploadSfz1"
                  @remove="() => (form.sfz1 = '')"
                >
                  <div>上传</div>
                </a-upload>
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="身份证反面" name="sfz2">
                <a-upload
                  v-model:file-list="sfz2List"
                  :disabled="formDisabled"
                  :max-count="1"
                  list-type="picture-card"
                  :before-upload="beforeUpload"
                  :custom-request="uploadSfz2"
                  @remove="() => (form.sfz2 = '')"
                >
                  <div>上传</div>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </template>

        <template v-else>
          <a-row :gutter="[16, 16]">
            <a-col :xs="24" :lg="12">
              <a-form-item label="主体名称" name="name">
                <a-input v-model:value="form.name" placeholder="例如：某某科技有限公司" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="营业执照号码" name="zzCode">
                <a-input v-model:value="form.zzCode" placeholder="请输入统一社会信用代码/执照号" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="联系人" name="realName">
                <a-input v-model:value="form.realName" placeholder="请输入联系人姓名（选填）" />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :lg="12">
              <a-form-item label="联系电话" name="phone">
                <a-input v-model:value="form.phone" placeholder="用于联系（选填）" />
              </a-form-item>
            </a-col>
          </a-row>

          <a-form-item label="营业执照" name="zzImg">
            <a-upload
              v-model:file-list="zzImgList"
              :disabled="formDisabled"
              :max-count="1"
              list-type="picture-card"
              :before-upload="beforeUpload"
              :custom-request="uploadZzImg"
              @remove="() => (form.zzImg = '')"
            >
              <div>上传</div>
            </a-upload>
          </a-form-item>
        </template>

      </a-form>

      <div class="mt-4 flex justify-end gap-2">
        <!--        <a-popconfirm-->
        <!--          v-if="current?.id"-->
        <!--          :title="withdrawConfirmTitle"-->
        <!--          ok-text="撤回"-->
        <!--          cancel-text="取消"-->
        <!--          @confirm="withdraw"-->
        <!--        >-->
        <!--          <a-button danger :loading="submitting">撤回</a-button>-->
        <!--        </a-popconfirm>-->
        <a-button @click="resetForm" :disabled="submitting || formDisabled">重置</a-button>
        <a-button
          type="primary"
          :loading="submitting"
          :disabled="formDisabled"
          @click="submit"
        >
          {{ current?.id ? '更新' : '提交' }}
        </a-button>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { message, type FormInstance } from 'ant-design-vue'
import { getUserInfo } from '@/api/layout'
import { addUserVerify, listUserVerify, removeUserVerify, updateUserVerify } from '@/api/system/userVerify'
import { uploadFile } from '@/api/system/file'
import type { UploadFile } from 'ant-design-vue'
import type { UserVerify } from '@/api/system/userVerify/model'

definePageMeta({ layout: 'console' })

type UploadRequestOption = {
  file?: File
  onSuccess?: (body: unknown, file: File) => void
  onError?: (err: unknown) => void
}

const loading = ref(false)
const submitting = ref(false)

const current = ref<UserVerify | null>(null)
const userId = ref<number | null>(null)

const status = computed(() => current.value?.status)
const isPending = computed(() => status.value === 0)
const isApproved = computed(() => status.value === 1)
const isRejected = computed(() => status.value === 2 || status.value === 30)
const formDisabled = computed(() => !!current.value && (isPending.value || isApproved.value))

const statusText = computed(() => {
  if (isPending.value) return '待审核'
  if (isApproved.value) return '审核通过'
  if (isRejected.value) return '已驳回'
  if (status.value === undefined || status.value === null) return '未知状态'
  return `未知状态（${status.value}）`
})

const statusTagColor = computed(() => {
  if (isPending.value) return 'gold'
  if (isApproved.value) return 'green'
  if (isRejected.value) return 'red'
  return 'default'
})

const statusAlertType = computed(() => {
  if (!current.value) return 'info'
  if (isPending.value) return 'warning'
  if (isApproved.value) return 'success'
  if (isRejected.value) return 'error'
  return 'info'
})

const statusMessage = computed(() => {
  if (!current.value) return '未提交认证资料'
  const prefix = isApproved.value ? '已通过实名认证' : isRejected.value ? '实名认证已驳回' : '已提交认证资料'
  return `${prefix}（ID: ${current.value.id ?? '-'}）`
})

const statusDescription = computed(() => {
  if (!current.value) return '提交后将生成一条实名认证记录，你可随时更新或撤回。'
  const time = current.value.createTime ?? current.value.updateTime ?? '-'
  const reason = (current.value.comments || '').trim()
  if (isApproved.value) return `审核通过时间：${time}（审核通过后不可编辑；如需变更请联系管理员）`
  if (isPending.value) return `提交时间：${time}（审核中不可编辑；如需修改请先撤回后重新提交）`
  if (isRejected.value) return `驳回时间：${time}${reason ? `（原因：${reason}）` : ''}（请修改资料后重新提交）`
  return `提交时间：${time}`
})

const withdrawConfirmTitle = computed(() => {
  if (isApproved.value) return '当前已审核通过，确定撤回（删除）实名认证记录？'
  if (isPending.value) return '当前正在审核中，撤回后可修改并重新提交，确定撤回？'
  if (isRejected.value) return '当前已驳回，撤回后可重新提交，确定撤回？'
  return '确定撤回（删除）当前实名认证记录？'
})

const formRef = ref<FormInstance>()
const form = reactive<UserVerify>({
  type: 0,
  name: '',
  zzCode: '',
  zzImg: '',
  realName: '',
  phone: '',
  idCard: '',
  sfz1: '',
  sfz2: '',
  status: 0,
  comments: ''
})

const rules = computed(() => {
  if (form.type === 1) {
    return {
      type: [{ required: true, type: 'number', message: '请选择认证类型' }],
      name: [{ required: true, type: 'string', message: '请输入主体名称' }],
      zzCode: [{ required: true, type: 'string', message: '请输入营业执照号码' }],
      zzImg: [{ required: true, type: 'string', message: '请上传营业执照' }]
    }
  }
  return {
    type: [{ required: true, type: 'number', message: '请选择认证类型' }],
    realName: [{ required: true, type: 'string', message: '请输入真实姓名' }],
    idCard: [{ required: true, type: 'string', message: '请输入证件号码' }],
    sfz1: [{ required: true, type: 'string', message: '请上传身份证正面' }],
    sfz2: [{ required: true, type: 'string', message: '请上传身份证反面' }]
  }
})

function applyCurrentToForm(next: UserVerify | null) {
  current.value = next
  form.id = next?.id
  form.type = next?.type ?? 0
  form.name = next?.name ?? ''
  form.zzCode = next?.zzCode ?? ''
  form.zzImg = next?.zzImg ?? ''
  form.realName = next?.realName ?? ''
  form.phone = next?.phone ?? ''
  form.idCard = next?.idCard ?? ''
  form.sfz1 = next?.sfz1 ?? ''
  form.sfz2 = next?.sfz2 ?? ''
  form.status = next?.status ?? 0
  form.comments = next?.comments ?? ''
  syncFileLists()
}

const sfz1List = ref<UploadFile[]>([])
const sfz2List = ref<UploadFile[]>([])
const zzImgList = ref<UploadFile[]>([])

function toFileList(url: string): UploadFile[] {
  const normalized = typeof url === 'string' ? url.trim() : ''
  if (!normalized) return []
  return [
    {
      uid: normalized,
      name: normalized.split('/').slice(-1)[0] || 'image',
      status: 'done',
      url: normalized
    } as UploadFile
  ]
}

function syncFileLists() {
  sfz1List.value = toFileList(form.sfz1 ?? '')
  sfz2List.value = toFileList(form.sfz2 ?? '')
  zzImgList.value = toFileList(form.zzImg ?? '')
}

function beforeUpload(file: File) {
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    message.error('仅支持上传图片文件')
    return false
  }
  const maxSizeMb = 5
  if (file.size > maxSizeMb * 1024 * 1024) {
    message.error(`图片大小不能超过 ${maxSizeMb}MB`)
    return false
  }
  return true
}

async function doUpload(
  option: UploadRequestOption,
  setUrl: (url: string) => void,
  setList: (list: UploadFile[]) => void
) {
  const rawFile = option.file
  if (!rawFile) return
  try {
    const record = await uploadFile(rawFile)
    const url = (record?.url || record?.downloadUrl || '').trim()
    if (!url) throw new Error('上传成功但未返回文件地址')
    setUrl(url)
    setList(
      toFileList(url).map((f) => ({
        ...f,
        uid: String(rawFile.name) + '-' + String(Date.now())
      })) as UploadFile[]
    )
    option.onSuccess?.(record, rawFile)
  } catch (e) {
    option.onError?.(e)
    message.error(e instanceof Error ? e.message : '上传失败')
  }
}

function uploadSfz1(option: UploadRequestOption) {
  return doUpload(
    option,
    (url) => (form.sfz1 = url),
    (list) => (sfz1List.value = list)
  )
}

function uploadSfz2(option: UploadRequestOption) {
  return doUpload(
    option,
    (url) => (form.sfz2 = url),
    (list) => (sfz2List.value = list)
  )
}

function uploadZzImg(option: UploadRequestOption) {
  return doUpload(
    option,
    (url) => (form.zzImg = url),
    (list) => (zzImgList.value = list)
  )
}

async function load() {
  loading.value = true
  try {
    const user = await getUserInfo()
    userId.value = user.userId ?? null
  } catch {
    userId.value = null
  }

  try {
    if (!userId.value) {
      applyCurrentToForm(null)
      return
    }

    const list = await listUserVerify({ userId: userId.value })
    const mine = Array.isArray(list)
      ? [...list].sort((a, b) => (Number(b.id ?? 0) - Number(a.id ?? 0)))[0]
      : undefined
    applyCurrentToForm(mine ?? null)
  } catch (e) {
    applyCurrentToForm(null)
    message.error(e instanceof Error ? e.message : '加载实名认证信息失败')
  } finally {
    loading.value = false
  }
}

async function reload() {
  await load()
}

function resetForm() {
  applyCurrentToForm(current.value)
  formRef.value?.clearValidate()
}

async function submit() {
  if (formDisabled.value) {
    message.warning(isApproved.value ? '审核通过后不可编辑' : '审核中不可编辑')
    return
  }
  try {
    await formRef.value?.validate()
  } catch {
    return
  }

  submitting.value = true
  try {
    const payload: UserVerify = {
      id: form.id,
      userId: userId.value ?? form.userId,
      type: form.type,
      name: form.name,
      zzCode: form.zzCode,
      zzImg: form.zzImg,
      realName: form.realName,
      phone: form.phone,
      idCard: form.idCard,
      sfz1: form.sfz1,
      sfz2: form.sfz2,
      status: 0,
      comments: form.comments
    }
    if (current.value?.id) {
      await updateUserVerify(payload)
      message.success('认证资料已更新')
    } else {
      await addUserVerify(payload)
      message.success('认证资料已提交')
    }
    await load()
  } catch (e) {
    message.error(e instanceof Error ? e.message : '提交失败')
  } finally {
    submitting.value = false
  }
}

async function withdraw() {
  if (!current.value?.id) return
  submitting.value = true
  try {
    await removeUserVerify(current.value.id)
    message.success('已撤回')
    await load()
  } catch (e) {
    message.error(e instanceof Error ? e.message : '撤回失败')
  } finally {
    submitting.value = false
  }
}

onMounted(async () => {
  await load()
})
</script>

<style scoped>
.card {
  border-radius: 12px;
}
</style>
