import type { AgentChatActiveThreadChange } from "@agents24/chat-react/runtime"
import * as React from "react"

const THREAD_ID_PARAM = "threadId"

function readThreadId(): string | null {
  const value = new URL(window.location.href).searchParams.get(THREAD_ID_PARAM)
  return value?.trim() || null
}

function writeThreadId(threadId: string | null, mode: "push" | "replace") {
  const url = new URL(window.location.href)
  if (threadId) url.searchParams.set(THREAD_ID_PARAM, threadId)
  else url.searchParams.delete(THREAD_ID_PARAM)
  window.history[mode === "push" ? "pushState" : "replaceState"](
    { ...window.history.state, agents24ThreadId: threadId },
    "",
    url,
  )
}

export function useThreadQueryNavigation() {
  const [activeThreadId, setActiveThreadId] = React.useState<string | null>(readThreadId)

  React.useEffect(() => {
    const onPopState = () => setActiveThreadId(readThreadId())
    window.addEventListener("popstate", onPopState)
    return () => window.removeEventListener("popstate", onPopState)
  }, [])

  const onActiveThreadIdChange = React.useCallback((change: AgentChatActiveThreadChange) => {
    setActiveThreadId((current) => {
      if (current === change.threadId) return current
      const mode = change.reason === "created" || change.reason === "deleted" ? "replace" : "push"
      writeThreadId(change.threadId, mode)
      return change.threadId
    })
  }, [])

  return { activeThreadId, onActiveThreadIdChange }
}