<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,
  Modal,
  Select,
  Space,
  Spin,
  Switch,
  Table,
  Tabs,
  TabPane,
  Tag,
  message,
} from 'antdv-next';

import {
  getVoiceRoomRedPacketConfig,
  pageVoiceRoomRedPacketRecords,
  retryVoiceRoomRedPacketRefund,
  saveVoiceRoomRedPacketConfig,
} from '#/api/legacy/resident-activity';
import { getAllowedSysOrigins } from '#/views/system/shared';

defineOptions({ name: 'ResidentVoiceRoomRedPacketPage' });

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

const activeTab = ref('config');
const loading = ref(false);
const recordLoading = ref(false);
const saving = ref(false);
const selectedSysOrigin = ref('');

const form = reactive<Record<string, any>>({
  amountOptionsText: '15000,30000,70000,100000',
  configured: false,
  countOptionsText: '5,10,20,50',
  dailySendLimit: 10,
  delaySeconds: 300,
  enabled: false,
  refundAfterSeconds: 7200,
  sysOrigin: '',
  timezone: 'Asia/Riyadh',
  updateTime: '',
});

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

const recordPage = reactive<Record<string, any>>({
  records: [],
  total: 0,
});

const statusOptions = [
  { label: '全部', value: '' },
  { label: '初始化', value: 'INIT' },
  { label: '生效中', value: 'ACTIVE' },
  { label: '已抢完', value: 'FINISHED' },
  { label: '已过期', value: 'EXPIRED' },
  { label: '已退款', value: 'REFUNDED' },
  { label: '退款失败', value: 'REFUND_FAILED' },
  { label: '失败', value: 'FAILED' },
];

const recordColumns = [
  { dataIndex: 'packetNo', key: 'packetNo', title: '红包号', width: 190 },
  { dataIndex: 'status', key: 'status', title: '状态', width: 110 },
  { dataIndex: 'packetMode', key: 'packetMode', title: '形式', width: 100 },
  { dataIndex: 'senderUserId', key: 'senderUserId', title: '发送人', width: 140 },
  { dataIndex: 'roomId', key: 'roomId', title: '房间ID', width: 160 },
  { dataIndex: 'amount', key: 'amount', title: '金额 / 剩余', width: 180 },
  { dataIndex: 'count', key: 'count', title: '数量 / 剩余', width: 150 },
  { dataIndex: 'refundStatus', key: 'refundStatus', title: '退款', width: 120 },
  { dataIndex: 'createTime', key: 'createTime', title: '发送时间', width: 180 },
  { dataIndex: 'actions', key: 'actions', title: '操作', width: 120 },
];

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

function parseNumberList(value: string, fieldName: string) {
  const values = String(value || '')
    .split(',')
    .map((item) => Number(String(item).trim()))
    .filter((item) => Number.isFinite(item));
  if (values.length === 0) {
    message.warning(`请配置${fieldName}`);
    return [];
  }
  if (values.some((item) => item <= 0 || !Number.isInteger(item))) {
    message.warning(`${fieldName}必须是正整数，多个值用英文逗号分隔`);
    return [];
  }
  return Array.from(new Set(values));
}

function listText(values: unknown, fallback: string) {
  if (Array.isArray(values) && values.length > 0) {
    return values.map((item) => String(item)).join(',');
  }
  return fallback;
}

function normalizeConfig(result: null | Record<string, any> | undefined) {
  const value = result || {};
  form.amountOptionsText = listText(value.amountOptions, '15000,30000,70000,100000');
  form.configured = Boolean(value.configured);
  form.countOptionsText = listText(value.countOptions, '5,10,20,50');
  form.dailySendLimit = Number(value.dailySendLimit || 10);
  form.delaySeconds = Number(value.delaySeconds || 300);
  form.enabled = Boolean(value.enabled);
  form.refundAfterSeconds = Number(value.refundAfterSeconds || 7200);
  form.sysOrigin = String(value.sysOrigin || selectedSysOrigin.value || '');
  form.timezone = String(value.timezone || 'Asia/Riyadh');
  form.updateTime = String(value.updateTime || '');
}

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

