<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';

import { Page } from '@vben/common-ui';
import { useAccessStore } from '@vben/stores';

import {
  Button,
  Card,
  Input,
  InputNumber,
  message,
  Modal,
  Select,
  Space,
  Spin,
  Switch,
  Table,
  Tabs,
  TabPane,
  Tag,
} from 'antdv-next';

import {
  getResidentRechargeRewardConfig,
  pageResidentRechargeRewardClaimRecords,
  saveResidentRechargeRewardConfig,
} from '#/api/legacy/resident-activity';
import ActivityResourceGroupSelectDrawer from '#/views/props/components/activity-resource-group-select-drawer.vue';
import RewardRow from '#/views/props/components/reward-row.vue';
import { getAllowedSysOrigins } from '#/views/system/shared';

defineOptions({ name: 'ResidentRechargeRewardConfigPage' });

let localRowId = 0;

function createRowKey(seed?: number | string) {
  localRowId += 1;
  return `recharge-reward-${seed || localRowId}-${localRowId}`;
}

function createLevel(level = 1, rechargeAmount = 100, rewardGold = 0) {
  return {
    enabled: true,
    id: null,
    level,
    rechargeAmount,
    rechargeAmountCents: 0,
    rewardGold,
    rewardGroupId: null,
    rewardGroupName: '',
    rewardItems: [] as Array<Record<string, any>>,
    rowKey: createRowKey(),
  };
}

function defaultLevels() {
  return [
    createLevel(1, 100, 0),
    createLevel(2, 500, 0),
    createLevel(3, 1000, 0),
  ];
}

const accessStore = useAccessStore();
const sysOriginOptions = computed(() => {
  const options = getAllowedSysOrigins(accessStore.accessCodes || []);
  return options.length > 0 ? options : getAllowedSysOrigins([]);
});

const selectedSysOrigin = ref('');
const activeTab = ref('config');
const loading = ref(false);
const recordLoading = ref(false);
const saving = ref(false);
const groupPickerOpen = ref(false);
const pickerLevelIndex = ref(-1);

const form = reactive<Record<string, any>>({
  configured: false,
  enabled: false,
  id: 0,
  levelConfigs: defaultLevels(),
  sysOrigin: '',
  timezone: 'Asia/Riyadh',
  updateTime: '',
});

const levelColumns = [
  { dataIndex: 'enabled', key: 'enabled', title: '启用', width: 90 },
  { dataIndex: 'level', key: 'level', title: '档位', width: 110 },
  { dataIndex: 'rechargeAmount', key: 'rechargeAmount', title: '充值金额', width: 180 },
  { dataIndex: 'rewardGold', key: 'rewardGold', title: '奖励金币', width: 180 },
  { dataIndex: 'rewardGroup', key: 'rewardGroup', title: '奖励组', width: 360 },
  { dataIndex: 'actions', key: 'actions', title: '操作', width: 100 },
];

const enabledLevelCount = computed(() =>
  (form.levelConfigs || []).filter((item: Record<string, any>) => item.enabled !== false).length,
);

const statusMeta = computed(() => {
  if (!form.configured) {
    return { color: 'processing', text: '未配置' };
  }
  if (form.enabled) {
    return { color: 'success', text: '已启用' };
  }
  return { color: 'default', text: '已关闭' };
});

const recordQuery = reactive<Record<string, any>>({
  cursor: 1,
  limit: 20,
  month: '',
  userId: '',
});

const recordPage = reactive<Record<string, any>>({
  current: 1,
  month: '',
  records: [],
  size: 20,
  timezone: '',
  total: 0,
});

const recordColumns = [
  { dataIndex: 'user', key: 'user', title: '用户', width: 280 },
  { dataIndex: 'rechargeMonth', key: 'rechargeMonth', title: '统计月份', width: 120 },
  { dataIndex: 'rechargeAmount', key: 'rechargeAmount', title: '充值金额', width: 140 },
  { dataIndex: 'reachedLevels', key: 'reachedLevels', title: '达到档位', width: 300 },
  { dataIndex: 'claimedRewards', key: 'claimedRewards', title: '领取奖励', width: 420 },
  { dataIndex: 'lastRechargeTime', key: 'lastRechargeTime', title: '最后充值时间', width: 180 },
];

