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

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

type PlatformEmptyStateBaseProps = {
  children: ReactNode;
  surface?: PlatformEmptyStateSurface;
  size?: PlatformEmptyStateSize;
  tone?: PlatformEmptyStateTone;
};

type PlatformEmptyStateDivProps = Omit<
  HTMLAttributes<HTMLDivElement>,
  'children'
> & {
  asChild?: false;
} & PlatformEmptyStateBaseProps;

type PlatformEmptyStateButtonProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  'children'
> & {
  asChild: 'button';
} & PlatformEmptyStateBaseProps;

export type PlatformEmptyStateProps =
  | PlatformEmptyStateDivProps
  | PlatformEmptyStateButtonProps;

type PlatformEmptyStateClassNameOptions = {
  surface: PlatformEmptyStateSurface;
  size: PlatformEmptyStateSize;
  tone: PlatformEmptyStateTone;
  className?: string;
};

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)]',
  };

/**
 * 平台通用空态和轻量加载态。
 * 收口平台列表、作品架和素材选择弹窗中重复的空面板外观。
 */
function getPlatformEmptyStateClassName({
  surface,
  size,
  tone,
  className,
}: PlatformEmptyStateClassNameOptions) {
  return [
    'min-w-0',
    'platform-empty-state',
    PLATFORM_EMPTY_STATE_SURFACE_CLASS[surface],
    PLATFORM_EMPTY_STATE_SIZE_CLASS[size],
    PLATFORM_EMPTY_STATE_TONE_CLASS[tone],
    className,
  ]
    .filter(Boolean)
    .join(' ');
}

export function PlatformEmptyState({
  children,
  surface = 'soft',
  size = 'compact',
  tone,
  className,
  asChild,
  ...emptyStateProps
}: PlatformEmptyStateProps) {
  const resolvedTone =
    tone ?? (surface === 'subpanel' || size === 'inline' ? 'soft' : 'base');
  const emptyStateClassName = getPlatformEmptyStateClassName({
    surface,
    size,
    tone: resolvedTone,
    className,
  });

  if (asChild === 'button') {
    const { type = 'button', ...buttonProps } =
      emptyStateProps as ButtonHTMLAttributes<HTMLButtonElement>;

    return (
      <button {...buttonProps} type={type} className={emptyStateClassName}>
        {children}
      </button>
    );
  }

  return (
    <div
      {...(emptyStateProps as HTMLAttributes<HTMLDivElement>)}
      className={emptyStateClassName}
    >
      {children}
    </div>
  );
}