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

type PlatformEmptyStateSurface = 'soft' | 'dashed' | 'subpanel' | 'editorDark';
type PlatformEmptyStateSize = 'compact' | 'panel' | 'inline';
type PlatformEmptyStateTone = 'base' | 'soft';

type PlatformEmptyStateProps = Omit<
  HTMLAttributes<HTMLDivElement>,
  'children'
> & {
  children: ReactNode;
  surface?: PlatformEmptyStateSurface;
  size?: PlatformEmptyStateSize;
  tone?: PlatformEmptyStateTone;
};

const PLATFORM_EMPTY_STATE_SURFACE_CLASS: Record<
  PlatformEmptyStateSurface,
  string
> = {
  soft: 'platform-surface platform-surface--soft rounded-[1.35rem]',
  dashed:
    'rounded-[1.35rem] border border-dashed border-[var(--platform-subpanel-border)] bg-white/52',
  subpanel:
    'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/74',
  editorDark: 'rounded-2xl border border-dashed border-white/12 bg-black/20',
};

const PLATFORM_EMPTY_STATE_SIZE_CLASS: Record<PlatformEmptyStateSize, string> =
  {
    compact: 'px-4 py-3 text-sm leading-6',
    panel:
      'flex min-h-[14rem] items-center justify-center px-6 text-center text-sm',
    inline: 'px-4 py-5 text-center text-sm font-semibold',
  };

const PLATFORM_EMPTY_STATE_TONE_CLASS: Record<PlatformEmptyStateTone, string> =
  {
    base: 'text-[var(--platform-text-base)]',
    soft: 'text-[var(--platform-text-soft)]',
  };

/**
 * 平台通用空态和轻量加载态。
 * 收口平台列表、作品架和素材选择弹窗中重复的空面板外观。
 */
export function PlatformEmptyState({
  children,
  surface = 'soft',
  size = 'compact',
  tone,
  className,
  ...divProps
}: PlatformEmptyStateProps) {
  const resolvedTone =
    tone ?? (surface === 'subpanel' || size === 'inline' ? 'soft' : 'base');

  return (
    <div
      {...divProps}
      className={[
        'min-w-0',
        'platform-empty-state',
        PLATFORM_EMPTY_STATE_SURFACE_CLASS[surface],
        PLATFORM_EMPTY_STATE_SIZE_CLASS[size],
        PLATFORM_EMPTY_STATE_TONE_CLASS[resolvedTone],
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </div>
  );
}