function toAmountCents(value: number | string | undefined) {
  const numeric = Number(value || 0);
  if (!Number.isFinite(numeric)) {
    return 0;
  }
  return Math.round(numeric * 100);
}

function formatAmount(value: number | string | undefined) {
  const numeric = Number(value || 0);
  return Number.isFinite(numeric) ? numeric.toFixed(2) : '0.00';
}

function normalizeConfig(result: null | Record<string, any> | undefined) {
  const value = result || {};
  form.configured = Boolean(value.configured);
  form.enabled = Boolean(value.enabled);
  form.id = value.id || 0;
  form.sysOrigin = String(value.sysOrigin || selectedSysOrigin.value || '');
  form.timezone = String(value.timezone || 'Asia/Riyadh');
  form.updateTime = String(value.updateTime || '');
  const levels = Array.isArray(value.levelConfigs) && value.levelConfigs.length > 0
    ? value.levelConfigs
    : defaultLevels();
  form.levelConfigs = levels
    .map((item: Record<string, any>, index: number) => {
      const rechargeAmount = Number(
        item.rechargeAmount ?? Number(item.rechargeAmountCents || 0) / 100,
      );
      return {
        enabled: item.enabled !== false,
        id: item.id ?? null,
        level: Number(item.level || index + 1),
        rechargeAmount: Number.isFinite(rechargeAmount) ? rechargeAmount : 0,
        rechargeAmountCents: Number(item.rechargeAmountCents || 0),
        rewardGold: Number(item.rewardGold || 0),
        rewardGroupId: item.rewardGroupId ?? null,
        rewardGroupName: String(item.rewardGroupName || ''),
        rewardItems: Array.isArray(item.rewardItems) ? item.rewardItems : [],
        rowKey: createRowKey(item.id || index),
      };
    })
    .toSorted((left: Record<string, any>, right: Record<string, any>) =>
      toAmountCents(left.rechargeAmount) - toAmountCents(right.rechargeAmount),
    );
}

async function loadConfig() {
  if (!selectedSysOrigin.value) {
    return;
  }
  loading.value = true;
  try {
    const result = await getResidentRechargeRewardConfig(selectedSysOrigin.value);
    normalizeConfig(result);
  } finally {
    loading.value = false;
  }
}

function normalizeRecordPage(result: null | Record<string, any> | undefined) {
  const value = result || {};
  recordPage.records = Array.isArray(value.records) ? value.records : [];
  recordPage.total = Number(value.total || 0);
  recordPage.current = Number(value.current || 1);
  recordPage.size = Number(value.size || 20);
  recordPage.month = String(value.month || '');
  recordPage.timezone = String(value.timezone || '');
  if (!recordQuery.month && recordPage.month) {
    recordQuery.month = recordPage.month;
  }
}

async function loadClaimRecords() {
  if (!selectedSysOrigin.value) {
    return;
  }
  recordLoading.value = true;
  try {
    const result = await pageResidentRechargeRewardClaimRecords({
      ...recordQuery,
      sysOrigin: selectedSysOrigin.value,
    });
    normalizeRecordPage(result);
  } finally {
    recordLoading.value = false;
  }
}

function addLevel() {
  const levels = form.levelConfigs as Array<Record<string, any>>;
  const maxLevel = Math.max(0, ...levels.map((item) => Number(item.level || 0)));
  const maxAmount = Math.max(0, ...levels.map((item) => Number(item.rechargeAmount || 0)));
  levels.push(createLevel(maxLevel + 1, maxAmount + 100, 0));
}

function removeLevel(index: number) {
  (form.levelConfigs as Array<Record<string, any>>).splice(index, 1);
}

