<script setup lang="ts">
import type { PointMallRuleForm } from '../types';

import { Button, Card, InputNumber, Switch } from 'ant-design-vue';

defineProps<{
  canManage: boolean;
  form: PointMallRuleForm;
  loading: boolean;
  submitting: boolean;
}>();

const emit = defineEmits<{
  (event: 'save'): void;
  (event: 'setConsumeAmountPerStep', value: null | number): void;
  (event: 'setConsumeRewardEnabled', value: boolean): void;
  (event: 'setConsumeRewardPointsPerStep', value: null | number): void;
  (event: 'setExpiryMode', value: 'permanent' | 'yearly_clear'): void;
  (event: 'setRegisterRewardEnabled', value: boolean): void;
  (event: 'setRegisterRewardPoints', value: null | number): void;
  (event: 'setReviewRewardEnabled', value: boolean): void;
  (event: 'setReviewRewardPoints', value: null | number): void;
  (event: 'setSigninRewardEnabled', value: boolean): void;
  (event: 'setSigninRewardPoints', value: null | number): void;
}>();

function parseNullableNumber(value: null | number | string) {
  if (value === null || value === undefined || value === '') {
    return null;
  }
  const parsed = Number(value);
  return Number.isNaN(parsed) ? null : parsed;
}
</script>

<template>
  <div class="mpm-rule-panel">
    <Card class="mpm-card">
      <div class="mpm-section-title">积分获取规则</div>

      <div class="mpm-rule-row">
        <Switch
          :checked="form.isConsumeRewardEnabled"
          :disabled="!canManage || loading"
          @change="(value) => emit('setConsumeRewardEnabled', Boolean(value))"
        />
        <span class="mpm-rule-label">消费获取</span>
        <span class="mpm-rule-text">每消费</span>
        <InputNumber
          :value="form.consumeAmountPerStep ?? undefined"
          :disabled="!canManage || loading"
          :min="0"
          :precision="0"
          class="mpm-rule-input"
          @update:value="
            (value) =>
              emit('setConsumeAmountPerStep', parseNullableNumber(value))
          "
        />
        <span class="mpm-rule-text">元获得</span>
        <InputNumber
          :value="form.consumeRewardPointsPerStep ?? undefined"
          :disabled="!canManage || loading"
          :min="0"
          :precision="0"
          class="mpm-rule-input"
          @update:value="
            (value) =>
              emit('setConsumeRewardPointsPerStep', parseNullableNumber(value))
          "
        />
        <span class="mpm-rule-text">积分</span>
      </div>

      <div class="mpm-rule-row">
        <Switch
          :checked="form.isReviewRewardEnabled"
          :disabled="!canManage || loading"
          @change="(value) => emit('setReviewRewardEnabled', Boolean(value))"
        />
        <span class="mpm-rule-label">评价奖励</span>
        <span class="mpm-rule-text">发表评价奖励</span>
        <InputNumber
          :value="form.reviewRewardPoints ?? undefined"
          :disabled="!canManage || loading"
          :min="0"
          :precision="0"
          class="mpm-rule-input"
          @update:value="
            (value) => emit('setReviewRewardPoints', parseNullableNumber(value))
          "
        />
        <span class="mpm-rule-text">积分</span>
      </div>

      <div class="mpm-rule-row">
        <Switch
          :checked="form.isRegisterRewardEnabled"
          :disabled="!canManage || loading"
          @change="(value) => emit('setRegisterRewardEnabled', Boolean(value))"
        />
        <span class="mpm-rule-label">注册奖励</span>
        <span class="mpm-rule-text">新用户注册赠送</span>
        <InputNumber
          :value="form.registerRewardPoints ?? undefined"
          :disabled="!canManage || loading"
          :min="0"
          :precision="0"
          class="mpm-rule-input"
          @update:value="
            (value) =>
              emit('setRegisterRewardPoints', parseNullableNumber(value))
          "
        />
        <span class="mpm-rule-text">积分</span>
      </div>

      <div class="mpm-rule-row">
        <Switch
          :checked="form.isSigninRewardEnabled"
          :disabled="!canManage || loading"
          @change="(value) => emit('setSigninRewardEnabled', Boolean(value))"
        />
        <span class="mpm-rule-label">签到奖励</span>
        <span class="mpm-rule-text">每日签到奖励</span>
        <InputNumber
          :value="form.signinRewardPoints ?? undefined"
          :disabled="!canManage || loading"
          :min="0"
          :precision="0"
          class="mpm-rule-input"
          @update:value="
            (value) => emit('setSigninRewardPoints', parseNullableNumber(value))
          "
        />
        <span class="mpm-rule-text">积分</span>
      </div>
    </Card>

    <Card class="mpm-card">
      <div class="mpm-section-title">积分有效期</div>
      <div class="mpm-pill-row">
        <button
          type="button"
          class="mpm-pill"
          :class="{ checked: form.expiryMode === 'permanent' }"
          :disabled="!canManage || loading"
          @click="emit('setExpiryMode', 'permanent')"
        >
          永久有效
        </button>
        <button
          type="button"
          class="mpm-pill"
          :class="{ checked: form.expiryMode === 'yearly_clear' }"
          :disabled="!canManage || loading"
          @click="emit('setExpiryMode', 'yearly_clear')"
        >
          按年清零
        </button>
      </div>
      <div v-if="form.expiryMode === 'yearly_clear'" class="mpm-form-hint">
        每年12月31日清零当年获得的积分，请提前通知会员
      </div>
    </Card>

    <div class="mpm-save-bar">
      <Button
        type="primary"
        size="large"
        :loading="submitting"
        :disabled="!canManage || loading"
        @click="emit('save')"
      >
        保存规则
      </Button>
    </div>
  </div>
</template>
