/* screens-desktop-chat.jsx — Pricing 2.0 · 桌面端对话区
   A. 模型切换 · 付费版正常态（点击可切）
   B. 模型切换 · 任务绑定置灰（PPT 创意模式）
   C. 模型切换 · 免费用户点击 → 引导升级
   D. 对话 Header · 积分消耗展示（时间戳同行 · 消耗 X 积分）
   E. 积分不足 · 拦截弹窗（余额不足时任务开始前）
   F. 加油包购买弹窗（点击「购买加油包」）
   ⚠️ AppShell 由 screens-desktop-shared.jsx 提供
*/
/* global React, AppShell */

const P = '#8E6BF2', PD = '#6E45D9';

/* ---- 消息气泡 ---- */
function BubbleUser({ text }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '8px 20px' }}>
      <div style={{
        maxWidth: 420, padding: '10px 14px',
        background: P, color: '#fff',
        borderRadius: '12px 2px 12px 12px',
        fontSize: 13.5, lineHeight: 1.6,
      }}>{text}</div>
    </div>
  );
}

function BubbleAI({ children }) {
  return (
    <div style={{ display: 'flex', padding: '8px 20px', gap: 10 }}>
      <div style={{
        width: 28, height: 28, borderRadius: '50%',
        background: `linear-gradient(135deg, ${P}, ${PD})`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 16, flexShrink: 0, marginTop: 2,
      }}>🦝</div>
      <div style={{
        maxWidth: 460, padding: '10px 14px',
        background: '#F7F7F7',
        borderRadius: '2px 12px 12px 12px',
        fontSize: 13.5, lineHeight: 1.6, color: '#1A1A1A',
      }}>{children}</div>
    </div>
  );
}

/* ---- 输入框底栏 ---- */
function InputBar({ modelChip, overlay }) {
  return (
    <div style={{
      flexShrink: 0, padding: '10px 16px 14px',
      borderTop: '1px solid #F0F0F0', background: '#fff',
      position: 'relative',
    }}>
      <div style={{
        border: '1.5px solid #E0E0E0', borderRadius: 12,
        padding: '10px 14px', background: '#fff',
        boxShadow: '0 2px 8px rgba(0,0,0,0.04)',
      }}>
        <div style={{ fontSize: 13.5, color: '#BBBBBB', minHeight: 22, marginBottom: 8 }}>给小浣熊发消息…</div>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px', borderRadius: 999, background: '#F3F3F3', color: '#555', fontSize: 12.5, fontWeight: 500 }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <path d="M10.5 4.5 5.7 9.3a2 2 0 1 0 2.8 2.8L13 7.7a3.5 3.5 0 0 0-5-5L3.5 7.2a5 5 0 0 0 7 7l4-4" />
              </svg> 上传
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '4px 10px', borderRadius: 999, background: '#F3F3F3', color: '#555', fontSize: 12.5, fontWeight: 500 }}>
              <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="8" cy="8" r="6" /><path d="M2 8h12M8 2c2 2 2 10 0 12M8 2c-2 2-2 10 0 12" />
              </svg> 联网
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {modelChip}
            <div style={{ width: 32, height: 32, borderRadius: '50%', background: P, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ color: '#fff', fontSize: 14 }}>↑</span>
            </div>
          </div>
        </div>
      </div>
      {overlay}
    </div>
  );
}

