import type { ReactNode } from 'react';
import type { Container, Root, RootOptions } from 'react-dom/client';
import { render } from '@ablogcms/react-utils';
import { SlotFillProvider } from '@ablogcms/components/slot-fill';
import { getGlobalFillBridge } from '@ablogcms/plugins/core';

/**
 * `render()`（`@ablogcms/react-utils`）と同じ挙動に、グローバル Fill ブリッジ
 * （`@ablogcms/plugins/core` の `getGlobalFillBridge()`）を結線した `SlotFillProvider` を
 * 追加でラップする。管理画面は dispatcher ごとに独立した React ルートを `createRoot` する構成のため、
 * `<Slot>` を新設する feature の dispatch/mount はこれを使って揃える（`Slot` は Provider 外で
 * 使うと throw するため、Slot を置く前に Provider の巻き直しが必須）。
 *
 * Why not（`@ablogcms/react-utils` に置かない理由）: `@ablogcms/components` は
 * `@ablogcms/react-hooks` 経由で `@ablogcms/react-utils` に依存しているため、逆方向の依存
 * （react-utils → components）を追加すると循環依存になる。本体側の `ablogcms/js/src/lib/` に
 * 置くことでパッケージ間依存を増やさずに済む。
 *
 * 既存の `render()` はそのまま残す（公開側テーマからの利用可能性があるため挙動を変えない）。
 * 全 dispatch/mount の一括置換はしない（無関係な画面のレンダーツリーを変えるリスクを避けるため、
 * Slot を新設する箇所から順に差し替える）。
 */
export function renderWithProviders(children: ReactNode, container: Container, options?: RootOptions): Root {
  return render(<SlotFillProvider store={getGlobalFillBridge()}>{children}</SlotFillProvider>, container, options);
}
