<template>
  <a-page-header :title="getPageTitle()" @back="() => $router.go(-1)">
    <template #extra>
      <a-space>
        <a-button @click="openBatchModal()">
          <template #icon>
            <ThunderboltOutlined />
          </template>
          批量生成
        </a-button>
        <a-button type="primary" @click="openGenerateModal()">
          <template #icon>
            <PlusOutlined />
          </template>
          生成兑换码
        </a-button>
        <a-button @click="reload()">
          <template #icon>
            <ReloadOutlined />
          </template>
          刷新
        </a-button>
      </a-space>
    </template>

    <a-card :bordered="false" :body-style="{ padding: '16px' }">
      <!-- Tab 切换 -->
      <a-tabs v-model:activeKey="activeTab" @change="handleTabChange">
        <a-tab-pane key="codes" tab="兑换码管理">
          <!-- 搜索区域 -->
          <div class="search-container">
            <a-form layout="inline" :model="searchForm" class="search-form">
              <a-form-item label="兑换码">
                <a-input
                  v-model:value="searchForm.code"
                  placeholder="请输入兑换码"
                  allow-clear
                  style="width: 200px"
                />
              </a-form-item>
              <a-form-item label="状态">
                <a-select
                  v-model:value="searchForm.status"
                  placeholder="请选择状态"
                  allow-clear
                  style="width: 120px"
                >
                  <a-select-option :value="0">未使用</a-select-option>
                  <a-select-option :value="1">已使用</a-select-option>
                  <a-select-option :value="2">已过期</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="批次号">
                <a-input
                  v-model:value="searchForm.batchNo"
                  placeholder="请输入批次号"
                  allow-clear
                  style="width: 200px"
                />
              </a-form-item>
              <a-form-item>
                <a-space>
                  <a-button type="primary" @click="handleSearch">
                    <template #icon>
                      <SearchOutlined />
                    </template>
                    搜索
                  </a-button>
                  <a-button @click="handleReset">
                    <template #icon>
                      <ClearOutlined />
                    </template>
                    重置
                  </a-button>
                </a-space>
              </a-form-item>
            </a-form>
          </div>

          <!-- 统计卡片 -->
          <a-row :gutter="16" style="margin-bottom: 16px">
            <a-col :span="6">
              <a-statistic
                title="总兑换码数量"
                :value="statistics.total"
                :value-style="{ color: '#1890ff' }"
              />
            </a-col>
            <a-col :span="6">
              <a-statistic
                title="未使用"
                :value="statistics.unused"
                :value-style="{ color: '#52c41a' }"
              />
            </a-col>
            <a-col :span="6">
              <a-statistic
                title="已使用"
                :value="statistics.used"
                :value-style="{ color: '#faad14' }"
              />
            </a-col>
            <a-col :span="6">
              <a-statistic
                title="已过期"
                :value="statistics.expired"
                :value-style="{ color: '#ff4d4f' }"
              />
            </a-col>
          </a-row>

          <!-- 表格 -->
          <ele-pro-table
            ref="tableRef"
            row-key="id"
            :columns="columns"
            :datasource="datasource"
            :scroll="{ x: 1400 }"
            tool-class="ele-toolbar-form"
          >
            <template #bodyCell="{ column, record }">
              <!-- 兑换码信息 -->
              <template v-if="column.key === 'code'">
                <div class="code-info">
                  <a-typography-text strong copyable>{{ record.code }}</a-typography-text>
                  <div class="batch-no" v-if="record.batchNo">
                    批次: {{ record.batchNo }}
                  </div>
                </div>
              </template>

              <!-- 金额 -->
              <template v-if="column.key === 'amount'">
                <span class="amount-value">¥{{ formatAmount(record.amount) }}</span>
              </template>

              <!-- 状态 -->
              <template v-if="column.key === 'status'">
                <a-tag :color="getStatusColor(record.status)">
                  {{ getStatusText(record.status) }}
                </a-tag>
              </template>

              <!-- 生成方式 -->
              <template v-if="column.key === 'generateType'">
                <a-tag :color="record.generateType === 1 ? 'blue' : 'purple'">
                  {{ record.generateType === 1 ? '管理员生成' : '批量生成' }}
                </a-tag>
              </template>

              <!-- 过期时间 -->
              <template v-if="column.key === 'expireTime'">
                <span v-if="record.expireTime">{{ formatDate(record.expireTime) }}</span>
                <span v-else>-</span>
              </template>

              <!-- 使用信息 -->
              <template v-if="column.key === 'usedInfo'">
                <template v-if="record.status === 1 && record.usedAt">
                  <div>使用时间: {{ formatDate(record.usedAt) }}</div>
                  <div class="balance-change">
                    <span class="balance-before">{{ formatAmount(record.balanceBefore) }}</span>
                    <ArrowRightOutlined />
                    <span class="balance-after">{{ formatAmount(record.balanceAfter) }}</span>
                  </div>
                </template>
                <span v-else>-</span>
              </template>

              <!-- 创建时间 -->
              <template v-if="column.key === 'createTime'">
                {{ formatDate(record.createTime) }}
              </template>

              <!-- 操作列 -->
              <template v-if="column.key === 'action'">
                <a-space>
                  <a-tooltip title="查看详情">
                    <a-button size="small" type="link" @click="viewDetail(record)">
                      <template #icon><EyeOutlined /></template>
                    </a-button>
                  </a-tooltip>
                  <a-tooltip title="复制兑换码">
                    <a-button size="small" type="link" @click="copyCode(record.code)">
                      <template #icon><CopyOutlined /></template>
                    </a-button>
                  </a-tooltip>
                  <a-popconfirm
                    title="确定要删除此兑换码吗？"
                    @confirm="handleDelete(record.id)"
                  >
                    <a-tooltip title="删除">
                      <a-button size="small" type="link" danger>
                        <template #icon><DeleteOutlined /></template>
                      </a-button>
                    </a-tooltip>
                  </a-popconfirm>
                </a-space>
              </template>
            </template>
          </ele-pro-table>
        </a-tab-pane>

        <a-tab-pane key="records" tab="兑换记录">
          <RechargeRecord />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-page-header>

  <!-- 生成兑换码弹窗 -->
  <a-modal
    v-model:open="generateModalVisible"
    title="生成兑换码"
    :width="500"
    @ok="handleGenerate"
    @cancel="generateModalVisible = false"
    :confirm-loading="generateLoading"
  >
    <a-form
      ref="generateFormRef"
      :model="generateForm"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item
        label="充值金额"
        name="amount"
        :rules="[{ required: true, message: '请输入充值金额' }, { type: 'number', min: 0.01, message: '金额必须大于0' }]"
      >
        <a-input-number
          v-model:value="generateForm.amount"
          :min="0.01"
          :precision="2"
          style="width: 100%"
          placeholder="请输入充值金额"
        />
      </a-form-item>
      <a-form-item
        label="生成数量"
        name="quantity"
        :rules="[{ required: true, message: '请输入生成数量' }]"
      >
        <a-input-number
          v-model:value="generateForm.quantity"
          :min="1"
          :max="100"
          style="width: 100%"
          placeholder="请输入生成数量"
        />
      </a-form-item>
      <a-form-item
        label="有效期"
        name="expireDays"
        :rules="[{ required: true, message: '请输入有效期天数' }]"
      >
        <a-input-number
          v-model:value="generateForm.expireDays"
          :min="1"
          :max="365"
          style="width: 100%"
          addon-after="天"
          placeholder="请输入有效期天数"
        />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 批量生成弹窗 -->
  <a-modal
    v-model:open="batchModalVisible"
    title="批量生成兑换码"
    :width="600"
    @ok="handleBatchGenerate"
    @cancel="batchModalVisible = false"
    :confirm-loading="batchLoading"
  >
    <a-form
      ref="batchFormRef"
      :model="batchForm"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="预设金额">
        <a-select
          v-model:value="batchForm.presetAmounts"
          mode="tags"
          placeholder="输入预设金额后按回车"
          style="width: 100%"
          :token-separators="[',']"
        >
        </a-select>
      </a-form-item>
      <a-form-item
        label="每个金额数量"
        name="quantityPerAmount"
        :rules="[{ required: true, message: '请输入数量' }]"
      >
        <a-input-number
          v-model:value="batchForm.quantityPerAmount"
          :min="1"
          :max="50"
          style="width: 100%"
          placeholder="每个预设金额生成的数量"
        />
      </a-form-item>
      <a-form-item
        label="有效期"
        name="expireDays"
        :rules="[{ required: true, message: '请输入有效期天数' }]"
      >
        <a-input-number
          v-model:value="batchForm.expireDays"
          :min="1"
          :max="365"
          style="width: 100%"
          addon-after="天"
          placeholder="请输入有效期天数"
        />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 生成的兑换码列表弹窗 -->
  <a-modal
    v-model:open="codesModalVisible"
    title="生成的兑换码"
    :width="700"
    :footer="null"
  >
    <a-alert
      :message="`共生成 ${generatedCodes.length} 个兑换码`"
      type="success"
      style="margin-bottom: 16px"
    />
    <a-list
      :data-source="generatedCodes"
      size="small"
      bordered
      :max-height="400"
      style="overflow-y: auto"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta>
            <template #title>
              <a-typography-text strong copyable>{{ item.code }}</a-typography-text>
            </template>
            <template #description>
              金额: ¥{{ formatAmount(item.amount) }} | 
              有效期至: {{ formatDate(item.expireTime) }}
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
    <div style="margin-top: 16px; text-align: center">
      <a-button type="primary" @click="copyAllCodes">复制全部兑换码</a-button>
    </div>
  </a-modal>

  <!-- 兑换码详情弹窗 -->
  <a-modal
    v-model:open="detailModalVisible"
    title="兑换码详情"
    :width="500"
    :footer="null"
  >
    <a-descriptions :column="1" bordered v-if="currentRecord">
      <a-descriptions-item label="兑换码">
        <a-typography-text copyable strong>{{ currentRecord.code }}</a-typography-text>
      </a-descriptions-item>
      <a-descriptions-item label="充值金额">
        <span style="color: #f5222d; font-weight: bold">¥{{ formatAmount(currentRecord.amount) }}</span>
      </a-descriptions-item>
      <a-descriptions-item label="状态">
        <a-tag :color="getStatusColor(currentRecord.status)">
          {{ getStatusText(currentRecord.status) }}
        </a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="生成方式">
        {{ currentRecord.generateType === 1 ? '管理员生成' : '批量生成' }}
      </a-descriptions-item>
      <a-descriptions-item label="批次号">{{ currentRecord.batchNo || '-' }}</a-descriptions-item>
      <a-descriptions-item label="过期时间">{{ formatDate(currentRecord.expireTime) || '-' }}</a-descriptions-item>
      <a-descriptions-item label="使用时间">{{ formatDate(currentRecord.usedAt) || '-' }}</a-descriptions-item>
      <a-descriptions-item label="使用前余额">
        ¥{{ formatAmount(currentRecord.balanceBefore) }}
      </a-descriptions-item>
      <a-descriptions-item label="使用后余额">
        ¥{{ formatAmount(currentRecord.balanceAfter) }}
      </a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ formatDate(currentRecord.createTime) }}</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import {
  PlusOutlined,
  ReloadOutlined,
  SearchOutlined,
  ClearOutlined,
  EyeOutlined,
  CopyOutlined,
  DeleteOutlined,
  ArrowRightOutlined,
  ThunderboltOutlined
} from '@ant-design/icons-vue';
import { toDateString } from 'ele-admin-pro';
import { pageRechargeCode, generateRechargeCode, batchGenerateRechargeCode, removeRechargeCode } from '@/api/shop/shopRechargeCode';
import type { ShopRechargeCode } from '@/api/shop/shopRechargeCode/model';
import RechargeRecord from '@/views/shop/shopRechargeRecord/index.vue';

