import type { HTMLAttributes, ReactNode } from 'react';

type PlatformOverlayBadgePlacement =
  | 'topLeft'
  | 'topRight'
  | 'bottomLeft'
  | 'bottomRight';
type PlatformOverlayBadgeOffset = 'default' | 'tight';
type PlatformOverlayBadgeSize = 'default' | 'compact';
type PlatformOverlayBadgeTone = 'light' | 'muted';

type PlatformOverlayBadgeProps = Omit<
  HTMLAttributes<HTMLSpanElement>,
  'children'
> & {
  children: ReactNode;
  placement?: PlatformOverlayBadgePlacement;
  offset?: PlatformOverlayBadgeOffset;
  size?: PlatformOverlayBadgeSize;
  tone?: PlatformOverlayBadgeTone;
};

const PLATFORM_OVERLAY_BADGE_PLACEMENT_CLASS: Record<
  PlatformOverlayBadgeOffset,
  Record<PlatformOverlayBadgePlacement, string>
> = {
  default: {
    topLeft: 'left-3 top-3',
    topRight: 'right-3 top-3',
    bottomLeft: 'bottom-3 left-3',
    bottomRight: 'bottom-3 right-3',
  },
  tight: {
    topLeft: 'left-2 top-2',
    topRight: 'right-2 top-2',
    bottomLeft: 'bottom-2 left-2',
    bottomRight: 'bottom-2 right-2',
  },
};

const PLATFORM_OVERLAY_BADGE_SIZE_CLASS: Record<
  PlatformOverlayBadgeSize,
  string
> = {
  default: 'px-3 py-1 tracking-[0.18em] shadow-[0_8px_20px_rgba(0,0,0,0.22)]',
  compact: 'px-2 py-0.5 tracking-normal shadow-sm',
};

const PLATFORM_OVERLAY_BADGE_TONE_CLASS: Record<
  PlatformOverlayBadgeTone,
  string
> = {
  light: 'border-white/40 bg-white/88 text-zinc-900',
  muted:
    'border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] text-[var(--platform-text-soft)]',
};

/**
 * 平台媒体悬浮标签。
 * 统一承接预览图、素材图和舞台画面上的非交互短标签。
 */
export function PlatformOverlayBadge({
  children,
  placement = 'topLeft',
  offset = 'default',
  size = 'default',
  tone = 'light',
  className,
  ...spanProps
}: PlatformOverlayBadgeProps) {
  return (
    <span
      {...spanProps}
      className={[
        'absolute rounded-full border text-[10px] font-bold',
        PLATFORM_OVERLAY_BADGE_PLACEMENT_CLASS[offset][placement],
        PLATFORM_OVERLAY_BADGE_SIZE_CLASS[size],
        PLATFORM_OVERLAY_BADGE_TONE_CLASS[tone],
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </span>
  );
}