/* ===== A. 模型切换 · 付费版正常态 ===== */
function CH_ModelNormal() {
  const ModelChip = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 12px', borderRadius: 999, background: '#F0EBFF', color: PD, fontSize: 12.5, fontWeight: 600 }}>
      ✨ 升级模型 <span style={{ color: PD, opacity: 0.6 }}>∨</span>
    </div>
  );
  const Dropdown = (
    <div style={{
      position: 'absolute', bottom: 90, right: 16,
      background: '#fff', border: '1px solid #E5E5E5',
      borderRadius: 12, padding: '6px 0',
      boxShadow: '0 8px 28px rgba(0,0,0,0.1)',
      minWidth: 240, zIndex: 100,
    }}>
      <div style={{ padding: '4px 14px 8px', fontSize: 11, color: '#BBB', fontWeight: 700, letterSpacing: '0.5px' }}>选择模型</div>
      {[
        { name: '标准模型', sub: '快速响应，适合日常任务', cost: '1 积分/次', active: false },
        { name: '升级模型', sub: '更强推理，适合复杂任务', cost: '5 积分/次', active: true },
      ].map((m, i) => (
        <div key={i} style={{ padding: '9px 14px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: m.active ? 'rgba(142,107,242,0.05)' : 'transparent' }}>
          <div>
            <div style={{ fontSize: 13.5, fontWeight: 600, color: m.active ? PD : '#1A1A1A' }}>
              {m.name}{m.active && <span style={{ fontSize: 10, background: '#EDE9FF', color: PD, padding: '1px 6px', borderRadius: 4, marginLeft: 6 }}>当前</span>}
            </div>
            <div style={{ fontSize: 11.5, color: '#999', marginTop: 2 }}>{m.sub}</div>
          </div>
          <span style={{ fontSize: 12, color: '#AAA' }}>{m.cost}</span>
        </div>
      ))}
    </div>
  );
  return (
    <AppShell activeNav="analysis">
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 0' }}>
        <BubbleUser text="帮我分析一下这份竞品 Pricing 策略文档，重点找出我们可以参考的差异化优势" />
        <BubbleAI><div>好的，我来帮你分析这份文档。正在读取内容…<br /><br /><span style={{ color: '#888' }}>升级模型 · 预计消耗 ~15 积分</span></div></BubbleAI>
      </div>
      <InputBar modelChip={ModelChip} overlay={Dropdown} />
    </AppShell>
  );
}

/* ===== B. 模型切换 · 任务绑定置灰 ===== */
function CH_ModelLocked() {
  const ModelChip = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 12px', borderRadius: 999, background: '#F3F3F3', color: '#AAAAAA', fontSize: 12.5, fontWeight: 600, position: 'relative' }}>
      ✨ 创意模型（锁定）<span style={{ opacity: 0.5 }}>∨</span>
      <div style={{
        position: 'absolute', bottom: 38, right: 0,
        background: '#1A1A1A', color: '#fff',
        fontSize: 12, padding: '8px 12px', borderRadius: 7,
        lineHeight: 1.7, whiteSpace: 'nowrap',
        boxShadow: '0 4px 12px rgba(0,0,0,0.18)',
      }}>
        PPT 创意模式已锁定模型，<br />切换任务后可自由选择
        <div style={{ position: 'absolute', bottom: -6, right: 20, width: 10, height: 6, clipPath: 'polygon(0% 0%, 100% 0%, 50% 100%)', background: '#1A1A1A' }} />
      </div>
    </div>
  );
  return (
    <AppShell activeNav="analysis">
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 0' }}>
        <div style={{ margin: '0 16px 12px', padding: '10px 14px', background: '#F5F3FF', borderRadius: 8, display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: PD, fontWeight: 500 }}>
          PPT 创意模式 · 正在生成「2026 Q3 增长战略」
        </div>
        <BubbleUser text="帮我用创意风格生成 PPT 大纲" />
        <BubbleAI>已锁定创意模型，正在生成大纲框架…</BubbleAI>
      </div>
      <InputBar modelChip={ModelChip} />
    </AppShell>
  );
}

