<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { ref, watch } from 'vue'

import { updateSystemConfig, type SystemConfig } from '@/features/admin/api/systemConfigs'
import {
  cloneRenterGrowthConfig,
  defaultRenterGrowthConfig,
  parseRenterGrowthConfig,
  type RenterGrowthConfig,
  type RenterGrowthLevelRule,
} from '@/features/admin/api/renterGrowth'
import { readError } from '@/shared/utils/error'

const props = defineProps<{
  modelValue: boolean
  config: SystemConfig
}>()

const emit = defineEmits<{
  (event: 'update:modelValue', value: boolean): void
  (event: 'saved'): void
}>()

const submitting = ref(false)
const draft = ref<RenterGrowthConfig>(cloneRenterGrowthConfig(defaultRenterGrowthConfig))

watch(
  () => [props.modelValue, props.config.value] as const,
  ([visible]) => {
    if (visible) draft.value = parseRenterGrowthConfig(props.config.value)
  },
  { immediate: true }
)

function discountPercent(level: RenterGrowthLevelRule) {
  return level.discount_bps / 100
}

function updateDiscountPercent(level: RenterGrowthLevelRule, value: number | undefined) {
  level.discount_bps = Math.round(Number(value || 0) * 100)
}

function quotaYuan(level: RenterGrowthLevelRule) {
  return level.deposit_free_quota_cent / 100
}

function updateQuotaYuan(level: RenterGrowthLevelRule, value: number | undefined) {
  level.deposit_free_quota_cent = Math.round(Number(value || 0) * 100)
}

function resetDefaults() {
  draft.value = cloneRenterGrowthConfig(defaultRenterGrowthConfig)
}

function validateDraft() {
  if (!Number.isInteger(draft.value.points_per_yuan) || draft.value.points_per_yuan <= 0) {
    return '每元积分必须是大于 0 的整数'
  }
  for (const [index, level] of draft.value.levels.entries()) {
    const previous = draft.value.levels[index - 1]
    if (!Number.isInteger(level.min_points) || level.min_points < 0) {
      return `${level.name}积分门槛不正确`
    }
    if (index === 0 && level.min_points !== 0) return '普通等级积分门槛必须为 0'
    if (previous && level.min_points <= previous.min_points) return '等级积分门槛必须严格递增'
    if (level.discount_bps <= 0 || level.discount_bps > 10000) {
      return `${level.name}支付比例必须在 0% 到 100% 之间`
    }
    if (previous && level.discount_bps > previous.discount_bps)
      return '高等级支付比例不能高于低等级'
    if (!Number.isInteger(level.deposit_free_quota_cent) || level.deposit_free_quota_cent < 0) {
      return `${level.name}免押额度不正确`
    }
    if (previous && level.deposit_free_quota_cent < previous.deposit_free_quota_cent) {
      return '高等级免押额度不能低于低等级'
    }
  }
  return ''
}

async function handleSave() {
  const validationMessage = validateDraft()
  if (validationMessage) {
    ElMessage.warning(validationMessage)
    return
  }
  submitting.value = true
  try {
    await updateSystemConfig(props.config.key, {
      value: JSON.stringify(draft.value),
      description: '租客成长等级规则（积分门槛、租金折扣、等级免押额度）',
    })
    ElMessage.success('成长等级配置已更新')
    emit('saved')
    emit('update:modelValue', false)
  } catch (error) {
    ElMessage.error(readError(error, '成长等级配置保存失败'))
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    title="成长等级配置"
    width="860px"
    destroy-on-close
    @update:model-value="emit('update:modelValue', $event)"
  >
    <div class="growth-config-form">
      <div class="growth-switch-row">
        <span>启用成长等级</span>
        <el-switch v-model="draft.enabled" />
      </div>
      <el-form label-position="top" @submit.prevent>
        <el-form-item label="每完成 1 元实付租金获得积分">
          <el-input-number
            v-model="draft.points_per_yuan"
            :min="1"
            :max="1000"
            :step="1"
            step-strictly
          />
        </el-form-item>
      </el-form>

      <el-table :data="draft.levels" border>
        <el-table-column prop="name" label="等级" width="100" />
        <el-table-column label="积分门槛" min-width="170">
          <template #default="{ row, $index }">
            <el-input-number
              v-model="row.min_points"
              :disabled="$index === 0"
              :min="0"
              :max="1000000000"
              :step="100"
              step-strictly
            />
          </template>
        </el-table-column>
        <el-table-column label="租金支付比例" min-width="190">
          <template #default="{ row, $index }">
            <el-input-number
              :model-value="discountPercent(row)"
              :disabled="$index === 0"
              :min="0.01"
              :max="100"
              :precision="2"
              :step="0.5"
              @update:model-value="updateDiscountPercent(row, $event)"
            />
            <span class="unit">%</span>
          </template>
        </el-table-column>
        <el-table-column label="等级免押额度" min-width="190">
          <template #default="{ row, $index }">
            <el-input-number
              :model-value="quotaYuan(row)"
              :disabled="$index === 0"
              :min="0"
              :max="1000000"
              :precision="0"
              :step="100"
              @update:model-value="updateQuotaYuan(row, $event)"
            />
            <span class="unit">元</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <el-button :disabled="submitting" @click="resetDefaults">恢复默认</el-button>
      <el-button :disabled="submitting" @click="emit('update:modelValue', false)">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSave">保存配置</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.growth-config-form {
  display: grid;
  gap: 18px;
}

.growth-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
  font-weight: 700;
}

.growth-config-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.growth-config-form :deep(.el-input-number) {
  width: calc(100% - 32px);
}

.unit {
  display: inline-block;
  width: 28px;
  margin-left: 4px;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 760px) {
  .growth-config-form :deep(.el-table) {
    min-width: 760px;
  }
}
</style>
