Genarrative/packages/shared/src/components/PlatformToggleRow.tsx

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

import { getPlatformPillBadgeClassName } from './platformPillBadgeModel';

export type PlatformToggleRowSurface = 'soft' | 'plain';
export type PlatformToggleRowMode = 'checkbox' | 'status';

export type PlatformToggleRowProps = {
  label: ReactNode;
  checked: boolean;
  onChange?: (checked: boolean) => void;
  disabled?: boolean;
  mode?: PlatformToggleRowMode;
  icon?: ReactNode;
  onLabel?: ReactNode;
  offLabel?: ReactNode;
  onClick?: () => void;
  className?: string;
  labelClassName?: string;
  surface?: PlatformToggleRowSurface;
};

const PLATFORM_TOGGLE_ROW_SURFACE_CLASS: Record<
  PlatformToggleRowSurface,
  string
> = {
  soft: 'bg-white/74',
  plain: 'bg-white/78',
};

function renderToggleStatus({
  checked,
  offLabel,
  onLabel,
}: {
  checked: boolean;
  offLabel: ReactNode;
  onLabel: ReactNode;
}) {
  return (
    <span
      className={getPlatformPillBadgeClassName({
        tone: 'neutralSolid',
        size: 'sm',
      })}
    >
      {checked ? onLabel : offLabel}
    </span>
  );
}

/**
 * 平台整行开关。
 * 统一承接设置面板和结果页配置里的白底 label + checkbox / 状态行。
 */
export function PlatformToggleRow({
  label,
  checked,
  onChange,
  disabled = false,
  mode = 'checkbox',
  icon,
  onLabel = '开启',
  offLabel = '关闭',
  onClick,
  className,
  labelClassName,
  surface = 'soft',
}: PlatformToggleRowProps) {
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    onChange?.(event.target.checked);
  };

  const rowClassName = [
    'flex min-h-12 items-center justify-between gap-3 rounded-[1rem] border border-[var(--platform-subpanel-border)] px-3',
    PLATFORM_TOGGLE_ROW_SURFACE_CLASS[surface],
    disabled ? 'opacity-60' : null,
    className,
  ]
    .filter(Boolean)
    .join(' ');
  const labelNode = (
    <span
      className={[
        'flex min-w-0 items-center gap-2 text-sm font-semibold text-[var(--platform-text-strong)]',
        labelClassName,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      {icon ? <span className="shrink-0">{icon}</span> : null}
      <span>{label}</span>
    </span>
  );

  if (mode === 'status') {
    if (onClick) {
      return (
        <button
          type="button"
          onClick={onClick}
          disabled={disabled}
          className={[
            rowClassName,
            'w-full text-left transition hover:bg-white disabled:cursor-not-allowed',
          ].join(' ')}
        >
          {labelNode}
          {renderToggleStatus({ checked, onLabel, offLabel })}
        </button>
      );
    }

    return (
      <div className={rowClassName}>
        {labelNode}
        {renderToggleStatus({ checked, onLabel, offLabel })}
      </div>
    );
  }

  return (
    <label className={rowClassName}>
      {labelNode}
      <input
        type="checkbox"
        checked={checked}
        disabled={disabled}
        onChange={handleChange}
        className="h-4 w-4 rounded border-[var(--platform-subpanel-border)]"
      />
    </label>
  );
}