/* ===== C. 模型切换 · 免费用户引导升级 ===== */
function CH_ModelUpgrade() {
  const ModelChip = (
    <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 12px', borderRadius: 999, background: '#F3F3F3', color: '#555', fontSize: 12.5, fontWeight: 600 }}>
      ✨ 标准模型 <span style={{ opacity: 0.5 }}>∨</span>
    </div>
  );
  const UpgradeHint = (
    <div style={{
      position: 'absolute', bottom: 90, right: 16,
      background: '#fff', border: '1px solid #E5E5E5',
      borderRadius: 12, padding: '16px 18px',
      boxShadow: '0 8px 28px rgba(0,0,0,0.1)',
      width: 260, zIndex: 100,
    }}>
      <div style={{ fontSize: 13.5, fontWeight: 600, color: '#1A1A1A', marginBottom: 8 }}>✨ 解锁升级模型</div>
      <div style={{ fontSize: 13, color: '#666', lineHeight: 1.7, marginBottom: 14 }}>
        免费版仅可使用标准模型。<br />升级后可使用更强的推理模型，每次消耗 5 积分。
      </div>
      <button style={{ width: '100%', height: 36, borderRadius: 8, border: 'none', background: `linear-gradient(135deg, ${P}, ${PD})`, color: '#fff', fontSize: 13.5, fontWeight: 600, cursor: 'pointer' }}>
        升级个人版 · ¥29.9起/月
      </button>
      <div style={{ marginTop: 10, fontSize: 12, color: '#888', textAlign: 'center' }}>继续使用标准模型 · 200 积分/天</div>
    </div>
  );
  return (
    <AppShell activeNav="analysis">
      <div style={{ flex: 1, overflowY: 'auto', padding: '20px 0' }}>
        <BubbleUser text="帮我做个深度分析" />
        <BubbleAI>当然，我来帮你做深度分析…</BubbleAI>
      </div>
      <InputBar modelChip={ModelChip} overlay={UpgradeHint} />
    </AppShell>
  );
}

/* ===== D. 对话 Header · 消耗积分展示 =====
   规则（PRD）：
   - 紧跟时间戳同行，间隔号分隔："11 天前 · 消耗 320 积分"
   - 与时间戳同色同字号，灰色次级文字
   - 整数显示，不带千分位
   - 每次 AI 回复完成后更新；下限裁剪 0，不显示负值
   视觉对齐 officev3 src/components/AI/components/chatHeader.tsx：
   - 容器 bg #F9F9F9，高 70px，padding 0 16px
   - 标题 16px / 600 / 黑色；hover 区域 rounded-md
   - 时间戳 12px / 400 / text-muted
   - 操作按钮 pill 形（rounded-full），白底 + #F2F2F2 边框，
     padding 10px 18px，gap 16px
   - 更多按钮 32×32 圆形 ghost
*/
function CH_CreditDisplay() {
  const HeaderBtn = ({ children }) => (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '8px 16px', borderRadius: 999,
      border: '1px solid #F2F2F2', background: '#fff',
      color: '#1A1A1A', fontSize: 13, fontWeight: 500,
      whiteSpace: 'nowrap', cursor: 'pointer',
      transition: 'all 0.15s',
    }}>{children}</div>
  );
  return (
    <AppShell activeNav="analysis">
      {/* 顶部 Header 70px */}
      <div style={{
        flexShrink: 0, height: 70, padding: '0 16px',
        display: 'flex', alignItems: 'center', gap: 12,
        background: '#F9F9F9',
      }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '2px 6px', borderRadius: 6,
            maxWidth: '100%',
          }}>
            <div style={{
              fontSize: 16, fontWeight: 600, color: '#000', lineHeight: 1.4,
              whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
            }}>
              天气变化对城市骑行需求的影响分析
            </div>
          </div>
          <div style={{ fontSize: 12, color: '#909090', padding: '0 6px', marginTop: 2, lineHeight: 1.4 }}>
            11 天前 <span style={{ margin: '0 6px' }}>·</span> 消耗 320 积分
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
          <HeaderBtn>
            <span style={{ fontSize: 14, lineHeight: 1, marginRight: 2 }}>+</span>新建对话
          </HeaderBtn>
          <HeaderBtn>
            <span style={{ display: 'inline-block', width: 14, height: 14, borderRadius: 3, background: 'linear-gradient(135deg,#A78BFA,#8E6BF2)', marginRight: 2 }} />
            创建为技能模板
          </HeaderBtn>
          <HeaderBtn>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#1A1A1A" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 2 }}>
              <path d="M10 4 4 10" /><path d="M5 4h5v5" />
            </svg>
            分享
          </HeaderBtn>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#1A1A1A', fontSize: 18, lineHeight: 1, cursor: 'pointer',
          }}>⋯</div>
        </div>
      </div>
      <div style={{ flex: 1, overflowY: 'auto', padding: '14px 0' }}>
        <BubbleUser text="帮我分析过去三个月不同城市的天气与骑行量的关系" />
        <BubbleAI>
          <div>
            <strong>分析完成 · 摘要如下：</strong><br /><br />
            1. 气温与骑行量呈倒 U 型关系，最优区间在 18–24°C…<br />
            2. 降雨对通勤高峰的抑制显著高于非高峰时段…<br />
            3. 不同城市的天气弹性差异主要由通勤距离主导…
          </div>
        </BubbleAI>
      </div>
      <InputBar modelChip={
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, padding: '4px 12px', borderRadius: 999, background: '#F0EBFF', color: PD, fontSize: 12.5, fontWeight: 600 }}>
          ✨ 升级模型 <span style={{ opacity: 0.6 }}>∨</span>
        </div>
      } />
    </AppShell>
  );
}

