import type { ReActStep } from '../types'

interface Props {
  steps: ReActStep[]
  loading?: boolean
}

export function PlainChain({ steps, loading }: Props) {
  const input = steps.find((s) => s.type === 'input')
  const process = steps.find((s) => s.type === 'plain')
  const answer = steps.find((s) => s.type === 'answer')

  if (!steps.length && !loading) {
    return (
      <div className="chain-empty plain-empty">
        <p>普通模式无推理链条</p>
      </div>
    )
  }

  return (
    <div className="plain-chain">
      {input && (
        <div className="chain-node chain-node-input">
          <div className="chain-node-head">
            <span className="chain-node-icon">❓</span>
            <span className="chain-node-label">用户提问</span>
          </div>
          <pre className="chain-node-body">{input.content}</pre>
        </div>
      )}

      <div className="chain-arrow">↓</div>

      {process && (
        <div className="chain-node chain-node-plain">
          <div className="chain-node-head">
            <span className="chain-node-icon">🚫</span>
            <span className="chain-node-label">跳过 ReAct 循环</span>
          </div>
          <pre className="chain-node-body">{process.content}</pre>
        </div>
      )}

      <div className="chain-arrow">↓</div>

      {answer ? (
        <div className="chain-node chain-node-answer-warn">
          <div className="chain-node-head">
            <span className="chain-node-icon">⚠️</span>
            <span className="chain-node-label">直接输出（未经验证）</span>
          </div>
          <pre className="chain-node-body">{answer.content}</pre>
        </div>
      ) : loading ? (
        <div className="chain-loading">
          <span className="pulse">⏳</span> 生成中…
        </div>
      ) : null}
    </div>
  )
}