import { X } from 'lucide-react';
import type {
  ButtonHTMLAttributes,
  MouseEvent as ReactMouseEvent,
  ReactNode,
} from 'react';

type PlatformModalCloseButtonVariant =
  | 'profile'
  | 'profileCompact'
  | 'floating'
  | 'floatingPlain'
  | 'platformIcon'
  | 'pixel'
  | 'editorDark';

type PlatformModalCloseButtonPlacement = 'absolute' | 'inline';

type PlatformModalCloseButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  'children'
> & {
  label: string;
  variant?: PlatformModalCloseButtonVariant;
  icon?: ReactNode;
  placement?: PlatformModalCloseButtonPlacement;
  stopPropagation?: boolean;
};

const PLATFORM_MODAL_CLOSE_BUTTON_CLASS_BY_VARIANT: Record<
  PlatformModalCloseButtonVariant,
  string
> = {
  profile:
    'platform-modal-close flex h-9 w-9 items-center justify-center rounded-full',
  profileCompact:
    'platform-profile-icon-button flex h-8 w-8 items-center justify-center rounded-full',
  floating:
    'absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-[#ff4056] shadow-sm',
  floatingPlain:
    'absolute right-3 top-2 z-10 flex h-8 w-8 items-center justify-center rounded-full text-[#ff4056]',
  platformIcon: 'platform-icon-button disabled:cursor-not-allowed disabled:opacity-45',
  pixel:
    'flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-black/30 p-0 text-zinc-400 shadow-[0_8px_18px_rgba(0,0,0,0.28)] transition-colors hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-200/70 disabled:cursor-not-allowed disabled:opacity-45',
  editorDark:
    'platform-modal-close-button--editor-dark rounded-full border border-white/10 bg-white/5 p-2 text-zinc-300 transition hover:bg-white/10 hover:text-white',
};

const PLATFORM_MODAL_CLOSE_BUTTON_PIXEL_PLACEMENT_CLASS_BY_PLACEMENT: Record<
  PlatformModalCloseButtonPlacement,
  string
> = {
  absolute: 'absolute right-4 top-3 sm:right-5 sm:top-4',
  inline: 'relative shrink-0',
};

/**
 * 平台弹窗关闭按钮。
 * 收口个人中心和平台浮层里重复的关闭 aria、尺寸和视觉样式。
 */
export function PlatformModalCloseButton({
  label,
  variant = 'profile',
  icon = <X className="h-4 w-4" />,
  className,
  type = 'button',
  placement = 'absolute',
  stopPropagation = false,
  onClick,
  title,
  ...buttonProps
}: PlatformModalCloseButtonProps) {
  const handleClick = (event: ReactMouseEvent<HTMLButtonElement>) => {
    if (stopPropagation) {
      event.preventDefault();
      event.stopPropagation();
    }

    onClick?.(event);
  };

  return (
    <button
      {...buttonProps}
      type={type}
      aria-label={label}
      title={title ?? label}
      onClick={handleClick}
      className={[
        PLATFORM_MODAL_CLOSE_BUTTON_CLASS_BY_VARIANT[variant],
        variant === 'pixel'
          ? PLATFORM_MODAL_CLOSE_BUTTON_PIXEL_PLACEMENT_CLASS_BY_PLACEMENT[
              placement
            ]
          : null,
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {icon}
    </button>
  );
}