<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,
  TabPane,
  Tabs,
  Tag,
} from 'antdv-next';

import {
  getResidentDailyTaskConfig,
  pageResidentDailyTaskClaimRecords,
  pageResidentDailyTaskEvents,
  saveResidentDailyTaskConfig,
} from '#/api/legacy/resident-activity';
import { getAllowedSysOrigins } from '#/views/system/shared';

defineOptions({ name: 'ResidentDailyTaskConfigPage' });

let localRowId = 0;
let localConditionJumpRowId = 0;
const rechargeJumpPage = '/main/me/wallet/recharge';

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

function createConditionJumpRowKey(seed?: number | string) {
  localConditionJumpRowId += 1;
  return `condition-jump-${seed || localConditionJumpRowId}-${localConditionJumpRowId}`;
}

function createTask(sortOrder = 10) {
  return {
    conditionType: 'MIC_DURATION_SECONDS',
    cover: '',
    enabled: true,
    id: null,
    rewardGold: 0,
    rowKey: createRowKey(),
    sortOrder,
    targetUnit: 'second',
    targetValue: 60,
    taskCode: '',
    taskDesc: '进度 / 目标',
    taskIcon: '',
    taskName: '',
  };
}

function defaultTasks() {
  return [createTask(10)];
}

function defaultJumpType(conditionType: string) {
  return conditionType === 'RECHARGE_GOLD' ? 'RECHARGE_IN_APP' : 'ROOM_RANDOM_WITH_MIC';
}

function createConditionJump(sortOrder = 10, conditionType = 'MIC_DURATION_SECONDS') {
  return {
    conditionType,
    id: null,
    jumpPage: '',
    jumpType: defaultJumpType(conditionType),
    rowKey: createConditionJumpRowKey(conditionType),
    sortOrder,
    taskCategory: '',
  };
}

const conditionTypeOptions = [
  { label: '麦克风时长(秒)', value: 'MIC_DURATION_SECONDS' },
  { label: '游戏消耗金币', value: 'GAME_CONSUME_GOLD' },
  { label: '礼物消耗金币', value: 'GIFT_CONSUME_GOLD' },
  { label: '充值金币', value: 'RECHARGE_GOLD' },
];

const taskCategoryOptions = [
  { label: '每日任务', value: 'DAILY' },
  { label: '专属任务', value: 'NEWBIE' },
];

const jumpTypeOptions = [
  { label: '随机上麦房间', value: 'ROOM_RANDOM_WITH_MIC' },
  { label: '随机房间', value: 'ROOM_RANDOM' },
  { label: '充值页', value: 'RECHARGE_IN_APP' },
  { label: '端内路由', value: 'APP_ROUTE' },
  { label: 'H5 链接', value: 'H5_URL' },
  { label: '无跳转', value: 'NONE' },
];

const targetUnitOptions = [
  { label: '秒', value: 'second' },
  { label: '次', value: 'count' },
  { label: '金币', value: 'gold' },
];

const taskColumns = [
  { dataIndex: 'enabled', key: 'enabled', title: '启用', width: 80 },
  { dataIndex: 'taskCode', key: 'taskCode', title: '任务编码', width: 210 },
  { dataIndex: 'taskName', key: 'taskName', title: '任务名称', width: 220 },
  { dataIndex: 'taskDesc', key: 'taskDesc', title: '说明', width: 160 },
  { dataIndex: 'conditionType', key: 'conditionType', title: '条件', width: 190 },
  { dataIndex: 'targetValue', key: 'targetValue', title: '目标', width: 130 },
  { dataIndex: 'targetUnit', key: 'targetUnit', title: '单位', width: 110 },
  { dataIndex: 'rewardGold', key: 'rewardGold', title: '奖励金币', width: 140 },
  { dataIndex: 'sortOrder', key: 'sortOrder', title: '排序', width: 110 },
  { dataIndex: 'actions', key: 'actions', title: '操作', width: 90 },
];

const conditionJumpColumns = [
  { dataIndex: 'conditionType', key: 'conditionType', title: '条件', width: 220 },
  { dataIndex: 'jumpType', key: 'jumpType', title: '跳转', width: 190 },
  { dataIndex: 'jumpPage', key: 'jumpPage', title: '跳转参数', width: 320 },
  { dataIndex: 'sortOrder', key: 'sortOrder', title: '排序', width: 120 },
  { dataIndex: 'actions', key: 'actions', title: '操作', width: 90 },
];

