import * as React from 'react'
import { Box } from '@anthropic/ink'

type QueuedMessageContextValue = {
  isQueued: boolean
  isFirst: boolean
  /** Width reduction for container padding (e.g., 4 for paddingX={2}) */
  paddingWidth: number
}

const QueuedMessageContext = React.createContext<
  QueuedMessageContextValue | undefined
>(undefined)

export function useQueuedMessage(): QueuedMessageContextValue | undefined {
  return React.useContext(QueuedMessageContext)
}

const PADDING_X = 2

type Props = {
  isFirst: boolean
  useBriefLayout?: boolean
  children: React.ReactNode
}

export function QueuedMessageProvider({
  isFirst,
  useBriefLayout,
  children,
}: Props): React.ReactNode {
  // Brief mode already indents via paddingLeft in HighlightedThinkingText /
  // BriefTool UI — adding paddingX here would double-indent the queue.
  const padding = useBriefLayout ? 0 : PADDING_X
  const value = React.useMemo(
    () => ({ isQueued: true, isFirst, paddingWidth: padding * 2 }),
    [isFirst, padding],
  )

  return (
    <QueuedMessageContext.Provider value={value}>
      <Box paddingX={padding}>{children}</Box>
    </QueuedMessageContext.Provider>
  )
}