<template>
  <AdminLayout currentPage="signin-rule">
    <view class="signin-rule-page">
      <view class="header-card">
        <text class="title">签到规则设置</text>
        <text class="sub-title">配置每日签到奖励及连续签到阶梯奖励</text>
      </view>

      <view class="form-card border-shadow">
        <!-- 1. 功能开关 -->
        <view class="form-item">
          <view class="label-box"><text class="label-txt">是否开启:</text></view>
          <view class="input-box">
            <switch :checked="form.is_enabled" color="#2d8cf0" @change="e => form.is_enabled = e.detail.value" />
            <text class="hint-txt">开启后，用户可在移动端进行每日签到获取积分</text>
          </view>
        </view>

        <!-- 2. 每日奖励 -->
        <view class="form-item">
          <view class="label-box"><text class="label-txt">每日签到积分:</text></view>
          <view class="input-box">
            <input class="input-base" type="number" v-model="form.daily_points" placeholder="请输入积分数" />
            <text class="hint-txt">用户每天签到可获得的固定积分奖励</text>
          </view>
        </view>

        <!-- 3. 连续签到奖励 -->
        <view class="form-item align-start">
          <view class="label-box"><text class="label-txt">连续签到奖励:</text></view>
          <view class="input-box">
            <view class="reward-steps">
              <view class="step-header">
                <text class="th flex-1">连续天数</text>
                <text class="th flex-1">额外奖励积分</text>
                <text class="th" style="width: 60px;">操作</text>
              </view>
              <view v-for="(item, index) in form.continuous_rewards" :key="index" class="step-row">
                <view class="td flex-1">
                  <input class="inner-input" type="number" v-model="item.day" placeholder="天数" />
                </view>
                <view class="td flex-1">
                  <input class="inner-input" type="number" v-model="item.points" placeholder="积分" />
                </view>
                <view class="td" style="width: 60px;">
                  <text class="btn-del" @click="removeRewardStep(index)">删除</text>
                </view>
              </view>
              <view class="btn-add-step" @click="addRewardStep">
                <text class="add-txt">+ 添加阶梯奖励</text>
              </view>
            </view>
            <text class="hint-txt">配置连续签到奖励，例如：连续 3 天额外奖励 20 积分</text>
          </view>
        </view>

        <!-- 4. 规则说明 -->
        <view class="form-item align-start">
          <view class="label-box"><text class="label-txt">规则说明:</text></view>
          <view class="input-box">
            <textarea class="textarea-base" v-model="form.rules_description" placeholder="请输入签到规则说明" />
            <text class="hint-txt">显示在移动端签到页面的说明文字</text>
          </view>
        </view>

        <!-- 提交按钮 -->
        <view class="footer-btns">
          <button class="btn-submit" @click="handleSave" :loading="isSaving">保存设置</button>
        </view>
      </view>
    </view>
  </AdminLayout>
</template>

<script setup lang="uts">
import { ref, reactive, onMounted } from 'vue'
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
import { fetchSignInConfig, saveSignInConfig, SignInConfig, SignInReward } from '@/services/admin/marketingService.uts'

const isSaving = ref(false)
const isLoading = ref(false)

const form = reactive<SignInConfig>({
  is_enabled: true,
  daily_points: 10,
  continuous_rewards: [] as SignInReward[],
  rules_description: '1.每日签到可获得积分奖励；\n2.连续签到满足天数可获得额外阶梯奖励；\n3.签到中断将重新从第一天开始计算。'
})

onMounted(() => {
  loadConfig()
})

async function loadConfig() {
  isLoading.value = true
  try {
    const res = await fetchSignInConfig()
    if (res != null) {
      form.is_enabled = res.is_enabled
      form.daily_points = res.daily_points
      form.continuous_rewards = res.continuous_rewards
      form.rules_description = res.rules_description
    }
  } catch (e) {
    console.error('加载签到配置失败:', e)
  } finally {
    isLoading.value = false
  }
}

function addRewardStep() {
  form.continuous_rewards.push({
    day: 0,
    points: 0
  } as SignInReward)
}

function removeRewardStep(index: number) {
  form.continuous_rewards.splice(index, 1)
}

async function handleSave() {
  if (isSaving.value) return
  
  // 基础校验
  if (form.daily_points < 0) {
    uni.showToast({ title: '每日积分不能为负数', icon: 'none' })
    return
  }

  isSaving.value = true
  try {
    const success = await saveSignInConfig(form as SignInConfig)
    if (success) {
      uni.showToast({ title: '保存成功', icon: 'success' })
    } else {
      uni.showToast({ title: '保存失败', icon: 'none' })
    }
  } catch (e) {
    uni.showToast({ title: '操作异常', icon: 'none' })
  } finally {
    isSaving.value = false
  }
}
</script>

<style scoped lang="scss">
.signin-rule-page {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.header-card {
  margin-bottom: 20px;
  .title { font-size: 20px; font-weight: bold; color: #333; }
  .sub-title { font-size: 14px; color: #999; margin-top: 4px; }
}

.form-card {
  background-color: #fff;
  padding: 40px;
  border-radius: 4px;
}

.border-shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 32px;
  &.align-start { align-items: flex-start; }
}

.label-box {
  width: 140px;
  text-align: right;
  margin-right: 24px;
  .label-txt { font-size: 14px; color: #333; font-weight: 500; }
}

.input-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 600px;
}

.input-base {
  height: 36px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
  width: 200px;
}

.textarea-base {
  height: 120px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
  width: 100%;
}

.hint-txt { font-size: 12px; color: #999; margin-top: 8px; }

/* 奖励阶梯样式 */
.reward-steps {
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.step-header {
  display: flex;
  flex-direction: row;
  background-color: #f8f9fa;
  height: 40px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  .th { font-size: 13px; font-weight: bold; color: #666; text-align: center; }
}

.step-row {
  display: flex;
  flex-direction: row;
  height: 48px;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  .td { display: flex; justify-content: center; }
}

.inner-input {
  width: 80px;
  height: 28px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
}

.btn-del { font-size: 13px; color: #f5222d; cursor: pointer; }

.btn-add-step {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  .add-txt { font-size: 13px; color: #2d8cf0; }
}

.footer-btns {
  margin-top: 40px;
  padding-left: 164px;
  .btn-submit {
    background-color: #2d8cf0;
    color: #fff;
    border: none;
    padding: 0 32px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
  }
}

.flex-1 { flex: 1; }
</style>