async function submitForm() {
  const amountOptions = parseNumberList(form.amountOptionsText, '红包金额');
  const countOptions = parseNumberList(form.countOptionsText, '红包数量');
  if (amountOptions.length === 0 || countOptions.length === 0) {
    return;
  }
  if (Number(form.refundAfterSeconds || 0) <= Number(form.delaySeconds || 0)) {
    message.warning('退款时间必须大于延时领取时间');
    return;
  }
  saving.value = true;
  try {
    await saveVoiceRoomRedPacketConfig({
      amountOptions,
      countOptions,
      dailySendLimit: Number(form.dailySendLimit || 10),
      delaySeconds: Number(form.delaySeconds || 300),
      enabled: Boolean(form.enabled),
      refundAfterSeconds: Number(form.refundAfterSeconds || 7200),
      sysOrigin: selectedSysOrigin.value,
      timezone: String(form.timezone || '').trim() || 'Asia/Riyadh',
    });
    message.success('保存成功');
    await loadConfig();
  } finally {
    saving.value = false;
  }
}

function confirmSave() {
  Modal.confirm({
    async onOk() {
      await submitForm();
    },
    title: '确认保存当前系统的语音房红包配置？',
  });
}

async function loadRecords(reset = false) {
  if (!selectedSysOrigin.value) {
    return;
  }
  if (reset) {
    recordQuery.cursor = 1;
  }
  recordLoading.value = true;
  try {
    const result = await pageVoiceRoomRedPacketRecords({
      ...recordQuery,
      sysOrigin: selectedSysOrigin.value,
    });
    recordPage.records = Array.isArray(result.records) ? result.records : [];
    recordPage.total = Number(result.total || 0);
  } finally {
    recordLoading.value = false;
  }
}

function searchRecords() {
  void loadRecords(true);
}

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

async function handleRetryRefund(record: Record<string, any>) {
  const packetNo = String(record.packetNo || '');
  if (!packetNo) {
    return;
  }
  await retryVoiceRoomRedPacketRefund(packetNo);
  message.success('已提交重试');
  await loadRecords();
}

function statusColor(status: string) {
  switch (String(status || '').toUpperCase()) {
    case 'ACTIVE':
      return 'success';
    case 'FINISHED':
    case 'REFUNDED':
      return 'blue';
    case 'EXPIRED':
      return 'warning';
    case 'FAILED':
    case 'REFUND_FAILED':
      return 'error';
    default:
      return 'default';
  }
}

function refundColor(status: string) {
  switch (String(status || '').toUpperCase()) {
    case 'SUCCESS':
      return 'success';
    case 'FAILED':
      return 'error';
    case 'PENDING':
      return 'processing';
    default:
      return 'default';
  }
}

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

watch(
  selectedSysOrigin,
  (value) => {
    if (value) {
      void loadConfig();
      if (activeTab.value === 'records') {
        void loadRecords(true);
      }
    }
  },
  { immediate: true },
);

watch(activeTab, (value) => {
  if (value === 'records') {
    void loadRecords(true);
  }
});
</script>