const claimColumns = [
  { dataIndex: 'userId', key: 'userId', title: '用户ID', width: 140 },
  { dataIndex: 'taskCode', key: 'taskCode', title: '任务编码', width: 220 },
  { dataIndex: 'taskName', key: 'taskName', title: '任务名称', width: 220 },
  { dataIndex: 'cycleKey', key: 'cycleKey', title: '周期', width: 130 },
  { dataIndex: 'rewardGold', key: 'rewardGold', title: '金币', width: 110 },
  { dataIndex: 'status', key: 'status', title: '状态', width: 110 },
  { dataIndex: 'walletEventId', key: 'walletEventId', title: '钱包事件ID', width: 260 },
  { dataIndex: 'failureReason', key: 'failureReason', title: '失败原因', width: 220 },
  { dataIndex: 'createTime', key: 'createTime', title: '创建时间', width: 180 },
];

const eventColumns = [
  { dataIndex: 'eventId', key: 'eventId', title: '事件ID', width: 260 },
  { dataIndex: 'userId', key: 'userId', title: '用户ID', width: 140 },
  { dataIndex: 'eventType', key: 'eventType', title: '事件类型', width: 190 },
  { dataIndex: 'taskCode', key: 'taskCode', title: '命中任务', width: 220 },
  { dataIndex: 'deltaValue', key: 'deltaValue', title: '增量', width: 100 },
  { dataIndex: 'cycleKey', key: 'cycleKey', title: '周期', width: 130 },
  { dataIndex: 'occurredAt', key: 'occurredAt', title: '发生时间', width: 180 },
  { dataIndex: 'createTime', key: 'createTime', title: '入库时间', width: 180 },
];

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

const selectedSysOrigin = ref('');
const activeTaskCategory = ref('DAILY');
const activeTab = ref('config');
const loading = ref(false);
const saving = ref(false);
const claimLoading = ref(false);
const eventLoading = ref(false);

const form = reactive<Record<string, any>>({
  conditionJumps: [],
  configured: false,
  enabled: false,
  id: 0,
  sysOrigin: '',
  taskCategory: 'DAILY',
  tasks: defaultTasks(),
  timezone: 'Asia/Riyadh',
  updateTime: '',
});

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

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

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

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

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

const activeTaskCategoryLabel = computed(() => {
  return taskCategoryOptions.find((item) => item.value === activeTaskCategory.value)?.label || '每日任务';
});

function normalizeConditionJumpRows(
  rows: Array<Record<string, any>>,
  tasks: Array<Record<string, any>>,
) {
  const result = rows.map((item: Record<string, any>, index: number) => {
    const conditionType = String(item.conditionType || 'MIC_DURATION_SECONDS');
    return {
      conditionType,
      id: item.id ?? null,
      jumpPage: String(item.jumpPage || ''),
      jumpType: String(item.jumpType || defaultJumpType(conditionType)),
      rowKey: createConditionJumpRowKey(item.id || conditionType || index),
      sortOrder: Number(item.sortOrder || (index + 1) * 10),
      taskCategory: String(item.taskCategory || activeTaskCategory.value),
    };
  });

  const seenConditions = new Set(result.map((item) => String(item.conditionType || '')));
  for (const task of tasks) {
    const conditionType = String(task.conditionType || '').trim();
    if (!conditionType || seenConditions.has(conditionType)) {
      continue;
    }
    result.push(createConditionJump((result.length + 1) * 10, conditionType));
    seenConditions.add(conditionType);
  }

  if (result.length === 0) {
    result.push(createConditionJump(10));
  }

  return result.toSorted((left: Record<string, any>, right: Record<string, any>) =>
    Number(left.sortOrder || 0) - Number(right.sortOrder || 0),
  );
}

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.taskCategory = activeTaskCategory.value;
  form.timezone = String(value.timezone || 'Asia/Riyadh');
  form.updateTime = String(value.updateTime || '');
  const rows = Array.isArray(value.tasks) && value.tasks.length > 0
    ? value.tasks
    : defaultTasks();
  const normalizedTasks = rows
    .map((item: Record<string, any>, index: number) => ({
      conditionType: String(item.conditionType || 'MIC_DURATION_SECONDS'),
      cover: String(item.cover || ''),
      enabled: item.enabled !== false,
      id: item.id ?? null,
      rewardGold: Number(item.rewardGold || 0),
      rowKey: createRowKey(item.id || index),
      sortOrder: Number(item.sortOrder || (index + 1) * 10),
      targetUnit: String(item.targetUnit || 'second'),
      targetValue: Number(item.targetValue || 0),
      taskCode: String(item.taskCode || ''),
      taskDesc: String(item.taskDesc || '进度 / 目标'),
      taskIcon: String(item.taskIcon || ''),
      taskName: String(item.taskName || ''),
    }))
    .toSorted((left: Record<string, any>, right: Record<string, any>) =>
      Number(left.sortOrder || 0) - Number(right.sortOrder || 0),
    );
  form.tasks = normalizedTasks;
  form.conditionJumps = normalizeConditionJumpRows(
    Array.isArray(value.conditionJumps) ? value.conditionJumps : [],
    normalizedTasks,
  );
}

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

