import { createBrowserVisibility } from "@agents24/client/browser"
import type { AgentClient, HitlResponse } from "@agents24/client"
import {
  type AgentChatActiveThreadChangeHandler,
  type AgentChatMcpAuthorizationCompletion,
  type AgentChatRuntimeAgent,
  useAgentChatRuntime,
} from "@agents24/chat-react/runtime"
import type { HitlActionState } from "@agents24/chat-react/ui"
import {
  Agents24Provider,
  type ChatHitlPart,
  type HitlSubmissionOptions,
  type ChatMessage,
  type ChatPart,
} from "@agents24/react"
import * as React from "react"

import type { Agents24ChatComposerProps } from "./components/chat/chat-composer"

import { ChatShell } from "./components/chat/chat-shell"
import { GUEST_CHAT_IDENTITY, type Agents24ChatIdentity } from "./identity"

const createBrowserAbortController = () => new AbortController()
const browserVisibility = createBrowserVisibility()

export type Agents24ChatAppProps = {
  activeThreadId?: string | null
  agent?: AgentChatRuntimeAgent
  client: AgentClient
  completeMcpAuthorization?: AgentChatMcpAuthorizationCompletion
  mcpRedirectUri?: string
  modelId?: string | null
  onActiveThreadIdChange?: AgentChatActiveThreadChangeHandler
  onModelChange?: (modelId: string) => void
  identity?: Agents24ChatIdentity
  components?: Agents24ChatScaffoldComponents
  sidebar?: React.ReactNode
}

export type Agents24ChatComposerSlotProps = Agents24ChatComposerProps

export type Agents24ChatScaffoldComponents = {
  Composer?: React.ComponentType<Agents24ChatComposerSlotProps>
  Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
}

export type ChatHitlResponse = HitlResponse

export type Agents24ChatTimelineSlotProps = {
  message: ChatMessage
  parts: readonly ChatPart[]
  isLoading: boolean
  getHitlActionState: (part: ChatHitlPart) => HitlActionState | undefined
  onHitlAction: (part: ChatHitlPart, response: ChatHitlResponse, options?: HitlSubmissionOptions) => void
}

function RuntimeChat({
  components,
  identity = GUEST_CHAT_IDENTITY,
  ...props
}: Agents24ChatAppProps) {
  const runtime = useAgentChatRuntime({
    ...props,
    mcpRedirectUri: props.mcpRedirectUri || (
      typeof window === "undefined" ? undefined : window.location.href
    ),
  })

  return <ChatShell components={components} identity={identity} runtime={runtime} sidebar={props.sidebar} />
}

export function App(props: Agents24ChatAppProps) {
  const identity = props.identity || GUEST_CHAT_IDENTITY
  return (
    <Agents24Provider client={props.client} createAbortController={createBrowserAbortController} visibility={browserVisibility}>
      <RuntimeChat key={identity.state} {...props} />
    </Agents24Provider>
  )
}