'use client';

import { useState, useCallback } from 'react';
import { Modal, toast, Button } from '@/components/common';
import { PageContainer } from '@/components/layout';
import { cn } from '@/utils/helpers';
import { formatDateTime } from '@/utils/formatters';
import {
  usePendingReviewWithdrawals,
  usePendingPaymentWithdrawals,
  useWithdrawalsByStatus,
  useReviewWithdrawal,
  useStartPayment,
  useCompletePayment,
} from '@/hooks/useWithdrawals';
import {
  FiatWithdrawalOrder,
  FiatWithdrawalStatus,
  PaymentMethod,
  PAYMENT_METHOD_OPTIONS,
  getFiatWithdrawalStatusInfo,
  getPaymentMethodLabel,
} from '@/types/withdrawal.types';
import styles from './withdrawals.module.scss';

type TabType = 'reviewing' | 'approved' | 'paying' | 'completed' | 'rejected';

/**
 * 法币提现审核管理页面
 */
export default function WithdrawalsPage() {
  // 当前标签页
  const [activeTab, setActiveTab] = useState<TabType>('reviewing');

  // 筛选状态
  const [filters, setFilters] = useState({
    accountSequence: '',
    paymentMethod: '' as PaymentMethod | '',
    page: 1,
    limit: 20,
  });

  // 弹窗状态
  const [viewingOrder, setViewingOrder] = useState<FiatWithdrawalOrder | null>(null);
  const [reviewingOrder, setReviewingOrder] = useState<FiatWithdrawalOrder | null>(null);
  const [payingOrder, setPayingOrder] = useState<FiatWithdrawalOrder | null>(null);
  const [completingOrder, setCompletingOrder] = useState<FiatWithdrawalOrder | null>(null);

  // 表单状态
  const [reviewForm, setReviewForm] = useState({
    approved: true,
    remark: '',
  });
  const [paymentForm, setPaymentForm] = useState({
    paymentProof: '',
    remark: '',
  });

  // 数据查询
  const pendingReviewQuery = usePendingReviewWithdrawals({
    accountSequence: filters.accountSequence || undefined,
    paymentMethod: filters.paymentMethod || undefined,
    page: filters.page,
    limit: filters.limit,
  });

  const pendingPaymentQuery = usePendingPaymentWithdrawals({
    accountSequence: filters.accountSequence || undefined,
    paymentMethod: filters.paymentMethod || undefined,
    page: filters.page,
    limit: filters.limit,
  });

  const payingQuery = useWithdrawalsByStatus('PAYING', {
    accountSequence: filters.accountSequence || undefined,
    paymentMethod: filters.paymentMethod || undefined,
    page: filters.page,
    limit: filters.limit,
  });

  const completedQuery = useWithdrawalsByStatus('COMPLETED', {
    accountSequence: filters.accountSequence || undefined,
    paymentMethod: filters.paymentMethod || undefined,
    page: filters.page,
    limit: filters.limit,
  });

  const rejectedQuery = useWithdrawalsByStatus('REJECTED', {
    accountSequence: filters.accountSequence || undefined,
    paymentMethod: filters.paymentMethod || undefined,
    page: filters.page,
    limit: filters.limit,
  });

  // Mutations
  const reviewMutation = useReviewWithdrawal();
  const startPaymentMutation = useStartPayment();
  const completePaymentMutation = useCompletePayment();

  // 获取当前标签页的数据
  const getCurrentData = () => {
    switch (activeTab) {
      case 'reviewing':
        return pendingReviewQuery;
      case 'approved':
        return pendingPaymentQuery;
      case 'paying':
        return payingQuery;
      case 'completed':
        return completedQuery;
      case 'rejected':
        return rejectedQuery;
      default:
        return pendingReviewQuery;
    }
  };

  const { data, isLoading, error, refetch } = getCurrentData();

  // 打开审核弹窗
  const handleOpenReview = (order: FiatWithdrawalOrder) => {
    setReviewingOrder(order);
    setReviewForm({ approved: true, remark: '' });
  };

  // 提交审核
  const handleSubmitReview = async () => {
    if (!reviewingOrder) return;

    try {
      await reviewMutation.mutateAsync({
        orderNo: reviewingOrder.orderNo,
        data: reviewForm,
      });
      toast.success(reviewForm.approved ? '审核通过' : '已拒绝提现');
      setReviewingOrder(null);
    } catch (err) {
      toast.error((err as Error).message || '审核失败');
    }
  };

  // 开始打款
  const handleStartPayment = async (order: FiatWithdrawalOrder) => {
    setPayingOrder(order);
  };

  // 确认开始打款
  const handleConfirmStartPayment = async () => {
    if (!payingOrder) return;

    try {
      await startPaymentMutation.mutateAsync({
        orderNo: payingOrder.orderNo,
        data: {},
      });
      toast.success('已开始打款');
      setPayingOrder(null);
    } catch (err) {
      toast.error((err as Error).message || '操作失败');
    }
  };

  // 打开完成打款弹窗
  const handleOpenComplete = (order: FiatWithdrawalOrder) => {
    setCompletingOrder(order);
    setPaymentForm({ paymentProof: '', remark: '' });
  };

  // 完成打款
  const handleSubmitComplete = async () => {
    if (!completingOrder) return;

    try {
      await completePaymentMutation.mutateAsync({
        orderNo: completingOrder.orderNo,
        data: paymentForm,
      });
      toast.success('打款完成');
      setCompletingOrder(null);
    } catch (err) {
      toast.error((err as Error).message || '操作失败');
    }
  };

  // 搜索
  const handleSearch = useCallback(() => {
    setFilters((prev) => ({ ...prev, page: 1 }));
    refetch();
  }, [refetch]);

  // 翻页
  const handlePageChange = (page: number) => {
    setFilters((prev) => ({ ...prev, page }));
  };

  // 渲染支付方式标签
  const renderMethodTag = (method: PaymentMethod) => {
    const className = cn(
      styles.withdrawals__methodTag,
      method === 'BANK_CARD' && styles['withdrawals__methodTag--bank'],
      method === 'ALIPAY' && styles['withdrawals__methodTag--alipay'],
      method === 'WECHAT' && styles['withdrawals__methodTag--wechat']
    );
    return <span className={className}>{getPaymentMethodLabel(method)}</span>;
  };

  // 渲染支付信息
  const renderPaymentInfo = (order: FiatWithdrawalOrder) => {
    switch (order.paymentMethod) {
      case 'BANK_CARD':
        return (
          <div className={styles.withdrawals__paymentInfo}>
            <div>
              <span className={styles.withdrawals__paymentInfoLabel}>银行: </span>
              <span className={styles.withdrawals__paymentInfoValue}>{order.bankName}</span>
            </div>
            <div>
              <span className={styles.withdrawals__paymentInfoLabel}>卡号: </span>
              <span className={styles.withdrawals__paymentInfoValue}>{order.bankCardNo}</span>
            </div>
            <div>
              <span className={styles.withdrawals__paymentInfoLabel}>姓名: </span>
              <span className={styles.withdrawals__paymentInfoValue}>{order.cardHolderName}</span>
            </div>
          </div>
        );
      case 'ALIPAY':
        return (
          <div className={styles.withdrawals__paymentInfo}>
            <div>
              <span className={styles.withdrawals__paymentInfoLabel}>账号: </span>
              <span className={styles.withdrawals__paymentInfoValue}>{order.alipayAccount}</span>
            </div>
            <div>
              <span className={styles.withdrawals__paymentInfoLabel}>姓名: </span>
              <span className={styles.withdrawals__paymentInfoValue}>{order.alipayRealName}</span>
            </div>
          </div>
        );
      case 'WECHAT':
        return (
          <div className={styles.withdrawals__paymentInfo}>
            <div>
              <span className={styles.withdrawals__paymentInfoLabel}>账号: </span>
              <span className={styles.withdrawals__paymentInfoValue}>{order.wechatAccount}</span>
            </div>
            <div>
              <span className={styles.withdrawals__paymentInfoLabel}>姓名: </span>
              <span className={styles.withdrawals__paymentInfoValue}>{order.wechatRealName}</span>
            </div>
          </div>
        );
      default:
        return null;
    }
  };

  // 渲染操作按钮
  const renderActions = (order: FiatWithdrawalOrder) => {
    const actions = [];

    // 查看详情按钮
    actions.push(
      <button
        key="view"
        className={styles.withdrawals__actionBtn}
        onClick={() => setViewingOrder(order)}
      >
        查看
      </button>
    );

    // 根据状态显示不同操作
    if (order.status === 'REVIEWING') {
      actions.push(
        <button
          key="review"
          className={cn(styles.withdrawals__actionBtn, styles['withdrawals__actionBtn--primary'])}
          onClick={() => handleOpenReview(order)}
        >
          审核
        </button>
      );
    }

    if (order.status === 'APPROVED') {
      actions.push(
        <button
          key="pay"
          className={cn(styles.withdrawals__actionBtn, styles['withdrawals__actionBtn--primary'])}
          onClick={() => handleStartPayment(order)}
        >
          开始打款
        </button>
      );
    }

    if (order.status === 'PAYING') {
      actions.push(
        <button
          key="complete"
          className={cn(styles.withdrawals__actionBtn, styles['withdrawals__actionBtn--success'])}
          onClick={() => handleOpenComplete(order)}
        >
          完成打款
        </button>
      );
    }

    return <div className={styles.withdrawals__actions}>{actions}</div>;
  };

  return (
    <PageContainer title="提现审核">
      <div className={styles.withdrawals}>
        {/* 页面标题 */}
        <div className={styles.withdrawals__header}>
          <h1 className={styles.withdrawals__title}>法币提现审核</h1>
          <p className={styles.withdrawals__subtitle}>
            审核和处理用户的法币提现申请，支持银行卡、支付宝、微信打款
          </p>
        </div>

        {/* 主内容卡片 */}
        <div className={styles.withdrawals__card}>
          {/* 标签页 */}
          <div className={styles.withdrawals__tabs}>
            <button
              className={cn(
                styles.withdrawals__tab,
                activeTab === 'reviewing' && styles['withdrawals__tab--active']
              )}
              onClick={() => setActiveTab('reviewing')}
            >
              待审核
              {pendingReviewQuery.data && pendingReviewQuery.data.total > 0 && (
                <span className={styles.withdrawals__tabBadge}>
                  {pendingReviewQuery.data.total}
                </span>
              )}
            </button>
            <button
              className={cn(
                styles.withdrawals__tab,
                activeTab === 'approved' && styles['withdrawals__tab--active']
              )}
              onClick={() => setActiveTab('approved')}
            >
              待打款
              {pendingPaymentQuery.data && pendingPaymentQuery.data.total > 0 && (
                <span className={styles.withdrawals__tabBadge}>
                  {pendingPaymentQuery.data.total}
                </span>
              )}
            </button>
            <button
              className={cn(
                styles.withdrawals__tab,
                activeTab === 'paying' && styles['withdrawals__tab--active']
              )}
              onClick={() => setActiveTab('paying')}
            >
              打款中
            </button>
            <button
              className={cn(
                styles.withdrawals__tab,
                activeTab === 'completed' && styles['withdrawals__tab--active']
              )}
              onClick={() => setActiveTab('completed')}
            >
              已完成
            </button>
            <button
              className={cn(
                styles.withdrawals__tab,
                activeTab === 'rejected' && styles['withdrawals__tab--active']
              )}
              onClick={() => setActiveTab('rejected')}
            >
              已拒绝
            </button>
          </div>

          {/* 筛选区域 */}
          <div className={styles.withdrawals__filters}>
            <input
              type="text"
              className={styles.withdrawals__input}
              placeholder="账号"
              value={filters.accountSequence}
              onChange={(e) => setFilters({ ...filters, accountSequence: e.target.value })}
            />
            <select
              className={styles.withdrawals__select}
              value={filters.paymentMethod}
              onChange={(e) =>
                setFilters({ ...filters, paymentMethod: e.target.value as PaymentMethod | '' })
              }
            >
              <option value="">全部支付方式</option>
              {PAYMENT_METHOD_OPTIONS.map((opt) => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
            <Button variant="outline" size="sm" onClick={handleSearch}>
              搜索
            </Button>
            <Button variant="outline" size="sm" onClick={() => refetch()}>
              刷新
            </Button>
          </div>

          {/* 列表 */}
          <div className={styles.withdrawals__list}>
            {isLoading ? (
              <div className={styles.withdrawals__loading}>加载中...</div>
            ) : error ? (
              <div className={styles.withdrawals__error}>
                <span>{(error as Error).message || '加载失败'}</span>
                <Button variant="outline" size="sm" onClick={() => refetch()}>
                  重试
                </Button>
              </div>
            ) : !data || data.items.length === 0 ? (
              <div className={styles.withdrawals__empty}>暂无数据</div>
            ) : (
              <>
                {/* 表格 */}
                <table className={styles.withdrawals__table}>
                  <thead>
                    <tr>
                      <th>订单号</th>
                      <th>用户</th>
                      <th>金额</th>
                      <th>支付方式</th>
                      <th>收款信息</th>
                      <th>状态</th>
                      <th>申请时间</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {data.items.map((order) => {
                      const statusInfo = getFiatWithdrawalStatusInfo(order.status);
                      return (
                        <tr key={order.orderNo}>
                          <td>
                            <div className={styles.withdrawals__orderNo}>{order.orderNo}</div>
                          </td>
                          <td>
                            <div className={styles.withdrawals__accountSequence}>
                              {order.accountSequence}
                            </div>
                            <div className={styles.withdrawals__userId}>ID: {order.userId}</div>
                          </td>
                          <td>
                            <div className={styles.withdrawals__amount}>
                              ¥{parseFloat(order.amount).toFixed(2)}
                            </div>
                            {parseFloat(order.fee) > 0 && (
                              <div className={styles.withdrawals__fee}>
                                手续费: ¥{parseFloat(order.fee).toFixed(2)}
                              </div>
                            )}
                          </td>
                          <td>{renderMethodTag(order.paymentMethod)}</td>
                          <td>{renderPaymentInfo(order)}</td>
                          <td>
                            <span
                              className={styles.withdrawals__statusTag}
                              style={{ backgroundColor: statusInfo.color, color: 'white' }}
                            >
                              {statusInfo.label}
                            </span>
                          </td>
                          <td>{formatDateTime(order.createdAt)}</td>
                          <td>{renderActions(order)}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>

                {/* 分页 */}
                {data.total > filters.limit && (
                  <div className={styles.withdrawals__pagination}>
                    <span>
                      共 {data.total} 条，第 {data.page} / {Math.ceil(data.total / data.limit)} 页
                    </span>
                    <div className={styles.withdrawals__pageButtons}>
                      <Button
                        variant="outline"
                        size="sm"
                        disabled={data.page <= 1}
                        onClick={() => handlePageChange(data.page - 1)}
                      >
                        上一页
                      </Button>
                      <Button
                        variant="outline"
                        size="sm"
                        disabled={data.page >= Math.ceil(data.total / data.limit)}
                        onClick={() => handlePageChange(data.page + 1)}
                      >
                        下一页
                      </Button>
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        </div>

        {/* 查看详情弹窗 */}
        <Modal
          visible={!!viewingOrder}
          title="提现订单详情"
          onClose={() => setViewingOrder(null)}
          footer={
            <div className={styles.withdrawals__modalFooter}>
              <Button variant="outline" onClick={() => setViewingOrder(null)}>
                关闭
              </Button>
            </div>
          }
          width={600}
        >
          {viewingOrder && (
            <div className={styles.withdrawals__detail}>
              <div className={styles.withdrawals__detailSection}>
                <div className={styles.withdrawals__detailTitle}>订单信息</div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>订单号:</span>
                  <span className={styles.withdrawals__detailValue}>{viewingOrder.orderNo}</span>
                </div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>用户:</span>
                  <span className={styles.withdrawals__detailValue}>
                    {viewingOrder.accountSequence} (ID: {viewingOrder.userId})
                  </span>
                </div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>金额:</span>
                  <span className={styles.withdrawals__detailValue}>
                    ¥{parseFloat(viewingOrder.amount).toFixed(2)}
                  </span>
                </div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>手续费:</span>
                  <span className={styles.withdrawals__detailValue}>
                    ¥{parseFloat(viewingOrder.fee).toFixed(2)}
                  </span>
                </div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>状态:</span>
                  <span
                    className={styles.withdrawals__statusTag}
                    style={{
                      backgroundColor: getFiatWithdrawalStatusInfo(viewingOrder.status).color,
                      color: 'white',
                    }}
                  >
                    {getFiatWithdrawalStatusInfo(viewingOrder.status).label}
                  </span>
                </div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>申请时间:</span>
                  <span className={styles.withdrawals__detailValue}>
                    {formatDateTime(viewingOrder.createdAt)}
                  </span>
                </div>
              </div>

              <div className={styles.withdrawals__detailSection}>
                <div className={styles.withdrawals__detailTitle}>
                  收款信息 ({getPaymentMethodLabel(viewingOrder.paymentMethod)})
                </div>
                {viewingOrder.paymentMethod === 'BANK_CARD' && (
                  <>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>银行:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {viewingOrder.bankName}
                      </span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>卡号:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {viewingOrder.bankCardNo}
                      </span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>持卡人:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {viewingOrder.cardHolderName}
                      </span>
                    </div>
                  </>
                )}
                {viewingOrder.paymentMethod === 'ALIPAY' && (
                  <>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>账号:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {viewingOrder.alipayAccount}
                      </span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>姓名:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {viewingOrder.alipayRealName}
                      </span>
                    </div>
                  </>
                )}
                {viewingOrder.paymentMethod === 'WECHAT' && (
                  <>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>账号:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {viewingOrder.wechatAccount}
                      </span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>姓名:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {viewingOrder.wechatRealName}
                      </span>
                    </div>
                  </>
                )}
              </div>

              {(viewingOrder.reviewedAt || viewingOrder.paidAt) && (
                <div className={styles.withdrawals__detailSection}>
                  <div className={styles.withdrawals__detailTitle}>处理记录</div>
                  {viewingOrder.reviewedAt && (
                    <>
                      <div className={styles.withdrawals__detailRow}>
                        <span className={styles.withdrawals__detailLabel}>审核人:</span>
                        <span className={styles.withdrawals__detailValue}>
                          {viewingOrder.reviewedBy}
                        </span>
                      </div>
                      <div className={styles.withdrawals__detailRow}>
                        <span className={styles.withdrawals__detailLabel}>审核时间:</span>
                        <span className={styles.withdrawals__detailValue}>
                          {formatDateTime(viewingOrder.reviewedAt)}
                        </span>
                      </div>
                      {viewingOrder.reviewRemark && (
                        <div className={styles.withdrawals__detailRow}>
                          <span className={styles.withdrawals__detailLabel}>审核备注:</span>
                          <span className={styles.withdrawals__detailValue}>
                            {viewingOrder.reviewRemark}
                          </span>
                        </div>
                      )}
                    </>
                  )}
                  {viewingOrder.paidAt && (
                    <>
                      <div className={styles.withdrawals__detailRow}>
                        <span className={styles.withdrawals__detailLabel}>打款人:</span>
                        <span className={styles.withdrawals__detailValue}>
                          {viewingOrder.paidBy}
                        </span>
                      </div>
                      <div className={styles.withdrawals__detailRow}>
                        <span className={styles.withdrawals__detailLabel}>打款时间:</span>
                        <span className={styles.withdrawals__detailValue}>
                          {formatDateTime(viewingOrder.paidAt)}
                        </span>
                      </div>
                      {viewingOrder.paymentRemark && (
                        <div className={styles.withdrawals__detailRow}>
                          <span className={styles.withdrawals__detailLabel}>打款备注:</span>
                          <span className={styles.withdrawals__detailValue}>
                            {viewingOrder.paymentRemark}
                          </span>
                        </div>
                      )}
                    </>
                  )}
                </div>
              )}
            </div>
          )}
        </Modal>

        {/* 审核弹窗 */}
        <Modal
          visible={!!reviewingOrder}
          title="审核提现申请"
          onClose={() => setReviewingOrder(null)}
          footer={
            <div className={styles.withdrawals__modalFooter}>
              <Button variant="outline" onClick={() => setReviewingOrder(null)}>
                取消
              </Button>
              <Button
                variant={reviewForm.approved ? 'primary' : 'danger'}
                onClick={handleSubmitReview}
                loading={reviewMutation.isPending}
              >
                {reviewForm.approved ? '通过审核' : '拒绝提现'}
              </Button>
            </div>
          }
          width={500}
        >
          {reviewingOrder && (
            <div className={styles.withdrawals__form}>
              <div className={styles.withdrawals__detailRow}>
                <span className={styles.withdrawals__detailLabel}>用户:</span>
                <span className={styles.withdrawals__detailValue}>
                  {reviewingOrder.accountSequence}
                </span>
              </div>
              <div className={styles.withdrawals__detailRow}>
                <span className={styles.withdrawals__detailLabel}>金额:</span>
                <span className={styles.withdrawals__detailValue}>
                  ¥{parseFloat(reviewingOrder.amount).toFixed(2)}
                </span>
              </div>
              <div className={styles.withdrawals__detailRow}>
                <span className={styles.withdrawals__detailLabel}>收款方式:</span>
                <span className={styles.withdrawals__detailValue}>
                  {getPaymentMethodLabel(reviewingOrder.paymentMethod)}
                </span>
              </div>

              <div className={styles.withdrawals__formGroup}>
                <label>审核结果</label>
                <select
                  value={reviewForm.approved ? 'true' : 'false'}
                  onChange={(e) =>
                    setReviewForm({ ...reviewForm, approved: e.target.value === 'true' })
                  }
                >
                  <option value="true">通过</option>
                  <option value="false">拒绝</option>
                </select>
              </div>

              <div className={styles.withdrawals__formGroup}>
                <label>备注 (可选)</label>
                <textarea
                  value={reviewForm.remark}
                  onChange={(e) => setReviewForm({ ...reviewForm, remark: e.target.value })}
                  placeholder="请输入审核备注..."
                  rows={3}
                />
              </div>
            </div>
          )}
        </Modal>

        {/* 开始打款确认弹窗 */}
        <Modal
          visible={!!payingOrder}
          title="确认开始打款"
          onClose={() => setPayingOrder(null)}
          footer={
            <div className={styles.withdrawals__modalFooter}>
              <Button variant="outline" onClick={() => setPayingOrder(null)}>
                取消
              </Button>
              <Button
                variant="primary"
                onClick={handleConfirmStartPayment}
                loading={startPaymentMutation.isPending}
              >
                确认开始打款
              </Button>
            </div>
          }
          width={500}
        >
          {payingOrder && (
            <div className={styles.withdrawals__detail}>
              <p>确认开始为以下订单打款：</p>
              <div className={styles.withdrawals__detailSection}>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>用户:</span>
                  <span className={styles.withdrawals__detailValue}>
                    {payingOrder.accountSequence}
                  </span>
                </div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>金额:</span>
                  <span className={styles.withdrawals__detailValue}>
                    ¥{parseFloat(payingOrder.amount).toFixed(2)}
                  </span>
                </div>
                <div className={styles.withdrawals__detailRow}>
                  <span className={styles.withdrawals__detailLabel}>收款方式:</span>
                  <span className={styles.withdrawals__detailValue}>
                    {getPaymentMethodLabel(payingOrder.paymentMethod)}
                  </span>
                </div>
                {payingOrder.paymentMethod === 'BANK_CARD' && (
                  <>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>银行:</span>
                      <span className={styles.withdrawals__detailValue}>{payingOrder.bankName}</span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>卡号:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {payingOrder.bankCardNo}
                      </span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>持卡人:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {payingOrder.cardHolderName}
                      </span>
                    </div>
                  </>
                )}
                {payingOrder.paymentMethod === 'ALIPAY' && (
                  <>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>账号:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {payingOrder.alipayAccount}
                      </span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>姓名:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {payingOrder.alipayRealName}
                      </span>
                    </div>
                  </>
                )}
                {payingOrder.paymentMethod === 'WECHAT' && (
                  <>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>账号:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {payingOrder.wechatAccount}
                      </span>
                    </div>
                    <div className={styles.withdrawals__detailRow}>
                      <span className={styles.withdrawals__detailLabel}>姓名:</span>
                      <span className={styles.withdrawals__detailValue}>
                        {payingOrder.wechatRealName}
                      </span>
                    </div>
                  </>
                )}
              </div>
            </div>
          )}
        </Modal>

        {/* 完成打款弹窗 */}
        <Modal
          visible={!!completingOrder}
          title="完成打款"
          onClose={() => setCompletingOrder(null)}
          footer={
            <div className={styles.withdrawals__modalFooter}>
              <Button variant="outline" onClick={() => setCompletingOrder(null)}>
                取消
              </Button>
              <Button
                variant="primary"
                onClick={handleSubmitComplete}
                loading={completePaymentMutation.isPending}
              >
                确认完成
              </Button>
            </div>
          }
          width={500}
        >
          {completingOrder && (
            <div className={styles.withdrawals__form}>
              <div className={styles.withdrawals__detailRow}>
                <span className={styles.withdrawals__detailLabel}>用户:</span>
                <span className={styles.withdrawals__detailValue}>
                  {completingOrder.accountSequence}
                </span>
              </div>
              <div className={styles.withdrawals__detailRow}>
                <span className={styles.withdrawals__detailLabel}>金额:</span>
                <span className={styles.withdrawals__detailValue}>
                  ¥{parseFloat(completingOrder.amount).toFixed(2)}
                </span>
              </div>

              <div className={styles.withdrawals__formGroup}>
                <label>打款凭证 (可选)</label>
                <input
                  type="text"
                  value={paymentForm.paymentProof}
                  onChange={(e) => setPaymentForm({ ...paymentForm, paymentProof: e.target.value })}
                  placeholder="请输入打款凭证编号或截图链接..."
                />
              </div>

              <div className={styles.withdrawals__formGroup}>
                <label>备注 (可选)</label>
                <textarea
                  value={paymentForm.remark}
                  onChange={(e) => setPaymentForm({ ...paymentForm, remark: e.target.value })}
                  placeholder="请输入打款备注..."
                  rows={3}
                />
              </div>
            </div>
          )}
        </Modal>
      </div>
    </PageContainer>
  );
}
