const { useEffect, useMemo, useRef, useState } = React;

const Icon = ({ name, size = 20 }) => {
  const paths = {
    shield: <><path d="M12 3 5 6v5c0 4.6 2.9 8 7 10 4.1-2 7-5.4 7-10V6l-7-3Z"></path><path d="m9 12 2 2 4-4"></path></>,
    file: <><path d="M6 2h8l4 4v16H6z"></path><path d="M14 2v5h5"></path><path d="M9 13h6M9 17h6"></path></>,
    search: <><circle cx="11" cy="11" r="7"></circle><path d="m16 16 5 5"></path></>,
    layers: <><path d="m12 3-9 5 9 5 9-5-9-5Z"></path><path d="m3 12 9 5 9-5M3 16l9 5 9-5"></path></>,
    tag: <><path d="M20 13 13 20 4 11V4h7l9 9Z"></path><circle cx="8.5" cy="8.5" r="1"></circle></>,
    database: <><ellipse cx="12" cy="5" rx="8" ry="3"></ellipse><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5"></path><path d="M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"></path></>,
    check: <><circle cx="12" cy="12" r="9"></circle><path d="m8 12 2.5 2.5L16 9"></path></>,
    arrow: <><path d="M5 12h14"></path><path d="m14 7 5 5-5 5"></path></>,
    lock: <><rect x="5" y="10" width="14" height="11" rx="2"></rect><path d="M8 10V7a4 4 0 0 1 8 0v3"></path></>,
    clock: <><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></>,
    bot: <><rect x="4" y="7" width="16" height="12" rx="3"></rect><path d="M12 3v4M8 12h.01M16 12h.01M8 16h8"></path></>,
    terminal: <><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="m7 9 3 3-3 3M12 15h5"></path></>,
  };
  return <svg className="icon" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[name]}</svg>;
};

const steps = [
  { label: "接收", detail: "读取 PDF 文字层", color: "blue" },
  { label: "去重", detail: "标题、日期与语义核对", color: "violet" },
  { label: "标注", detail: "摘要、主标签与辅助标签", color: "red" },
  { label: "写入", detail: "按原文链接幂等入库", color: "orange" },
  { label: "回读", detail: "重新读取必填字段", color: "yellow" },
  { label: "完成", detail: "验证状态与证据一致", color: "green" },
];

const abilities = [
  { icon: "file", title: "文字层提取", text: "保留标题、段落、编号和正文链接；不使用 OCR 猜测内容。" },
  { icon: "search", title: "确定性去重", text: "先核对标题与日期，再判断正文、主题和含义的重复关系。" },
  { icon: "tag", title: "结构化标注", text: "形成中性简况、唯一主标签、辅助标签及特殊状态。" },
  { icon: "layers", title: "业务相关性", text: "依据来源与业务口径执行纳入、排除或转待复核。" },
  { icon: "database", title: "幂等写入", text: "使用官方原文链接查重，不为相同素材制造第二条记录。" },
  { icon: "check", title: "实际回读", text: "只有写入后字段、正文和状态重新读取一致，才报告成功。" },
];

const rules = [
  { mark: "0", title: "已证实无新增", text: "只有读到来源最新发布日期，并能证明窗口内无发文，才允许记录为 0。" },
  { mark: "#", title: "结果未知", text: "访问失败、加载不全或无法证明零新增时，诚实保留未知状态。" },
  { mark: "待", title: "人工复核", text: "字段、去重、标签或业务归属无法稳定判断时，暂停相关分支。" },
];

const realFlow = [
  { number: "01", title: "飞书私聊投递", text: "用户一次上传 1 份单篇 PDF；无需提供电脑路径，也不在公开网页上传。" },
  { number: "02", title: "Hermes 固定入口", text: "Gateway 取得安全附件路径后，只调用 process-pdf，一次完成提取、去重与标注。" },
  { number: "03", title: "Bot 身份入库", text: "飞书 CLI 按官方原文链接查重，创建新记录或幂等复用已有记录。" },
  { number: "04", title: "写后回读验收", text: "重新读取标题、日期、来源、链接和正文；只有全部一致才报告成功。" },
];

