import type { ReActRound, ReActStep } from '../types'
import { PlainChain } from './PlainChain'
import { ReActChain } from './ReActChain'

interface Props {
  plainSteps: ReActStep[]
  reactRounds: ReActRound[]
  reactSteps: ReActStep[]
  plainAnswer: string
  reactAnswer: string
  toolCallCount: number
  plainLoading: boolean
  reactLoading: boolean
  needsTool?: boolean
}

export function ComparePanel({
  plainSteps,
  reactRounds,
  reactSteps,
  plainAnswer,
  reactAnswer,
  toolCallCount,
  plainLoading,
  reactLoading,
  needsTool,
}: Props) {
  const reactInput = reactSteps.find((s) => s.type === 'input')
  const reactAnswerStep = reactSteps.find((s) => s.type === 'answer')
  const done = !plainLoading && !reactLoading && Boolean(plainAnswer && reactAnswer)

  return (
    <div className="compare-section">
      <div className="compare-summary">
        <div className="summary-card summary-plain">
          <span className="summary-icon">🚫</span>
          <div>
            <strong>普通模式</strong>
            <p>0 次工具调用 · 无验证链条</p>
          </div>
        </div>
        <div className="summary-vs">VS</div>
        <div className="summary-card summary-react">
          <span className="summary-icon">🔗</span>
          <div>
            <strong>ReAct 模式</strong>
            <p>
              {reactLoading ? '推理中…' : `${toolCallCount} 次工具调用 · ${reactRounds.length} 轮推理`}
            </p>
          </div>
        </div>
      </div>

      {done && needsTool && (
        <div className="verdict-banner">
          <span className="verdict-icon">💡</span>
          <p>
            此问题需要<strong>实时外部数据</strong>。左侧模型只能「猜」，右侧通过
            <strong> Thought → Action → Observation </strong>
            获取并引用真实结果，对比差异最明显。
          </p>
        </div>
      )}

      <div className="compare-grid">
        <div className="compare-card compare-without">
          <div className="compare-header">
            <span className="compare-badge badge-warn">无工具</span>
            <h3>普通对话 · 过程</h3>
          </div>
          <PlainChain steps={plainSteps} loading={plainLoading} />
          {plainAnswer && !plainLoading && (
            <div className="compare-answer-snippet">
              <span className="snippet-label">最终回答摘要</span>
              <pre>{plainAnswer}</pre>
            </div>
          )}
        </div>

        <div className="compare-card compare-with">
          <div className="compare-header">
            <span className="compare-badge badge-ok">ReAct + 工具</span>
            <h3>ReAct 模式 · 推理链</h3>
          </div>
          <ReActChain
            rounds={reactRounds}
            inputStep={reactInput}
            answerStep={reactAnswerStep}
            loading={reactLoading}
          />
          {reactAnswer && !reactLoading && (
            <div className="compare-answer-snippet snippet-ok">
              <span className="snippet-label">最终回答摘要</span>
              <pre>{reactAnswer}</pre>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}