function addTask() {
  const tasks = form.tasks as Array<Record<string, any>>;
  const maxSort = Math.max(0, ...tasks.map((item) => Number(item.sortOrder || 0)));
  tasks.push(createTask(maxSort + 10));
}

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

function addConditionJump() {
  const rows = form.conditionJumps as Array<Record<string, any>>;
  const usedConditions = new Set(rows.map((item) => String(item.conditionType || '')));
  const option = conditionTypeOptions.find((item) => !usedConditions.has(item.value));
  if (!option) {
    message.warning('可配置的条件都已添加');
    return;
  }
  const maxSort = Math.max(0, ...rows.map((item) => Number(item.sortOrder || 0)));
  rows.push(createConditionJump(maxSort + 10, option.value));
}

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

function shouldReplaceJumpPage(value: unknown) {
  const jumpPage = String(value || '').trim();
  return !jumpPage || jumpPage === '/room' || jumpPage === rechargeJumpPage;
}

function jumpTypeRequiresPage(jumpType: string) {
  return jumpType === 'APP_ROUTE' || jumpType === 'H5_URL';
}

function taskAt(index: number) {
  return (form.tasks as Array<Record<string, any>>)[index];
}

function conditionJumpAt(index: number) {
  return (form.conditionJumps as Array<Record<string, any>>)[index];
}

function jumpPagePlaceholder(record: Record<string, any>) {
  const jumpType = String(record.jumpType || '').trim();
  if (jumpType === 'RECHARGE_IN_APP') {
    return rechargeJumpPage;
  }
  if (jumpType === 'H5_URL') {
    return 'https://example.com';
  }
  if (jumpType === 'APP_ROUTE') {
    return '/main/me/wallet/recharge';
  }
  if (jumpType === 'ROOM_RANDOM' || jumpType === 'ROOM_RANDOM_WITH_MIC') {
    return '/room';
  }
  return '';
}

function ensureConditionJumpForCondition(conditionType: string) {
  const normalizedCondition = String(conditionType || '').trim();
  if (!normalizedCondition) {
    return;
  }
  const rows = form.conditionJumps as Array<Record<string, any>>;
  if (rows.some((item) => String(item.conditionType || '') === normalizedCondition)) {
    return;
  }
  const maxSort = Math.max(0, ...rows.map((item) => Number(item.sortOrder || 0)));
  rows.push(createConditionJump(maxSort + 10, normalizedCondition));
}

function handleConditionTypeChange(index: number, value: unknown) {
  const record = taskAt(index);
  if (!record) {
    return;
  }
  record.conditionType = String(value || record.conditionType || '').trim();
  ensureConditionJumpForCondition(record.conditionType);
  if (
    record.conditionType === 'RECHARGE_GOLD' &&
    (!record.targetUnit || record.targetUnit === 'second')
  ) {
    record.targetUnit = 'gold';
  }
}

function handleConditionJumpTypeChange(index: number, value: unknown) {
  const record = conditionJumpAt(index);
  if (!record) {
    return;
  }
  record.jumpType = String(value || record.jumpType || '').trim();
  if (shouldReplaceJumpPage(record.jumpPage)) {
    record.jumpPage = '';
  }
}

