import { LatestThreadScroller, type LatestThreadScrollerOutlineItem } from "@agents24/chat-react"
import type { ChatMessage } from "@agents24/react"

function turnsFromMessages(messages: ChatMessage[]): LatestThreadScrollerOutlineItem[] {
  return messages.reduce<LatestThreadScrollerOutlineItem[]>((turns, message) => {
    if (message.role === "user") {
      turns.push({
        id: message.id,
        label: message.content.trim() || `Turn ${turns.length + 1}`,
        messageIds: [message.id],
        responsePreview: "",
      })
    } else if (turns.length) {
      const turn = turns[turns.length - 1]
      turn.messageIds?.push(message.id)
      if (!turn.responsePreview) turn.responsePreview = message.content.trim()
    }
    return turns
  }, [])
}

export function TurnOutline({ messages }: { messages: ChatMessage[] }) {
  return (
    <LatestThreadScroller.Outline
      items={turnsFromMessages(messages)}
      minSideGutterForRail={0}
      side="left"
      verticalOffset="3.5rem"
    />
  )
}