const TABLE_COLUMN_COLORS = {
  unused: '#52c41a',
  used: '#faad14',
  expired: '#ff4d4f'
};

// Tab切换
const activeTab = ref('codes');
const loadedTabs = ref<Set<string>>(new Set(['codes']));

function handleTabChange(tab: string) {
  if (!loadedTabs.value.has(tab)) {
    loadedTabs.value.add(tab);
  }
}

// 搜索表单
const searchForm = reactive({
  code: '',
  status: undefined as number | undefined,
  batchNo: ''
});

// 表格引用
const tableRef = ref(null);

// 生成弹窗相关
const generateModalVisible = ref(false);
const generateFormRef = ref(null);
const generateForm = reactive({
  amount: 10,
  quantity: 1,
  expireDays: 30
});
const generateLoading = ref(false);

// 批量生成弹窗相关
const batchModalVisible = ref(false);
const batchFormRef = ref(null);
const batchForm = reactive({
  presetAmounts: [] as number[],
  quantityPerAmount: 1,
  expireDays: 30
});
const batchLoading = ref(false);

// 生成的兑换码列表弹窗
const codesModalVisible = ref(false);
const generatedCodes = ref<ShopRechargeCode[]>([]);

// 详情弹窗
const detailModalVisible = ref(false);
const currentRecord = ref<ShopRechargeCode | null>(null);

