import type { ReactNode } from 'react';

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

type PlatformMudPointConfirmDialogProps = {
  open: boolean;
  points: number;
  onClose: () => void;
  onConfirm: () => void;
  confirmDisabled?: boolean;
  confirmLabel?: string;
  title?: string;
  description?: ReactNode;
  children?: ReactNode;
  showCloseButton?: boolean;
  portal?: boolean;
  size?: 'sm' | 'md';
  overlayClassName?: string;
  panelClassName?: string;
};

const DEFAULT_OVERLAY_CLASS_NAME = 'platform-modal-backdrop z-[80] !bg-black/45';
const DEFAULT_PANEL_CLASS_NAME =
  'platform-modal-shell platform-remap-surface max-w-xs rounded-[1.35rem] shadow-[0_24px_70px_rgba(15,23,42,0.22)]';

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

/**
 * 平台泥点消耗确认弹窗。
 * 统一承接“确认消耗泥点 + 消耗 N 泥点”的标准确认壳层，业务侧只保留点数与确认动作。
 */
export function PlatformMudPointConfirmDialog({
  open,
  points,
  onClose,
  onConfirm,
  confirmDisabled = false,
  confirmLabel = '确定',
  title = '确认消耗泥点',
  description,
  children,
  showCloseButton = true,
  portal = true,
  size = 'sm',
  overlayClassName,
  panelClassName,
}: PlatformMudPointConfirmDialogProps) {
  const resolvedPlatformTheme = useAuthUi()?.platformTheme ?? 'light';

  return (
    <UnifiedConfirmDialog
      open={open}
      title={title}
      description={description}
      onClose={onClose}
      onConfirm={onConfirm}
      confirmLabel={confirmLabel}
      confirmDisabled={confirmDisabled}
      showCancel
      showCloseButton={showCloseButton}
      portal={portal}
      size={size}
      overlayClassName={joinClassNames(
        `platform-theme platform-theme--${resolvedPlatformTheme}`,
        DEFAULT_OVERLAY_CLASS_NAME,
        overlayClassName,
      )}
      panelClassName={joinClassNames(DEFAULT_PANEL_CLASS_NAME, panelClassName)}
    >
      <div className="space-y-2">
        <div className="font-semibold">消耗 {points} 泥点</div>
        {children}
      </div>
    </UnifiedConfirmDialog>
  );
}