/* global React */
// Architectural / flow diagrams for the AI projects.
// Static, non-animated — pure visual schematics built from boxes + connector lines.

const { useLang: __useLangD, tr: __trD } = window;

// ---------- AXIOM DIAGRAM ----------
// Three stacked layers:
// 1) 6-node dialog workflow (linear left→right with non-linear hint)
// 2) Three-layer scaffold within each node (continuity / behind-the-scenes / fallback)
// 3) Daily trace review loop (feeds back into prompt + branching)
function AxiomDiagram() {
  const { lang } = window.useLang();
  const t = (zh, en) => lang === 'zh' ? zh : en;

  const nodes = [
    { k: '01', zh: '排斥探测', en: 'Rejection probe' },
    { k: '02', zh: '心流探测', en: 'Flow probe' },
    { k: '03', zh: '反向验证', en: 'Reverse-verify' },
    { k: '04', zh: '社交角色', en: 'Social role' },
    { k: '05', zh: '副型定位', en: 'Subtype' },
    { k: '06', zh: '结果合成', en: 'Synthesis' },
  ];

  const scaffold = [
    { zh: '承接', en: 'Continuity', sub: { zh: '上文衔接 + 下一步引导', en: 'tie context + lead next' } },
    { zh: '幕后分析', en: 'Behind-the-scenes', sub: { zh: '内部判断 + 置信度评估', en: 'internal judgement + confidence' } },
    { zh: '兜底选择题', en: 'Fallback MCQ', sub: { zh: '低置信时回退结构化', en: 'fall back when uncertain' } },
  ];

  return (
    <div className="diagram diagram-axiom">
      {/* Layer 1: workflow nodes */}
      <div className="diag-section">
        <span className="diag-section-label">{t('① Agent 工作流', '① Agent workflow')}</span>
        <div className="diag-nodes">
          {nodes.map((n, i) => (
            <React.Fragment key={n.k}>
              <div className="diag-node">
                <span className="diag-node-num">{n.k}</span>
                <span className="diag-node-name">{t(n.zh, n.en)}</span>
              </div>
              {i < nodes.length - 1 && <span className="diag-arrow">→</span>}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* Layer 2: scaffold within each node */}
      <div className="diag-section">
        <span className="diag-section-label">{t('② 每个节点 · 三层 Prompt 架构', '② Inside each node · three-layer Prompt scaffold')}</span>
        <div className="diag-stack">
          {scaffold.map((s, i) => (
            <div className="diag-stack-row" key={i}>
              <span className="diag-stack-idx">{['A', 'B', 'C'][i]}</span>
              <div>
                <div className="diag-stack-h">{t(s.zh, s.en)}</div>
                <div className="diag-stack-b">{t(s.sub.zh, s.sub.en)}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="diag-caption">{t('产品化解决 AI 对话两大核心问题：置信度判断 · 失败兜底。', 'Productised answer to the two canonical problems of conversational AI: confidence judgement · graceful fallback.')}</div>
      </div>

      {/* Layer 3: trace eval loop */}
      <div className="diag-section">
        <span className="diag-section-label">{t('③ 基于真实 trace 的产品质量迭代闭环', '③ Trace-grounded product-quality iteration loop')}</span>
        <div className="diag-loop">
          <div className="diag-loop-step">
            <span className="diag-loop-num">1</span>
            <span>{t('识别 badcase pattern', 'spot badcase pattern')}</span>
          </div>
          <span className="diag-arrow">→</span>
          <div className="diag-loop-step">
            <span className="diag-loop-num">2</span>
            <span>{t('定位具体 prompt 分支', 'locate the prompt branch')}</span>
          </div>
          <span className="diag-arrow">→</span>
          <div className="diag-loop-step">
            <span className="diag-loop-num">3</span>
            <span>{t('AB 对比验证 · 上线', 'A/B-validate · ship')}</span>
          </div>
          <span className="diag-arrow diag-arrow-back">↺</span>
        </div>
        <div className="diag-caption">{t('例：某条 trace 显示用户在第 4 轮已表达充分，工作流仍要求其继续展开 → 定位到对应节点的 prompt 后增加置信度判断分支并 AB 验证，下一周 trace 中该 badcase 显著下降。', 'E.g. a trace showed a user already fully expressed by turn 4 while the workflow still pushed for more → added a confidence-gated branch in that node\'s prompt and A/B-validated; the badcase visibly dropped in the next week\'s traces.')}</div>
      </div>

      {/* Outcome row */}
      <div className="diag-outcome">
        <div className="diag-outcome-cell">
          <div className="diag-outcome-v">300+</div>
          <div className="diag-outcome-l">{t('真实用户', 'real users')}</div>
        </div>
        <div className="diag-outcome-cell">
          <div className="diag-outcome-v">12</div>
          <div className="diag-outcome-l">{t('人均对话深度', 'avg. turns')}</div>
        </div>
        <div className="diag-outcome-cell">
          <div className="diag-outcome-v">2.5d</div>
          <div className="diag-outcome-l">{t('独立交付 v1', 'solo v1 delivery')}</div>
          <div className="diag-outcome-ref">{t('产品定义→交付 全链路', 'definition→delivery, full loop')}</div>
        </div>
        <div className="diag-outcome-cell">
          <div className="diag-outcome-v">3 tier</div>
          <div className="diag-outcome-l">{t('商业化架构', 'monetisation tiers')}</div>
          <div className="diag-outcome-ref">{t('获取→验证→留存', 'acquire→validate→retain')}</div>
        </div>
      </div>
    </div>);
}

// ---------- PRISM DIAGRAM ----------
// Two columns: existing frameworks (sliced by tech) vs PrismEval (sliced by business goal),
// with a feedback line back to/from Axiom traces.
function PrismDiagram() {
  const { lang } = window.useLang();
  const t = (zh, en) => lang === 'zh' ? zh : en;

  return (
    <div className="diagram diagram-prism">
      {/* Comparison row */}
      <div className="diag-section">
        <span className="diag-section-label">{t('① 评估视角对比', '① Evaluation lens comparison')}</span>
        <div className="diag-compare">
          <div className="diag-compare-col diag-compare-old">
            <div className="diag-compare-h">{t('现有框架 · 按技术形式', 'Existing · sliced by tech')}</div>
            <div className="diag-compare-tags">
              <span className="diag-tag">prompt eval</span>
              <span className="diag-tag">retrieval eval</span>
              <span className="diag-tag">generation eval</span>
            </div>
          </div>
          <span className="diag-compare-vs">vs</span>
          <div className="diag-compare-col diag-compare-new">
            <div className="diag-compare-h">PrismEval · {t('按业务目标', 'sliced by business goal')}</div>
            <div className="diag-compare-tags">
              <span className="diag-tag diag-tag-strong">{t('对话沉浸', 'immersion')}</span>
              <span className="diag-tag diag-tag-strong">{t('意图识别', 'intent')}</span>
              <span className="diag-tag diag-tag-strong">{t('幻觉控制', 'anti-hallucination')}</span>
              <span className="diag-tag diag-tag-strong">…</span>
            </div>
          </div>
        </div>
      </div>

      {/* Pipeline */}
      <div className="diag-section">
        <span className="diag-section-label">{t('② 标准化评估链路 · LLM-as-a-judge', '② Standardised pipeline · LLM-as-a-judge')}</span>
        <div className="diag-pipeline">
          <div className="diag-pipe-step">
            <div className="diag-pipe-h">{t('业务目标', 'business goal')}</div>
            <div className="diag-pipe-b">{t('定义评估目标', 'define what good looks like')}</div>
          </div>
          <span className="diag-arrow">→</span>
          <div className="diag-pipe-step">
            <div className="diag-pipe-h">{t('指标体系', 'metric set')}</div>
            <div className="diag-pipe-b">{t('目标拆解为可判定指标', 'goal → measurable metrics')}</div>
          </div>
          <span className="diag-arrow">→</span>
          <div className="diag-pipe-step">
            <div className="diag-pipe-h">{t('LLM 评判', 'LLM judge')}</div>
            <div className="diag-pipe-b">{t('标准化打分流程', 'standardised scoring')}</div>
          </div>
          <span className="diag-arrow">→</span>
          <div className="diag-pipe-step">
            <div className="diag-pipe-h">{t('结果回流', 'feedback')}</div>
            <div className="diag-pipe-b">{t('badcase + 优化建议', 'badcases + suggestions')}</div>
          </div>
        </div>
      </div>

      {/* Symbiosis with Axiom */}
      <div className="diag-section">
        <span className="diag-section-label">{t('③ 与 Axiom 共生', '③ Symbiosis with Axiom')}</span>
        <div className="diag-symbiosis">
          <div className="diag-symb-box">
            <div className="diag-symb-h">Axiom</div>
            <div className="diag-symb-b">{t('每日 trace 人工审查\n（方法论的实践版本）', 'Daily manual trace review\n(practice instance)')}</div>
          </div>
          <div className="diag-symb-flow">
            <span className="diag-symb-line diag-symb-line-r">{t('真实 trace · 数据集', 'real traces · dataset')}</span>
            <span className="diag-symb-line diag-symb-line-l">{t('评估范式 · 工具化', 'eval paradigm · tooled')}</span>
          </div>
          <div className="diag-symb-box">
            <div className="diag-symb-h">PrismEval</div>
            <div className="diag-symb-b">{t('开源评估框架\n（方法论的工具化版本）', 'Open-source eval framework\n(tooled version)')}</div>
          </div>
        </div>
      </div>
    </div>);
}

window.AxiomDiagram = AxiomDiagram;
window.PrismDiagram = PrismDiagram;