// 统计数据
const statistics = reactive({
  total: 0,
  unused: 0,
  used: 0,
  expired: 0
});

// 表格列配置
const columns = ref([
  {
    title: '兑换码信息',
    key: 'code',
    width: 250,
    fixed: 'left'
  },
  {
    title: '充值金额',
    key: 'amount',
    width: 120,
    align: 'center'
  },
  {
    title: '状态',
    key: 'status',
    width: 100,
    align: 'center'
  },
  {
    title: '生成方式',
    key: 'generateType',
    width: 120,
    align: 'center'
  },
  {
    title: '过期时间',
    key: 'expireTime',
    width: 160,
    align: 'center'
  },
  {
    title: '使用信息',
    key: 'usedInfo',
    width: 200,
    align: 'center'
  },
  {
    title: '创建时间',
    key: 'createTime',
    width: 160,
    align: 'center',
    sorter: true
  },
  {
    title: '操作',
    key: 'action',
    width: 150,
    fixed: 'right',
    align: 'center'
  }
]);

// 数据源
const datasource = ({ page, limit, where, orders }) => {
  const params = {
    ...where,
    ...searchForm,
    ...orders,
    page,
    limit
  };
  return pageRechargeCode(params).then((res) => {
    // 更新统计数据
    if (res.list && res.list.length > 0) {
      updateStatistics(res.list);
    }
    return res;
  });
};