function handleConditionJumpConditionChange(index: number, value: unknown) {
  const record = conditionJumpAt(index);
  if (!record) {
    return;
  }
  const conditionType = String(value || record.conditionType || '').trim();
  record.conditionType = conditionType;
  record.jumpType = defaultJumpType(conditionType);
  if (shouldReplaceJumpPage(record.jumpPage)) {
    record.jumpPage = '';
  }
}

function confirmRemoveTask(index: number) {
  Modal.confirm({
    onOk: () => removeTask(index),
    title: `确认删除该${activeTaskCategoryLabel.value}？`,
  });
}

function validateBeforeSave() {
  const tasks = form.tasks as Array<Record<string, any>>;
  if (tasks.length === 0) {
    message.warning(`请至少配置一个${activeTaskCategoryLabel.value}`);
    return false;
  }
  const seenCodes = new Set<string>();
  for (const item of tasks) {
    const taskCode = String(item.taskCode || '').trim();
    const taskName = String(item.taskName || '').trim();
    const conditionType = String(item.conditionType || '').trim();
    if (!taskCode) {
      message.warning('任务编码不能为空');
      return false;
    }
    if (!taskName) {
      message.warning('任务名称不能为空');
      return false;
    }
    if (!conditionType) {
      message.warning('任务条件不能为空');
      return false;
    }
    if (Number(item.targetValue || 0) <= 0) {
      message.warning('任务目标必须大于 0');
      return false;
    }
    if (Number(item.rewardGold || 0) <= 0) {
      message.warning('奖励金币必须大于 0');
      return false;
    }
    if (seenCodes.has(taskCode)) {
      message.warning('任务编码不能重复');
      return false;
    }
    seenCodes.add(taskCode);
  }

  const conditionJumps = form.conditionJumps as Array<Record<string, any>>;
  const seenConditions = new Set<string>();
  for (const item of conditionJumps) {
    const conditionType = String(item.conditionType || '').trim();
    const jumpType = String(item.jumpType || '').trim();
    const jumpPage = String(item.jumpPage || '').trim();
    if (!conditionType) {
      message.warning('条件跳转的条件不能为空');
      return false;
    }
    if (seenConditions.has(conditionType)) {
      message.warning('条件跳转的条件不能重复');
      return false;
    }
    if (!jumpType) {
      message.warning('条件跳转的跳转类型不能为空');
      return false;
    }
    if (jumpTypeRequiresPage(jumpType) && !jumpPage) {
      message.warning('端内路由和 H5 链接需要填写跳转参数');
      return false;
    }
    seenConditions.add(conditionType);
  }

  for (const item of tasks) {
    const conditionType = String(item.conditionType || '').trim();
    if (!seenConditions.has(conditionType)) {
      message.warning('请先配置任务条件对应的跳转类型');
      return false;
    }
  }
  return true;
}

async function submitForm() {
  if (!validateBeforeSave()) {
    return;
  }
  saving.value = true;
  try {
    const conditionJumpPayloads: Array<Record<string, any>> = (
      form.conditionJumps || []
    ).map((item: Record<string, any>) => {
      const jumpType = String(item.jumpType || '').trim();
      return {
        conditionType: String(item.conditionType || '').trim(),
        id: item.id || 0,
        jumpPage: String(item.jumpPage || '').trim(),
        jumpType,
        sortOrder: Number(item.sortOrder || 0),
        taskCategory: activeTaskCategory.value,
      };
    });
    const jumpByCondition = new Map<string, Record<string, any>>(
      conditionJumpPayloads.map((item: Record<string, any>) => [
        String(item.conditionType || ''),
        item,
      ]),
    );
    await saveResidentDailyTaskConfig({
      enabled: Boolean(form.enabled),
      id: form.id || 0,
      sysOrigin: selectedSysOrigin.value,
      taskCategory: activeTaskCategory.value,
      tasks: (form.tasks || []).map((item: Record<string, any>) => {
        const conditionType = String(item.conditionType || '').trim();
        const conditionJump = jumpByCondition.get(conditionType);
        return {
          conditionType,
          cover: String(item.cover || '').trim(),
          enabled: item.enabled !== false,
          id: item.id || 0,
          jumpPage: conditionJump?.jumpPage || '',
          jumpType: conditionJump?.jumpType || '',
          rewardGold: Number(item.rewardGold || 0),
          sortOrder: Number(item.sortOrder || 0),
          targetUnit: String(item.targetUnit || '').trim(),
          targetValue: Number(item.targetValue || 0),
          taskCode: String(item.taskCode || '').trim(),
          taskDesc: String(item.taskDesc || '').trim(),
          taskIcon: String(item.taskIcon || '').trim(),
          taskName: String(item.taskName || '').trim(),
        };
      }),
      conditionJumps: conditionJumpPayloads,
      timezone: String(form.timezone || '').trim(),
    });
    message.success('保存成功');
    await loadConfig();
  } finally {
    saving.value = false;
  }
}

