Profeto/frontend/src/pages/matches/components/AgentsPanel.tsx

/**
 * AgentsPanel: 五路专家意见 —— 可折叠 + 状态摘要 + 权重条形图 + 单路详情。
 *
 * P3-1: 从 MatchPredictPanel.PredictionPanel 拆出,渲染逻辑原样搬迁。
 */
import { useState } from 'react'
import type { AgentReport, Prediction } from '../types'
import { AGENT_LABELS, CN_NUM } from '../types'

const STATUS_BADGE: Record<string, { label: string; cls: string }> = {
  ok: { label: '正常', cls: 'text-ink-500' },
  no_data: { label: '无数据', cls: 'text-ink-400' },
  error: { label: '调用失败', cls: 'text-press' },
  parse_error: { label: '解析失败', cls: 'text-press' },
}

const SUFFICIENCY_LABEL: Record<string, string> = {
  high: '充分',
  medium: '一般',
  low: '偏少',
  none: '无',
}

/** home_edge(-1~1,正=利主队)的可视化:以中线为原点的双向细条 */
function EdgeBar({ value }: { value: number }) {
  const v = Math.max(-1, Math.min(1, value))
  const half = Math.abs(v) * 50
  return (
    <div className="relative h-px w-full bg-ink-200" role="presentation">
      <span className="absolute left-1/2 top-1/2 h-2 w-px -translate-x-1/2 -translate-y-1/2 bg-ink-400" />
      <span
        className={`absolute top-0 h-px transition-all duration-500 ${v >= 0 ? 'bg-press' : 'bg-ink-600'}`}
        style={
          v >= 0
            ? { left: '50%', width: `${half}%` }
            : { right: '50%', width: `${half}%` }
        }
      />
    </div>
  )
}

/** 单路专家意见:汉字编号 + 细线行 */
function AgentCard({ report: r, no }: { report: AgentReport; no: string }) {
  const badge = STATUS_BADGE[r.status] ?? { label: r.status, cls: 'text-ink-400' }
  const inactive = r.status !== 'ok'

  return (
    <details className="group border-b border-ink-200">
      <summary className="flex cursor-pointer list-none items-baseline gap-2.5 px-1 py-3">
        <span className="font-serif text-sm text-ink-400">{no}</span>
        <span className="text-sm font-medium text-ink-900">{AGENT_LABELS[r.agent] ?? r.agent}</span>
        <span className={`text-2xs ${badge.cls}`}>{badge.label}</span>

        <span className="ml-auto flex items-baseline gap-3 text-2xs tabular-nums text-ink-500">
          {r.status === 'ok' && r.subjective_confidence !== null && (
            <span>信心 {Math.round(r.subjective_confidence * 100)}%</span>
          )}
          {r.status === 'ok' && r.probable_score && (
            <span className="font-serif font-bold text-ink-800">{r.probable_score}</span>
          )}
          <svg viewBox="0 0 20 20" className="h-3 w-3 self-center text-ink-300 transition-transform group-open:rotate-90" fill="currentColor" aria-hidden="true">
            <path d="M7.3 5.3a1 1 0 011.4 0l4 4a1 1 0 010 1.4l-4 4a1 1 0 01-1.4-1.4L10.6 10 7.3 6.7a1 1 0 010-1.4z" />
          </svg>
        </span>
      </summary>

      <div className="space-y-3 px-1 pb-4 pl-7">
        {inactive && (
          <p className="text-xs leading-relaxed text-ink-500">
            {r.status === 'no_data' && '该维度没有可用数据,已跳过 LLM 分析以节省额度(不影响其他专家)。'}
            {r.status === 'error' && '该专家调用失败,本次结论未纳入其视角(fail-open 设计,不阻断整体预测)。'}
            {r.status === 'parse_error' && '模型输出未通过格式校验,该报告已丢弃。'}
          </p>
        )}

        {!inactive && r.home_edge !== null && (
          <div>
            <div className="mb-1.5 flex items-baseline justify-between text-2xs">
              <span className="text-ink-500">主队优势</span>
              <span className={`font-semibold tabular-nums ${r.home_edge > 0 ? 'text-press' : r.home_edge < 0 ? 'text-ink-700' : 'text-ink-500'}`}>
                {r.home_edge > 0 ? '+' : ''}{r.home_edge.toFixed(2)}
              </span>
            </div>
            <EdgeBar value={r.home_edge} />
            <div className="mt-1 flex justify-between text-2xs text-ink-400">
              <span>利客队</span>
              <span>利主队</span>
            </div>
          </div>
        )}

        {r.analysis && (
          <p className="font-serif text-sm leading-loose text-ink-700">{r.analysis}</p>
        )}

        {r.key_evidence.length > 0 && (
          <ul className="space-y-1.5">
            {r.key_evidence.map((e, i) => (
              <li key={i} className="flex gap-2 text-xs leading-relaxed text-ink-600">
                <span className="flex-shrink-0 text-ink-300" aria-hidden="true">—</span>
                <span>{e}</span>
              </li>
            ))}
          </ul>
        )}

        {r.exp_home_goals !== null && r.exp_away_goals !== null && (
          <p className="text-xs text-ink-500">
            进球期望 <span className="font-serif font-bold tabular-nums text-ink-900">{r.exp_home_goals.toFixed(1)} - {r.exp_away_goals.toFixed(1)}</span>
          </p>
        )}

        {!inactive && (
          <p className="border-t border-ink-100 pt-2.5 text-2xs text-ink-400">
            数据充分度 {SUFFICIENCY_LABEL[r.data_sufficiency] ?? r.data_sufficiency}
            <span className="mx-2 text-ink-200">|</span>
            <span className="font-mono">{r.model}</span>
            {r.latency_ms !== null && <span className="ml-2 tabular-nums">{r.latency_ms}ms</span>}
          </p>
        )}
      </div>
    </details>
  )
}