function confirmRemoveLevel(index: number) {
  Modal.confirm({
    onOk: () => removeLevel(index),
    title: '确认删除该充值奖励档位？',
  });
}

function openRewardPicker(index: number) {
  pickerLevelIndex.value = index;
  groupPickerOpen.value = true;
}

function clearRewardGroup(record: Record<string, any>) {
  record.rewardGroupId = null;
  record.rewardGroupName = '';
  record.rewardItems = [];
}

function handleRewardGroupSelect(row: Record<string, any>) {
  const levels = form.levelConfigs as Array<Record<string, any>>;
  const target = levels[pickerLevelIndex.value];
  if (!target) {
    groupPickerOpen.value = false;
    return;
  }
  target.rewardGroupId = row.id;
  target.rewardGroupName = row.name;
  target.rewardItems = Array.isArray(row.rewardConfigList) ? row.rewardConfigList : [];
  groupPickerOpen.value = false;
}

function validateBeforeSave() {
  const levels = form.levelConfigs as Array<Record<string, any>>;
  if (levels.length === 0) {
    message.warning('请至少配置一个充值奖励档位');
    return false;
  }
  const seenLevels = new Set<string>();
  const seenAmounts = new Set<string>();
  for (const item of levels) {
    const level = Number(item.level || 0);
    const amountCents = toAmountCents(item.rechargeAmount);
    const rewardGold = Number(item.rewardGold || 0);
    const rewardGroupId = Number(item.rewardGroupId || 0);
    if (level <= 0) {
      message.warning('档位必须大于 0');
      return false;
    }
    if (amountCents <= 0) {
      message.warning('充值金额必须大于 0');
      return false;
    }
    if (rewardGold <= 0 && rewardGroupId <= 0) {
      message.warning('每个档位至少要配置金币或奖励组');
      return false;
    }
    if (seenLevels.has(String(level))) {
      message.warning('档位不能重复');
      return false;
    }
    if (seenAmounts.has(String(amountCents))) {
      message.warning('充值金额不能重复');
      return false;
    }
    seenLevels.add(String(level));
    seenAmounts.add(String(amountCents));
  }
  if (form.enabled && enabledLevelCount.value === 0) {
    message.warning('启用配置时至少要启用一个充值奖励档位');
    return false;
  }
  return true;
}

async function submitForm() {
  if (!validateBeforeSave()) {
    return;
  }
  saving.value = true;
  try {
    await saveResidentRechargeRewardConfig({
      enabled: Boolean(form.enabled),
      id: form.id || 0,
      levelConfigs: (form.levelConfigs || []).map((item: Record<string, any>) => ({
        enabled: item.enabled !== false,
        id: item.id || 0,
        level: Number(item.level || 0),
        rechargeAmount: formatAmount(item.rechargeAmount),
        rechargeAmountCents: toAmountCents(item.rechargeAmount),
        rewardGold: Number(item.rewardGold || 0),
        rewardGroupId: item.rewardGroupId ?? null,
        rewardGroupName: String(item.rewardGroupName || ''),
      })),
      sysOrigin: selectedSysOrigin.value,
      timezone: String(form.timezone || '').trim(),
    });
    message.success('保存成功');
    await loadConfig();
    if (activeTab.value === 'claims') {
      await loadClaimRecords();
    }
  } finally {
    saving.value = false;
  }
}

function searchClaimRecords() {
  recordQuery.cursor = 1;
  void loadClaimRecords();
}

function handleClaimTableChange(pagination: Record<string, any>) {
  recordQuery.cursor = Number(pagination.current || 1);
  recordQuery.limit = Number(pagination.pageSize || 20);
  void loadClaimRecords();
}

function avatarBackgroundStyle(url: string) {
  return {
    backgroundImage: `url("${String(url || '').replaceAll('"', '%22')}")`,
  };
}

