import type { ChatHitlPart, HitlSubmissionOptions, ChatMessage } from "@agents24/react"
import type { HitlResponse } from "@agents24/client"
import {
  AgentChatPart,
  AgentResponseTimeline,
} from "@agents24/chat-react/ui"
import type { AgentChatRuntimeHitlActionState } from "@agents24/chat-react/runtime"
import * as React from "react"
import type { LinkSafetyConfig } from "streamdown"

import { CollapsibleUserMessage } from "./collapsible-user-message"
import { ExternalLinkDialog } from "./external-link-dialog"
import type { Agents24ChatTimelineSlotProps } from "../../app"

const linkSafety = {
  enabled: true,
  renderModal: (props) => <ExternalLinkDialog {...props} />,
} satisfies LinkSafetyConfig

function ScaffoldTimeline(props: Agents24ChatTimelineSlotProps) {
  return (
    <AgentResponseTimeline
      {...props}
      responseProps={{
        className: "text-[15px] leading-7",
        linkSafety,
      }}
    />
  )
}

export function MessageParts({
  message,
  getHitlActionState,
  isLoading,
  onHitlAction,
  Timeline = ScaffoldTimeline,
}: {
  message: ChatMessage
  getHitlActionState: (part: ChatHitlPart) => AgentChatRuntimeHitlActionState | undefined
  isLoading: boolean
  onHitlAction: (part: ChatHitlPart, response: HitlResponse, options?: HitlSubmissionOptions) => Promise<void>
  Timeline?: React.ComponentType<Agents24ChatTimelineSlotProps>
}) {
  if (message.role === "assistant") {
    return (
      <Timeline
        getHitlActionState={getHitlActionState}
        isLoading={isLoading}
        message={message}
        onHitlAction={(part, response, options) => {
          void onHitlAction(part, response, options).catch(() => undefined)
        }}
        parts={message.parts}
      />
    )
  }

  const text = message.parts
    .filter((part) => part.kind === "text")
    .map((part) => part.kind === "text" ? part.text : "")
    .join("") || message.content
  const supportingParts = message.parts.filter((part) => (
    part.kind !== "text" && part.kind !== "data"
  ))

  return (
    <>
      {supportingParts.map((part) => (
        <AgentChatPart
          getHitlActionState={getHitlActionState}
          key={part.id}
          message={message}
          onHitlAction={(hitlPart, response, options) => {
            void onHitlAction(hitlPart, response, options).catch(() => undefined)
          }}
          part={part}
        />
      ))}
      {text ? <CollapsibleUserMessage content={text} /> : null}
    </>
  )
}