function normalizePage(target: Record<string, any>, result: Record<string, any>) {
  target.records = Array.isArray(result?.records) ? result.records : [];
  target.total = Number(result?.total || 0);
  target.current = Number(result?.current || 1);
  target.size = Number(result?.size || 20);
}

async function loadClaimRecords() {
  if (!selectedSysOrigin.value) {
    return;
  }
  claimLoading.value = true;
  try {
    const result = await pageResidentDailyTaskClaimRecords({
      ...claimQuery,
      sysOrigin: selectedSysOrigin.value,
      taskCategory: activeTaskCategory.value,
    });
    normalizePage(claimPage, result || {});
  } finally {
    claimLoading.value = false;
  }
}

async function loadEvents() {
  if (!selectedSysOrigin.value) {
    return;
  }
  eventLoading.value = true;
  try {
    const result = await pageResidentDailyTaskEvents({
      ...eventQuery,
      sysOrigin: selectedSysOrigin.value,
      taskCategory: activeTaskCategory.value,
    });
    normalizePage(eventPage, result || {});
  } finally {
    eventLoading.value = false;
  }
}

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

function searchEvents() {
  eventQuery.cursor = 1;
  void loadEvents();
}

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

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

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

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

watch(activeTaskCategory, () => {
  if (!selectedSysOrigin.value) {
    return;
  }
  claimQuery.cursor = 1;
  eventQuery.cursor = 1;
  void loadConfig();
  void loadClaimRecords();
  void loadEvents();
});
</script>