function DemoPanel() {
  const [active, setActive] = useState(-1);
  const [running, setRunning] = useState(false);
  const timerRef = useRef(null);

  const run = () => {
    if (timerRef.current) window.clearInterval(timerRef.current);
    setActive(0);
    setRunning(true);
    let index = 0;
    timerRef.current = window.setInterval(() => {
      index += 1;
      if (index >= steps.length) {
        window.clearInterval(timerRef.current);
        timerRef.current = null;
        setRunning(false);
        return;
      }
      setActive(index);
    }, 520);
  };

  useEffect(() => () => timerRef.current && window.clearInterval(timerRef.current), []);

  return (
    <section className="demo-shell" aria-label="模拟处理流程" data-screen-label="模拟体验">
      <div className="demo-head">
        <div>
          <span className="eyebrow">LOCAL DEMO · NO UPLOAD</span>
          <h2>看一次完整的证据链。</h2>
        </div>
        <button className="run-button" onClick={run} disabled={running}>
          {running ? "模拟运行中" : active === steps.length - 1 ? "重新运行示例" : "运行模拟流程"}
          <Icon name="arrow" size={18}></Icon>
        </button>
      </div>

      <div className="sample-file">
        <div className="file-badge"><Icon name="file" size={22}></Icon></div>
        <div>
          <strong>示例：某国有银行养老金融服务案例.pdf</strong>
          <span>虚构样例 · 6 页 · 不包含真实银行数据</span>
        </div>
        <span className="demo-mode">演示模式</span>
      </div>

      <div className="evidence-chain">
        {steps.map((step, index) => {
          const done = active >= index;
          const current = active === index && running;
          return (
            <div className={`chain-step ${done ? "is-done" : ""} ${current ? "is-current" : ""}`} key={step.label}>
              <div className={`step-signal ${step.color}`}>
                {done ? <Icon name="check" size={18}></Icon> : <span>{index + 1}</span>}
              </div>
              <strong>{step.label}</strong>
              <span>{step.detail}</span>
            </div>
          );
        })}
      </div>

      <div className={`result-card ${active === steps.length - 1 ? "is-visible" : ""}`} aria-live="polite">
        <div className="result-status"><span></span>模拟验证通过</div>
        <dl>
          <div><dt>处理结果</dt><dd>正式纳入；回读验证通过</dd></div>
          <div><dt>主标签</dt><dd>养老金融</dd></div>
          <div><dt>写入策略</dt><dd>按原文链接幂等复用</dd></div>
          <div><dt>数据状态</dt><dd>纯前端示例，未连接生产环境</dd></div>
        </dl>
      </div>
    </section>
  );
}

