import { useMemo } from 'react'
import type { Message, StaticVarSegment } from '../types/protocol'
import SessionBar from './SessionBar'
import MessageBubble from './MessageBubble'

interface MessageListProps {
  messages: Message[]
}

/**
 * 从所有 system 消息中提取 static_var 片段，
 * 构建会话变量映射表并从消息体中移除这些片段。
 */
function extractSessionVars(messages: Message[]): {
  variables: StaticVarSegment[]
  varMap: Record<string, string>
  cleanedMessages: Message[]
} {
  const variables: StaticVarSegment[] = []
  const varMap: Record<string, string> = {}

  const cleanedMessages = messages.map((msg) => {
    const staticVars: StaticVarSegment[] = []
    const remaining = msg.segments.filter((seg) => {
      if (seg.kind === 'static_var') {
        staticVars.push(seg)
        return false // 从消息体中移除
      }
      return true
    })

    // 收集变量
    for (const v of staticVars) {
      variables.push(v)
      varMap[v.name] = v.value
    }

    return { ...msg, segments: remaining }
  })

  return { variables, varMap, cleanedMessages }
}

export default function MessageList({ messages }: MessageListProps) {
  const { variables, varMap, cleanedMessages } = useMemo(
    () => extractSessionVars(messages),
    [messages]
  )

  if (cleanedMessages.length === 0) {
    return (
      <div className="flex-1 flex items-center justify-center text-gray-300 text-sm">
        选择一个 Demo 场景开始
      </div>
    )
  }

  return (
    <div className="flex-1 flex flex-col min-h-0">
      {/* 会话变量横栏 —— 在对话气泡之外 */}
      <SessionBar variables={variables} />

      {/* 消息列表 */}
      <div className="flex-1 overflow-y-auto px-4 py-4 space-y-1">
        {cleanedMessages.map((msg) => (
          <MessageBubble key={msg.id} message={msg} varMap={varMap} />
        ))}
      </div>
    </div>
  )
}