import { useInitiativeOperations } from '../../context/InitiativeOperationsContext.jsx'
import { RoadmapPlanSection } from '../../components/RoadmapPlanSection.jsx'

export function InitiativePlanPage() {
  const {
    roadmapItems,
    capabilities,
    formBusy,
    handleCreateRoadmapItem,
    handleRoadmapItemStatus,
    handleUpdateRoadmapItem,
    handleVerifyRoadmapItem,
    handleDeleteRoadmapItem,
    error,
  } = useInitiativeOperations()

  if (!capabilities.has('kairo.initiative.read')) {
    return null
  }

  return (
    <>
      {error && <p className="error">{error}</p>}
      <RoadmapPlanSection
        items={roadmapItems}
        canManage={capabilities.has('kairo.milestone.manage')}
        onCreate={handleCreateRoadmapItem}
        onUpdateStatus={handleRoadmapItemStatus}
        onUpdateItem={handleUpdateRoadmapItem}
        onVerifyReached={handleVerifyRoadmapItem}
        onDelete={handleDeleteRoadmapItem}
        busy={formBusy}
      />
    </>
  )
}