const { useEffect, useState } = React;

const scenarios = [
  {
    short: "温柔生活",
    input: "每一个认真生活的日子，都值得被温柔以待。",
    output: "认真生活的日子，\n自会被温柔以待。",
    keyword: "温柔以待",
    style: "warm",
    visual: "清晨暖光 · 生活摄影 · 留白构图",
  },
  {
    short: "持续向前",
    input: "慢一点，也是在向前走。",
    output: "慢一点，\n也在向前走。",
    keyword: "向前走",
    style: "green",
    visual: "自然原野 · 编辑排版 · 结构线",
  },
  {
    short: "奔赴热爱",
    input: "保持热爱，奔赴下一场山海。",
    output: "保持热爱，\n奔赴下一场山海。",
    keyword: "奔赴山海",
    style: "blue",
    visual: "山海日出 · 高对比层级 · 数字模块",
  },
];

const processSteps = [
  "识别日签任务",
  "提炼核心文案",
  "建立视觉方案",
  "生成无字背景",
  "排版文案日期",
  "执行质量检查",
  "返回原始私聊",
];

const capabilities = [
  ["01", "任务识别", "区分日签海报与营销活动海报，避免错误进入流程。"],
  ["02", "文案提炼", "保留核心意思，将表达精炼到适合海报展示的长度。"],
  ["03", "视觉策划", "从情绪、构图、配色、字体和日期模块建立完整方案。"],
  ["04", "专业排版", "确定性叠加中文与日期，不依赖图片模型生成中文。"],
  ["05", "自动质检", "检查日期、错字、尺寸、格式、层级和图文关联。"],
  ["06", "交付验证", "回传原飞书私聊，并确认图片真实出现而非只调用接口。"],
];

const workflow = [
  ["01", "接收", "保存消息与原私聊上下文"],
  ["02", "判断", "确认是日签而非营销海报"],
  ["03", "提炼", "20 字以内，保持原意"],
  ["04", "设计", "确定视觉、版式与日期模块"],
  ["05", "生成", "产出无中文文字的背景"],
  ["06", "排版", "可控字体叠加文案与日期"],
  ["07", "质检", "不合格则最小范围修正"],
  ["08", "送达", "回传并确认原私聊已收到"],
];