<template>
  <Page auto-content-height>
    <Spin :spinning="loading">
      <Card :bordered="false">
        <template #title>
          <Space align="center" wrap>
            <span>每日任务</span>
            <Tag :color="statusMeta.color">{{ statusMeta.text }}</Tag>
          </Space>
        </template>

        <div class="toolbar">
          <Select
            v-model:value="selectedSysOrigin"
            :options="sysOriginOptions"
            option-filter-prop="label"
            option-label-prop="label"
            placeholder="请选择系统"
            show-search
            style="width: 180px"
          />
          <Button :loading="loading" @click="loadConfig">刷新配置</Button>
        </div>

        <Tabs v-model:active-key="activeTaskCategory" class="category-tabs">
          <TabPane
            v-for="item in taskCategoryOptions"
            :key="item.value"
            :tab="item.label"
          />
        </Tabs>

        <Tabs v-model:active-key="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="taskColumns"
              :data-source="form.tasks"
              :pagination="false"
              row-key="rowKey"
              :scroll="{ x: 1350 }"
            >
              <template #bodyCell="{ column, index, record }">
                <template v-if="column.key === 'enabled'">
                  <Switch v-model:checked="record.enabled" />
                </template>
                <template v-else-if="column.key === 'taskCode'">
                  <Input
                    v-model:value="record.taskCode"
                    :placeholder="activeTaskCategory === 'DAILY' ? 'DAILY_MIC_DURATION' : 'EXCLUSIVE_RECHARGE'"
                  />
                </template>
                <template v-else-if="column.key === 'taskName'">
                  <Input v-model:value="record.taskName" placeholder="使用麦克风 %d 分钟。" />
                </template>
                <template v-else-if="column.key === 'taskDesc'">
                  <Input v-model:value="record.taskDesc" placeholder="进度 / 目标" />
                </template>
                <template v-else-if="column.key === 'conditionType'">
                  <Select
                    v-model:value="record.conditionType"
                    :options="conditionTypeOptions"
                    style="width: 170px"
                    @change="(value) => handleConditionTypeChange(index, value)"
                  />
                </template>
                <template v-else-if="column.key === 'targetValue'">
                  <InputNumber
                    v-model:value="record.targetValue"
                    :min="1"
                    :precision="0"
                    style="width: 100px"
                  />
                </template>
                <template v-else-if="column.key === 'targetUnit'">
                  <Select
                    v-model:value="record.targetUnit"
                    :options="targetUnitOptions"
                    style="width: 90px"
                  />
                </template>
                <template v-else-if="column.key === 'rewardGold'">
                  <InputNumber
                    v-model:value="record.rewardGold"
                    :min="1"
                    :precision="0"
                    style="width: 110px"
                  />
                </template>
                <template v-else-if="column.key === 'sortOrder'">
                  <InputNumber
                    v-model:value="record.sortOrder"
                    :precision="0"
                    style="width: 80px"
                  />
                </template>
                <template v-else-if="column.key === 'actions'">
                  <Button danger type="link" @click="confirmRemoveTask(index)">删除</Button>
                </template>
              </template>
            </Table>

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

          <TabPane key="conditionJumps" tab="条件跳转类型">
            <Table
              :columns="conditionJumpColumns"
              :data-source="form.conditionJumps"
              :pagination="false"
              row-key="rowKey"
              :scroll="{ x: 940 }"
            >
              <template #bodyCell="{ column, index, record }">
                <template v-if="column.key === 'conditionType'">
                  <Select
                    v-model:value="record.conditionType"
                    :options="conditionTypeOptions"
                    style="width: 190px"
                    @change="(value) => handleConditionJumpConditionChange(index, value)"
                  />
                </template>
                <template v-else-if="column.key === 'jumpType'">
                  <Select
                    v-model:value="record.jumpType"
                    :options="jumpTypeOptions"
                    style="width: 160px"
                    @change="(value) => handleConditionJumpTypeChange(index, value)"
                  />
                </template>
                <template v-else-if="column.key === 'jumpPage'">
                  <Input
                    v-model:value="record.jumpPage"
                    :placeholder="jumpPagePlaceholder(record)"
                  />
                </template>
                <template v-else-if="column.key === 'sortOrder'">
                  <InputNumber
                    v-model:value="record.sortOrder"
                    :precision="0"
                    style="width: 80px"
                  />
                </template>
                <template v-else-if="column.key === 'actions'">
                  <Button danger type="link" @click="removeConditionJump(index)">
                    删除
                  </Button>
                </template>
              </template>
            </Table>

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

          <TabPane key="claims" tab="领取记录">
            <div class="toolbar">
              <Input
                v-model:value="claimQuery.userId"
                allow-clear
                placeholder="用户ID"
                style="width: 160px"
              />
              <Input
                v-model:value="claimQuery.taskCode"
                allow-clear
                placeholder="任务编码"
                style="width: 220px"
              />
              <Select
                v-model:value="claimQuery.status"
                allow-clear
                :options="[
                  { label: '成功', value: 'SUCCESS' },
                  { label: '失败', value: 'FAILED' },
                ]"
                placeholder="状态"
                style="width: 140px"
              />
              <Button :loading="claimLoading" type="primary" @click="searchClaimRecords">
                查询
              </Button>
            </div>
            <Table
              :columns="claimColumns"
              :data-source="claimPage.records"
              :loading="claimLoading"
              :pagination="{
                current: claimPage.current,
                pageSize: claimPage.size,
                showSizeChanger: true,
                total: claimPage.total,
              }"
              row-key="id"
              :scroll="{ x: 1580 }"
              @change="handleClaimTableChange"
            />
          </TabPane>

          <TabPane key="events" tab="事件流水">
            <div class="toolbar">
              <Input
                v-model:value="eventQuery.userId"
                allow-clear
                placeholder="用户ID"
                style="width: 160px"
              />
              <Input
                v-model:value="eventQuery.taskCode"
                allow-clear
                placeholder="任务编码"
                style="width: 220px"
              />
              <Input
                v-model:value="eventQuery.eventType"
                allow-clear
                placeholder="事件类型"
                style="width: 220px"
              />
              <Button :loading="eventLoading" type="primary" @click="searchEvents">
                查询
              </Button>
            </div>
            <Table
              :columns="eventColumns"
              :data-source="eventPage.records"
              :loading="eventLoading"
              :pagination="{
                current: eventPage.current,
                pageSize: eventPage.size,
                showSizeChanger: true,
                total: eventPage.total,
              }"
              row-key="id"
              :scroll="{ x: 1500 }"
              @change="handleEventTableChange"
            />
          </TabPane>
        </Tabs>
      </Card>
    </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;
}

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