(function () {
  'use strict';
  const NS = (window.Pricing20 = window.Pricing20 || {});

/* projects/pricing-2-0-desktop/app.jsx
 * 桌面端的 Pricing 2.0 · 接入方案
 * 共享 window.Pricing20 命名空间，screens 组件由 projects/pricing-2-0/ 提供
 * 依赖：shared/shared.jsx · design-canvas.jsx · projects/pricing-2-0/screens-desktop-chat.jsx
 */
/* global React, DesignCanvas, DCSection, DCArtboard, Raccoon */

const D_W = 880, D_H = 620;

function Pricing2DesktopIntro() {
  return (
    <div className="intro" style={{ width: 620 }}>
      <span className="tag" style={{ color: '#8E6BF2', background: '#F3EFFD' }}>Pricing 2.0 · 桌面端接入</span>
      <h1>桌面端 · 旧版本升级引导机制</h1>
      <p>
        桌面端（Windows / macOS）此前发布的旧版本对本地 Agent 用量不设积分限制。接入新积分方案之前，
        需要先具备「引导旧版本用户升级」的能力，作为后续付费策略调整的统一出口，
        因此本模块<strong>先于</strong> Web 端积分展示章节上线。
      </p>
      <p>
        本稿只覆盖桌面端专属的旧版本兼容路径；桌面端本地 Agent 的积分展示、模型切换等能力
        与 Web 端保持一致，详见「Pricing 2.0（主组）」交互稿。
      </p>
      <p style={{ marginTop: 14 }}>
        <a
          href="https://app.notion.com/p/Pricing-2-0-3858b0838b68808c8e93e166fe3351fd"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '6px 12px', borderRadius: 999,
            border: '1px solid rgba(142,107,242,0.3)',
            background: 'rgba(142,107,242,0.08)',
            color: '#8E6BF2', fontSize: 13, fontWeight: 500,
            textDecoration: 'none'
          }}>
          <span>📄 查看完整 PRD</span>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="#8E6BF2" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
            <path d="M4.5 2.5h5v5" />
            <path d="M9.5 2.5 3 9" />
          </svg>
        </a>
      </p>
    </div>);
}

function Pricing2DesktopApp() {
  return (
    <DesignCanvas>
      <DCSection id="intro" title="概览" subtitle="桌面端 Pricing 2.0 · 旧版本升级引导">
        <div style={{ padding: '0 60px', maxWidth: 720 }}>
          <Pricing2DesktopIntro />
        </div>
      </DCSection>

      <DCSection
        id="desktop-legacy-upgrade"
        title="桌面端 · 旧版本升级引导机制"
        subtitle="接入 Pricing 2.0 积分方案的前置项 · 与移动端保持一致的升级引导出口"
        description={
          <>
            桌面端（含 Windows 与 macOS）此前发布的旧版本对本地 Agent 用量不设积分限制。接入新积分方案之前，需要先具备「引导旧版本用户升级」的能力，
            作为后续付费策略调整的统一出口，因此本节<strong>先于</strong>积分展示相关章节上线。
            <br /><br />
            <strong>弹窗形态：</strong>全程在<strong>同一个弹窗</strong>内完成，不再弹出新窗口；主按钮「检查更新」自身通过文案与进度变化承载四个阶段：
            默认「检查更新」→ 检查中「◐ 检查中…」（次按钮「直接下载」置灰）→ 下载中「下载中 NN%」→ 完成「重启并更新」。次按钮「直接下载」作为系统检测机制的兜底路径，点击后通过系统默认浏览器跳转
            <code style={{ background: '#F2F2F2', padding: '1px 6px', borderRadius: 4 }}>office.xiaohuanxiong.com/download</code>。
            <br /><br />
            <strong>对话侧联动：</strong>旧版桌面端所有对话的模型回复统一替换为固定文案「当前版本太旧了，为了继续使用完整功能，请升级到最新版本后再试：…」，
            无论用户发送什么内容都返回该响应，与升级弹窗共同构成明确的升级动因。
          </>
        }>

        <DCArtboard
          id="dlu-a" label="① 默认态" tag="主流程"
          caption="标题「新版本已发布，请升级后继续使用」+ 正文说明 + 「直接下载」/「检查更新」双按钮"
          width={480} height={220}>
          <NS.CH_UpgradeGuideModal stage="default" />
        </DCArtboard>
        <DCArtboard
          id="dlu-b" label="② 检查更新中" tag="过程态"
          caption="主按钮切换为「◐ 检查中…」加载态，次按钮「直接下载」置灰不可点"
          width={480} height={220}>
          <NS.CH_UpgradeGuideModal stage="checking" />
        </DCArtboard>
        <DCArtboard
          id="dlu-c" label="③ 下载中" tag="过程态"
          caption="检测到新版本后，主按钮切换为进度态，粗略显示下载百分比"
          width={480} height={220}>
          <NS.CH_UpgradeGuideModal stage="downloading" progress={62} />
        </DCArtboard>
        <DCArtboard
          id="dlu-d" label="④ 重启并更新" tag="主流程"
          caption="下载完成后，主按钮切换为可点击的「重启并更新」"
          width={480} height={220}>
          <NS.CH_UpgradeGuideModal stage="restart" />
        </DCArtboard>
        <DCArtboard
          id="dlu-e" label="⑤ 对话固定回复文案" tag="边缘态" tagVariant="edge"
          caption="旧版桌面端所有对话回复统一替换为固定升级提示，无法再获得正常的模型回复"
          width={D_W} height={D_H}>
          <NS.CH_LegacyLockedReply />
        </DCArtboard>
      </DCSection>

      <div style={{ position: 'sticky', left: 0, width: '100vw' }}>
        <div style={{ padding: '56px 24px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, textAlign: 'center' }}>
          <div style={{ width: 64, height: 1, background: 'rgba(10,10,6,0.08)' }} />
          <div style={{ marginTop: 6 }}><Raccoon size="md" brand /></div>
          <div style={{ fontSize: 14, color: '#7a7a6e', fontWeight: 500, letterSpacing: '0.3px' }}>—— 桌面端 Pricing 2.0 · 旧版本升级引导 ——</div>
          <div style={{ fontSize: 12.5, color: '#a0a094', lineHeight: 1.8 }}>
            内容来源：桌面端的 Pricing 2.0 接入 PRD
          </div>
        </div>
      </div>
    </DesignCanvas>);
}

  Object.assign(NS, { Pricing2DesktopIntro, Pricing2DesktopApp });
})();