import type { ReactNode } from 'react';

type PlatformInfoBlockVariant = 'default' | 'compactRow';

type PlatformInfoBlockProps = {
  label?: ReactNode;
  children: ReactNode;
  variant?: PlatformInfoBlockVariant;
  multiline?: boolean;
  className?: string;
  labelClassName?: string;
  valueClassName?: string;
};

const PLATFORM_INFO_BLOCK_CLASS: Record<PlatformInfoBlockVariant, string> = {
  default:
    'rounded-[1rem] border border-[var(--platform-subpanel-border)] bg-white/72 px-3 py-2',
  compactRow:
    'flex justify-between gap-2 rounded-[0.85rem] border-0 bg-white/74 px-2.5 py-1.5 sm:gap-3 sm:px-3 sm:py-2',
};

const PLATFORM_INFO_BLOCK_LABEL_CLASS: Record<
  PlatformInfoBlockVariant,
  string
> = {
  default: 'text-xs font-bold text-[var(--platform-text-soft)]',
  compactRow: 'text-xs font-bold text-[var(--platform-text-muted)] sm:text-sm',
};

function getValueClassName({
  hasLabel,
  multiline,
  variant,
  valueClassName,
}: {
  hasLabel: boolean;
  multiline: boolean;
  variant: PlatformInfoBlockVariant;
  valueClassName?: string;
}) {
  if (variant === 'compactRow') {
    return [
      'break-words text-right text-xs font-black leading-5 text-[var(--platform-text-strong)] sm:text-sm',
      valueClassName,
    ]
      .filter(Boolean)
      .join(' ');
  }

  return [
    'break-words text-sm text-[var(--platform-text-strong)]',
    hasLabel ? 'mt-1' : null,
    multiline ? 'whitespace-pre-wrap leading-6' : 'font-semibold leading-5',
    valueClassName,
  ]
    .filter(Boolean)
    .join(' ');
}

/**
 * 平台信息展示块。
 * 统一承接弹窗和详情页中“短标签 + 白底内容”的只读信息 chrome。
 */
export function PlatformInfoBlock({
  label,
  children,
  variant = 'default',
  multiline = false,
  className,
  labelClassName,
  valueClassName,
}: PlatformInfoBlockProps) {
  return (
    <div
      className={[PLATFORM_INFO_BLOCK_CLASS[variant], className]
        .filter(Boolean)
        .join(' ')}
    >
      {label ? (
        <div
          className={[PLATFORM_INFO_BLOCK_LABEL_CLASS[variant], labelClassName]
            .filter(Boolean)
            .join(' ')}
        >
          {label}
        </div>
      ) : null}
      <div
        className={getValueClassName({
          hasLabel: Boolean(label),
          multiline,
          variant,
          valueClassName,
        })}
      >
        {children}
      </div>
    </div>
  );
}