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

type PlatformStatusTone = 'error' | 'success' | 'info' | 'warning' | 'neutral';
type PlatformStatusSurface =
  | 'light'
  | 'tinted'
  | 'platform'
  | 'profile'
  | 'editorDark';
type PlatformStatusSize = 'xs' | 'sm' | 'md';

type PlatformStatusMessageProps = Omit<
  HTMLAttributes<HTMLDivElement>,
  'children'
> & {
  tone: PlatformStatusTone;
  surface?: PlatformStatusSurface;
  size?: PlatformStatusSize;
  remapSurface?: boolean;
  children: ReactNode;
};

const PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE: Record<
  PlatformStatusSurface,
  Record<PlatformStatusTone, string>
> = {
  light: {
    error: 'border-rose-200 bg-rose-50 text-rose-700',
    success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
    warning: 'border-amber-200 bg-amber-50 text-amber-900',
    neutral:
      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
  },
  tinted: {
    error: 'border-rose-400/20 bg-rose-500/10 text-rose-700',
    success: 'border-emerald-300/25 bg-emerald-500/12 text-emerald-700',
    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
    warning: 'border-amber-300/30 bg-amber-500/12 text-amber-900',
    neutral:
      'border-[var(--platform-subpanel-border)] bg-white/20 text-[var(--platform-text-base)]',
  },
  platform: {
    error:
      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
    success:
      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
    warning:
      'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
    neutral:
      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
  },
  profile: {
    error:
      'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
    success:
      'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
    info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
    warning: 'border-amber-300 bg-amber-500/12 text-amber-900',
    neutral:
      'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
  },
  editorDark: {
    error: 'border-rose-300/15 bg-rose-500/10 text-rose-50/90',
    success: 'border-emerald-300/15 bg-emerald-500/10 text-emerald-50/90',
    info: 'border-sky-300/15 bg-sky-500/10 text-sky-50/90',
    warning: 'border-amber-300/15 bg-amber-500/10 text-amber-50/90',
    neutral: 'border-white/10 bg-black/20 text-zinc-300',
  },
};

const PLATFORM_STATUS_MESSAGE_SIZE_CLASS: Record<PlatformStatusSize, string> = {
  xs: 'px-3 py-2 text-xs',
  sm: 'px-3 py-2 text-sm',
  md: 'px-4 py-3 text-sm leading-6',
};

/**
 * 平台通用状态提示条。
 * 收口错误、成功和提示类状态的基础边框、底色和文字颜色。
 */
export function PlatformStatusMessage({
  tone,
  surface = 'light',
  size = 'sm',
  remapSurface = false,
  children,
  className,
  ...divProps
}: PlatformStatusMessageProps) {
  return (
    <div
      {...divProps}
      className={[
        remapSurface ? 'platform-remap-surface' : null,
        'platform-status-message rounded-xl border',
        PLATFORM_STATUS_MESSAGE_SIZE_CLASS[size],
        PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE[surface][tone],
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </div>
  );
}