/* ===== E. 积分不足 · 拦截弹窗 ===== */
function CH_InsufficientModal() {
  return (
    <AppShell activeNav="analysis">
      <div style={{ flex: 1, filter: 'blur(1px)', opacity: 0.4, padding: '20px 0' }}>
        <BubbleUser text="帮我重新生成一份更详细的报告" />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }}>
        <div style={{ width: 380, background: '#fff', borderRadius: 16, padding: '28px 28px 24px', boxShadow: '0 20px 60px rgba(0,0,0,0.2)' }}>
          <div style={{
            margin: '0 auto 14px', width: 44, height: 44, borderRadius: '50%',
            background: 'linear-gradient(135deg,#FFE5E5,#FFD0D0)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#FF4D4F" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="9" /><path d="M12 7v6M12 16.5v.5" />
            </svg>
          </div>
          <div style={{ fontSize: 17, fontWeight: 700, color: '#1A1A1A', textAlign: 'center', marginBottom: 8 }}>积分不足，无法开始任务</div>
          <div style={{ fontSize: 13.5, color: '#666', textAlign: 'center', lineHeight: 1.7, marginBottom: 10 }}>
            当前可用积分 <strong style={{ color: '#1A1A1A' }}>20 积分</strong>，<br />
            本次任务预估需要 <strong style={{ color: '#FF4D4F' }}>50 积分</strong>
          </div>
          <div style={{ background: '#FAFAFA', border: '1px solid #EBEBEB', borderRadius: 8, padding: '10px 14px', marginBottom: 18, fontSize: 12.5, color: '#555', lineHeight: 2 }}>
            每日额度：0 积分（今日已耗尽）<br />
            每月额度：0 积分（本月已耗尽）<br />
            奖励积分：20 积分
          </div>
          <button style={{ width: '100%', height: 42, borderRadius: 10, border: 'none', background: `linear-gradient(135deg, ${P}, ${PD})`, color: '#fff', fontSize: 14, fontWeight: 700, marginBottom: 10, cursor: 'pointer' }}>
            购买加油包 · 立即补充积分
          </button>
          <button style={{ width: '100%', height: 36, borderRadius: 10, border: '1px solid #E5E5E5', background: '#fff', color: '#555', fontSize: 13.5, cursor: 'pointer' }}>
            升级个人版 · 每月获取更多积分
          </button>
        </div>
      </div>
    </AppShell>
  );
}

