Genarrative/apps/admin-web/src/components/AdminUserDetailDialog.tsx

import {RefreshCcw, ShieldAlert, UserRound, X} from 'lucide-react';
import {useEffect, useRef, useState} from 'react';
import {createPortal} from 'react-dom';

import {
  formatAdminApiError,
  getAdminUserDetail,
  isAdminApiError,
  updateAdminWalletRestriction,
} from '../api/adminApiClient';
import type {
  AdminProfileWalletPayload,
  AdminUserDetailResponse,
} from '../api/adminApiTypes';
import {useAdminWriteConfirm} from './useAdminWriteConfirm';

interface AdminUserDetailDialogProps {
  token: string;
  userId?: string | null;
  publicUserCode?: string | null;
  onClose: () => void;
  onUnauthorized: (message?: string) => void;
}

export function AdminUserDetailDialog({
  token,
  userId,
  publicUserCode,
  onClose,
  onUnauthorized,
}: AdminUserDetailDialogProps) {
  const [detail, setDetail] = useState<AdminUserDetailResponse | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState('');
  const [restrictionReason, setRestrictionReason] = useState('');
  const [isSavingRestriction, setIsSavingRestriction] = useState(false);
  const closeButtonRef = useRef<HTMLButtonElement | null>(null);
  const requestVersionRef = useRef(0);
  const {confirmWrite, confirmDialog, isConfirming} = useAdminWriteConfirm();

  useEffect(() => {
    void loadDetail();
    return () => {
      requestVersionRef.current += 1;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [token, userId, publicUserCode]);

  useEffect(() => {
    closeButtonRef.current?.focus();
  }, []);

  useEffect(() => {
    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, []);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape' && !isSavingRestriction && !isConfirming) {
        event.preventDefault();
        onClose();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [isConfirming, isSavingRestriction, onClose]);

  async function loadDetail() {
    const requestVersion = requestVersionRef.current + 1;
    requestVersionRef.current = requestVersion;
    setIsLoading(true);
    setErrorMessage('');
    try {
      const response = await getAdminUserDetail(token, {
        userId: userId?.trim() || undefined,
        publicUserCode: userId?.trim()
          ? undefined
          : publicUserCode?.trim() || undefined,
      });
      if (requestVersionRef.current === requestVersion) {
        setDetail(response);
      }
    } catch (error: unknown) {
      if (requestVersionRef.current !== requestVersion) {
        return;
      }
      if (isAdminApiError(error) && error.status === 401) {
        onUnauthorized('登录状态已失效');
        return;
      }
      setErrorMessage(formatAdminApiError(error));
    } finally {
      if (requestVersionRef.current === requestVersion) {
        setIsLoading(false);
      }
    }
  }

  async function handleRestrictionChange() {
    if (!detail || isSavingRestriction) {
      return;
    }
    const reason = restrictionReason.trim();
    if (!reason) {
      setErrorMessage('请填写人工冻结操作原因');
      return;
    }
    const nextFrozen = !detail.wallet.manualFrozen;
    const action = nextFrozen ? '人工冻结钱包' : '解除人工冻结';
    const confirmed = await confirmWrite({
      action,
      target: `${detail.displayName || detail.publicUserCode} / ${detail.userId}`,
    });
    if (!confirmed) {
      return;
    }

    setIsSavingRestriction(true);
    setErrorMessage('');
    try {
      const response = await updateAdminWalletRestriction(token, {
        userId: detail.userId,
        frozen: nextFrozen,
        reason,
      });
      setDetail((current) =>
        current ? {...current, wallet: response.wallet} : current,
      );
      setRestrictionReason('');
    } catch (error: unknown) {
      if (isAdminApiError(error) && error.status === 401) {
        onUnauthorized('登录状态已失效');
      } else {
        setErrorMessage(formatAdminApiError(error));
      }
    } finally {
      setIsSavingRestriction(false);
    }
  }

  if (typeof document === 'undefined') {
    return null;
  }

  return createPortal(
    <div
      aria-modal="true"
      className="admin-confirm-backdrop admin-user-detail-backdrop"
      role="dialog"
      aria-labelledby="admin-user-detail-title"
      onMouseDown={(event) => {
        if (
          event.target === event.currentTarget &&
          !isSavingRestriction &&
          !isConfirming
        ) {
          onClose();
        }
      }}
    >
      <section className="admin-detail-panel admin-user-detail-panel">
        <div className="admin-panel-heading">
          <div>
            <h3 id="admin-user-detail-title">用户详情</h3>
            <span>{detail?.publicUserCode || publicUserCode || userId || '-'}</span>
          </div>
          <div className="admin-detail-actions">
            <button
              aria-label="刷新用户信息"
              className="admin-ghost-button"
              disabled={isLoading}
              title="刷新"
              type="button"
              onClick={() => void loadDetail()}
            >
              <RefreshCcw size={17} aria-hidden="true" />
            </button>
            <button
              ref={closeButtonRef}
              aria-label="关闭用户详情"
              className="admin-ghost-button"
              disabled={isSavingRestriction}
              title="关闭"
              type="button"
              onClick={onClose}
            >
              <X size={17} aria-hidden="true" />
            </button>
          </div>
        </div>

        {isLoading ? (
          <div className="admin-user-detail-loading" role="status">
            <div className="admin-loading-mark" />
            <span>正在读取用户信息</span>
          </div>
        ) : errorMessage && !detail ? (
          <div className="admin-user-detail-error">
            <div className="admin-alert" role="status">
              {errorMessage}
            </div>
            <button
              className="admin-secondary-button"
              type="button"
              onClick={() => void loadDetail()}
            >
              <RefreshCcw size={17} aria-hidden="true" />
              <span>重试</span>
            </button>
          </div>
        ) : detail ? (
          <>
            <UserIdentityHeader detail={detail} />
            {errorMessage ? (
              <div className="admin-alert" role="status">
                {errorMessage}
              </div>
            ) : null}
            <WalletSection wallet={detail.wallet} />

            <section className="admin-user-restriction-section">
              <div className="admin-panel-heading">
                <h3>人工冻结</h3>
                <span>
                  {detail.wallet.manualFrozen ? '当前已冻结' : '当前未冻结'}
                </span>
              </div>
              {detail.wallet.manualRestriction ? (
                <div className="admin-user-restriction-record">
                  <span>{detail.wallet.manualRestriction.reason || '未填写原因'}</span>
                  <small>
                    {formatMicros(detail.wallet.manualRestriction.updatedAtMicros)} /{' '}
                    {detail.wallet.manualRestriction.updatedByAdminDisplayName}
                  </small>
                </div>
              ) : null}
              {detail.wallet.manualFrozen && detail.wallet.refundDebtFrozen ? (
                <div className="admin-alert admin-alert-warning" role="status">
                  <ShieldAlert size={17} aria-hidden="true" />
                  <span>解除人工冻结后，退款欠账限制仍会保留。</span>
                </div>
              ) : null}
              <div className="admin-user-restriction-actions">
                <label className="admin-field admin-field-fill">
                  <span>操作原因</span>
                  <input
                    aria-label="人工冻结操作原因"
                    disabled={isSavingRestriction}
                    value={restrictionReason}
                    onChange={(event) => setRestrictionReason(event.target.value)}
                  />
                </label>
                <button
                  className={
                    detail.wallet.manualFrozen
                      ? 'admin-secondary-button'
                      : 'admin-danger-button'
                  }
                  disabled={isSavingRestriction || !restrictionReason.trim()}
                  type="button"
                  onClick={() => void handleRestrictionChange()}
                >
                  <ShieldAlert size={17} aria-hidden="true" />
                  <span>
                    {isSavingRestriction
                      ? '处理中'
                      : detail.wallet.manualFrozen
                        ? '解除人工冻结'
                        : '人工冻结钱包'}
                  </span>
                </button>
              </div>
            </section>

            <section className="admin-user-recharge-section">
              <div className="admin-panel-heading">
                <h3>充值订单</h3>
                <span>{detail.rechargeOrders.length} 笔</span>
              </div>
              {detail.rechargeOrders.length ? (
                <div className="admin-table-wrap">
                  <table className="admin-table admin-user-recharge-table">
                    <thead>
                      <tr>
                        <th>订单</th>
                        <th>商品</th>
                        <th>实付</th>
                        <th>退款</th>
                        <th>状态</th>
                      </tr>
                    </thead>
                    <tbody>
                      {detail.rechargeOrders.map((order) => (
                        <tr key={order.orderId}>
                          <td>
                            <span className="admin-mono-value">{order.orderId}</span>
                            <small>{formatMicros(order.createdAtMicros)}</small>
                          </td>
                          <td>
                            {order.productTitle || order.productId}
                            <small>发放 {order.pointsDelta} 泥点</small>
                          </td>
                          <td>{formatMoney(order.amountCents)}</td>
                          <td>
                            {formatMoney(order.cumulativeSuccessRefundCents)}
                            <small>欠账 {order.unrecoveredPoints} 泥点</small>
                          </td>
                          <td>{formatOrderStatus(order.status)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              ) : (
                <div className="admin-empty-state">暂无充值订单</div>
              )}
            </section>
          </>
        ) : null}
      </section>
      {confirmDialog}
    </div>,
    document.body,
  );
}

function UserIdentityHeader({detail}: {detail: AdminUserDetailResponse}) {
  return (
    <section className="admin-user-identity">
      <div className="admin-user-avatar">
        {detail.avatarUrl ? (
          <img alt={`${detail.displayName || detail.publicUserCode}头像`} src={detail.avatarUrl} />
        ) : (
          <UserRound size={30} aria-hidden="true" />
        )}
      </div>
      <div className="admin-user-identity-primary">
        <strong>{detail.displayName || '未设置昵称'}</strong>
        <span>{detail.publicUserCode || '未分配陶泥号'}</span>
      </div>
      <dl className="admin-info-list admin-user-identity-list">
        <div>
          <dt>内部 ID</dt>
          <dd>{detail.userId}</dd>
        </div>
        <div>
          <dt>脱敏手机号</dt>
          <dd>{detail.phoneNumberMasked || '未绑定'}</dd>
        </div>
        <div>
          <dt>登录方式</dt>
          <dd>{detail.loginMethod || '-'}</dd>
        </div>
        <div>
          <dt>绑定状态</dt>
          <dd>
            {detail.bindingStatus || '-'} / 手机{detail.phoneBound ? '已绑定' : '未绑定'} / 微信
            {detail.wechatBound ? '已绑定' : '未绑定'}
          </dd>
        </div>
      </dl>
    </section>
  );
}

function WalletSection({wallet}: {wallet: AdminProfileWalletPayload}) {
  const metrics = [
    ['总余额', wallet.totalBalance],
    ['可消费', wallet.spendableBalance],
    ['永久泥点', wallet.permanentPoints],
    ['每日免费', wallet.dailyFreePoints],
    ['会员限时', wallet.membershipLimitedPoints],
    ['退款占用', wallet.heldPoints],
    ['退款欠账', wallet.refundDebtPoints],
  ] as const;
  return (
    <section className="admin-user-wallet-section">
      <div className="admin-panel-heading">
        <h3>钱包</h3>
        <div className="admin-tag-list">
          {wallet.manualFrozen ? <span className="admin-tag">人工冻结</span> : null}
          {wallet.refundDebtFrozen ? (
            <span className="admin-tag">退款欠账限制</span>
          ) : null}
          {!wallet.walletFrozen ? <span className="admin-status admin-status-ok">正常</span> : null}
        </div>
      </div>
      <div className="admin-user-wallet-grid">
        {metrics.map(([label, value]) => (
          <div className="admin-recharge-metric" key={label}>
            <span>{label}</span>
            <strong>{value}</strong>
          </div>
        ))}
      </div>
    </section>
  );
}

function formatMoney(cents: number) {
  return `¥${(cents / 100).toFixed(2)}`;
}

function formatMicros(value: number) {
  if (!Number.isFinite(value) || value <= 0) {
    return '-';
  }
  return new Date(Math.floor(value / 1000)).toLocaleString('zh-CN', {
    hour12: false,
  });
}

function formatOrderStatus(status: string) {
  const labels: Record<string, string> = {
    pending: '待支付',
    paid: '已支付',
    refunded: '已退款',
    closed: '已关闭',
  };
  return labels[status.toLowerCase()] ?? status;
}