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

type PlatformDarkOptionTone = 'emerald' | 'sky' | 'rose' | 'amber';
type PlatformDarkOptionRadius = 'sm' | 'md' | 'lg';
type PlatformDarkOptionPadding = 'sm' | 'md' | 'lg';

type PlatformDarkOptionCardProps = Omit<
  ButtonHTMLAttributes<HTMLButtonElement>,
  'children'
> & {
  selected: boolean;
  tone?: PlatformDarkOptionTone;
  radius?: PlatformDarkOptionRadius;
  padding?: PlatformDarkOptionPadding;
  children: ReactNode;
};

const PLATFORM_DARK_OPTION_RADIUS_CLASS: Record<
  PlatformDarkOptionRadius,
  string
> = {
  sm: 'rounded-lg',
  md: 'rounded-xl',
  lg: 'rounded-2xl',
};

const PLATFORM_DARK_OPTION_PADDING_CLASS: Record<
  PlatformDarkOptionPadding,
  string
> = {
  sm: 'px-3 py-2',
  md: 'px-3 py-2.5',
  lg: 'px-3 py-3',
};

const PLATFORM_DARK_OPTION_SELECTED_CLASS: Record<
  PlatformDarkOptionTone,
  string
> = {
  emerald: 'border-emerald-400/45 bg-emerald-500/10 text-emerald-100',
  sky: 'border-sky-400/45 bg-sky-500/10 text-sky-100',
  rose: 'border-rose-400/60 bg-rose-500/10 text-rose-100',
  amber: 'border-amber-400/60 bg-amber-500/10 text-amber-100',
};

const PLATFORM_DARK_OPTION_IDLE_CLASS =
  'border-white/8 bg-black/20 text-zinc-300 hover:border-white/15';

/**
 * 暗色面板中的可选项按钮。
 * 统一承接 selected / idle / hover / disabled 的暗色卡片外观。
 */
export function PlatformDarkOptionCard({
  selected,
  tone = 'emerald',
  radius = 'md',
  padding = 'sm',
  children,
  className,
  type = 'button',
  ...buttonProps
}: PlatformDarkOptionCardProps) {
  return (
    <button
      {...buttonProps}
      type={type}
      className={[
        'platform-dark-option-card border text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-55',
        PLATFORM_DARK_OPTION_RADIUS_CLASS[radius],
        PLATFORM_DARK_OPTION_PADDING_CLASS[padding],
        selected
          ? PLATFORM_DARK_OPTION_SELECTED_CLASS[tone]
          : PLATFORM_DARK_OPTION_IDLE_CLASS,
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {children}
    </button>
  );
}