/* ===== F. 加油包购买弹窗（统一弹窗，对齐 PRD §❺③） =====
   入口（设置→会员方案 / 公开 Pricing 页 / 积分不足拦截）点击「购买加油包」后
   都打开同一个弹窗：左右分栏，左侧档位选择，右侧支付宝二维码。
   依账户状态呈现两种主形态：
   - 升级版/企业版：可购买（默认 / 扫码后等待 / 超时）
   - 免费版：升级引导态，弹窗内不可购买
*/
const BOOSTER_PACKS = [
  { key: 'small', name: '小包', credits: 500,  price: 9.9,  badge: null },
  { key: 'large', name: '大包', credits: 1200, price: 19.9, badge: '更划算 · 主推' },
];

function PackChoice({ pack, selected, disabled = false }) {
  return (
    <div style={{
      flex: 1, position: 'relative', padding: '16px 14px',
      borderRadius: 12,
      border: `1.5px solid ${selected ? P : (disabled ? '#ECECEC' : '#E5E5E5')}`,
      background: selected ? 'linear-gradient(135deg,#F5F0FF,#EFE8FF)' : '#FFFFFF',
      textAlign: 'center',
      cursor: disabled ? 'not-allowed' : 'pointer',
      opacity: disabled ? 0.55 : 1,
    }}>
      {pack.badge && (
        <div style={{
          position: 'absolute', top: -9, left: '50%', transform: 'translateX(-50%)',
          background: disabled ? '#BFBFBF' : `linear-gradient(135deg,${P},${PD})`,
          color: '#fff', fontSize: 10, fontWeight: 700,
          padding: '2px 10px', borderRadius: 999, whiteSpace: 'nowrap',
        }}>{pack.badge}</div>
      )}
      <div style={{ fontSize: 12, fontWeight: 700, color: disabled ? '#999' : '#1F1F1F', marginBottom: 6 }}>{pack.name}</div>
      <div style={{ fontSize: 24, fontWeight: 800, color: disabled ? '#999' : (selected ? PD : '#1F1F1F'), lineHeight: 1 }}>{pack.credits}</div>
      <div style={{ fontSize: 10, color: '#AAA', marginTop: 3, marginBottom: 8 }}>积分</div>
      <div style={{ fontSize: 14, fontWeight: 700, color: disabled ? '#999' : (selected ? PD : '#1F1F1F') }}>¥{pack.price}</div>
    </div>
  );
}

function QrCodePlaceholder({ size = 120, seed = 0 }) {
  // 简单的二维码占位（仅视觉示意）
  const patterns = [
    '111111100110111111111000010001110110000010111110100111110100101111100010101000101100101111101111101010011010100011000000111111100110111110',
    '101110110011010101011110001011100101011000110100111010101111010110001100101110100011010110100100011110101011101011001011010110001011110101',
  ];
  const pattern = patterns[seed % patterns.length];
  const cells = [];
  for (let i = 0; i < 169; i++) cells.push(pattern[i % pattern.length] === '1');
  return (
    <div style={{
      width: size, height: size, background: '#fff',
      border: '1px solid #E5E5E5', borderRadius: 6, padding: 6,
      display: 'grid', gridTemplateColumns: 'repeat(13, 1fr)', gap: 1,
    }}>
      {cells.map((on, i) => (
        <div key={i} style={{ background: on ? '#1F1F1F' : 'transparent' }} />
      ))}
    </div>
  );
}

function PayBrand({ kind }) {
  // 支付宝蓝 / 微信绿
  const isAlipay = kind === 'alipay';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 700, color: '#1F1F1F' }}>
      <span style={{
        width: 16, height: 16, borderRadius: 4,
        background: isAlipay ? '#1677FF' : '#07C160',
        color: '#fff', fontSize: 10, fontWeight: 800,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>{isAlipay ? '支' : '微'}</span>
      <span>{isAlipay ? '支付宝支付' : '微信支付'}</span>
    </div>
  );
}

