"use client"

/**
 * Portal target for `PageHeader` actions on detail / focus routes.
 *
 * When relocation is enabled (Back / Breadcrumb utility bar), scrolled pages
 * port the header action cluster into the utility bar trailing slot so primary
 * controls stay reachable without a second sticky row.
 */

import * as React from "react"

const RelocateEnabledContext = React.createContext(false)
const RelocateEnabledSetterContext = React.createContext<
  (enabled: boolean) => void
>(() => {})

const ScrollActionsSlotContext = React.createContext<HTMLElement | null>(null)
const ScrollActionsSlotSetterContext = React.createContext<
  (node: HTMLElement | null) => void
>(() => {})

export function PageHeaderScrollActionsProvider({
  children,
}: {
  children: React.ReactNode
}) {
  const [relocateEnabled, setRelocateEnabled] = React.useState(false)
  const [slot, setSlot] = React.useState<HTMLElement | null>(null)

  return (
    <RelocateEnabledSetterContext.Provider value={setRelocateEnabled}>
      <RelocateEnabledContext.Provider value={relocateEnabled}>
        <ScrollActionsSlotSetterContext.Provider value={setSlot}>
          <ScrollActionsSlotContext.Provider value={slot}>
            {children}
          </ScrollActionsSlotContext.Provider>
        </ScrollActionsSlotSetterContext.Provider>
      </RelocateEnabledContext.Provider>
    </RelocateEnabledSetterContext.Provider>
  )
}

export function usePageHeaderScrollRelocateEnabled() {
  return React.useContext(RelocateEnabledContext)
}

export function useSetPageHeaderScrollRelocateEnabled() {
  return React.useContext(RelocateEnabledSetterContext)
}

export function usePageHeaderScrollActionsSlot() {
  return React.useContext(ScrollActionsSlotContext)
}

export function usePageHeaderScrollActionsSlotRef() {
  return React.useContext(ScrollActionsSlotSetterContext)
}