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

/* screens-paywall.jsx — 移动端 Pricing 2.0 · 权益超限 Paywall 与积分到账弹窗

   对应 PRD：[[办公小浣熊移动端积分适配与下载激励]]
   - （7）Paywall 提示 ❷ 数值型权益超限
   - （3）移动端到账弹窗适配

   两块的通用口径分别来自 [[个人版 Paywall 的补充完善]] 与 [[办公小浣熊 2.0（补充版）]]，
   本文件只表达移动端形态：
   1. 权益超限弹层由 Web 的居中弹窗改为底部抬升 sheet，插画区压成窄条
   2. 主 CTA「立即升级」落点为会员方案页（见 screens-payment.jsx），iOS 走 IAP
   3. 到账弹窗为居中模态，按屏宽自适应，字段全部由后端下发的发放事件驱动

   注意：Web 端那份文档里「三项已有弹窗、七项待补」的划分只对 Web 成立。
   移动端从未适配过 Pricing 2.0，十项在移动端都没有弹窗形态，本期一次性全部新做，
   其中积分余额那项的形态即「阶段三（3）积分不足的拦截」，不在本区重复出稿，
   其余九项各出一屏免费版 sheet，全部复用同一组件，只替换标题与副文案。
   文案与 Web 端逐字对齐，不做移动端缩写，窄屏放不下自然折行。
*/
/* global React, Screen, Ic */

const PURPLE = '#8E6BF2';
const PURPLE_DARK = '#6F4BD8';

/* ---------- 通用：底部抬升 sheet 外框（带背景占位与遮罩） ---------- */
function SheetFrame({ appbarTitle = '对话', bg, children }) {
  return (
    <Screen tinted>
      <div className="appbar">
        <div className="spacer" />
        <div className="appbar-title" style={{ fontSize: 16 }}>{appbarTitle}</div>
        <div className="spacer" />
      </div>
      <div className="body" style={{ position: 'relative', background: 'var(--bg-subtle)' }}>
        <div style={{ padding: 16, opacity: 0.4, pointerEvents: 'none' }}>{bg}</div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,10,6,0.36)' }} />
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          background: '#fff',
          borderTopLeftRadius: 18, borderTopRightRadius: 18,
          overflow: 'hidden',
          boxShadow: '0 -8px 24px rgba(0,0,0,0.12)'
        }}>{children}</div>
      </div>
    </Screen>);

}

/* 升级标识：皇冠，表示升级到高级账户后解锁
   紫色描边直接放在白底上，不做色块底，避免在 sheet 顶部形成一个假 header 抢走焦点
   不用 emoji，避免各端字形不一致 */
function CrownMark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={PURPLE} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 8l3.6 2.6L12 4l5.4 6.6L21 8l-1.7 9.2a1.4 1.4 0 0 1-1.38 1.15H6.08A1.4 1.4 0 0 1 4.7 17.2z" />
      <line x1="7.4" y1="21.2" x2="16.6" y2="21.2" />
    </svg>);

}

/* —— 数值型权益超限 · 底部 sheet（十项权益共用一套组件）——
   标题按入口固定，只说明触达了哪一类限制，不带具体数值
   副文案与 Web 端同句，B 类的清理引导也照样保留在副文案里，不为清理单开按钮 */