function rewardText(item: Record<string, any>) {
  const parts: string[] = [];
  const rewardGold = Number(item.rewardGold || 0);
  if (rewardGold > 0) {
    parts.push(`${rewardGold} 金币`);
  }
  if (item.rewardGroupName || item.rewardGroupId) {
    parts.push(item.rewardGroupName || `奖励组 ${item.rewardGroupId}`);
  }
  const rewardItems = Array.isArray(item.rewardItems) ? item.rewardItems : [];
  if (rewardItems.length > 0) {
    parts.push(
      rewardItems
        .map((reward: Record<string, any>) => {
          const name = reward.name || reward.type || reward.content || '奖励';
          const quantity = Number(reward.quantity || 0);
          return quantity > 0 ? `${name} x${quantity}` : String(name);
        })
        .join('、'),
    );
  }
  return parts.length > 0 ? parts.join(' / ') : '-';
}

watch(
  sysOriginOptions,
  (options) => {
    if (!selectedSysOrigin.value) {
      selectedSysOrigin.value = String(options[0]?.value || '');
    }
  },
  { immediate: true },
);

watch(
  selectedSysOrigin,
  (value) => {
    if (value) {
      recordQuery.cursor = 1;
      void loadConfig();
      void loadClaimRecords();
    }
  },
  { immediate: true },
);

watch(activeTab, (value) => {
  if (value === 'claims') {
    void loadClaimRecords();
  }
});
</script>

