#!/usr/bin/env python3
"""Render a human-review page for the thinking model catalog."""

from __future__ import annotations

import csv
import html
from pathlib import Path


ROOT = Path(__file__).resolve().parents[1]
CATALOG = ROOT / "outputs" / "thinking-model-catalog.csv"
ROUTER = ROOT / "outputs" / "thinking-model-router.csv"
OUT = ROOT / "thinking-models-review.html"


def read_csv(path: Path) -> list[dict[str, str]]:
    with path.open(encoding="utf-8") as fh:
        return list(csv.DictReader(fh))


def esc(value: str) -> str:
    return html.escape(value or "")


def main() -> int:
    catalog = read_csv(CATALOG)
    router = read_csv(ROUTER)
    parts: dict[str, int] = {}
    for row in catalog:
        parts[row["part"]] = parts.get(row["part"], 0) + 1

    router_cards = "\n".join(
        f"""
        <section class="card">
          <h3>{esc(row['scenario'])}</h3>
          <p class="models">{esc(row['preferred_models'])}</p>
          <p>{esc(row['target_result'])}</p>
        </section>
        """
        for row in router
    )

    part_cards = "\n".join(
        f"<span class=\"pill\">{esc(part)} <b>{count}</b></span>"
        for part, count in parts.items()
    )

    rows = "\n".join(
        f"""
        <tr>
          <td>{esc(row['model_id'])}</td>
          <td>{esc(row['model'])}</td>
          <td>{esc(row['part'])}</td>
          <td>{esc(row['when_to_use'])}</td>
          <td>{esc(row['expected_output'])}</td>
        </tr>
        """
        for row in catalog
    )

    html_doc = f"""<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>思维模型问答知识库 Review</title>
  <style>
    :root {{
      --ink: #17202a;
      --muted: #5d6d7e;
      --line: #d7dee8;
      --bg: #f6f8fb;
      --accent: #0f766e;
      --warm: #b45309;
      --panel: #ffffff;
    }}
    * {{ box-sizing: border-box; }}
    body {{
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height: 1.55;
    }}
    header {{
      background: #12343b;
      color: #fff;
      padding: 36px 40px 28px;
    }}
    header h1 {{
      margin: 0 0 10px;
      font-size: clamp(28px, 4vw, 46px);
      letter-spacing: 0;
    }}
    header p {{
      max-width: 920px;
      margin: 0;
      color: #dbeafe;
      font-size: 16px;
    }}
    main {{
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 22px 48px;
    }}
    .band {{
      padding: 22px 0;
      border-bottom: 1px solid var(--line);
    }}
    h2 {{
      font-size: 22px;
      margin: 0 0 14px;
    }}
    .summary {{
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }}
    .metric, .card {{
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
    }}
    .metric b {{
      display: block;
      color: var(--accent);
      font-size: 28px;
      line-height: 1.2;
    }}
    .metric span, .muted {{
      color: var(--muted);
      font-size: 13px;
    }}
    .router {{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }}
    .card h3 {{
      margin: 0 0 8px;
      font-size: 16px;
    }}
    .models {{
      color: var(--accent);
      font-size: 13px;
      word-break: break-word;
    }}
    .pillwrap {{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }}
    .pill {{
      display: inline-flex;
      gap: 6px;
      align-items: center;
      border: 1px solid #cbd5e1;
      background: #fff;
      border-radius: 999px;
      padding: 7px 11px;
      font-size: 13px;
    }}
    .table-wrap {{
      overflow-x: auto;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
    }}
    table {{
      width: 100%;
      border-collapse: collapse;
      min-width: 980px;
      font-size: 13px;
    }}
    th, td {{
      padding: 10px 12px;
      border-bottom: 1px solid #edf1f7;
      text-align: left;
      vertical-align: top;
    }}
    th {{
      position: sticky;
      top: 0;
      background: #eef5f4;
      color: #0f3f3b;
      z-index: 1;
    }}
    tr:hover td {{ background: #fbf7ef; }}
    .note {{
      border-left: 4px solid var(--warm);
      padding: 10px 14px;
      background: #fff7ed;
      border-radius: 4px;
      color: #4a3114;
    }}
    @media (max-width: 860px) {{
      header {{ padding: 28px 22px; }}
      .summary, .router {{ grid-template-columns: 1fr; }}
    }}
  </style>
</head>
<body>
  <header>
    <h1>思维模型问答知识库</h1>
    <p>将 150 个思维模型按“何时使用、产出结果、回答形态”编译为可复用目录，并沉淀为 future Codex Q&A 的默认模型路由。</p>
  </header>
  <main>
    <section class="band summary">
      <div class="metric"><b>{len(catalog)}</b><span>模型条目</span></div>
      <div class="metric"><b>{len(router)}</b><span>问答场景路由</span></div>
      <div class="metric"><b>151</b><span>PPT 页数，含目录页</span></div>
      <div class="metric"><b>0</b><span>原始 PPTX 入 Git</span></div>
    </section>

    <section class="band">
      <h2>归档边界</h2>
      <p>原始 PPTX 为 53MB 本地桌面文件，已登记 SHA256 和资产卡，不直接复制进 Git。项目内保留文本抽取、来源索引、模型目录、场景路由、Review 页和可复制 skill。</p>
      <p class="note">使用时不能把模型当作事实来源。项目真实证据、日志、代码、合同、客户材料和微盘索引优先级高于模型推断。</p>
    </section>

    <section class="band">
      <h2>模型类别</h2>
      <div class="pillwrap">{part_cards}</div>
    </section>

    <section class="band">
      <h2>默认问答路由</h2>
      <div class="router">{router_cards}</div>
    </section>

    <section class="band">
      <h2>150 个模型目录</h2>
      <div class="table-wrap">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>模型</th>
              <th>类别</th>
              <th>何时使用</th>
              <th>产出结果</th>
            </tr>
          </thead>
          <tbody>{rows}</tbody>
        </table>
      </div>
    </section>
  </main>
</body>
</html>
"""
    OUT.write_text(html_doc, encoding="utf-8")
    print(OUT)
    return 0


if __name__ == "__main__":
    raise SystemExit(main())
