import { useMemo } from 'react'
import { useInitiativeOperations } from '../context/InitiativeOperationsContext.jsx'
import { CompositionSurface } from './CompositionSurface.jsx'

/**
 * Composition-Surface mit InitiativeOperationsContext — für scoped Plan/Control-Pages.
 * @param {{
 *   surfaceKey: string,
 *   filterContext?: Record<string, unknown>,
 *   onAcceptBacklogProposal?: (itemId: string, options?: object) => Promise<void> | void,
 *   slotClassName?: string,
 *   wrapperClassName?: string,
 * }} props
 */
export function InitiativeCompositionSurface({
  surfaceKey,
  filterContext = {},
  onAcceptBacklogProposal,
  slotClassName,
  wrapperClassName,
}) {
  const ops = useInitiativeOperations()

  const opsContext = useMemo(
    () => ({
      initiativeId: ops.initiativeId,
      actions: ops.actions,
      roadmapItems: ops.roadmapItems,
      recurringItems: ops.recurringItems,
      steeringSnapshotLoading: ops.steeringSnapshotLoading,
      steeringSnapshotError: ops.steeringSnapshotError,
      steeringMethods: ops.steeringMethods,
      handleMethodChange: ops.handleMethodChange,
      methodBusy: ops.methodBusy,
      formBusy: ops.formBusy,
      onAcceptBacklogProposal,
    }),
    [
      ops.initiativeId,
      ops.actions,
      ops.roadmapItems,
      ops.recurringItems,
      ops.steeringSnapshotLoading,
      ops.steeringSnapshotError,
      ops.steeringMethods,
      ops.handleMethodChange,
      ops.methodBusy,
      ops.formBusy,
      onAcceptBacklogProposal,
    ],
  )

  return (
    <CompositionSurface
      surfaceKey={surfaceKey}
      scope="initiative"
      operatingContext={ops.operatingContext}
      steeringSnapshot={ops.steeringSnapshot}
      capabilities={ops.capabilities}
      filterContext={filterContext}
      opsContext={opsContext}
      slotClassName={slotClassName}
      wrapperClassName={wrapperClassName}
    />
  )
}