function MB_BenefitSheet({ title, sub, appbarTitle = '对话', bg = null }) {
  return (
    <SheetFrame appbarTitle={appbarTitle} bg={bg}>
      {/* Web 居中弹窗的通栏插画区在 sheet 上不保留：整块色带会形成一个假 header，
          与下方紫色主 CTA 抢注意力。此处只留一个紫色皇冠标识承担升级语义 */}
      <div style={{ padding: '12px 20px 26px' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <div style={{ width: 40, height: 4, background: 'var(--border-strong)', borderRadius: 2 }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}>
          <CrownMark />
        </div>
        <div style={{ fontSize: 17, fontWeight: 700, color: 'var(--t1)', textAlign: 'center', marginBottom: 8 }}>
          {title}
        </div>
        <div style={{ fontSize: 13.5, color: 'var(--t2)', lineHeight: 1.65, textAlign: 'center', marginBottom: 20 }}>
          {sub}
        </div>
        <button style={{
          width: '100%', height: 48, borderRadius: 999,
          background: 'var(--purple)', color: '#fff',
          border: 'none', fontSize: 15, fontWeight: 600
        }}>立即升级</button>
        <div style={{ textAlign: 'center', marginTop: 14, fontSize: 14, color: 'var(--muted)', fontWeight: 500 }}>
          稍后
        </div>
      </div>
    </SheetFrame>);

}

/* 背景占位：对话中的附件上传 */
function BgChatAttach() {
  return (
    <>
      <div style={{ background: '#fff', borderRadius: 12, padding: 12, marginBottom: 10, fontSize: 13, color: 'var(--t2)' }}>
        帮我把这几份报表汇总一下
      </div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {['季度汇总.xlsx', '一月.xlsx', '二月.xlsx', '三月.xlsx', '四月.xlsx', '五月.xlsx'].map((n) =>
        <div key={n} style={{
          background: '#fff', borderRadius: 8, padding: '6px 10px',
          fontSize: 11.5, color: 'var(--t2)', border: '1px solid var(--border)'
        }}>{n}</div>
        )}
      </div>
    </>);

}

/* 背景占位：知识库列表 */
function BgKnowledge() {
  return (
    <>
      {['产品资料库', '客户访谈', '竞品追踪'].map((n) =>
      <div key={n} style={{
        background: '#fff', borderRadius: 12, padding: 12, marginBottom: 10,
        fontSize: 13, color: 'var(--t2)', display: 'flex', justifyContent: 'space-between'
      }}>
        <span>{n}</span><span style={{ fontSize: 11.5, color: 'var(--muted)' }}>已用 498MB</span>
      </div>
      )}
    </>);

}

/* 背景占位：快捷指令管理 */
function BgQuickCmd() {
  return (
    <>
      {['周报生成', '会议纪要整理', '数据表清洗'].map((n) =>
      <div key={n} style={{
        background: '#fff', borderRadius: 12, padding: 12, marginBottom: 10,
        fontSize: 13, color: 'var(--t2)'
      }}>{n}</div>
      )}
    </>);

}

/* 背景占位：技能模版列表 */
function BgSkillTpl() {
  return (
    <>
      {['竞品分析报告', '客户拜访纪要'].map((n) =>
      <div key={n} style={{
        background: '#fff', borderRadius: 12, padding: 12, marginBottom: 10,
        fontSize: 13, color: 'var(--t2)'
      }}>{n}</div>
      )}
    </>);

}

/* 背景占位：文档编辑页（承载文档附件相关的两项） */
function BgDoc() {
  return (
    <>
      <div style={{ background: '#fff', borderRadius: 12, padding: 14, marginBottom: 10 }}>
        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--t1)', marginBottom: 8 }}>Q3 复盘</div>
        <div style={{ fontSize: 12.5, color: 'var(--t2)', lineHeight: 1.7 }}>
          本季度整体完成度好于上季度，以下附件为原始数据。
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
        {['原始数据.xlsx', '访谈记录.docx', '成本明细.xlsx'].map((n) =>
        <div key={n} style={{
          background: '#fff', borderRadius: 8, padding: '6px 10px',
          fontSize: 11.5, color: 'var(--t2)', border: '1px solid var(--border)'
        }}>{n}</div>
        )}
      </div>
    </>);

}

/* 背景占位：文档列表（承载文档总数） */
function BgDocList() {
  return (
    <>
      {['Q3 复盘', '客户拜访纪要', '产品需求草稿', '周会纪要'].map((n) =>
      <div key={n} style={{
        background: '#fff', borderRadius: 12, padding: 12, marginBottom: 10,
        fontSize: 13, color: 'var(--t2)', display: 'flex', justifyContent: 'space-between'
      }}>
        <span>{n}</span><span style={{ fontSize: 11.5, color: 'var(--muted)' }}>昨天</span>
      </div>
      )}
    </>);

}

/* —— 九项免费版 sheet ——
   积分余额那项见「阶段三（3）积分不足的拦截」，不在此重复
   A 类（单次操作被拦）：对话附件单次数量、对话附件上传大小、文档附件数、文档附件体积
   B 类（存量额度占满）：知识库存储空间、知识库单库容量、文档总数
   另有快捷指令、技能模版两项，Web 端已有弹窗但未给出文案，此处按同一范式新拟，需与线上文案核对 */

/* 快捷指令（3 个 / 50 个）· 文案待与 Web 现有弹窗核对 */
function MB_PaywallQuickCmd() {
  return (
    <MB_BenefitSheet
      title="快捷指令数量超限"
      sub="免费版最多创建 3 个快捷指令，升级后可创建 50 个。"
      appbarTitle="快捷指令"
      bg={<BgQuickCmd />} />);

}

/* 技能模版（1 个 / 50 个）· 文案待与 Web 现有弹窗核对 */
function MB_PaywallSkillTpl() {
  return (
    <MB_BenefitSheet
      title="技能模版数量超限"
      sub="免费版最多创建 1 个技能模版，升级后可创建 50 个。"
      appbarTitle="技能模版"
      bg={<BgSkillTpl />} />);

}

/* A 类 · 对话附件单次数量（5 个 / 20 个）
   一次选中 8 个文件只弹一次，不按文件逐个弹 */
function MB_PaywallAttachCount() {
  return (
    <MB_BenefitSheet
      title="本次对话附件个数超限"
      sub="免费版单次最多上传 5 个附件，升级后可上传 20 个。"
      bg={<BgChatAttach />} />);

}

/* A 类 · 对话附件上传大小（80MB / 200MB） */
function MB_PaywallAttachSize() {
  return (
    <MB_BenefitSheet
      title="对话附件大小超限"
      sub="免费版单个文件最大 80MB，升级后支持 200MB。"
      bg={<BgChatAttach />} />);

}

/* A 类 · 文档附件数（5 个/doc / 20 个/doc） */
function MB_PaywallDocFileCount() {
  return (
    <MB_BenefitSheet
      title="文档附件个数超限"
      sub="免费版每篇文档最多添加 5 个附件，升级后可添加 20 个。"
      appbarTitle="文档"
      bg={<BgDoc />} />);

}

/* A 类 · 文档附件体积（80MB / 200MB） */
function MB_PaywallDocFileSize() {
  return (
    <MB_BenefitSheet
      title="文档附件大小超限"
      sub="免费版单个附件最大 80MB，升级后支持 200MB。"
      appbarTitle="文档"
      bg={<BgDoc />} />);

}

/* B 类 · 知识库存储空间（500MB / 10G）
   存量额度占满，清理路径只写在副文案里，按钮仍固定为两个 */
function MB_PaywallKBStorage() {
  return (
    <MB_BenefitSheet
      title="知识库存储空间超限"
      sub="免费版存储空间为 500MB，升级后可用 10GB，也可清理已有文件释放空间。"
      appbarTitle="知识库"
      bg={<BgKnowledge />} />);

}

/* B 类 · 知识库单库容量（100MB / 500MB） */
function MB_PaywallKBSingle() {
  return (
    <MB_BenefitSheet
      title="知识库单库容量超限"
      sub="免费版单个知识库上限 100MB，升级后可用 500MB，也可清理该库释放空间。"
      appbarTitle="产品资料库"
      bg={<BgKnowledge />} />);

}

/* B 类 · 文档总数（100 篇 / 1000 篇） */
function MB_PaywallDocCount() {
  return (
    <MB_BenefitSheet
      title="文档数量超限"
      sub="免费版最多创建 100 篇文档，升级后可创建 1000 篇，也可删除旧文档腾出位置。"
      appbarTitle="文档"
      bg={<BgDocList />} />);

}

/* 升级版 / 教育版：一律走 Toast，不弹 sheet
   升级版数值已是个人线天花板，之上没有更高档位可售，弹窗失去引导意义
   教育版身份判定等同升级版，同样只走 Toast，不出现「立即升级」
   顶部单行，3 秒后自动消失，不阻断当前操作，也不带任何跳转 */
function MB_PaywallProToast({ text = '单次最多上传 20 个附件', appbarTitle = '对话' } = {}) {
  return (
    <Screen tinted>
      <div className="appbar">
        <div className="spacer" />
        <div className="appbar-title" style={{ fontSize: 16 }}>{appbarTitle}</div>
        <div className="spacer" />
      </div>
      <div className="body" style={{ position: 'relative', background: 'var(--bg-subtle)' }}>
        <div style={{ padding: 16 }}><BgChatAttach /></div>
        <div style={{
          position: 'absolute', left: 20, right: 20, top: 16,
          background: 'rgba(31,31,31,0.9)', color: '#fff',
          borderRadius: 12, padding: '12px 16px',
          fontSize: 13, lineHeight: 1.6, textAlign: 'center'
        }}>
          {text}
        </div>
      </div>
    </Screen>);

}

/* —— 积分到账弹窗（居中模态）——
   直接复用补充版「（4）到账反馈」定义的弹窗，字段与文案口径完全一致
   标题、正文、有效期均由后端下发的发放事件数据驱动，移动端不写死任何一类奖励的判断分支 */
function MB_CreditArrivalModal({ source = '移动端登录奖励', amount = 3000, expire = '2027-09-10' }) {
  return (
    <Screen tinted>
      <div className="appbar">
        <div className="spacer" />
        <div className="appbar-title" style={{ fontSize: 16 }}>办公小浣熊</div>
        <div className="spacer" />
      </div>
      <div className="body" style={{ position: 'relative', background: 'var(--bg-subtle)' }}>
        <div style={{ padding: 16, opacity: 0.35, pointerEvents: 'none' }}>
          <div style={{ background: '#fff', borderRadius: 12, padding: 14, marginBottom: 10, fontSize: 13, color: 'var(--t2)' }}>
            今天想做点什么？
          </div>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(10,10,6,0.42)' }} />
        {/* 按屏幕宽度自适应，左右各留 24 安全边距，高度随文案换行自适应 */}
        <div style={{
          position: 'absolute', left: 24, right: 24, top: '50%', transform: 'translateY(-50%)',
          background: '#fff', borderRadius: 16, padding: '26px 22px 20px',
          textAlign: 'center', boxShadow: '0 20px 60px rgba(0,0,0,0.2)'
        }}>
          <div style={{
            position: 'absolute', top: 12, right: 12, width: 24, height: 24, borderRadius: '50%',
            background: '#F5F5F5', display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#999', fontSize: 14
          }}>×</div>
          <div style={{
            width: 52, height: 52, borderRadius: '50%',
            background: `linear-gradient(135deg, ${PURPLE}, ${PURPLE_DARK})`,
            color: '#fff', fontSize: 26, fontWeight: 800,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 10
          }}>✓</div>
          <div style={{ fontSize: 18, fontWeight: 800, color: '#1F1F1F' }}>积分已到账</div>
          <div style={{ marginTop: 14, fontSize: 12.5, color: 'var(--muted)' }}>{source}</div>
          <div style={{ marginTop: 4, fontSize: 16, fontWeight: 700, color: PURPLE_DARK }}>
            {amount} 积分已到账
          </div>
          <div style={{ marginTop: 6, fontSize: 12, color: '#57574A' }}>有效期至 {expire}</div>
          <div style={{ marginTop: 16, fontSize: 11.5, color: '#888', lineHeight: 1.6 }}>
            可前往 设置 - 资源用量<br />查看积分明细
          </div>
          <button style={{
            marginTop: 18, width: '100%', height: 44, borderRadius: 999, border: 'none',
            background: `linear-gradient(135deg, ${PURPLE}, ${PURPLE_DARK})`, color: '#fff',
            fontSize: 14.5, fontWeight: 700
          }}>我知道了</button>
        </div>
      </div>
    </Screen>);

}

/* 本期主场景：移动端登录奖励 3000 积分，有效期一年 */
function MB_CreditArrivalLogin() {
  return <MB_CreditArrivalModal source="移动端登录奖励" amount={3000} expire="2027-09-10" />;
}

/* 通用性验证：换一类奖励，前端不改代码，字段全部由后端下发 */
function MB_CreditArrivalMonthly() {
  return <MB_CreditArrivalModal source="每月赠送积分" amount={10000} expire="2026-10-10" />;
}

  Object.assign(NS, {
    MB_BenefitSheet,
    MB_PaywallQuickCmd,
    MB_PaywallSkillTpl,
    MB_PaywallAttachCount,
    MB_PaywallAttachSize,
    MB_PaywallDocFileCount,
    MB_PaywallDocFileSize,
    MB_PaywallKBStorage,
    MB_PaywallKBSingle,
    MB_PaywallDocCount,
    MB_PaywallProToast,
    MB_CreditArrivalModal,
    MB_CreditArrivalLogin,
    MB_CreditArrivalMonthly
  });
})();