function App() {
  const scopeText = useMemo(() => "8 个指定官方公众号 · 人工 PDF 应急输入 · 银行定期报告专栏选题", []);
  return (
    <main>
      <header className="site-header">
        <a className="brand" href="#top" aria-label="返回顶部">
          <span className="brand-mark"><span></span><span></span><span></span><span></span><span></span><span></span></span>
          <span>银材编研</span>
        </a>
        <nav aria-label="页面导航">
          <a href="#capabilities">能力</a>
          <a href="#workflow">流程</a>
          <a href="#evidence">实证</a>
          <a href="#standards">规范</a>
          <a href="#boundaries">边界</a>
        </nav>
        <span className="public-chip">Public profile</span>
      </header>

      <section className="hero" id="top" data-screen-label="Agent 概览">
        <div className="hero-copy">
          <div className="profile-line">
            <span>HERMES AGENT</span>
            <span className="dot"></span>
            <span>bank-content-research</span>
          </div>
          <h1>把一篇 PDF，<br></br>变成一条可追溯的银行研究素材。</h1>
          <p className="hero-lead">银材编研负责采集、整理和提炼银行公众号素材。它不追求“看起来完成”，而是用实际读取、实际写入和实际回读证明每一步。</p>
          <div className="hero-actions">
            <a className="primary-action" href="#demo">体验模拟流程 <Icon name="arrow" size={18}></Icon></a>
            <a className="secondary-action" href="#boundaries">查看能力边界</a>
          </div>
          <div className="hero-metrics" aria-label="公开展示指标">
            <div><strong>20–30 min</strong><span>传统人工整理估算</span></div>
            <div><strong>39 sec</strong><span>最近一次真实处理</span></div>
            <div><strong>0 API</strong><span>公开页后端调用</span></div>
          </div>
          <p className="scope-note">{scopeText}</p>
        </div>

        <div className="identity-card" aria-label="Agent 身份卡">
          <div className="rainbow-ribbon"><span></span><span></span><span></span><span></span><span></span><span></span></div>
          <div className="identity-top">
            <span className="monogram">银</span>
            <div><span>AGENT PROFILE</span><strong>银材编研</strong></div>
          </div>
          <dl className="identity-data">
            <div><dt>岗位</dt><dd>银行素材编研</dd></div>
            <div><dt>原则</dt><dd>证据优先</dd></div>
            <div><dt>输出</dt><dd>素材库与专栏初稿</dd></div>
            <div><dt>终审</dt><dd>始终由人工完成</dd></div>
          </dl>
          <div className="identity-foot"><Icon name="shield" size={18}></Icon>公开展示版 · 无生产权限</div>
        </div>
      </section>

      <div className="privacy-bar">
        <span><Icon name="lock" size={16}></Icon> 不接 API</span>
        <span>不接飞书生产数据</span>
        <span>不接收真实文件</span>
        <span>不记录访问者信息</span>
      </div>

      <div id="demo"><DemoPanel></DemoPanel></div>

      <section className="section live-workflow" id="workflow" data-screen-label="实际工作流">
        <div className="section-intro">
          <span className="eyebrow">HOW IT ACTUALLY RUNS</span>
          <h2>展示页在前台，<br></br>真实 Agent 在飞书。</h2>
          <p>访客可以在本页看懂并模拟流程；真正的 PDF 只通过已授权的飞书私聊进入生产链路。</p>
        </div>
        <div className="workflow-grid">
          {realFlow.map((item) => (
            <article className="workflow-card" key={item.number}>
              <span>{item.number}</span>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
            </article>
          ))}
        </div>
        <div className="toolchain" aria-label="工具分工">
          <div><Icon name="terminal" size={20}></Icon><strong>Codex</strong><span>设计、开发与测试</span></div>
          <div><Icon name="bot" size={20}></Icon><strong>Hermes</strong><span>运行 Profile 与流程编排</span></div>
          <div><Icon name="database" size={20}></Icon><strong>飞书 CLI</strong><span>查重、写入与回读</span></div>
        </div>
      </section>

      <section className="section capabilities" id="capabilities" data-screen-label="能力">
        <div className="section-intro">
          <span className="eyebrow">WHAT IT DOES</span>
          <h2>能力不是口号，<br></br>而是一组可验证的动作。</h2>
          <p>从输入证据到输出记录，每一步都有明确字段、状态和失败出口。</p>
        </div>
        <div className="ability-grid">
          {abilities.map((ability, index) => (
            <article className="ability-card" key={ability.title}>
              <div className={`ability-icon tone-${index + 1}`}><Icon name={ability.icon} size={22}></Icon></div>
              <span className="ability-index">0{index + 1}</span>
              <h3>{ability.title}</h3>
              <p>{ability.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="section evidence" id="evidence" data-screen-label="真实运行证据">
        <div className="evidence-copy">
          <span className="eyebrow">VERIFIED RUN</span>
          <h2>不是效果图，<br></br>是一条真实完成记录。</h2>
          <p>以下信息来自 2026-08-25 的飞书私聊实跑，内部标识已脱敏。附件接收至结果返回约 39 秒。</p>
          <div className="evidence-time"><Icon name="clock" size={18}></Icon>2026-08-25 18:19:10 → 18:19:49</div>
        </div>
        <article className="proof-card">
          <div className="proof-head">
            <span><i></i>success · stage=complete</span>
            <span>verified=1</span>
          </div>
          <h3>活跃县域消费 工行“花椒贷”跑出助农“加速度”</h3>
          <dl>
            <div><dt>公众号</dt><dd>中国工商银行</dd></div>
            <div><dt>写入</dt><dd>1 条新记录</dd></div>
            <div><dt>record_id</dt><dd>recvtiOv…ogB2</dd></div>
            <div><dt>回读</dt><dd>正式纳入；验证通过</dd></div>
          </dl>
          <p>来源、发布日期和官方原文链接均由 PDF 首页自动提取；公开页不包含 Base 地址、完整记录 ID 或任何凭证。</p>
        </article>
      </section>

      <section className="section standards" id="standards" data-screen-label="状态规范">
        <div className="section-intro compact">
          <span className="eyebrow">TRUTHFUL STATES</span>
          <h2>不知道，就是不知道。</h2>
          <p>银材编研不会用一个漂亮的成功状态掩盖不完整的证据。</p>
        </div>
        <div className="rule-list">
          {rules.map((rule) => (
            <article className="rule-row" key={rule.mark}>
              <span className="rule-mark">{rule.mark}</span>
              <div><h3>{rule.title}</h3><p>{rule.text}</p></div>
            </article>
          ))}
        </div>
      </section>

      <section className="section boundary-section" id="boundaries" data-screen-label="能力边界">
        <div className="boundary-copy">
          <span className="eyebrow light">OPERATING BOUNDARY</span>
          <h2>有能力，也有刹车。</h2>
          <p>真正可靠的 Agent，不只是知道怎么做，还知道什么时候必须停下来。</p>
        </div>
        <div className="boundary-columns">
          <article>
            <span className="boundary-label can">CAN</span>
            <h3>在明确范围内执行</h3>
            <ul>
              <li>处理指定来源的文字素材</li>
              <li>生成中性简况与业务标签</li>
              <li>按官方链接查重并幂等写入</li>
              <li>将不确定事项转人工复核</li>
            </ul>
          </article>
          <article>
            <span className="boundary-label stop">WILL NOT</span>
            <h3>不越过权限与事实</h3>
            <ul>
              <li>不绕过登录、验证码或平台风控</li>
              <li>不使用 OCR 猜测图片内容</li>
              <li>不把待回读状态描述为成功</li>
              <li>不替代人工终审或直接发布报告</li>
            </ul>
          </article>
        </div>
      </section>

      <section className="section safety" data-screen-label="公开展示安全说明">
        <div className="safety-seal"><Icon name="shield" size={34}></Icon></div>
        <div>
          <span className="eyebrow">SAFE BY DESIGN</span>
          <h2>这是一份公开档案，不是生产入口。</h2>
          <p>页面不包含 API Key、飞书 Token、Hermes 控制接口、真实素材或可调用后端。模拟流程只使用写在页面里的虚构样例，刷新页面即复位。</p>
        </div>
      </section>

      <footer>
        <div><strong>银材编研</strong><span>Bank Content Research Agent</span></div>
        <div className="footer-meta"><span>Profile · bank-content-research</span><span>Public showcase · v1.1</span></div>
      </footer>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App></App>);