Genarrative/src/components/platform-entry/PlatformProfileModalShell.tsx

import type { ReactNode } from 'react';

import { PlatformModalCloseButton } from '../common/PlatformModalCloseButton';
import { UnifiedModal } from '../common/UnifiedModal';

type PlatformProfileModalShellProps = {
  title: string;
  description?: ReactNode;
  onClose: () => void;
  children: ReactNode;
  closeLabel?: string;
  closeVariant?: 'profile' | 'profileCompact';
  closeDisabled?: boolean;
  showHeader?: boolean;
  showCloseButton?: boolean;
  size?: 'sm' | 'md';
  zIndexClassName?: string;
  panelClassName: string;
  bodyClassName?: string;
  descriptionClassName?: string;
};

type PlatformProfileSecondaryModalShellProps = {
  title: string;
  onClose: () => void;
  children: ReactNode;
  closeLabel?: string;
  closeVariant?: 'floating' | 'floatingPlain';
  closeIcon?: ReactNode;
  closeButtonClassName?: string;
  overlayTone?: 'default' | 'soft';
  size?: 'sm' | 'md';
  zIndexClassName?: string;
  panelClassName: string;
  contentClassName: string;
};

const PROFILE_MODAL_OVERLAY_CLASS =
  'platform-modal-backdrop !items-center !justify-center !px-4 !py-6';
const PROFILE_MODAL_HEADER_CLASS = 'border-white/10 px-5 py-4';
const PROFILE_MODAL_TITLE_CLASS = 'text-base font-black';
const PROFILE_MODAL_DESCRIPTION_CLASS =
  'mt-1 text-xs font-semibold text-[var(--platform-text-soft)]';

const PROFILE_SECONDARY_MODAL_OVERLAY_CLASS_BY_TONE = {
  default: '!items-center !bg-black/48 !px-3 !py-5 !backdrop-blur-none',
  soft: '!items-center !bg-black/42 !px-3 !py-5 !backdrop-blur-none',
} as const;

/**
 * 个人中心标准弹窗壳层。
 * 统一收口账户侧弹窗常用的 overlay、header 和 close button 配置。
 */
export function PlatformProfileModalShell({
  title,
  description,
  onClose,
  children,
  closeLabel,
  closeVariant = 'profile',
  closeDisabled = false,
  showHeader = true,
  showCloseButton = true,
  size = 'sm',
  zIndexClassName = 'z-[80]',
  panelClassName,
  bodyClassName = 'px-5 py-5',
  descriptionClassName = PROFILE_MODAL_DESCRIPTION_CLASS,
}: PlatformProfileModalShellProps) {
  return (
    <UnifiedModal
      open
      title={title}
      description={description}
      onClose={onClose}
      closeLabel={closeLabel ?? `关闭${title}`}
      closeVariant={closeVariant}
      closeDisabled={closeDisabled}
      showHeader={showHeader}
      showCloseButton={showCloseButton}
      closeOnBackdrop={false}
      closeOnEscape={false}
      portal={false}
      size={size}
      zIndexClassName={zIndexClassName}
      overlayClassName={PROFILE_MODAL_OVERLAY_CLASS}
      panelClassName={panelClassName}
      headerClassName={PROFILE_MODAL_HEADER_CLASS}
      titleClassName={PROFILE_MODAL_TITLE_CLASS}
      descriptionClassName={descriptionClassName}
      bodyClassName={bodyClassName}
    >
      {children}
    </UnifiedModal>
  );
}

/**
 * 个人中心副弹层壳层。
 * 用于“玩过 / 账单 / 邀请”这类白底浮层，统一收口 overlay、floating close 和 body 外壳。
 */
export function PlatformProfileSecondaryModalShell({
  title,
  onClose,
  children,
  closeLabel,
  closeVariant = 'floating',
  closeIcon = '×',
  closeButtonClassName,
  overlayTone = 'default',
  size = 'sm',
  zIndexClassName = 'z-[80]',
  panelClassName,
  contentClassName,
}: PlatformProfileSecondaryModalShellProps) {
  return (
    <UnifiedModal
      open
      title={title}
      onClose={onClose}
      showHeader={false}
      showCloseButton={false}
      closeOnBackdrop={false}
      closeOnEscape={false}
      portal={false}
      size={size}
      zIndexClassName={zIndexClassName}
      overlayClassName={
        PROFILE_SECONDARY_MODAL_OVERLAY_CLASS_BY_TONE[overlayTone]
      }
      panelClassName={panelClassName}
      bodyClassName="!p-0"
    >
      <div className={contentClassName}>
        <PlatformModalCloseButton
          label={closeLabel ?? `关闭${title}`}
          variant={closeVariant}
          onClick={onClose}
          className={closeButtonClassName}
          icon={closeIcon}
        />
        {children}
      </div>
    </UnifiedModal>
  );
}