export function AgentsPanel({ prediction }: { prediction: Prediction }) {
  const [expertsOpen, setExpertsOpen] = useState(false)
  const degraded = prediction.status === 'degraded' || prediction.status === 'failed'
  const reports = prediction.agent_outputs ?? []
  const okReports = reports.filter(r => r.status === 'ok')

  if (reports.length === 0) return null

  return (
    <section>
      <button
        onClick={() => setExpertsOpen(o => !o)}
        className="flex w-full items-center justify-between border-b border-ink-200 pb-2 text-left"
      >
        <span className="section-head mb-0">五路专家意见({okReports.length}/{reports.length} 路有效)</span>
        <span className="text-2xs text-ink-400">{expertsOpen ? '收起' : '展开'}</span>
      </button>

      {!degraded && prediction.agent_weights && Object.keys(prediction.agent_weights).length > 0 && (
        <div className="mt-3 space-y-1.5">
          <span className="text-2xs text-ink-500">终裁权重分布</span>
          {Object.entries(prediction.agent_weights)
            .sort((a, b) => b[1] - a[1])
            .map(([k, v]) => (
              <div key={k} className="grid grid-cols-[96px_minmax(0,1fr)_40px] items-center gap-2">
                <span className="truncate text-2xs text-ink-500">{AGENT_LABELS[k] ?? k}</span>
                <div className="h-1.5 bg-paper-100">
                  <div className="h-full bg-press" style={{ width: `${Math.round(v * 100)}%` }} />
                </div>
                <span className="text-right text-2xs tabular-nums text-ink-500">{Math.round(v * 100)}%</span>
              </div>
            ))}
        </div>
      )}

      {expertsOpen && (
        <div className="mt-2">
          {reports.map((r, i) => (
            <AgentCard key={r.agent} report={r} no={CN_NUM[i] ?? String(i + 1)} />
          ))}
        </div>
      )}
    </section>
  )
}