function Home() {
  const [selected, setSelected] = useState(1);
  const [runState, setRunState] = useState("idle");
  const [activeStep, setActiveStep] = useState(-1);
  const scenario = scenarios[selected];

  useEffect(() => {
    if (runState !== "running") return;
    if (activeStep >= processSteps.length - 1) {
      const finish = window.setTimeout(() => setRunState("done"), 500);
      return () => window.clearTimeout(finish);
    }
    const timer = window.setTimeout(() => setActiveStep((step) => step + 1), 520);
    return () => window.clearTimeout(timer);
  }, [runState, activeStep]);

  function chooseScenario(index) {
    setSelected(index);
    setRunState("idle");
    setActiveStep(-1);
  }

  function runDemo() {
    setActiveStep(0);
    setRunState("running");
  }

  return (
    <main>
      <nav className="nav-shell" aria-label="主导航">
        <a className="brand" href="#top" aria-label="日签设计师首页">
          <span className="brand-mark">日</span>
          <span>DAILY POSTER / 日签设计师</span>
        </a>
        <div className="nav-links">
          <a href="#experience">模拟体验</a>
          <a href="#workflow">工作流</a>
          <a href="#boundaries">能力边界</a>
        </div>
        <div className="nav-meta">
          <span className="status-dot" />
          安全演示 · 无真实调用
        </div>
      </nav>

      <section className="hero" id="top">
        <div className="hero-copy">
          <p className="eyebrow">HERMES AGENT · PROFILE 01</p>
          <h1>
            把一句话，
            <span>设计成今天。</span>
          </h1>
          <p className="hero-lead">
            日签设计师会理解励志文案、建立视觉方案、生成海报并完成质量检查，
            最后把当天作品送回原飞书私聊。
          </p>
          <div className="hero-actions">
            <a className="button button-primary" href="#experience">体验一次任务</a>
            <a className="button button-quiet" href="#boundaries">查看能力边界 ↘</a>
          </div>
          <dl className="hero-stats">
            <div><dt>01</dt><dd>一句文案输入</dd></div>
            <div><dt>08</dt><dd>步标准流程</dd></div>
            <div><dt>1080×1440</dt><dd>PNG 标准成品</dd></div>
          </dl>
        </div>

        <div className="hero-stage" aria-label="日签海报演示预览">
          <div className="poster-card poster-green">
            <div className="poster-scene" />
            <div className="poster-label">DAILY NOTE / 017</div>
            <div className="poster-copy">慢一点，<br /><strong>也在向前走。</strong></div>
            <div className="poster-date"><b>17</b><span>AUG<br />2026</span></div>
            <div className="poster-line" />
          </div>
          <div className="stage-note note-top">视觉方案 / 03</div>
          <div className="stage-note note-bottom">公开演示样例</div>
        </div>
      </section>

      <section className="trust-strip" aria-label="演示安全说明">
        <span>STATIC SHOWCASE</span>
        <p>不连接 GPT</p><i>×</i><p>不连接飞书</p><i>×</i><p>不保存输入</p><i>×</i><p>不包含密钥</p>
      </section>

      <section className="experience-section" id="experience">
        <header className="section-heading light">
          <div><p className="eyebrow">INTERACTIVE DEMO</p><h2>像真实任务一样体验，<br />但没有任何真实调用。</h2></div>
          <p>选择一个公开样例，观看 Agent 如何完成一次任务。所有内容都在浏览器本地模拟，不上传、不存储。</p>
        </header>

        <div className="demo-layout">
          <div className="scenario-picker" aria-label="选择演示文案">
            {scenarios.map((item, index) => (
              <button key={item.short} className={selected === index ? "selected" : ""} onClick={() => chooseScenario(index)}>
                <span>0{index + 1}</span>
                <b>{item.short}</b>
                <small>{item.input}</small>
              </button>
            ))}
          </div>

          <div className="demo-console">
            <div className="demo-topbar">
              <span><i /> 日签设计师</span>
              <small>SIMULATION MODE</small>
            </div>
            <div className="chat-area" aria-live="polite">
              <div className="message message-user">今日海报 {scenario.input}</div>

              {runState === "idle" && (
                <div className="idle-state">
                  <p>任务已准备好</p>
                  <span>点击下方按钮，模拟完整处理流程</span>
                </div>
              )}

              {runState !== "idle" && (
                <div className="step-list">
                  {processSteps.map((step, index) => (
                    <div key={step} className={index < activeStep ? "complete" : index === activeStep ? "active" : "pending"}>
                      <span>{index < activeStep || runState === "done" ? "✓" : index + 1}</span>
                      <p>{step}</p>
                      <small>{index === activeStep && runState === "running" ? "处理中" : index < activeStep || runState === "done" ? "完成" : "等待"}</small>
                    </div>
                  ))}
                </div>
              )}

              {runState === "done" && (
                <div className="result-message">
                  <span>✓ 模拟任务完成</span>
                  <p>演示海报已通过日期、文字、尺寸与视觉层级检查。</p>
                </div>
              )}
            </div>
            <button className="run-button" onClick={runDemo} disabled={runState === "running"}>
              {runState === "running" ? `正在模拟 · ${Math.min(activeStep + 1, processSteps.length)}/${processSteps.length}` : runState === "done" ? "重新模拟一次 ↻" : "开始模拟任务 →"}
            </button>
          </div>

          <div className={`result-poster poster-${scenario.style}`}>
            <div className="result-visual" />
            <div className="result-kicker">DAILY POSTER / DEMO</div>
            <div className="result-copy">
              {scenario.output.split("\n").map((line, index) => <span key={line} className={index === 1 ? "emphasis" : ""}>{line}</span>)}
            </div>
            <div className="result-visual-note">{scenario.visual}</div>
            <div className="result-date"><strong>17</strong><span>2026.08<br />SUNDAY</span></div>
            <div className="demo-watermark">安全演示样例</div>
          </div>
        </div>
      </section>

      <section className="capability-section" id="capabilities">
        <header className="section-heading">
          <div><p className="eyebrow">WHAT IT CAN DO</p><h2>不只生成一张图，<br />而是完成一份设计工作。</h2></div>
          <p>从任务判断到真实送达，每一步都有明确动作、检查标准与失败出口。</p>
        </header>
        <div className="capability-grid">
          {capabilities.map(([number, title, copy]) => (
            <article key={number}><span>{number}</span><h3>{title}</h3><p>{copy}</p><i>↗</i></article>
          ))}
        </div>
      </section>

      <section className="workflow-section" id="workflow">
        <header className="workflow-title">
          <p className="eyebrow">STANDARD WORKFLOW</p>
          <h2>一条可以检查、<br />可以复现的工作流。</h2>
          <p>点击体验只是演示；正式 Agent 按下面八步执行。</p>
        </header>
        <ol className="workflow-list">
          {workflow.map(([number, title, copy]) => (
            <li key={number}><span>{number}</span><h3>{title}</h3><p>{copy}</p></li>
          ))}
        </ol>
      </section>

      <section className="standard-section">
        <div className="standard-intro">
          <p className="eyebrow">QUALITY GATE</p>
          <h2>“背景图 + 普通文字”<br />不算完成。</h2>
          <p>任意关键项不合格，任务都不能被标记为成功。</p>
        </div>
        <div className="quality-card">
          <div className="quality-score"><strong>17</strong><span>项质量标准</span></div>
          <ul>
            <li><b>日期准确</b><span>Asia/Shanghai · YYYY.MM.DD</span></li>
            <li><b>规格统一</b><span>1080×1440 · PNG</span></li>
            <li><b>中文可控</b><span>无错字、乱码、裁切</span></li>
            <li><b>三级层级</b><span>主文案、核心词、辅助信息</span></li>
            <li><b>图文一致</b><span>画面情绪服务文案表达</span></li>
            <li><b>送达确认</b><span>原私聊真实出现图片</span></li>
          </ul>
        </div>
      </section>

      <section className="boundaries-section" id="boundaries">
        <header className="section-heading">
          <div><p className="eyebrow">BOUNDARIES & SAFETY</p><h2>知道自己能做什么，<br />也知道何时必须停下。</h2></div>
          <p>能力边界不是限制说明，而是这个 Agent 能够被信任的原因。</p>
        </header>
        <div className="boundary-grid">
          <article className="boundary-card yes">
            <span>IN SCOPE</span><h3>它负责</h3>
            <ul><li>飞书私聊日签任务</li><li>励志文案理解与精炼</li><li>海报视觉策划和生成</li><li>日期、文字和版式质检</li><li>原私聊回传与送达验证</li></ul>
          </article>
          <article className="boundary-card no">
            <span>OUT OF SCOPE</span><h3>它不做</h3>
            <ul><li>群聊请求</li><li>营销、促销与活动海报</li><li>自动发布朋友圈</li><li>违法、违规或敏感内容</li><li>向其他会话转发数据</li></ul>
          </article>
          <article className="boundary-card human">
            <span>HUMAN REQUIRED</span><h3>它会停下</h3>
            <ul><li>文案含义或用途不明确</li><li>连续三轮无法生成合格背景</li><li>连续三次发送或验证失败</li><li>原会话信息丢失</li><li>存在发送错人的风险</li></ul>
          </article>
        </div>
      </section>

      <section className="stack-section">
        <div className="stack-copy">
          <p className="eyebrow">BUILT WITH</p>
          <h2>三种工具，<br />各自做擅长的事。</h2>
        </div>
        <div className="stack-list">
          <article><span>C</span><div><h3>Codex</h3><p>梳理需求、维护 Profile、工作流、自检和异常规则。</p></div></article>
          <article><span>H</span><div><h3>Hermes</h3><p>运行与编排任务，调度生图、排版、检查和重试。</p></div></article>
          <article><span>飞</span><div><h3>飞书 CLI</h3><p>连接消息入口、上传图片、发送并查询实际送达。</p></div></article>
        </div>
      </section>

      <section className="status-section">
        <div className="status-stamp">BUILD<br />STATUS</div>
        <div>
          <p className="eyebrow">TRANSPARENT STATUS</p>
          <h2>公开展示已完成，<br />真实运行仍待验收。</h2>
          <p>这个页面展示已经确认的业务规则和模拟体验。实际 GPT 模型、独立飞书应用、Gateway 与端到端送达尚未在本项目中留下可核验的跑通证据。</p>
        </div>
        <ul>
          <li className="done"><span>✓</span>业务 Profile</li>
          <li className="done"><span>✓</span>工作流与质检</li>
          <li className="done"><span>✓</span>公开演示网站</li>
          <li><span>○</span>模型与生图配置</li>
          <li><span>○</span>飞书端到端送达</li>
          <li><span>○</span>真实耗时与成功率</li>
        </ul>
      </section>

      <section className="details-section">
        <p className="eyebrow">AGENT SPECIFICATION</p>
        <h2>给想复刻它的人。</h2>
        <div className="details-list">
          <details><summary><span>01</span>标准输入与触发方式<i>＋</i></summary><p>在“日签设计师”独立飞书机器人的私聊中发送：<code>今日海报 你的励志文案</code>。“今日海报”是触发词，后面的文字是原始文案。发送时间不是触发条件。</p></details>
          <details><summary><span>02</span>标准输出与完成条件<i>＋</i></summary><p>输出一张 1080×1440 的 PNG 竖版日签海报，包含精炼文案和上海时区实际生成日期。只有全部质检通过、图片返回正确原私聊并确认实际出现，任务才算完成。</p></details>
          <details><summary><span>03</span>重试与人工兜底<i>＋</i></summary><p>背景生成最多三轮；图片发送与送达验证最多三次。达到上限、上下文丢失或存在发送错人风险时，停止自动处理并向人工提供原始消息、当前阶段、最新结果和失败原因。</p></details>
          <details><summary><span>04</span>公开演示的隐私设计<i>＋</i></summary><p>本站是纯静态展示，不连接 API、飞书、Hermes 或数据库，不包含授权二维码、密钥、Token、会话 ID 和真实聊天数据。模拟交互只使用页面内预置的公开样例。</p></details>
        </div>
      </section>

      <footer>
        <a className="brand" href="#top"><span className="brand-mark">日</span><span>日签设计师 Agent</span></a>
        <p>把一句话，设计成今天。</p>
        <div><span className="status-dot" /> PUBLIC SHOWCASE · 2026</div>
      </footer>
    </main>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Home />);