'use client';

import { useState, useCallback, useEffect } from 'react';
import { useParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { Button } from '@/components/common';
import { PageContainer } from '@/components/layout';
import { cn } from '@/utils/helpers';
import { formatNumber, formatRanking } from '@/utils/formatters';
import {
  useUserFullDetail,
  useReferralTree,
  usePlantingLedger,
  useWalletLedger,
  useAuthorizationDetail,
} from '@/hooks/useUserDetailPage';
import { userDetailService } from '@/services/userDetailService';
// [2026-02-05] 新增：合同服务
import { contractService, CONTRACT_STATUS_LABELS, type ContractsListResponse } from '@/services/contractService';

// 获取合同状态颜色（内联样式）
const getContractStatusStyle = (status: string): React.CSSProperties => {
  switch (status) {
    case 'SIGNED':
      return { color: '#16a34a' };
    case 'PENDING':
    case 'SCROLLED':
    case 'ACKNOWLEDGED':
      return { color: '#ca8a04' };
    case 'EXPIRED':
    case 'TIMEOUT':
      return { color: '#dc2626' };
    default:
      return { color: '#4b5563' };
  }
};
import type { ReferralNode } from '@/types/userDetail.types';
import { PROVINCE_CODE_NAMES, CITY_CODE_NAMES } from '@/types';
import styles from './user-detail.module.scss';

// Tab 类型
// [2026-02-05] 更新：新增 contracts Tab
type TabType = 'referral' | 'planting' | 'wallet' | 'authorization' | 'contracts';

const tabs: { key: TabType; label: string }[] = [
  { key: 'referral', label: '引荐关系' },
  { key: 'planting', label: '认种信息' },
  { key: 'wallet', label: '钱包信息' },
  { key: 'authorization', label: '授权信息' },
  // [2026-02-05] 新增：合同信息 Tab
  { key: 'contracts', label: '合同信息' },
];

// 流水类型标签
const entryTypeLabels: Record<string, string> = {
  DEPOSIT: '充值',
  DEPOSIT_USDT: '绿积分充值',
  DEPOSIT_BNB: 'BNB充值',
  WITHDRAW: '提现',
  WITHDRAW_FROZEN: '提现冻结',
  WITHDRAW_CONFIRMED: '提现确认',
  WITHDRAW_CANCELLED: '提现取消',
  PLANTING_PAYMENT: '认种支付',
  PLANTING_FROZEN: '认种冻结',
  PLANTING_DEDUCT: '认种扣款',
  REWARD_PENDING: '收益待领取',
  REWARD_SETTLED: '收益结算',
  REWARD_EXPIRED: '收益过期',
  TRANSFER_OUT: '转出',
  TRANSFER_IN: '转入',
  INTERNAL_TRANSFER: '内部转账',
  ADMIN_ADJUSTMENT: '管理员调整',
  SYSTEM_DEDUCT: '系统扣款',
  FEE: '手续费',
};

const assetTypeLabels: Record<string, string> = {
  USDT: '绿积分',
  DST: 'DST',
  BNB: 'BNB',
  OG: 'OG',
  RWAD: 'RWAD',
  HASHPOWER: '算力',
};

const plantingStatusLabels: Record<string, string> = {
  CREATED: '已创建',
  PAID: '已支付',
  FUND_ALLOCATED: '资金已分配',
  MINING_ENABLED: '已开始挖矿',
  CANCELLED: '已取消',
  EXPIRED: '已过期',
};

const roleTypeLabels: Record<string, string> = {
  COMMUNITY: '部门权益',
  COMMUNITY_PARTNER: '部门权益',
  AUTH_PROVINCE_COMPANY: '省团队',  // 授权省公司 = 省团队权益
  PROVINCE_COMPANY: '省区域',       // 正式省公司 = 省区域权益
  AUTH_CITY_COMPANY: '市团队',      // 授权市公司 = 市团队权益(40U)
  CITY_COMPANY: '市区域',           // 正式市公司 = 市区域权益(35U+2%算力)
};

// 判断是否为社区/部门类型角色
const isCommunityRole = (roleType: string): boolean => {
  return roleType === 'COMMUNITY' || roleType === 'COMMUNITY_PARTNER';
};

// 判断是否为市级角色
const isCityRole = (roleType: string): boolean => {
  return roleType === 'AUTH_CITY_COMPANY' || roleType === 'CITY_COMPANY';
};

// 获取区域标签名称
const getRegionLabel = (roleType: string): string => {
  if (isCommunityRole(roleType)) return '部门名称:';
  if (isCityRole(roleType)) return '城市名称:';
  return '区域:';
};

const authStatusLabels: Record<string, string> = {
  PENDING: '待授权',
  AUTHORIZED: '已授权',
  REVOKED: '已撤销',
  EXPIRED: '已过期',
};

const assessmentResultLabels: Record<string, string> = {
  NOT_ASSESSED: '未考核',
  PASSED: '通过',
  FAILED: '未通过',
  BYPASSED: '豁免',
};

// 权益操作类型标签
const benefitActionLabels: Record<string, string> = {
  ACTIVATED: '已激活',
  RENEWED: '已续期',
  DEACTIVATED: '已停用',
  NO_CHANGE: '无变化',
};

/**
 * 将区域代码转换为名称
 * @param code 区域代码，如 450000（省）或 451200（市）
 * @returns 区域名称
 */
const getRegionName = (code: string | null | undefined): string => {
  if (!code) return '-';
  // 先尝试查找城市
  if (CITY_CODE_NAMES[code]) {
    return CITY_CODE_NAMES[code];
  }
  // 再尝试查找省份
  if (PROVINCE_CODE_NAMES[code]) {
    return PROVINCE_CODE_NAMES[code];
  }
  // 尝试去掉后4位的0（如 450000 -> 45）查找省份
  if (code.length === 6 && code.endsWith('0000')) {
    const shortCode = code.substring(0, 2);
    if (PROVINCE_CODE_NAMES[shortCode]) {
      return PROVINCE_CODE_NAMES[shortCode];
    }
  }
  return code;
};

/**
 * 用户详情页面
 */
export default function UserDetailPage() {
  const params = useParams();
  const router = useRouter();
  const accountSequence = params.id as string;

  const [activeTab, setActiveTab] = useState<TabType>('referral');
  const [treeRootUser, setTreeRootUser] = useState<string>(accountSequence);
  const [plantingPage, setPlantingPage] = useState(1);
  const [walletPage, setWalletPage] = useState(1);
  // 存储已展开节点的状态：key 是节点 accountSequence，value 是其子节点数组（null 表示未加载）
  const [expandedNodes, setExpandedNodes] = useState<Record<string, ReferralNode[] | null>>({});
  // [2026-02-05] 新增：合同信息状态
  const [contractsPage, setContractsPage] = useState(1);
  const [contractsData, setContractsData] = useState<ContractsListResponse | null>(null);
  const [contractsLoading, setContractsLoading] = useState(false);

  // 获取用户完整信息
  const { data: userDetail, isLoading: detailLoading, error: detailError } = useUserFullDetail(accountSequence);

  // 获取推荐关系树（以当前选中的用户为根）
  const { data: referralTree, isLoading: treeLoading } = useReferralTree(treeRootUser, 'both', 1);

  // 获取认种分类账
  const { data: plantingData, isLoading: plantingLoading } = usePlantingLedger(accountSequence, {
    page: plantingPage,
    pageSize: 10,
  });

  // 获取钱包分类账
  const { data: walletData, isLoading: walletLoading } = useWalletLedger(accountSequence, {
    page: walletPage,
    pageSize: 10,
  });

  // 获取授权信息
  const { data: authData, isLoading: authLoading } = useAuthorizationDetail(accountSequence);

  // 当 referralTree 数据加载完成后，自动展开当前用户的直推下级
  useEffect(() => {
    if (referralTree && referralTree.directReferrals.length > 0) {
      setExpandedNodes((prev) => ({
        ...prev,
        [referralTree.currentUser.accountSequence]: referralTree.directReferrals,
      }));
    }
  }, [referralTree]);

  // [2026-02-05] 新增：加载合同数据
  useEffect(() => {
    if (activeTab === 'contracts') {
      setContractsLoading(true);
      contractService.getUserContracts(accountSequence, {
        page: contractsPage,
        pageSize: 10,
      })
        .then((data) => {
          setContractsData(data);
        })
        .catch((error) => {
          console.error('获取合同列表失败:', error);
          setContractsData(null);
        })
        .finally(() => {
          setContractsLoading(false);
        });
    }
  }, [activeTab, accountSequence, contractsPage]);

  // 切换推荐关系树的根节点
  const handleTreeNodeClick = useCallback((node: ReferralNode) => {
    setTreeRootUser(node.accountSequence);
  }, []);

  // 展开/收起节点的下级
  const handleToggleNode = useCallback(async (nodeSeq: string, hasChildren: boolean) => {
    if (!hasChildren) return;

    // 如果已展开，则收起
    if (expandedNodes[nodeSeq] !== undefined) {
      setExpandedNodes(prev => {
        const newState = { ...prev };
        delete newState[nodeSeq];
        return newState;
      });
      return;
    }

    // 展开：先标记为 null（加载中），然后获取数据
    setExpandedNodes(prev => ({ ...prev, [nodeSeq]: null }));

    try {
      const treeData = await userDetailService.getReferralTree(nodeSeq, 'down', 1);
      setExpandedNodes(prev => ({ ...prev, [nodeSeq]: treeData.directReferrals }));
    } catch (error) {
      console.error('获取下级失败:', error);
      // 加载失败时移除展开状态
      setExpandedNodes(prev => {
        const newState = { ...prev };
        delete newState[nodeSeq];
        return newState;
      });
    }
  }, [expandedNodes]);

  // 返回列表
  const handleBack = useCallback(() => {
    router.push('/users');
  }, [router]);

  // [2026-02-05] 新增：下载合同 PDF
  const handleDownloadContract = useCallback((orderNo: string) => {
    const downloadUrl = contractService.getDownloadUrl(orderNo);
    window.open(downloadUrl, '_blank');
  }, []);

  // 格式化日期
  const formatDate = (dateStr: string | null) => {
    if (!dateStr) return '-';
    return new Date(dateStr).toLocaleString('zh-CN');
  };

  // 格式化金额
  const formatAmount = (amount: string | null) => {
    if (!amount) return '-';
    const num = parseFloat(amount);
    return num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 8 });
  };

  if (detailLoading) {
    return (
      <PageContainer title="用户详情">
        <div className={styles.loading}>加载中...</div>
      </PageContainer>
    );
  }

  if (detailError || !userDetail) {
    return (
      <PageContainer title="用户详情">
        <div className={styles.error}>
          <p>加载失败: {(detailError as Error)?.message || '用户不存在'}</p>
          <Button onClick={handleBack}>返回列表</Button>
        </div>
      </PageContainer>
    );
  }

  return (
    <PageContainer title={`用户详情 - ${userDetail.accountSequence}`}>
      <div className={styles.userDetail}>
        {/* 返回按钮 */}
        <div className={styles.userDetail__backBar}>
          <button className={styles.userDetail__backBtn} onClick={handleBack}>
            <span className={styles.userDetail__backIcon}>←</span>
            返回用户列表
          </button>
        </div>

        {/* 用户基本信息卡片 */}
        <div className={styles.userDetail__basicCard}>
          <div className={styles.userDetail__basicHeader}>
            <div
              className={styles.userDetail__avatar}
              style={{ backgroundImage: `url(${userDetail.avatar || '/images/Data@2x.png'})` }}
            >
              <div
                className={cn(
                  styles.userDetail__status,
                  userDetail.isOnline ? styles['userDetail__status--online'] : styles['userDetail__status--offline']
                )}
              />
            </div>
            <div className={styles.userDetail__basicInfo}>
              <h1 className={styles.userDetail__nickname}>
                {userDetail.nickname || '未设置昵称'}
                <span className={cn(
                  styles.userDetail__statusBadge,
                  styles[`userDetail__statusBadge--${userDetail.status}`]
                )}>
                  {userDetail.status === 'active' ? '正常' : userDetail.status === 'frozen' ? '冻结' : '停用'}
                </span>
              </h1>
              <div className={styles.userDetail__basicMeta}>
                <span>账户序号: <strong>{userDetail.accountSequence}</strong></span>
                <span>手机号: {userDetail.phoneNumberMasked || '未绑定'}</span>
                <span>KYC: {userDetail.kycStatus}</span>
              </div>
              <div className={styles.userDetail__basicMeta}>
                <span>注册时间: {formatDate(userDetail.registeredAt)}</span>
                <span>最后活跃: {formatDate(userDetail.lastActiveAt)}</span>
              </div>
            </div>
          </div>

          {/* 统计卡片 */}
          <div className={styles.userDetail__statsGrid}>
            <div className={styles.userDetail__statCard}>
              <span className={styles.userDetail__statLabel}>个人认种量</span>
              <span className={styles.userDetail__statValue}>{formatNumber(userDetail.personalAdoptions)}</span>
            </div>
            <div className={styles.userDetail__statCard}>
              <span className={styles.userDetail__statLabel}>团队认种量</span>
              <span className={styles.userDetail__statValue}>{formatNumber(userDetail.teamAdoptions)}</span>
            </div>
            <div className={styles.userDetail__statCard}>
              <span className={styles.userDetail__statLabel}>团队地址数</span>
              <span className={styles.userDetail__statValue}>{formatNumber(userDetail.teamAddresses)}</span>
            </div>
            <div className={styles.userDetail__statCard}>
              <span className={styles.userDetail__statLabel}>龙虎榜排名</span>
              <span className={cn(
                styles.userDetail__statValue,
                userDetail.ranking && userDetail.ranking <= 10 && styles['userDetail__statValue--gold']
              )}>
                {userDetail.ranking ? formatRanking(userDetail.ranking) : '-'}
              </span>
            </div>
            <div className={styles.userDetail__statCard}>
              <span className={styles.userDetail__statLabel}>引荐人数</span>
              <span className={styles.userDetail__statValue}>
                {formatNumber(userDetail.referralInfo.directReferralCount)}
              </span>
            </div>
          </div>

          {/* 引荐人信息 */}
          {userDetail.referralInfo.referrerSequence && (
            <div className={styles.userDetail__referrerInfo}>
              <span className={styles.userDetail__referrerLabel}>引荐人:</span>
              <Link
                href={`/users/${userDetail.referralInfo.referrerSequence}`}
                className={styles.userDetail__referrerLink}
              >
                {userDetail.referralInfo.referrerSequence}
                {userDetail.referralInfo.referrerNickname && ` (${userDetail.referralInfo.referrerNickname})`}
              </Link>
              <span className={styles.userDetail__referrerMeta}>
                邀请码: {userDetail.referralInfo.usedReferralCode || '-'}
              </span>
              <span className={styles.userDetail__referrerMeta}>
                层级深度: {userDetail.referralInfo.depth}
              </span>
            </div>
          )}
        </div>

        {/* Tab 切换 */}
        <div className={styles.userDetail__tabs}>
          {tabs.map((tab) => (
            <button
              key={tab.key}
              className={cn(
                styles.userDetail__tab,
                activeTab === tab.key && styles['userDetail__tab--active']
              )}
              onClick={() => setActiveTab(tab.key)}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Tab 内容 */}
        <div className={styles.userDetail__tabContent}>
          {/* 引荐关系 Tab */}
          {activeTab === 'referral' && (
            <div className={styles.referralTab}>
              <div className={styles.referralTab__header}>
                <h3>引荐关系树</h3>
                {treeRootUser !== accountSequence && (
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setTreeRootUser(accountSequence)}
                  >
                    返回当前用户
                  </Button>
                )}
              </div>

              {treeLoading ? (
                <div className={styles.referralTab__loading}>加载中...</div>
              ) : referralTree ? (
                <div className={styles.referralTree}>
                  {/* 向上的引荐人链 */}
                  <div className={styles.referralTree__ancestors}>
                    <div className={styles.referralTree__label}>引荐人链 (向上)</div>
                    {referralTree.ancestors.length > 0 ? (
                      <>
                        {/* 有上级时显示祖先节点列表 */}
                        <div className={styles.referralTree__nodeList}>
                          {referralTree.ancestors.map((ancestor, index) => (
                            <div key={ancestor.accountSequence} className={styles.referralTree__nodeWrapper}>
                              <button
                                className={styles.referralTree__node}
                                onClick={() => handleTreeNodeClick(ancestor)}
                              >
                                <span className={styles.referralTree__nodeSeq}>{ancestor.accountSequence}</span>
                                <span className={styles.referralTree__nodeNickname}>
                                  {ancestor.nickname || '未设置'}
                                </span>
                                <span className={styles.referralTree__nodeAdoptions}>
                                  本人认种: {formatNumber(ancestor.personalAdoptions)} / 团队认种: {formatNumber(ancestor.teamAdoptions)}
                                </span>
                              </button>
                              {index < referralTree.ancestors.length - 1 && (
                                <div className={styles.referralTree__connector}>↓</div>
                              )}
                            </div>
                          ))}
                        </div>
                        <div className={styles.referralTree__connector}>↓</div>
                      </>
                    ) : (
                      <>
                        {/* 没有上级时显示总部节点 */}
                        <div className={styles.referralTree__headquarters}>
                          <span className={styles.referralTree__headquartersLabel}>总部</span>
                        </div>
                        <div className={styles.referralTree__connector}>↓</div>
                      </>
                    )}
                  </div>

                  {/* 当前用户及其递归下级 */}
                  <div className={styles.referralTree__currentWrapper}>
                    <ReferralNodeItem
                      node={referralTree.currentUser}
                      isCurrentUser={true}
                      isHighlight={referralTree.currentUser.accountSequence === accountSequence}
                      expandedNodes={expandedNodes}
                      onToggle={handleToggleNode}
                      onClick={handleTreeNodeClick}
                    />
                  </div>

                </div>
              ) : (
                <div className={styles.referralTab__empty}>暂无引荐关系数据</div>
              )}
            </div>
          )}

          {/* 认种信息 Tab */}
          {activeTab === 'planting' && (
            <div className={styles.plantingTab}>
              {plantingLoading ? (
                <div className={styles.plantingTab__loading}>加载中...</div>
              ) : plantingData ? (
                <>
                  {/* 认种汇总 */}
                  <div className={styles.plantingTab__summary}>
                    <h3>认种汇总</h3>
                    <div className={styles.plantingTab__summaryGrid}>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>总订单数</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatNumber(plantingData.summary.totalOrders)}
                        </span>
                      </div>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>总认种量</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatNumber(plantingData.summary.totalTreeCount)}
                        </span>
                      </div>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>总金额 (绿积分)</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatAmount(plantingData.summary.totalAmount)}
                        </span>
                      </div>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>有效认种量</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatNumber(plantingData.summary.effectiveTreeCount)}
                        </span>
                      </div>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>首次认种</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatDate(plantingData.summary.firstPlantingAt)}
                        </span>
                      </div>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>最近认种</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatDate(plantingData.summary.lastPlantingAt)}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 认种分类账 */}
                  <div className={styles.plantingTab__ledger}>
                    <h3>认种分类账明细</h3>
                    <div className={styles.ledgerTable}>
                      <div className={styles.ledgerTable__header}>
                        <div className={styles.ledgerTable__cell}>订单号</div>
                        <div className={styles.ledgerTable__cell}>认种数量</div>
                        <div className={styles.ledgerTable__cell}>金额</div>
                        <div className={styles.ledgerTable__cell}>省市</div>
                        <div className={styles.ledgerTable__cell}>创建时间</div>
                        <div className={styles.ledgerTable__cell}>支付时间</div>
                      </div>
                      {plantingData.items.length === 0 ? (
                        <div className={styles.ledgerTable__empty}>暂无认种记录</div>
                      ) : (
                        plantingData.items.map((item) => (
                          <div key={item.orderId} className={styles.ledgerTable__row}>
                            <div className={styles.ledgerTable__cell}>{item.orderNo}</div>
                            <div className={styles.ledgerTable__cell}>{formatNumber(item.treeCount)}</div>
                            <div className={styles.ledgerTable__cell}>{formatAmount(item.totalAmount)}</div>
                            <div className={styles.ledgerTable__cell}>
                              {getRegionName(item.selectedProvince)} / {getRegionName(item.selectedCity)}
                            </div>
                            <div className={styles.ledgerTable__cell}>{formatDate(item.createdAt)}</div>
                            <div className={styles.ledgerTable__cell}>{formatDate(item.paidAt)}</div>
                          </div>
                        ))
                      )}
                    </div>

                    {/* 分页 */}
                    {plantingData.totalPages > 1 && (
                      <div className={styles.pagination}>
                        <button
                          disabled={plantingPage === 1}
                          onClick={() => setPlantingPage((p) => p - 1)}
                        >
                          上一页
                        </button>
                        <span>第 {plantingPage} / {plantingData.totalPages} 页</span>
                        <button
                          disabled={plantingPage === plantingData.totalPages}
                          onClick={() => setPlantingPage((p) => p + 1)}
                        >
                          下一页
                        </button>
                      </div>
                    )}
                  </div>
                </>
              ) : (
                <div className={styles.plantingTab__empty}>暂无认种数据</div>
              )}
            </div>
          )}

          {/* 钱包信息 Tab */}
          {activeTab === 'wallet' && (
            <div className={styles.walletTab}>
              {walletLoading ? (
                <div className={styles.walletTab__loading}>加载中...</div>
              ) : walletData ? (
                <>
                  {/* 钱包汇总 */}
                  <div className={styles.walletTab__summary}>
                    <h3>钱包汇总</h3>
                    <div className={styles.walletTab__summaryGrid}>
                      <div className={styles.walletTab__summaryItem}>
                        <span className={styles.walletTab__summaryLabel}>绿积分 可用</span>
                        <span className={styles.walletTab__summaryValue}>
                          {formatAmount(walletData.summary.usdtAvailable)}
                        </span>
                      </div>
                      <div className={styles.walletTab__summaryItem}>
                        <span className={styles.walletTab__summaryLabel}>绿积分 冻结</span>
                        <span className={styles.walletTab__summaryValue}>
                          {formatAmount(walletData.summary.usdtFrozen)}
                        </span>
                      </div>
                      <div className={styles.walletTab__summaryItem}>
                        <span className={styles.walletTab__summaryLabel}>待领取收益</span>
                        <span className={styles.walletTab__summaryValue}>
                          {formatAmount(walletData.summary.pendingUsdt)}
                        </span>
                      </div>
                      <div className={styles.walletTab__summaryItem}>
                        <span className={styles.walletTab__summaryLabel}>可结算收益</span>
                        <span className={styles.walletTab__summaryValue}>
                          {formatAmount(walletData.summary.settleableUsdt)}
                        </span>
                      </div>
                      <div className={styles.walletTab__summaryItem}>
                        <span className={styles.walletTab__summaryLabel}>已结算收益</span>
                        <span className={styles.walletTab__summaryValue}>
                          {formatAmount(walletData.summary.settledTotalUsdt)}
                        </span>
                      </div>
                      <div className={styles.walletTab__summaryItem}>
                        <span className={styles.walletTab__summaryLabel}>过期收益</span>
                        <span className={styles.walletTab__summaryValue}>
                          {formatAmount(walletData.summary.expiredTotalUsdt)}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 钱包分类账 */}
                  <div className={styles.walletTab__ledger}>
                    <h3>钱包分类账明细</h3>
                    <div className={styles.ledgerTable}>
                      <div className={styles.ledgerTable__header}>
                        <div className={styles.ledgerTable__cell}>流水ID</div>
                        <div className={styles.ledgerTable__cell}>类型</div>
                        <div className={styles.ledgerTable__cell}>资产</div>
                        <div className={styles.ledgerTable__cell}>金额</div>
                        <div className={styles.ledgerTable__cell}>余额快照</div>
                        <div className={styles.ledgerTable__cell}>关联订单</div>
                        <div className={styles.ledgerTable__cell}>备注</div>
                        <div className={styles.ledgerTable__cell}>时间</div>
                      </div>
                      {walletData.items.length === 0 ? (
                        <div className={styles.ledgerTable__empty}>暂无钱包流水</div>
                      ) : (
                        walletData.items.map((item) => (
                          <div key={item.entryId} className={styles.ledgerTable__row}>
                            <div className={styles.ledgerTable__cell}>{item.entryId}</div>
                            <div className={styles.ledgerTable__cell}>
                              {entryTypeLabels[item.entryType] || item.entryType}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {assetTypeLabels[item.assetType] || item.assetType}
                            </div>
                            <div className={cn(
                              styles.ledgerTable__cell,
                              parseFloat(item.amount) >= 0
                                ? styles['ledgerTable__cell--positive']
                                : styles['ledgerTable__cell--negative']
                            )}>
                              {parseFloat(item.amount) >= 0 ? '+' : ''}{formatAmount(item.amount)}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {formatAmount(item.balanceAfter)}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {item.refOrderId || item.refTxHash || '-'}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {item.memo || '-'}
                            </div>
                            <div className={styles.ledgerTable__cell}>{formatDate(item.createdAt)}</div>
                          </div>
                        ))
                      )}
                    </div>

                    {/* 分页 */}
                    {walletData.totalPages > 1 && (
                      <div className={styles.pagination}>
                        <button
                          disabled={walletPage === 1}
                          onClick={() => setWalletPage((p) => p - 1)}
                        >
                          上一页
                        </button>
                        <span>第 {walletPage} / {walletData.totalPages} 页</span>
                        <button
                          disabled={walletPage === walletData.totalPages}
                          onClick={() => setWalletPage((p) => p + 1)}
                        >
                          下一页
                        </button>
                      </div>
                    )}
                  </div>
                </>
              ) : (
                <div className={styles.walletTab__empty}>暂无钱包数据</div>
              )}
            </div>
          )}

          {/* 授权信息 Tab */}
          {activeTab === 'authorization' && (
            <div className={styles.authTab}>
              {authLoading ? (
                <div className={styles.authTab__loading}>加载中...</div>
              ) : authData ? (
                <>
                  {/* 授权角色列表 */}
                  <div className={styles.authTab__roles}>
                    <h3>授权角色</h3>
                    {authData.roles.length === 0 ? (
                      <div className={styles.authTab__empty}>暂无授权角色</div>
                    ) : (
                      <div className={styles.authTab__roleGrid}>
                        {authData.roles.map((role) => (
                          <div key={role.id} className={styles.authTab__roleCard}>
                            <div className={styles.authTab__roleHeader}>
                              <span className={styles.authTab__roleType}>
                                {roleTypeLabels[role.roleType] || role.roleType}
                              </span>
                              <span className={cn(
                                styles.authTab__roleStatus,
                                styles[`authTab__roleStatus--${role.status.toLowerCase()}`]
                              )}>
                                {authStatusLabels[role.status] || role.status}
                              </span>
                            </div>
                            <div className={styles.authTab__roleInfo}>
                              <p><strong>{getRegionLabel(role.roleType)}</strong> {role.regionName} ({role.regionCode})</p>
                              <p><strong>显示头衔:</strong> {role.displayTitle}</p>
                              <p>
                                <strong>权益状态:</strong>
                                {role.benefitActive ? (
                                  <span className={styles.authTab__benefitActive}>已激活</span>
                                ) : (
                                  <span className={styles.authTab__benefitInactive}>未激活</span>
                                )}
                              </p>
                              <p><strong>初始目标:</strong> {formatNumber(role.initialTargetTreeCount)} 棵</p>
                              <p><strong>月度目标类型:</strong> {role.monthlyTargetType}</p>
                              <p><strong>授权时间:</strong> {formatDate(role.authorizedAt)}</p>
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

                  {/* 月度考核记录 */}
                  <div className={styles.authTab__assessments}>
                    <h3>月度考核记录</h3>
                    {(() => {
                      // 只显示用户实际拥有且未撤销角色的考核记录（按 authorization_id 匹配）
                      const activeRoleIds = new Set(
                        authData.roles
                          .filter(r => r.status !== 'REVOKED')
                          .map(r => r.id)
                      );
                      const filteredAssessments = authData.assessments.filter(
                        a => activeRoleIds.has(a.authorizationId)
                      );

                      // 创建角色ID到区域名称的映射，用于显示角色的区域信息
                      const roleIdToRegion = new Map(
                        authData.roles.map(r => [r.id, r.regionName])
                      );

                      return filteredAssessments.length === 0 ? (
                        <div className={styles.authTab__empty}>暂无考核记录</div>
                      ) : (
                        <div className={styles.ledgerTable}>
                          <div className={styles.ledgerTable__header}>
                            <div className={styles.ledgerTable__cell}>考核月份</div>
                            <div className={styles.ledgerTable__cell}>角色</div>
                            <div className={styles.ledgerTable__cell}>区域</div>
                            <div className={styles.ledgerTable__cell}>月度目标/完成</div>
                            <div className={styles.ledgerTable__cell}>累计目标/完成</div>
                            <div className={styles.ledgerTable__cell}>结果</div>
                            <div className={styles.ledgerTable__cell}>区域排名</div>
                          </div>
                          {filteredAssessments.map((assessment) => (
                          <div key={assessment.id} className={styles.ledgerTable__row}>
                            <div className={styles.ledgerTable__cell}>{assessment.assessmentMonth}</div>
                            <div className={styles.ledgerTable__cell}>
                              {roleTypeLabels[assessment.roleType] || assessment.roleType}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {roleIdToRegion.get(assessment.authorizationId) || getRegionName(assessment.regionCode)}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {formatNumber(assessment.monthlyCompleted)} / {formatNumber(assessment.monthlyTarget)}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {formatNumber(assessment.cumulativeCompleted)} / {formatNumber(assessment.cumulativeTarget)}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              <span className={cn(
                                styles.ledgerTable__result,
                                styles[`ledgerTable__result--${assessment.result.toLowerCase()}`]
                              )}>
                                {assessmentResultLabels[assessment.result] || assessment.result}
                              </span>
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {assessment.rankingInRegion || '-'}
                              {assessment.isFirstPlace && ' 🥇'}
                            </div>
                          </div>
                        ))}
                        </div>
                      );
                    })()}
                  </div>

                  {/* 权益考核记录 */}
                  <div className={styles.authTab__assessments}>
                    <h3>权益考核记录</h3>
                    {(() => {
                      // 只显示用户实际拥有且未撤销角色的权益考核记录
                      const activeRoleIds = new Set(
                        authData.roles
                          .filter(r => r.status !== 'REVOKED')
                          .map(r => r.id)
                      );
                      const filteredBenefitAssessments = (authData.benefitAssessments || []).filter(
                        a => activeRoleIds.has(a.authorizationId)
                      );

                      // 创建角色ID到区域名称的映射
                      const roleIdToRegion = new Map(
                        authData.roles.map(r => [r.id, r.regionName])
                      );

                      return filteredBenefitAssessments.length === 0 ? (
                        <div className={styles.authTab__empty}>暂无权益考核记录</div>
                      ) : (
                        <div className={styles.ledgerTable}>
                          <div className={styles.ledgerTable__header}>
                            <div className={styles.ledgerTable__cell}>考核月份</div>
                            <div className={styles.ledgerTable__cell}>角色</div>
                            <div className={styles.ledgerTable__cell}>区域</div>
                            <div className={styles.ledgerTable__cell}>完成/需求</div>
                            <div className={styles.ledgerTable__cell}>权益操作</div>
                            <div className={styles.ledgerTable__cell}>权益状态</div>
                            <div className={styles.ledgerTable__cell}>有效期至</div>
                            <div className={styles.ledgerTable__cell}>结果</div>
                          </div>
                          {filteredBenefitAssessments.map((assessment) => (
                            <div key={assessment.id} className={styles.ledgerTable__row}>
                              <div className={styles.ledgerTable__cell}>{assessment.assessmentMonth}</div>
                              <div className={styles.ledgerTable__cell}>
                                {roleTypeLabels[assessment.roleType] || assessment.roleType}
                              </div>
                              <div className={styles.ledgerTable__cell}>
                                {roleIdToRegion.get(assessment.authorizationId) || assessment.regionName || getRegionName(assessment.regionCode)}
                              </div>
                              <div className={styles.ledgerTable__cell}>
                                {formatNumber(assessment.treesCompleted)} / {formatNumber(assessment.treesRequired)}
                              </div>
                              <div className={styles.ledgerTable__cell}>
                                <span className={cn(
                                  styles.ledgerTable__benefitAction,
                                  styles[`ledgerTable__benefitAction--${assessment.benefitActionTaken.toLowerCase()}`]
                                )}>
                                  {benefitActionLabels[assessment.benefitActionTaken] || assessment.benefitActionTaken}
                                </span>
                              </div>
                              <div className={styles.ledgerTable__cell}>
                                {assessment.previousBenefitStatus ? '有效' : '无效'} → {assessment.newBenefitStatus ? '有效' : '无效'}
                              </div>
                              <div className={styles.ledgerTable__cell}>
                                {assessment.newValidUntil ? formatDate(assessment.newValidUntil) : '-'}
                              </div>
                              <div className={styles.ledgerTable__cell}>
                                <span className={cn(
                                  styles.ledgerTable__result,
                                  styles[`ledgerTable__result--${assessment.result.toLowerCase()}`]
                                )}>
                                  {assessmentResultLabels[assessment.result] || assessment.result}
                                </span>
                              </div>
                            </div>
                          ))}
                        </div>
                      );
                    })()}
                  </div>

                  {/* 系统账户流水（如果有） */}
                  {authData.systemAccountLedger.length > 0 && (
                    <div className={styles.authTab__systemLedger}>
                      <h3>系统账户流水</h3>
                      <div className={styles.ledgerTable}>
                        <div className={styles.ledgerTable__header}>
                          <div className={styles.ledgerTable__cell}>流水ID</div>
                          <div className={styles.ledgerTable__cell}>账户类型</div>
                          <div className={styles.ledgerTable__cell}>流水类型</div>
                          <div className={styles.ledgerTable__cell}>金额</div>
                          <div className={styles.ledgerTable__cell}>余额</div>
                          <div className={styles.ledgerTable__cell}>时间</div>
                        </div>
                        {authData.systemAccountLedger.map((ledger) => (
                          <div key={ledger.ledgerId} className={styles.ledgerTable__row}>
                            <div className={styles.ledgerTable__cell}>{ledger.ledgerId}</div>
                            <div className={styles.ledgerTable__cell}>{ledger.accountType}</div>
                            <div className={styles.ledgerTable__cell}>{ledger.entryType}</div>
                            <div className={cn(
                              styles.ledgerTable__cell,
                              parseFloat(ledger.amount) >= 0
                                ? styles['ledgerTable__cell--positive']
                                : styles['ledgerTable__cell--negative']
                            )}>
                              {parseFloat(ledger.amount) >= 0 ? '+' : ''}{formatAmount(ledger.amount)}
                            </div>
                            <div className={styles.ledgerTable__cell}>{formatAmount(ledger.balanceAfter)}</div>
                            <div className={styles.ledgerTable__cell}>{formatDate(ledger.createdAt)}</div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </>
              ) : (
                <div className={styles.authTab__empty}>暂无授权数据</div>
              )}
            </div>
          )}

          {/* [2026-02-05] 新增：合同信息 Tab */}
          {activeTab === 'contracts' && (
            <div className={styles.plantingTab}>
              {contractsLoading ? (
                <div className={styles.plantingTab__loading}>加载中...</div>
              ) : contractsData ? (
                <>
                  {/* 合同汇总 */}
                  <div className={styles.plantingTab__summary}>
                    <h3>合同汇总</h3>
                    <div className={styles.plantingTab__summaryGrid}>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>合同总数</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatNumber(contractsData.total)}
                        </span>
                      </div>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>已签署</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatNumber(contractsData.items.filter(c => c.status === 'SIGNED').length)}
                        </span>
                      </div>
                      <div className={styles.plantingTab__summaryItem}>
                        <span className={styles.plantingTab__summaryLabel}>待签署</span>
                        <span className={styles.plantingTab__summaryValue}>
                          {formatNumber(contractsData.items.filter(c => ['PENDING', 'SCROLLED', 'ACKNOWLEDGED'].includes(c.status)).length)}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* 合同列表 */}
                  <div className={styles.plantingTab__ledger}>
                    <h3>合同列表</h3>
                    <div className={styles.ledgerTable}>
                      <div className={styles.ledgerTable__header}>
                        <div className={styles.ledgerTable__cell}>合同编号</div>
                        <div className={styles.ledgerTable__cell}>订单号</div>
                        <div className={styles.ledgerTable__cell}>认种数量</div>
                        <div className={styles.ledgerTable__cell}>金额</div>
                        <div className={styles.ledgerTable__cell}>省市</div>
                        <div className={styles.ledgerTable__cell}>状态</div>
                        <div className={styles.ledgerTable__cell}>签署时间</div>
                        <div className={styles.ledgerTable__cell}>操作</div>
                      </div>
                      {contractsData.items.length === 0 ? (
                        <div className={styles.ledgerTable__empty}>暂无合同记录</div>
                      ) : (
                        contractsData.items.map((contract) => (
                          <div key={contract.orderNo} className={styles.ledgerTable__row}>
                            <div className={styles.ledgerTable__cell}>{contract.contractNo}</div>
                            <div className={styles.ledgerTable__cell}>{contract.orderNo}</div>
                            <div className={styles.ledgerTable__cell}>{formatNumber(contract.treeCount)}</div>
                            <div className={styles.ledgerTable__cell}>{formatAmount(contract.totalAmount.toString())}</div>
                            <div className={styles.ledgerTable__cell}>
                              {contract.provinceName} / {contract.cityName}
                            </div>
                            <div className={styles.ledgerTable__cell} style={getContractStatusStyle(contract.status)}>
                              {CONTRACT_STATUS_LABELS[contract.status] || contract.status}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {contract.signedAt ? formatDate(contract.signedAt) : '-'}
                            </div>
                            <div className={styles.ledgerTable__cell}>
                              {contract.status === 'SIGNED' && contract.signedPdfUrl && (
                                <Button
                                  variant="outline"
                                  size="sm"
                                  onClick={() => handleDownloadContract(contract.orderNo)}
                                >
                                  下载PDF
                                </Button>
                              )}
                            </div>
                          </div>
                        ))
                      )}
                    </div>

                    {/* 分页 */}
                    {contractsData.totalPages > 1 && (
                      <div className={styles.pagination}>
                        <button
                          disabled={contractsPage === 1}
                          onClick={() => setContractsPage((p) => p - 1)}
                        >
                          上一页
                        </button>
                        <span>第 {contractsPage} / {contractsData.totalPages} 页</span>
                        <button
                          disabled={contractsPage === contractsData.totalPages}
                          onClick={() => setContractsPage((p) => p + 1)}
                        >
                          下一页
                        </button>
                      </div>
                    )}
                  </div>
                </>
              ) : (
                <div className={styles.plantingTab__empty}>暂无合同数据</div>
              )}
            </div>
          )}
        </div>
      </div>
    </PageContainer>
  );
}

/**
 * 递归渲染引荐节点
 */
interface ReferralNodeItemProps {
  node: ReferralNode;
  isCurrentUser?: boolean;
  isHighlight?: boolean;
  expandedNodes: Record<string, ReferralNode[] | null>;
  onToggle: (nodeSeq: string, hasChildren: boolean) => void;
  onClick: (node: ReferralNode) => void;
}

function ReferralNodeItem({
  node,
  isCurrentUser = false,
  isHighlight = false,
  expandedNodes,
  onToggle,
  onClick,
}: ReferralNodeItemProps) {
  const hasChildren = node.directReferralCount > 0;
  const isExpanded = expandedNodes[node.accountSequence] !== undefined;
  const isLoading = expandedNodes[node.accountSequence] === null;
  const children = expandedNodes[node.accountSequence] || [];

  return (
    <div className={styles.referralTree__nodeItem}>
      <div className={styles.referralTree__nodeContent}>
        <button
          className={cn(
            styles.referralTree__node,
            isCurrentUser && styles['referralTree__node--current'],
            isHighlight && styles['referralTree__node--highlight']
          )}
          onClick={() => onClick(node)}
        >
          <span className={styles.referralTree__nodeSeq}>{node.accountSequence}</span>
          <span className={styles.referralTree__nodeNickname}>
            {node.nickname || '未设置'}
          </span>
          <span className={styles.referralTree__nodeAdoptions}>
            本人认种: {formatNumber(node.personalAdoptions)} / 团队认种: {formatNumber(node.teamAdoptions)}
          </span>
          {node.directReferralCount > 0 && (
            <span className={styles.referralTree__nodeCount}>
              引荐: {formatNumber(node.directReferralCount)}
            </span>
          )}
        </button>
        {/* 展开/收起按钮 */}
        {hasChildren && (
          <button
            className={styles.referralTree__toggleButton}
            onClick={(e) => {
              e.stopPropagation();
              onToggle(node.accountSequence, hasChildren);
            }}
            disabled={isLoading}
          >
            {isLoading ? '...' : isExpanded ? '−' : '+'}
          </button>
        )}
      </div>
      {/* 递归渲染子节点 */}
      {isExpanded && children.length > 0 && (
        <div className={styles.referralTree__children}>
          <div className={styles.referralTree__connector}>↓</div>
          <div className={styles.referralTree__childrenGrid}>
            {children.map((child) => (
              <ReferralNodeItem
                key={child.accountSequence}
                node={child}
                expandedNodes={expandedNodes}
                onToggle={onToggle}
                onClick={onClick}
              />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}