import type { ReactNode } from 'react';

import { useAuthUi } from '../auth/AuthUiContext';
import { UnifiedModal } from './UnifiedModal';

type PlatformToolModalShellProps = {
  open: boolean;
  title: string;
  ariaLabel?: string;
  description?: ReactNode;
  children: ReactNode;
  footer?: ReactNode;
  onClose: () => void;
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
  closeLabel?: string;
  closeDisabled?: boolean;
  closeOnBackdrop?: boolean;
  closeOnEscape?: boolean;
  zIndexClassName?: string;
  panelClassName?: string;
  titleClassName?: string;
  bodyClassName?: string;
  footerClassName?: string;
};

function joinClassNames(...classNames: Array<string | false | null | undefined>) {
  return classNames.filter(Boolean).join(' ');
}

/**
 * 结果页 / 工具页里的白底 portal 弹窗壳。
 * 这里只收口平台主题 overlay、白底 panel 和标准 header/body/footer 节奏，不吸收各玩法正文与动作语义。
 */
export function PlatformToolModalShell({
  open,
  title,
  ariaLabel,
  description,
  children,
  footer,
  onClose,
  size = 'xl',
  closeLabel,
  closeDisabled = false,
  closeOnBackdrop = true,
  closeOnEscape = true,
  zIndexClassName = 'z-[140]',
  panelClassName,
  titleClassName,
  bodyClassName,
  footerClassName,
}: PlatformToolModalShellProps) {
  const resolvedPlatformTheme =
    useAuthUi()?.platformTheme ?? 'light';

  return (
    <UnifiedModal
      open={open}
      title={title}
      // 某些工具弹窗标题会直接显示当前关卡/物品名，但读屏和测试更适合使用稳定的弹窗语义名。
      ariaLabel={ariaLabel}
      description={description}
      onClose={onClose}
      footer={footer}
      size={size}
      closeLabel={closeLabel ?? `关闭${ariaLabel ?? title}`}
      closeDisabled={closeDisabled}
      closeOnBackdrop={closeOnBackdrop}
      closeOnEscape={closeOnEscape}
      zIndexClassName={zIndexClassName}
      overlayClassName={`platform-theme platform-theme--${resolvedPlatformTheme}`}
      panelClassName={joinClassNames(
        'platform-remap-surface shadow-[0_24px_80px_rgba(0,0,0,0.55)]',
        panelClassName,
      )}
      headerClassName="!items-center !px-5 !py-4"
      titleClassName={titleClassName}
      bodyClassName={joinClassNames(
        '!px-5 !py-4 sm:!px-5 sm:!py-4',
        bodyClassName,
      )}
      footerClassName={joinClassNames(
        '!px-5 !py-4 sm:!px-5 sm:!py-4',
        footerClassName,
      )}
    >
      {children}
    </UnifiedModal>
  );
}