<template>
  <Page title="红包">
    <div class="voice-room-red-packet-page">
      <Card>
        <Space wrap>
          <span>系统</span>
          <Select
            v-model:value="selectedSysOrigin"
            :options="sysOriginOptions"
            style="width: 180px"
          />
          <Tag :color="statusMeta.color">{{ statusMeta.text }}</Tag>
          <span v-if="form.updateTime" class="muted-text">
            更新时间：{{ form.updateTime }}
          </span>
        </Space>
      </Card>

      <Tabs v-model:active-key="activeTab">
        <TabPane key="config" tab="配置">
          <Spin :spinning="loading">
            <Card>
              <div class="config-grid">
                <label class="field-row">
                  <span>启用红包</span>
                  <Switch v-model:checked="form.enabled" />
                </label>
                <label class="field-row">
                  <span>每日发送次数</span>
                  <InputNumber
                    v-model:value="form.dailySendLimit"
                    :min="1"
                    :precision="0"
                    class="field-control"
                  />
                </label>
                <label class="field-row">
                  <span>延时领取秒数</span>
                  <InputNumber
                    v-model:value="form.delaySeconds"
                    :min="0"
                    :precision="0"
                    class="field-control"
                  />
                </label>
                <label class="field-row">
                  <span>退款等待秒数</span>
                  <InputNumber
                    v-model:value="form.refundAfterSeconds"
                    :min="1"
                    :precision="0"
                    class="field-control"
                  />
                </label>
                <label class="field-row">
                  <span>活动时区</span>
                  <Input v-model:value="form.timezone" class="field-control" />
                </label>
                <label class="field-row field-wide">
                  <span>红包金额</span>
                  <Input
                    v-model:value="form.amountOptionsText"
                    class="field-control"
                    placeholder="15000,30000,70000,100000"
                  />
                </label>
                <label class="field-row field-wide">
                  <span>红包数量</span>
                  <Input
                    v-model:value="form.countOptionsText"
                    class="field-control"
                    placeholder="5,10,20,50"
                  />
                </label>
              </div>

              <div class="actions">
                <Space>
                  <Button @click="loadConfig">刷新</Button>
                  <Button type="primary" :loading="saving" @click="confirmSave">
                    保存配置
                  </Button>
                </Space>
              </div>
            </Card>
          </Spin>
        </TabPane>

        <TabPane key="records" tab="发包记录">
          <Card>
            <Space wrap class="record-toolbar">
              <Select
                v-model:value="recordQuery.status"
                :options="statusOptions"
                style="width: 140px"
              />
              <Input
                v-model:value="recordQuery.userId"
                allow-clear
                placeholder="发送人ID"
                style="width: 180px"
              />
              <Button type="primary" @click="searchRecords">查询</Button>
              <Button @click="loadRecords()">刷新</Button>
            </Space>

            <Table
              :columns="recordColumns"
              :data-source="recordPage.records"
              :loading="recordLoading"
              :pagination="{
                current: recordQuery.cursor,
                pageSize: recordQuery.limit,
                showSizeChanger: true,
                total: recordPage.total,
              }"
              :scroll="{ x: 1360 }"
              row-key="packetNo"
              @change="handleRecordTableChange"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'status'">
                  <Tag :color="statusColor(record.status)">
                    {{ record.status || '-' }}
                  </Tag>
                </template>
                <template v-else-if="column.key === 'amount'">
                  {{ record.totalAmount || 0 }} / {{ record.remainAmount || 0 }}
                </template>
                <template v-else-if="column.key === 'count'">
                  {{ record.totalCount || 0 }} / {{ record.remainCount || 0 }}
                </template>
                <template v-else-if="column.key === 'refundStatus'">
                  <Tag :color="refundColor(record.refundStatus)">
                    {{ record.refundStatus || 'NONE' }}
                  </Tag>
                </template>
                <template v-else-if="column.key === 'actions'">
                  <Button
                    v-if="record.refundStatus === 'FAILED'"
                    size="small"
                    @click="handleRetryRefund(record)"
                  >
                    重试退款
                  </Button>
                </template>
              </template>
            </Table>
          </Card>
        </TabPane>
      </Tabs>
    </div>
  </Page>
</template>

<style scoped>
.voice-room-red-packet-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.muted-text {
  color: rgb(0 0 0 / 45%);
  font-size: 13px;
}

.config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 18px 24px;
  max-width: 920px;
}

.field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.field-row > span {
  flex: 0 0 120px;
  color: rgb(0 0 0 / 65%);
}

.field-control {
  flex: 1;
}

.field-wide {
  grid-column: span 2;
}

.actions {
  margin-top: 24px;
}

.record-toolbar {
  margin-bottom: 16px;
}
</style>