<template>
  <Page auto-content-height>
    <Spin :spinning="loading">
      <Card :bordered="false" title="充值奖励配置">
        <div class="toolbar">
          <Select
            v-model:value="selectedSysOrigin"
            :options="sysOriginOptions"
            option-filter-prop="label"
            option-label-prop="label"
            placeholder="请选择系统"
            show-search
            style="width: 180px"
          />
          <Tag :color="statusMeta.color">{{ statusMeta.text }}</Tag>
          <Tag color="processing">按自然月累计充值</Tag>
          <Button :loading="loading" @click="loadConfig">刷新</Button>
        </div>

        <Tabs v-model:activeKey="activeTab">
          <TabPane key="config" tab="奖励配置">
            <div class="config-row">
              <Space align="center" wrap>
                <span class="field-label">启用</span>
                <Switch v-model:checked="form.enabled" />
                <span class="field-label">统计时区</span>
                <Input v-model:value="form.timezone" style="width: 180px" />
                <span class="sub-text">更新时间：{{ form.updateTime || '-' }}</span>
              </Space>
            </div>

            <Table
              :columns="levelColumns"
              :data-source="form.levelConfigs"
              :loading="loading"
              :pagination="false"
              row-key="rowKey"
              :scroll="{ x: 1020 }"
            >
              <template #bodyCell="{ column, index, record }">
                <template v-if="column.key === 'enabled'">
                  <Switch v-model:checked="record.enabled" />
                </template>
                <template v-else-if="column.key === 'level'">
                  <InputNumber
                    v-model:value="record.level"
                    :min="1"
                    :precision="0"
                    style="width: 90px"
                  />
                </template>
                <template v-else-if="column.key === 'rechargeAmount'">
                  <InputNumber
                    v-model:value="record.rechargeAmount"
                    :min="0.01"
                    :precision="2"
                    style="width: 140px"
                  />
                </template>
                <template v-else-if="column.key === 'rewardGold'">
                  <InputNumber
                    v-model:value="record.rewardGold"
                    :min="0"
                    :precision="0"
                    style="width: 140px"
                  />
                </template>
                <template v-else-if="column.key === 'rewardGroup'">
                  <div class="reward-group-cell">
                    <Space wrap>
                      <Button size="small" @click="openRewardPicker(index)">
                        {{ record.rewardGroupId ? '更换奖励组' : '选择奖励组' }}
                      </Button>
                      <Button
                        v-if="record.rewardGroupId"
                        danger
                        size="small"
                        type="link"
                        @click="clearRewardGroup(record)"
                      >
                        清空
                      </Button>
                    </Space>
                    <div v-if="record.rewardGroupId" class="reward-group-name">
                      {{ record.rewardGroupName || '-' }} (ID: {{ record.rewardGroupId }})
                    </div>
                    <div v-else class="sub-text">未选择奖励组</div>
                    <RewardRow v-if="record.rewardItems?.length" :list="record.rewardItems" />
                  </div>
                </template>
                <template v-else-if="column.key === 'actions'">
                  <Button danger type="link" @click="confirmRemoveLevel(index)">删除</Button>
                </template>
              </template>
            </Table>

            <div class="actions">
              <Button @click="addLevel">新增档位</Button>
              <Button :loading="saving" type="primary" @click="submitForm">保存配置</Button>
            </div>
          </TabPane>

          <TabPane key="claims" tab="已领取人员">
            <div class="toolbar">
              <Input
                v-model:value="recordQuery.month"
                allow-clear
                placeholder="YYYY-MM"
                style="width: 140px"
              />
              <Input
                v-model:value="recordQuery.userId"
                allow-clear
                placeholder="用户长ID"
                style="width: 180px"
              />
              <Button :loading="recordLoading" type="primary" @click="searchClaimRecords">
                查询
              </Button>
            </div>
            <Table
              :columns="recordColumns"
              :data-source="recordPage.records"
              :loading="recordLoading"
              :pagination="{
                current: recordPage.current,
                pageSize: recordPage.size,
                showSizeChanger: true,
                total: recordPage.total,
              }"
              row-key="recordKey"
              :scroll="{ x: 1440 }"
              @change="handleClaimTableChange"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'user'">
                  <div class="user-cell">
                    <div
                      v-if="record.userAvatar"
                      class="user-avatar"
                      :style="avatarBackgroundStyle(record.userAvatar)"
                    />
                    <div class="user-main">
                      <div class="user-name">{{ record.userNickname || '-' }}</div>
                      <div class="sub-text">
                        {{ record.account || record.userId || '-' }}
                        <span v-if="record.countryCode"> · {{ record.countryCode }}</span>
                      </div>
                    </div>
                  </div>
                </template>
                <template v-else-if="column.key === 'rechargeAmount'">
                  {{ record.rechargeAmount || '0.00' }}
                </template>
                <template v-else-if="column.key === 'reachedLevels'">
                  <Space wrap>
                    <Tag
                      v-for="item in record.reachedLevels || []"
                      :key="`${record.recordKey}-level-${item.level}`"
                      color="success"
                    >
                      Lv{{ item.level }} / {{ item.rechargeAmount }}
                    </Tag>
                  </Space>
                </template>
                <template v-else-if="column.key === 'claimedRewards'">
                  <div class="reward-summary">
                    <div
                      v-for="item in record.claimedRewards || []"
                      :key="`${record.recordKey}-reward-${item.level}`"
                      class="reward-line"
                    >
                      Lv{{ item.level }}：{{ rewardText(item) }}
                    </div>
                  </div>
                </template>
              </template>
            </Table>
          </TabPane>
        </Tabs>
      </Card>

      <ActivityResourceGroupSelectDrawer
        :open="groupPickerOpen"
        :sys-origin="selectedSysOrigin"
        @close="groupPickerOpen = false"
        @select="handleRewardGroupSelect"
      />
    </Spin>
  </Page>
</template>

<style scoped>
.toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.config-row {
  margin-bottom: 16px;
}

.field-label {
  color: rgb(71 85 105);
  font-size: 13px;
}

.sub-text {
  color: rgb(100 116 139);
  font-size: 12px;
}

.reward-group-cell {
  min-width: 0;
}

.reward-group-name {
  color: rgb(15 23 42);
  font-size: 13px;
  margin-top: 8px;
}

.user-cell {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.user-avatar {
  background-color: rgb(226 232 240);
  background-position: center;
  background-size: cover;
  border-radius: 50%;
  flex: 0 0 auto;
  height: 36px;
  width: 36px;
}

.user-main {
  min-width: 0;
}

.user-name {
  color: rgb(15 23 42);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reward-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reward-line {
  color: rgb(15 23 42);
  font-size: 13px;
  line-height: 20px;
}

.actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>
