const { ProtoNav, Icon } = window;

// 三个到账弹窗（page-designs §2.5 / §2.6 / §2.7，420px 确认框 + 庆祝图标变体）
function CelebrateModal({ tone, amount, amountTone, title, content, actions }) {
  const iconCls = "celebrate-icon celebrate-icon--" + tone;
  const amountCls = "celebrate-amount celebrate-amount--" + amountTone;
  const colors = {
    "20": ["#0085D0", "#8EC31E", "#FDD000", "#A6165F", "#0098AD"],
    "180": ["#8EC31E", "#0085D0", "#FDD000", "#A6165F"],
    "800": ["#F49800", "#FDD000", "#A6165F", "#0085D0"],
  };
  const confetti = colors[tone] || colors["20"];
  return (
    <div className="celebrate-modal">
      <button className="modal-close celebrate-modal-close" aria-label="关闭"><Icon.Close size={18} /></button>
      <div className="celebrate-confetti">
        {confetti.map((c, i) => <span key={i} style={{ background: c, transform: `rotate(${(i - 2) * 18}deg) translateY(${Math.abs(i - 2) * 2}px)` }} />)}
      </div>
      <span className={iconCls}>
        {tone === "20" && <Icon.Wallet size={36} />}
        {tone === "180" && <Icon.PartyPopper size={36} />}
        {tone === "800" && <Icon.Gift size={36} />}
      </span>
      <p className={amountCls}>{amount}</p>
      <h3 className="celebrate-title">{title}</h3>
      <p className="celebrate-content">{content}</p>
      <div className="celebrate-actions">{actions}</div>
    </div>
  );
}

function BalanceCell({ id, modal, triggerState, triggerDesc, hostPages }) {
  return (
    <div className="balance-cell" data-screen-label={"modal-" + id}>
      <div className="balance-cell-meta">
        <h3 className="balance-cell-meta-title">
          <Icon.Bell size={16} /> modal-{id}
        </h3>
        <div className="balance-cell-meta-trigger">
          <span><strong>触发条件：</strong>{triggerState}</span>
          <span>{triggerDesc}</span>
          <span style={{ marginTop: 8 }}><strong>宿主页：</strong>{hostPages}</span>
        </div>
      </div>
      {modal}
    </div>
  );
}

function App() {
  return (
    <div className="proto-root">
      <ProtoNav active="balance" />
      <main className="balance-gallery">
        <div className="balance-gallery-inner">
          <header className="balance-gallery-header">
            <h1 className="balance-gallery-title">权益到账弹窗（×3）</h1>
            <p className="balance-gallery-sub">
              三个庆祝类弹窗并排展示，均为 <strong>420px 确认框 + 庆祝图标变体</strong>，
              <code>renderMode = overlay-on-host</code>。每个弹窗登录后最多弹 <strong>3 次</strong>，
              用户点击「知道了」/「去订购」后立即停止。
            </p>
          </header>

          <section className="balance-grid">
            <BalanceCell
              id="balance-20"
              triggerState="LEAD_APPROVED（DICT 审核通过）"
              triggerDesc="系统记录弹窗次数，达到 3 次后不再弹"
              hostPages="营销首页 / 我的权益 / 活动落地页"
              modal={
                <CelebrateModal
                  tone="20" amount="$20" amountTone="primary"
                  title="20 美金体验金已到账"
                  content={<>固定 API Key 已分配，30 天有效期。<br />开始您的模型体验之旅。</>}
                  actions={<button className="btn btn--primary">知道了</button>}
                />
              }
            />

            <BalanceCell
              id="balance-180"
              triggerState="EB_APPROVED（EB 审批通过）"
              triggerDesc="同一 Key 追加 $180，总额达 $200"
              hostPages="营销首页 / 我的权益 / 活动落地页"
              modal={
                <CelebrateModal
                  tone="180" amount="$180" amountTone="success"
                  title="180 美金已到账"
                  content={<>总额达到 <strong>$200 美金</strong>。<br />请继续您的模型体验之旅。</>}
                  actions={<button className="btn btn--primary">知道了</button>}
                />
              }
            />

            <BalanceCell
              id="verified-800"
              triggerState="VERIFIED（新用户首次完成认证）"
              triggerDesc="获得 $800 AI Hub 抵扣券资格"
              hostPages="营销首页 / 我的权益 / 活动落地页"
              modal={
                <CelebrateModal
                  tone="800" amount="$800" amountTone="warning"
                  title="审核通过，订购 AI Hub 可领取专属抵扣券"
                  content={<>您已获得 <strong>$800 AI Hub 消费抵扣券</strong>资格。<br />请在订购时勾选，首月结算时抵扣。</>}
                  actions={<>
                    <button className="btn btn--primary">前往领取 <Icon.External size={14} /></button>
                    <button className="btn btn--secondary">稍后</button>
                  </>}
                />
              }
            />
          </section>
        </div>
      </main>
    </div>
  );
}

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