// 更新统计数据
const updateStatistics = (list: ShopRechargeCode[]) => {
  statistics.total = list.length;
  statistics.unused = list.filter((item) => item.status === 0).length;
  statistics.used = list.filter((item) => item.status === 1).length;
  statistics.expired = list.filter((item) => item.status === 2).length;
};

// 格式化金额
const formatAmount = (amount: string | number | undefined) => {
  if (amount === null || amount === undefined) return '0.00';
  return Number(amount).toFixed(2);
};

// 格式化日期
const formatDate = (dateStr: string | undefined) => {
  if (!dateStr) return '-';
  return toDateString(dateStr, 'yyyy-MM-dd HH:mm');
};

// 获取状态文本
const getStatusText = (status: number) => {
  const map: Record<number, string> = { 0: '未使用', 1: '已使用', 2: '已过期' };
  return map[status] || '未知';
};

// 获取状态颜色
const getStatusColor = (status: number) => {
  const map: Record<number, string> = { 0: 'green', 1: 'orange', 2: 'red' };
  return map[status] || 'default';
};

// 搜索
const handleSearch = () => {
  tableRef.value?.reload();
};

// 重置
const handleReset = () => {
  searchForm.code = '';
  searchForm.status = undefined;
  searchForm.batchNo = '';
  tableRef.value?.reload();
};

