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

/* projects/pricing-2-0-enterprise/app.jsx
 * 企业版的 Pricing 2.0 · 接入方案
 * 共享 window.Pricing20 命名空间，screens 组件由 projects/pricing-2-0/screens-desktop-*.jsx 提供
 */
/* global React, DesignCanvas, DCSection, DCArtboard, Raccoon */

const D_W = 880, D_H = 620;

function Pricing2EnterpriseIntro() {
  return (
    <div className="intro" style={{ width: 620 }}>
      <span className="tag" style={{ color: '#8E6BF2', background: '#F3EFFD' }}>Pricing 2.0 · 企业版接入</span>
      <h1>企业版 · 积分池 / 成员额度 / 企业控制台</h1>
      <p>
        企业版本期先覆盖三个能力：<strong>企业加油包采购、积分池与成员额度设定、用量看板</strong>。
        个人设置页内，普通成员 / 管理员只查看个人维度用量，不展示采购入口与企业控制台入口；
        只有<strong>超级管理员</strong>能进入企业控制台。
      </p>
      <p>
        配额不足提示在成员侧统一为单按钮「知道了」，不暴露采购动作；
        具体档位与采购流程未定，本节以<strong>占位区块</strong>呈现，后续替换为最终方案。
      </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 Pricing2EnterpriseApp() {
  return (
    <DesignCanvas>
      <DCSection id="intro" title="概览" subtitle="企业版 Pricing 2.0 · 积分池与控制台">
        <div style={{ padding: '0 60px', maxWidth: 720 }}>
          <Pricing2EnterpriseIntro />
        </div>
      </DCSection>

      <DCSection
        id="enterprise"
        title="企业版"
        subtitle="资源用量（成员 / 超级管理员两视角）· 配额不足提示 · 企业控制台（采购 / 额度 / 看板 / API Key）">

        <DCArtboard
          id="ent-a" label="① 资源用量 · 企业版 · 普通成员 / 管理员" tag="主流程"
          caption="只查看本成员个人维度用量；无「购买加油包」按钮，无「进入企业控制台」入口；加油包以「企业加油包额度」口径展示"
          notes={[
            <>「企业加油包额度」一行使用<strong>组织共享池可消耗口径</strong>，避免误读为成员个人持有资产。</>,
            <>积分构成下方说明仅提示消耗顺序与联系管理员路径，<strong>不提供任何采购入口</strong>。</>]
          }
          width={D_W} height={D_H}>
          <NS.ST_ResourceEnterpriseMember />
        </DCArtboard>
        <DCArtboard
          id="ent-b" label="② 资源用量 · 企业版 · 超级管理员" tag="主流程"
          caption="在「总览」标题右侧展示「进入企业控制台 ↗」入口，点击后进入企业控制台的积分管理页"
          notes={[
            <>仅超级管理员看到企业控制台入口；普通成员 / 管理员的页面与之差异只在<strong>顶部提示条 + 控制台入口</strong>两处。</>,
            <>个人设置页内即便是超级管理员也<strong>不直接放采购按钮</strong>，采购动作收敛到企业控制台内，避免与个人 UI 混淆。</>]
          }
          width={D_W} height={D_H}>
          <NS.ST_ResourceEnterpriseSuperAdmin />
        </DCArtboard>
        <DCArtboard
          id="ent-c1" label="③ Paywall · 企业版 · 任务未执行（发起前判定不足）" tag="主流程"
          caption="标题「积分不足」+ 唯一按钮「知道了」；说明引导联系管理员到企业控制台，不暴露采购动作"
          notes={[
            <>触发时机：发起任务时后台检测余额低于该会话类型的最低门槛，<strong>本次任务未执行</strong>。</>,
            <>普通成员 / 管理员 / 超级管理员共用同一弹窗；不展示「购买加油包」或「进入企业控制台」按钮。</>]
          }
          width={D_W} height={320}>
          <NS.CH_InsufficientModal plan="enterprise" trigger="blocked" />
        </DCArtboard>
        <DCArtboard
          id="ent-c2" label="③' Paywall · 企业版 · 输出中断（生成中透支至上限）" tag="边缘态" tagVariant="edge"
          caption="标题「积分已用完」+ 唯一按钮「知道了」；说明强调「已生成内容已保存」，缓解中断焦虑"
          notes={[
            <>触发时机：会话生成过程中余额耗至透支上限，当次输出被中断；已生成内容前端正常保留。</>,
            <>与「任务未执行」态共用一套结构与按钮，仅<strong>标题与说明文案</strong>有差异。</>]
          }
          width={D_W} height={320}>
          <NS.CH_InsufficientModal plan="enterprise" trigger="interrupted" />
        </DCArtboard>
        <DCArtboard
          id="ent-d" label="④ 企业控制台 · 加油包采购（档位待定 · 占位）" tag="占位态" tagVariant="edge"
          caption="顶部展示组织共享积分池余额；下方档位与采购流程为待定占位区，等业务侧评估后替换"
          notes={[
            <>本页仅超级管理员可见。普通成员和管理员的资源用量页不展示企业控制台入口。</>,
            <>档位数 / 积分数 / 价格、是否按企业规模区分档位、是否限购、采购入账方式均为<strong>待定</strong>。</>]
          }
          width={D_W} height={D_H}>
          <NS.EC_BoosterPlaceholder />
        </DCArtboard>
        <DCArtboard
          id="ent-e" label="⑤ 企业控制台 · 积分池与成员额度（07-03 口径更新）" tag="占位态" tagVariant="edge"
          caption="顶部三卡（池余额永久有效 / 本周期消费上限合计 / 本周期已消耗）+ 成员额度表（成员 / 角色 / 单周期消费上限 / 本周期已用 / 操作）"
          notes={[
            <>07-03 口径明确：加油包购买与成员额度分配解耦，续购只加池子余额，不触发再分配；「单周期消费上限」是一条校验规则（消耗时双门槛校验：本周期上限 + 池子余额），不是从池子里预扣的资产，因此不再展示「最大消耗值」这个旧字段。</>,
            <>是否支持按部门 / 角色批量分配、调整生效时机、预警阈值配置等为待定占位。</>]
          }
          width={D_W} height={D_H}>
          <NS.EC_QuotaAllocation />
        </DCArtboard>
        <DCArtboard
          id="ent-f" label="⑥ 企业控制台 · 用量看板（占位）" tag="占位态" tagVariant="edge"
          caption="维度切换（成员 / 部门 / 功能）+ 部门柱状图 + 功能环形图（示意），时间范围目前仅占位「近 30 天」"
          notes={[
            <>三个维度（成员 / 部门 / 功能）已在 PRD 中确定，本图选「部门维度」作示意。</>,
            <>自定义时间范围、CSV 导出、异常消耗告警等能力为待定占位。</>]
          }
          width={D_W} height={D_H}>
          <NS.EC_UsageDashboard />
        </DCArtboard>
        <DCArtboard
          id="ent-g" label="⑦ 企业控制台 · API Key 管理（Open API 计费 · 新增）" tag="新增" tagVariant="guide"
          caption="超级管理员查看与管理所有 Open API Key 的用量；单 Key 可设置积分消耗上限，达上限拦截调用"
          notes={[
            <>Open API 调用接入<strong>组织共享积分池</strong>扣减，模型费率复用积分单价表，消耗顺序与其他 AI 功能保持一致。</>,
            <>用量看板「功能维度」已同步新增 <strong>Open API</strong> 类别，可独立查看 API 调用占比。</>,
            <>单 Key 调用明细 / 导出 / 联网搜索是否支持 API、个人升级版是否开放 Open API 均为<strong>待定</strong>。</>]
          }
          width={D_W} height={D_H}>
          <NS.EC_ApiKeyManagement />
        </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, { Pricing2EnterpriseIntro, Pricing2EnterpriseApp });
})();