dukang/apps/h5-shop/src/components/WechatScanAuthModal.tsx

type WechatScanAuthModalProps = {
  open: boolean;
  loading?: boolean;
  error?: string;
  /** bind=首次绑定；recover=扫码 JSSDK 失败后的恢复引导 */
  mode?: 'bind' | 'recover';
  onAuthorize: () => void;
  onRefresh?: () => void;
  onCancel: () => void;
};

export default function WechatScanAuthModal({
  open,
  loading,
  error,
  mode = 'bind',
  onAuthorize,
  onRefresh,
  onCancel,
}: WechatScanAuthModalProps) {
  if (!open) return null;

  const isRecover = mode === 'recover';

  return (
    <div className="shop-scan-auth-overlay" role="dialog" aria-modal="true" aria-labelledby="shop-scan-auth-title">
      <div className="shop-scan-auth-card">
        <div className="shop-scan-auth-icon">
          <span className="material-symbols-outlined shop-fill-icon">
            {isRecover ? 'sync_problem' : 'qr_code_scanner'}
          </span>
        </div>
        <h2 id="shop-scan-auth-title" className="shop-scan-auth-title">
          {isRecover ? '扫码能力未就绪' : '微信授权'}
        </h2>
        <p className="shop-scan-auth-desc">
          {isRecover
            ? '微信扫码接口校验失败（常见于 iPhone 登录/授权后）。请先刷新页面；仍失败再重新授权微信。'
            : '扫码核销需使用微信相机扫描用户核销码。请先完成微信授权并允许使用摄像头。'}
        </p>
        {error && <p className="shop-scan-auth-error" role="alert">{error}</p>}
        <div className="shop-scan-auth-actions">
          <button type="button" className="shop-scan-auth-cancel" onClick={onCancel} disabled={loading}>
            取消
          </button>
          {isRecover && onRefresh ? (
            <button type="button" className="shop-scan-auth-confirm" onClick={onRefresh} disabled={loading}>
              刷新页面
            </button>
          ) : null}
          <button type="button" className="shop-scan-auth-confirm" onClick={onAuthorize} disabled={loading}>
            {loading ? '跳转授权中…' : isRecover ? '重新授权微信' : '微信授权'}
          </button>
        </div>
      </div>
    </div>
  );
}