// 刷新
const reload = () => {
  tableRef.value?.reload();
};

// 打开生成弹窗
const openGenerateModal = () => {
  generateForm.amount = 10;
  generateForm.quantity = 1;
  generateForm.expireDays = 30;
  generateModalVisible.value = true;
};

// 打开批量生成弹窗
const openBatchModal = () => {
  batchForm.presetAmounts = [];
  batchForm.quantityPerAmount = 1;
  batchForm.expireDays = 30;
  batchModalVisible.value = true;
};

// 生成兑换码
const handleGenerate = async () => {
  try {
    await generateFormRef.value.validate();
    generateLoading.value = true;
    const res = await generateRechargeCode(
      generateForm.amount,
      generateForm.quantity,
      generateForm.expireDays
    );
    generatedCodes.value = res || [];
    generateModalVisible.value = false;
    codesModalVisible.value = true;
    message.success(`成功生成 ${generatedCodes.value.length} 个兑换码`);
    tableRef.value?.reload();
  } catch (error) {
    console.error(error);
  } finally {
    generateLoading.value = false;
  }
};

// 批量生成兑换码
const handleBatchGenerate = async () => {
  try {
    if (!batchForm.presetAmounts || batchForm.presetAmounts.length === 0) {
      message.warning('请输入至少一个预设金额');
      return;
    }
    batchLoading.value = true;
    const res = await batchGenerateRechargeCode({
      presetAmounts: batchForm.presetAmounts.map(Number),
      quantityPerAmount: batchForm.quantityPerAmount,
      expireDays: batchForm.expireDays
    });
    generatedCodes.value = res?.codes || [];
    batchModalVisible.value = false;
    codesModalVisible.value = true;
    message.success(`成功生成 ${generatedCodes.value.length} 个兑换码`);
    tableRef.value?.reload();
  } catch (error) {
    console.error(error);
  } finally {
    batchLoading.value = false;
  }
};

// 复制兑换码
const copyCode = (code: string) => {
  navigator.clipboard.writeText(code).then(() => {
    message.success('兑换码已复制');
  });
};

// 复制所有兑换码
const copyAllCodes = () => {
  const codes = generatedCodes.value.map((item) => item.code).join('\n');
  navigator.clipboard.writeText(codes).then(() => {
    message.success('所有兑换码已复制');
  });
};

// 查看详情
const viewDetail = (record: ShopRechargeCode) => {
  currentRecord.value = record;
  detailModalVisible.value = true;
};

// 删除
const handleDelete = async (id: number) => {
  try {
    await removeRechargeCode(id);
    message.success('删除成功');
    tableRef.value?.reload();
  } catch (error) {
    console.error(error);
  }
};

// 获取页面标题
const getPageTitle = () => {
  return '充值兑换码管理';
};

onMounted(() => {
  // 初始加载
});
</script>

<style scoped>
.search-container {
  margin-bottom: 16px;
}

.code-info {
  display: flex;
  flex-direction: column;
}

.batch-no {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.amount-value {
  font-weight: bold;
  color: #f5222d;
  font-size: 16px;
}

.balance-change {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.balance-before {
  color: #999;
  text-decoration: line-through;
}

.balance-after {
  color: #52c41a;
  font-weight: bold;
}
</style>