function PayQrBlock({ kind }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
      <PayBrand kind={kind} />
      <QrCodePlaceholder size={108} seed={kind === 'alipay' ? 0 : 1} />
    </div>
  );
}

/* ----- ① 升级版用户 · 默认态 ----- */
function BoosterModalFrame({ children }) {
  return (
    <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'transparent' }}>
      {children}
    </div>
  );
}

function CH_BoosterModal() {
  const selectedIdx = 1; // 默认大包
  const selectedPack = BOOSTER_PACKS[selectedIdx];
  return (
    <BoosterModalFrame>
        <div style={{ width: 640, background: '#fff', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.2)', overflow: 'hidden' }}>
          {/* 头部 */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 22px 14px', borderBottom: '1px solid #F2F2F2' }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 800, color: '#1A1A1A' }}>购买加油包</div>
              <div style={{ fontSize: 11.5, color: '#888', marginTop: 2 }}>当前余额：<strong style={{ color: '#1A1A1A' }}>20 积分</strong></div>
            </div>
            <div style={{ width: 26, height: 26, borderRadius: '50%', background: '#F5F5F5', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999', fontSize: 15, cursor: 'pointer' }}>×</div>
          </div>
          {/* 左右分栏 */}
          <div style={{ display: 'flex' }}>
            {/* 左侧：档位 */}
            <div style={{ flex: 1, padding: '18px 22px', borderRight: '1px solid #F2F2F2' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: '#1F1F1F', marginBottom: 14, letterSpacing: 0.3 }}>选择额度</div>
              <div style={{ display: 'flex', gap: 10 }}>
                {BOOSTER_PACKS.map((p, i) => <PackChoice key={p.key} pack={p} selected={i === selectedIdx} />)}
              </div>
              <div style={{ fontSize: 10.5, color: '#888', marginTop: 14, lineHeight: 1.7 }}>
                · 加油包积分付费后立即到账，<strong>永久有效</strong><br />
                · 取消订阅后冻结，续订后恢复可用
              </div>
            </div>
            {/* 右侧：支付宝 + 微信 双二维码 */}
            <div style={{ width: 220, padding: '18px 16px 18px', display: 'flex', flexDirection: 'column', alignItems: 'center', background: '#FAFAF7' }}>
              <div style={{ fontSize: 16, fontWeight: 800, color: '#1F1F1F' }}>¥{selectedPack.price}</div>
              <div style={{ fontSize: 10.5, color: '#888', marginTop: 2, marginBottom: 12 }}>扫码完成支付</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <PayQrBlock kind="alipay" />
                <PayQrBlock kind="wechat" />
              </div>
              <div style={{ marginTop: 12, fontSize: 10.5, color: '#888', textAlign: 'center', lineHeight: 1.5 }}>
                二维码 5 分钟内有效，过期请刷新<br />
                <span style={{ color: PD, cursor: 'pointer', fontWeight: 600 }}>对公支付 →</span>
              </div>
            </div>
          </div>
        </div>
    </BoosterModalFrame>
  );
}

/* ----- ② 免费版用户 · 升级引导态 ----- */
function CH_BoosterModalFree() {
  return (
    <BoosterModalFrame>
        <div style={{ width: 640, background: '#fff', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.2)', overflow: 'hidden' }}>
          {/* 头部 */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 22px 14px', borderBottom: '1px solid #F2F2F2' }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 800, color: '#1A1A1A' }}>购买加油包</div>
              <div style={{ fontSize: 11.5, color: '#888', marginTop: 2 }}>当前账户：<strong style={{ color: '#1A1A1A' }}>个人免费版</strong></div>
            </div>
            <div style={{ width: 26, height: 26, borderRadius: '50%', background: '#F5F5F5', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999', fontSize: 15, cursor: 'pointer' }}>×</div>
          </div>
          {/* 左右分栏（与升级版同构，仅状态不同） */}
          <div style={{ display: 'flex' }}>
            {/* 左侧：档位（置灰预览） */}
            <div style={{ flex: 1, padding: '18px 22px', borderRight: '1px solid #F2F2F2' }}>
              <div style={{ fontSize: 12, fontWeight: 700, color: '#999', marginBottom: 14, letterSpacing: 0.3 }}>选择额度</div>
              <div style={{ display: 'flex', gap: 10 }}>
                {BOOSTER_PACKS.map(p => <PackChoice key={p.key} pack={p} selected={false} disabled />)}
              </div>
              <div style={{ fontSize: 10.5, color: '#888', marginTop: 14, lineHeight: 1.7 }}>
                · 加油包积分付费后立即到账，<strong>永久有效</strong><br />
                · 取消订阅后冻结，续订后恢复可用
              </div>
            </div>
            {/* 右侧：升级引导（替换 QR 区） */}
            <div style={{ width: 240, padding: '20px 18px 22px', background: 'linear-gradient(180deg,#FBF9FF 0%,#F5F0FF 100%)', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
              <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: `linear-gradient(135deg,${P},${PD})`,
                color: '#fff', fontSize: 28, fontWeight: 800,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 8px 20px rgba(142,107,242,0.35)',
              }}>★</div>
              <div style={{ marginTop: 14, fontSize: 14, fontWeight: 800, color: '#1F1F1F' }}>升级后即可购买加油包</div>
              <div style={{ marginTop: 8, fontSize: 11.5, color: '#666', lineHeight: 1.65 }}>
                加油包是<strong style={{ color: PD }}>个人升级版专享</strong>能力。当前账户为个人免费版，请先升级后再购买。
              </div>
              <button style={{
                marginTop: 14, width: '100%', height: 38, borderRadius: 8, border: 'none',
                background: `linear-gradient(135deg,${P},${PD})`, color: '#fff',
                fontSize: 12.5, fontWeight: 800, cursor: 'pointer',
                boxShadow: '0 6px 16px rgba(142,107,242,0.3)',
              }}>立即获取升级版 →</button>
              <div style={{ marginTop: 10, fontSize: 10.5, color: '#888' }}>升级版 ¥29.9 起 / 月</div>
            </div>
          </div>
        </div>
    </BoosterModalFrame>
  );
}

/* ----- ③ 购买成功（PRD §❺⑤） ----- */
function CH_BoosterSuccess() {
  return (
    <BoosterModalFrame>
        <div style={{ width: 360, background: '#fff', borderRadius: 16, padding: '28px 28px 22px', boxShadow: '0 20px 60px rgba(0,0,0,0.2)', textAlign: 'center', position: 'relative' }}>
          <div style={{ position: 'absolute', top: 14, right: 14, width: 24, height: 24, borderRadius: '50%', background: '#F5F5F5', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#999', fontSize: 14, cursor: 'pointer' }}>×</div>
          <div style={{ fontSize: 40, marginBottom: 8 }}>🎉</div>
          <div style={{ fontSize: 18, fontWeight: 800, color: '#1F1F1F' }}>购买成功</div>
          <div style={{ marginTop: 12, fontSize: 13, color: '#444', lineHeight: 1.7 }}>
            您已成功购买<strong>大包</strong>，<br />
            <strong style={{ color: PD, fontSize: 18 }}>1200 积分</strong> 已到账
          </div>
          <div style={{ marginTop: 10, fontSize: 11.5, color: '#888' }}>积分永久有效</div>
          <button style={{
            marginTop: 20, width: '100%', height: 40, borderRadius: 10, border: 'none',
            background: `linear-gradient(135deg,${P},${PD})`, color: '#fff',
            fontSize: 13.5, fontWeight: 800, cursor: 'pointer',
            boxShadow: '0 6px 16px rgba(142,107,242,0.3)',
          }}>开始使用</button>
        </div>
    </BoosterModalFrame>
  );
}