"use client"

import * as React from "react"

import { cn } from "../../lib/utils"

/**
 * `Navigator` is the replacement for `@wordpress/components`' `Navigator` - **2 imports**,
 * `HistoryNavigator` and `QuestionnairePage`.
 *
 * IT IS A ROUTER, WHICH IS WHY THERE IS NO RADIX EQUIVALENT TO REACH FOR. WordPress's Navigator keeps
 * a stack of paths and shows the one Screen whose `path` is on top; Button pushes, BackButton pops.
 * Both call sites use it for the same thing - a details view that slides to a history or search view
 * and back - and neither uses react-router for it, because these are panes inside a page rather than
 * URLs.
 *
 * `Button` AND `BackButton` MUST RENDER REAL `<button>` ELEMENTS AND FORWARD THEIR REF. Both call
 * sites render them hidden, hold a ref, and drive navigation by calling `.click()` on it - see
 * `HistoryNavigator`'s `historyButtonRef` and `backButtonRef`. A ref pointing at anything else, or a
 * component that swallows it, breaks navigation with no error at all.
 *
 * Only the four pieces the call sites use are here: the root, `Screen`, `Button` and `BackButton`.
 * WP's `useNavigator` hook and its route params have no adopters.
 */

interface NavigatorContextValue {
  path: string
  goTo: (path: string) => void
  goBack: () => void
}

const NavigatorContext = React.createContext<NavigatorContextValue | null>(null)

function useNavigatorContext(component: string) {
  const context = React.useContext(NavigatorContext)
  if (!context) {
    throw new Error(`<Navigator.${component}> must be rendered inside a <Navigator>.`)
  }
  return context
}

export interface NavigatorProps extends React.ComponentProps<"div"> {
  initialPath?: string
}

function NavigatorRoot({ initialPath = "/", className, children, ...props }: NavigatorProps) {
  const [stack, setStack] = React.useState<string[]>([initialPath])

  const goTo = React.useCallback((next: string) => {
    setStack((current) => [...current, next])
  }, [])

  // Never pops the last entry: WordPress leaves you on the root screen rather than on nothing.
  const goBack = React.useCallback(() => {
    setStack((current) => (current.length > 1 ? current.slice(0, -1) : current))
  }, [])

  const value = React.useMemo(
    () => ({ path: stack[stack.length - 1], goTo, goBack }),
    [stack, goTo, goBack]
  )

  return (
    <NavigatorContext.Provider value={value}>
      <div data-slot="navigator" className={cn(className)} {...props}>
        {children}
      </div>
    </NavigatorContext.Provider>
  )
}

export interface NavigatorScreenProps extends React.ComponentProps<"div"> {
  path: string
}

function NavigatorScreen({ path, className, children, ...props }: NavigatorScreenProps) {
  const { path: activePath } = useNavigatorContext("Screen")
  if (activePath !== path) return null

  return (
    <div data-slot="navigator-screen" className={cn(className)} {...props}>
      {children}
    </div>
  )
}

export interface NavigatorButtonProps extends React.ComponentProps<"button"> {
  path: string
}

const NavigatorButton = React.forwardRef<HTMLButtonElement, NavigatorButtonProps>(
  ({ path, className, onClick, ...props }, ref) => {
    const { goTo } = useNavigatorContext("Button")

    return (
      <button
        ref={ref}
        type="button"
        data-slot="navigator-button"
        className={cn(className)}
        onClick={(event) => {
          onClick?.(event)
          goTo(path)
        }}
        {...props}
      />
    )
  }
)
NavigatorButton.displayName = "Navigator.Button"

const NavigatorBackButton = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<"button">
>(({ className, onClick, ...props }, ref) => {
  const { goBack } = useNavigatorContext("BackButton")

  return (
    <button
      ref={ref}
      type="button"
      data-slot="navigator-back-button"
      className={cn(className)}
      onClick={(event) => {
        onClick?.(event)
        goBack()
      }}
      {...props}
    />
  )
})
NavigatorBackButton.displayName = "Navigator.BackButton"

// Dotted access, because that is how both call sites are written.
const Navigator = Object.assign(NavigatorRoot, {
  Screen: NavigatorScreen,
  Button: NavigatorButton,
  BackButton: NavigatorBackButton,
})

export { Navigator }