/* global React */
(function () {
  var useState = React.useState;
  var useRef = React.useRef;
  var useEffect = React.useState;

  // 安全获取 useApp
  function safeUseApp() {
    try {
      if (typeof useApp === 'function') return useApp();
    } catch (e) {}
    return {
      navigate: function () {},
      showToast: function (msg) { try { alert(msg); } catch (_) {} },
      currentUser: null,
      requireLogin: function () { return false; },
      api: {
        get: function () { return Promise.resolve({ data: [] }); },
        post: function () { return Promise.resolve({ data: {} }); },
        delete: function () { return Promise.resolve({}); },
      },
    };
  }

  function hasQrLib() { return typeof qrcode === 'function'; }

  function drawQrCode(canvas, text, foreground, background, size, eccLevel, logo) {
    if (!canvas) return;
    var ctx = canvas.getContext('2d');
    canvas.width = size;
    canvas.height = size;
    ctx.fillStyle = background;
    ctx.fillRect(0, 0, size, size);
    if (!text || !text.trim()) return;
    if (!hasQrLib()) {
      ctx.fillStyle = '#9ca3af';
      ctx.font = '12px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('二维码库未加载', size / 2, size / 2);
      return;
    }
    try {
      var qr = qrcode(0, eccLevel);
      qr.addData(text);
      qr.make();
      var moduleCount = qr.getModuleCount();
      var margin = Math.max(2, Math.floor(moduleCount * 0.05));
      var totalModules = moduleCount + margin * 2;
      var cellSize = size / totalModules;
      ctx.fillStyle = foreground;
      for (var row = 0; row < moduleCount; row++) {
        for (var col = 0; col < moduleCount; col++) {
          if (qr.isDark(row, col)) {
            var x = Math.round((col + margin) * cellSize);
            var y = Math.round((row + margin) * cellSize);
            var w = Math.ceil(cellSize);
            var h = Math.ceil(cellSize);
            ctx.fillRect(x, y, w, h);
          }
        }
      }
      if (logo) {
        var logoSize = Math.floor(size * 0.22);
        var logoX = (size - logoSize) / 2;
        var logoY = (size - logoSize) / 2;
        var pad = Math.max(4, Math.floor(logoSize * 0.08));
        var r = Math.floor(pad * 0.8);
        ctx.fillStyle = background;
        ctx.beginPath();
        var rx = logoX - pad, ry = logoY - pad, rw = logoSize + pad * 2, rh = logoSize + pad * 2;
        ctx.moveTo(rx + r, ry);
        ctx.arcTo(rx + rw, ry, rx + rw, ry + rh, r);
        ctx.arcTo(rx + rw, ry + rh, rx, ry + rh, r);
        ctx.arcTo(rx, ry + rh, rx, ry, r);
        ctx.arcTo(rx, ry, rx + rw, ry, r);
        ctx.closePath();
        ctx.fill();
        var img = new Image();
        img.onload = function () { ctx.drawImage(img, logoX, logoY, logoSize, logoSize); };
        img.src = logo;
      }
    } catch (e) {
      console.warn('draw qrcode error:', e);
      ctx.fillStyle = '#ef4444';
      ctx.font = '12px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('内容过长或生成失败', size / 2, size / 2);
    }
  }

  var colorPresets = ['#000000', '#1f2937', '#dc2626', '#d97706', '#16a34a', '#2563eb', '#7c3aed', '#db2777'];
  var bgPresets = ['#ffffff', '#fafafa', '#fef3c7', '#dbeafe', '#dcfce7', '#f3e8ff', '#fce7f3', '#fee2e2'];
  var sizeOptions = [
    { label: '小 200px', value: 200 },
    { label: '中 400px', value: 400 },
    { label: '大 800px', value: 800 },
  ];
  var eccOptions = [
    { label: '低 L', value: 'L' },
    { label: '中 M', value: 'M' },
    { label: '较高 Q', value: 'Q' },
    { label: '高 H', value: 'H' },
  ];
  var typeOptions = [
    { label: '网址', value: 'url', placeholder: 'https://', hint: '输入完整网址，扫描后自动跳转' },
    { label: '文本', value: 'text', placeholder: '输入任意文字...', hint: '扫描后显示文本内容' },
  ];

  function btnBase() {
    return {
      padding: '6px 10px',
      fontSize: 12,
      border: '1px solid var(--border)',
      borderRadius: 6,
      background: 'var(--bg-card)',
      color: 'var(--text-primary)',
      cursor: 'pointer',
      whiteSpace: 'nowrap',
    };
  }
  function btnActive() {
    var b = btnBase();
    b.borderColor = 'var(--primary)';
    b.color = 'var(--primary)';
    b.background = 'var(--primary-light)';
    b.fontWeight = 500;
    return b;
  }

  function ToolGroup(props) {
    return React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
      React.createElement('div', { style: { fontSize: 11, color: 'var(--text-tertiary)', fontWeight: 500 } }, props.label),
      React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } }, props.children)
    );
  }

  function downloadCanvas(canvas, name, size, showToast) {
    if (!canvas) return;
    try {
      var link = document.createElement('a');
      link.download = name + '_' + size + '.png';
      link.href = canvas.toDataURL('image/png');
      link.click();
      if (showToast) showToast('已开始下载');
    } catch (e) {
      console.warn(e);
      if (showToast) showToast('下载失败');
    }
  }

  // ============ 静态二维码 ============
  function StaticQrPanel() {
    var app = safeUseApp();
    var showToast = app.showToast;

    var sType = useState('url'); var staticType = sType[0]; var setStaticType = sType[1];
    var sContent = useState('https://www.example.com'); var staticContent = sContent[0]; var setStaticContent = sContent[1];
    var sFg = useState('#000000'); var staticForeground = sFg[0]; var setStaticForeground = sFg[1];
    var sBg = useState('#ffffff'); var staticBackground = sBg[0]; var setStaticBackground = sBg[1];
    var sSize = useState(400); var staticSize = sSize[0]; var setStaticSize = sSize[1];
    var sEcc = useState('M'); var staticEcc = sEcc[0]; var setStaticEcc = sEcc[1];
    var sLogo = useState(null); var staticLogo = sLogo[0]; var setStaticLogo = sLogo[1];

    var canvasRef = useRef(null);
    var logoFileRef = useRef(null);

    var curType = typeOptions.find(function (t) { return t.value === staticType; }) || typeOptions[0];

    // 重绘
    React.useEffect(function () {
      if (!canvasRef.current) return;
      drawQrCode(canvasRef.current, staticContent, staticForeground, staticBackground, staticSize, staticEcc, staticLogo);
    }, [staticContent, staticForeground, staticBackground, staticSize, staticEcc, staticLogo]);

    function handleDownload() {
      if (!staticContent.trim()) { showToast('请先输入内容'); return; }
      downloadCanvas(canvasRef.current, 'static_qrcode', staticSize, showToast);
    }
    function handleReset() {
      setStaticType('url');
      setStaticContent('https://www.example.com');
      setStaticForeground('#000000');
      setStaticBackground('#ffffff');
      setStaticSize(400);
      setStaticEcc('M');
      setStaticLogo(null);
      if (logoFileRef.current) logoFileRef.current.value = '';
      showToast('已重置');
    }
    function handleLogoUpload(e) {
      var file = e.target.files && e.target.files[0];
      if (!file) return;
      if (file.size > 2 * 1024 * 1024) { showToast('图片不能超过 2MB'); return; }
      var reader = new FileReader();
      reader.onload = function (ev) {
        setStaticLogo(ev.target.result);
        showToast('Logo 已添加');
      };
      reader.readAsDataURL(file);
    }

    return React.createElement(React.Fragment, null,
      // 预览
      React.createElement('div', { style: {
        flexShrink: 0, padding: '20px 16px',
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', justifyContent: 'center', alignItems: 'center',
      } },
        React.createElement('div', { style: {
          width: '60vw', maxWidth: 280, aspectRatio: '1 / 1',
          background: '#fff', borderRadius: 12, padding: 12,
          boxShadow: '0 2px 12px rgba(0,0,0,0.08)',
        } },
          React.createElement('canvas', { ref: canvasRef, style: { width: '100%', height: '100%', display: 'block', imageRendering: 'pixelated' } })
        )
      ),

      // 配置
      React.createElement('div', { style: {
        flex: 1, minHeight: 0, overflowY: 'auto',
        WebkitOverflowScrolling: 'touch',
        padding: '14px 16px 24px',
        display: 'flex', flexDirection: 'column', gap: 14,
      } },
        // 类型
        React.createElement('div', { className: 'card card-shadow', style: { padding: 12 } },
          React.createElement(ToolGroup, { label: '内容类型' },
            typeOptions.map(function (t) {
              return React.createElement('button', {
                key: t.value,
                style: staticType === t.value ? btnActive() : btnBase(),
                onClick: function () {
                  setStaticType(t.value);
                  setStaticContent(t.value === 'url' ? 'https://www.example.com' : '你好，这是一个二维码');
                },
              }, t.label);
            })
          ),
          React.createElement('div', { style: { fontSize: 11, color: 'var(--text-tertiary)', marginTop: 8, lineHeight: 1.5 } }, curType.hint)
        ),

        // 内容
        React.createElement('div', { className: 'card card-shadow', style: { padding: 12 } },
          React.createElement('div', { style: { fontSize: 12, fontWeight: 500, marginBottom: 8 } }, '内容'),
          React.createElement('textarea', {
            value: staticContent,
            onChange: function (e) { setStaticContent(e.target.value); },
            placeholder: curType.placeholder,
            rows: 3,
            spellCheck: false,
            style: {
              width: '100%', padding: 10,
              border: '1px solid var(--border)', borderRadius: 8,
              fontSize: 14, lineHeight: 1.5,
              background: 'var(--bg-page)', color: 'var(--text-primary)',
              resize: 'vertical', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
            },
          })
        ),

        // 样式
        React.createElement('div', { className: 'card card-shadow', style: { padding: 12 } },
          React.createElement('div', { style: { fontSize: 13, fontWeight: 600, marginBottom: 10 } }, '样式自定义'),
          React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 12 } },
            // 前景色
            React.createElement(ToolGroup, { label: '前景色' },
              colorPresets.map(function (c) {
                return React.createElement('button', {
                  key: c,
                  onClick: function () { setStaticForeground(c); },
                  style: {
                    width: 26, height: 26, borderRadius: 6,
                    border: staticForeground === c ? '2px solid var(--primary)' : '1px solid var(--border)',
                    background: c, cursor: 'pointer', padding: 0,
                  },
                });
              }),
              React.createElement('input', {
                type: 'color', value: staticForeground,
                onChange: function (e) { setStaticForeground(e.target.value); },
                style: { width: 26, height: 26, border: 'none', padding: 0, background: 'transparent', cursor: 'pointer' },
              })
            ),
            // 背景色
            React.createElement(ToolGroup, { label: '背景色' },
              bgPresets.map(function (c) {
                return React.createElement('button', {
                  key: c,
                  onClick: function () { setStaticBackground(c); },
                  style: {
                    width: 26, height: 26, borderRadius: 6,
                    border: staticBackground === c ? '2px solid var(--primary)' : '1px solid var(--border)',
                    background: c, cursor: 'pointer', padding: 0,
                  },
                });
              }),
              React.createElement('input', {
                type: 'color', value: staticBackground,
                onChange: function (e) { setStaticBackground(e.target.value); },
                style: { width: 26, height: 26, border: 'none', padding: 0, background: 'transparent', cursor: 'pointer' },
              })
            ),
            // 尺寸
            React.createElement(ToolGroup, { label: '尺寸' },
              sizeOptions.map(function (s) {
                return React.createElement('button', {
                  key: s.value,
                  style: staticSize === s.value ? btnActive() : btnBase(),
                  onClick: function () { setStaticSize(s.value); },
                }, s.label);
              })
            ),
            // 容错率
            React.createElement(ToolGroup, { label: '容错率' },
              eccOptions.map(function (ecc) {
                return React.createElement('button', {
                  key: ecc.value,
                  style: staticEcc === ecc.value ? btnActive() : btnBase(),
                  onClick: function () { setStaticEcc(ecc.value); },
                }, ecc.label);
              })
            ),
            // Logo
            React.createElement(ToolGroup, { label: 'Logo（可选）' },
              React.createElement('button', {
                style: btnBase(),
                onClick: function () { logoFileRef.current && logoFileRef.current.click(); },
              }, staticLogo ? '更换 Logo' : '上传 Logo'),
              staticLogo && React.createElement('button', {
                style: btnBase(),
                onClick: function () {
                  setStaticLogo(null);
                  if (logoFileRef.current) logoFileRef.current.value = '';
                },
              }, '移除'),
              React.createElement('input', {
                ref: logoFileRef, type: 'file', accept: 'image/*',
                onChange: handleLogoUpload, style: { display: 'none' },
              }),
              staticLogo && React.createElement('div', { style: {
                width: 36, height: 36, borderRadius: 6, overflow: 'hidden', border: '1px solid var(--border)',
              } },
                React.createElement('img', { src: staticLogo, alt: 'logo', style: { width: '100%', height: '100%', objectFit: 'cover' } })
              )
            )
          )
        )
      ),

      // 底部操作栏
      React.createElement('div', { style: {
        flexShrink: 0, padding: '10px 12px',
        background: 'var(--bg-card)',
        borderTop: '1px solid var(--border)',
        display: 'flex', gap: 8,
        paddingBottom: 'calc(10px + env(safe-area-inset-bottom))',
      } },
        React.createElement('button', {
          className: 'btn btn-outline',
          style: { flex: 1, fontSize: 13, padding: '8px 0' },
          onClick: handleReset,
        }, '重置'),
        React.createElement('button', {
          className: 'btn btn-primary',
          style: { flex: 2, fontSize: 13, padding: '8px 0' },
          onClick: handleDownload,
        }, '下载 PNG')
      )
    );
  }

  // ============ 动态码缩略图 ============
  function DynamicQrThumb(props) {
    var item = props.item;
    var size = props.size || 64;
    var canvasRef = useRef(null);
    React.useEffect(function () {
      if (!canvasRef.current || !item) return;
      var base = window.location.origin + window.location.pathname;
      var text = base + '#/qr/' + item.short_id;
      drawQrCode(canvasRef.current, text,
        item.foreground || '#000000', item.background || '#ffffff',
        size * 2, item.ecc_level || 'M', item.logo || null);
    }, [item, size]);
    return React.createElement('canvas', {
      ref: canvasRef,
      style: { width: size, height: size, display: 'block', imageRendering: 'pixelated', borderRadius: 6, flexShrink: 0 },
    });
  }

  // ============ 弹窗内预览 ============
  function DynamicModalPreview(props) {
    var canvasRef = useRef(null);
    React.useEffect(function () {
      if (!canvasRef.current) return;
      drawQrCode(canvasRef.current, props.content, props.foreground, props.background, props.size, props.ecc, props.logo);
    }, [props.content, props.foreground, props.background, props.size, props.ecc, props.logo]);
    return React.createElement('canvas', {
      ref: canvasRef,
      style: { width: '100%', height: '100%', display: 'block', imageRendering: 'pixelated' },
    });
  }

  // ============ 购买套餐弹窗 ============
  function PlanBuyModal(props) {
    var visible = props.visible;
    var onClose = props.onClose;
    var onSuccess = props.onSuccess;
    var planInfo = props.planInfo;

    var app = safeUseApp();
    var showToast = app.showToast;
    var api = app.api;

    var sPlans = useState([]); var plans = sPlans[0]; var setPlans = sPlans[1];
    var sSelected = useState('monthly'); var selectedKey = sSelected[0]; var setSelectedKey = sSelected[1];
    var sLoading = useState(false); var loading = sLoading[0]; var setLoading = sLoading[1];

    React.useEffect(function () {
      if (!visible) return;
      api.get('/qr/plans').then(function (res) {
        var list = res.data || [];
        // 把体验版排在最前面
        list.sort(function (a, b) {
          if (a.is_free && !b.is_free) return -1;
          if (!a.is_free && b.is_free) return 1;
          return a.price - b.price;
        });
        setPlans(list);
        if (list.length > 0 && !selectedKey) setSelectedKey(list[0].key);
      }).catch(function () {});
    }, [visible]);

    if (!visible) return null;

    function handlePay() {
      var plan = plans.find(function (p) { return p.key === selectedKey; });
      if (!plan) return;
      if (plan.is_free) {
        showToast('体验版为免费套餐，无需购买');
        return;
      }
      setLoading(true);
      api.post('/orders', {
        product_name: '二维码' + plan.name,
        amount: plan.price,
        type: 'qr_plan',
        plan_key: plan.key,
      }).then(function (res) {
        var orderId = res.data && res.data.id;
        return api.post('/orders/' + orderId + '/pay', {});
      }).then(function () {
        showToast('支付成功，套餐已开通');
        setLoading(false);
        onClose();
        if (onSuccess) onSuccess();
      }).catch(function (e) {
        setLoading(false);
        showToast(e.message || '支付失败');
      });
    }

    var selectedPlan = plans.find(function (p) { return p.key === selectedKey; });

    return React.createElement('div', {
      style: {
        position: 'fixed', inset: 0, zIndex: 1100,
        background: 'rgba(0,0,0,0.5)',
        display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      },
      onClick: onClose,
    },
      React.createElement('div', {
        className: 'card',
        style: {
          width: '100%', maxWidth: 480, maxHeight: '85vh',
          background: 'var(--bg-card)',
          borderRadius: '16px 16px 0 0',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
        },
        onClick: function (e) { e.stopPropagation(); },
      },
        // 头部
        React.createElement('div', { style: {
          flexShrink: 0, padding: '14px 16px',
          borderBottom: '1px solid var(--border)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        } },
          React.createElement('div', { style: { fontSize: 16, fontWeight: 600 } },
            planInfo && planInfo.is_trial ? '升级套餐' : '续费套餐'
          ),
          React.createElement('button', {
            onClick: onClose,
            style: { fontSize: 20, color: 'var(--text-tertiary)', background: 'transparent', border: 'none', cursor: 'pointer', padding: 0, lineHeight: 1 },
          }, '×')
        ),

        // 套餐列表
        React.createElement('div', {
          style: { flex: 1, overflowY: 'auto', padding: '14px 16px' },
        },
          plans.length === 0
            ? React.createElement('div', { style: { textAlign: 'center', padding: 30, color: 'var(--text-tertiary)' } }, '加载中...')
            : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
              plans.map(function (p) {
                var selected = selectedKey === p.key;
                return React.createElement('div', {
                  key: p.key,
                  onClick: function () { if (!p.is_free) setSelectedKey(p.key); },
                  style: {
                    padding: 14, borderRadius: 10,
                    border: selected ? '2px solid var(--primary)' : '1px solid var(--border)',
                    background: selected && !p.is_free ? 'var(--primary-light)' : 'var(--bg-page)',
                    cursor: p.is_free ? 'default' : 'pointer',
                    position: 'relative',
                    display: 'flex', alignItems: 'center', gap: 12,
                    opacity: p.is_free ? 0.85 : 1,
                  },
                },
                  p.best && React.createElement('div', { style: {
                    position: 'absolute', top: -8, right: 12,
                    background: '#ef4444', color: '#fff',
                    fontSize: 10, padding: '2px 8px', borderRadius: 10,
                    fontWeight: 600,
                  } }, '最推荐'),
                  p.is_free && React.createElement('div', { style: {
                    position: 'absolute', top: -8, right: 12,
                    background: '#6b7280', color: '#fff',
                    fontSize: 10, padding: '2px 8px', borderRadius: 10,
                    fontWeight: 600,
                  } }, '当前'),
                  React.createElement('div', { style: { flex: 1 } },
                    React.createElement('div', { style: { fontSize: 15, fontWeight: 600, marginBottom: 4 } }, p.name),
                    React.createElement('div', { style: { fontSize: 12, color: 'var(--text-secondary)', marginBottom: 4 } },
                      p.description
                    ),
                    p.is_free
                      ? React.createElement('div', { style: { fontSize: 11, color: '#6b7280', lineHeight: 1.5 } },
                          '仅可创建 1 个动态码，有效期 7 天，到期需付费升级'
                        )
                      : React.createElement('div', { style: { fontSize: 11, color: 'var(--text-tertiary)' } },
                          '最多 ' + p.max_count + ' 个动态码 · 有效期 ' + p.duration_days + ' 天'
                        )
                  ),
                  React.createElement('div', { style: { textAlign: 'right' } },
                    p.is_free
                      ? React.createElement('div', null,
                          React.createElement('div', { style: { fontSize: 11, color: '#6b7280', marginBottom: 2 } }, p.tag),
                          React.createElement('div', { style: { fontSize: 16, fontWeight: 700, color: '#6b7280' } }, '免费')
                        )
                      : React.createElement('div', null,
                          React.createElement('div', { style: { fontSize: 11, color: '#dc2626', marginBottom: 2 } }, p.tag),
                          React.createElement('div', { style: { fontSize: 18, fontWeight: 700, color: '#dc2626' } }, '¥' + p.price)
                        )
                  )
                );
              })
            ),

          // 支付说明
          React.createElement('div', { style: {
            marginTop: 16, padding: 12, borderRadius: 8,
            background: 'var(--bg-page)', fontSize: 12, color: 'var(--text-tertiary)', lineHeight: 1.6,
          } },
            React.createElement('div', { style: { fontWeight: 500, color: 'var(--text-secondary)', marginBottom: 4 } }, '购买说明'),
            React.createElement('div', null, '· 支付成功后立即生效，续费自动延长到期时间'),
            React.createElement('div', null, '· 动态码数量为当前套餐总数量上限，超出后无法新建'),
            React.createElement('div', null, '· 到期后动态码无法跳转，续费后立即恢复'),
            React.createElement('div', null, '· 静态二维码永久免费，不受套餐影响'),
          )
        ),

        // 底部
        React.createElement('div', {
          style: {
            flexShrink: 0, padding: '10px 12px',
            borderTop: '1px solid var(--border)',
            display: 'flex', gap: 8,
            paddingBottom: 'calc(10px + env(safe-area-inset-bottom))',
          },
        },
          React.createElement('button', {
            className: 'btn btn-outline',
            style: { flex: 1, fontSize: 13, padding: '10px 0' },
            onClick: onClose,
          }, '取消'),
          selectedPlan && selectedPlan.is_free
            ? React.createElement('button', {
                className: 'btn btn-outline',
                style: { flex: 2, fontSize: 13, padding: '10px 0' },
                onClick: onClose,
              }, '体验版免费使用')
            : React.createElement('button', {
                className: 'btn btn-primary',
                style: { flex: 2, fontSize: 13, padding: '10px 0' },
                onClick: handlePay,
                disabled: loading || !selectedPlan,
              }, loading ? '支付中...' : ('立即支付 ¥' + (selectedPlan ? selectedPlan.price : 0)))
        )
      )
    );
  }

  // ============ 动态二维码 ============
  function DynamicQrPanel(props) {
    var onRequestSwitchStatic = props.onRequestSwitchStatic;
    var app = safeUseApp();
    var showToast = app.showToast;
    var currentUser = app.currentUser;
    var requireLogin = app.requireLogin;
    var api = app.api;

    var sList = useState([]); var dynamicList = sList[0]; var setDynamicList = sList[1];
    var sPlan = useState(null); var planInfo = sPlan[0]; var setPlanInfo = sPlan[1];
    var sShowCreate = useState(false); var showCreate = sShowCreate[0]; var setShowCreate = sShowCreate[1];
    var sShowBuy = useState(false); var showBuy = sShowBuy[0]; var setShowBuy = sShowBuy[1];
    var sEditing = useState(null); var editingItem = sEditing[0]; var setEditingItem = sEditing[1];
    var sShowTrialTip = useState(false); var showTrialTip = sShowTrialTip[0]; var setShowTrialTip = sShowTrialTip[1];

    var sName = useState(''); var formName = sName[0]; var setFormName = sName[1];
    var sCtype = useState('url'); var formContentType = sCtype[0]; var setFormContentType = sCtype[1];
    var sContent = useState('https://'); var formContent = sContent[0]; var setFormContent = sContent[1];
    var sFg = useState('#000000'); var formForeground = sFg[0]; var setFormForeground = sFg[1];
    var sBg = useState('#ffffff'); var formBackground = sBg[0]; var setFormBackground = sBg[1];
    var sSize = useState(400); var formSize = sSize[0]; var setFormSize = sSize[1];
    var sEcc = useState('M'); var formEcc = sEcc[0]; var setFormEcc = sEcc[1];
    var sLogo = useState(null); var formLogo = sLogo[0]; var setFormLogo = sLogo[1];

    var formLogoFileRef = useRef(null);

    var currentFormType = typeOptions.find(function (t) { return t.value === formContentType; }) || typeOptions[0];

    function loadData() {
      if (!currentUser) return;
      api.get('/qr/dynamic').then(function (res) {
        setDynamicList(res.data || []);
      }).catch(function () {});
      api.get('/qr/plan').then(function (res) {
        setPlanInfo(res.data || null);
      }).catch(function () {});
    }

    React.useEffect(function () {
      loadData();
      // eslint-disable-next-line
    }, [currentUser]);

    function openCreate() {
      // 检查是否达到上限或已过期
      if (planInfo) {
        if (planInfo.is_expired) {
          setShowBuy(true);
          return;
        }
        if (planInfo.remaining_count <= 0 && !planInfo.is_expired) {
          showToast('当前套餐动态码数量已达上限，请升级套餐');
          setShowBuy(true);
          return;
        }
      }
      setEditingItem(null);
      setFormName('');
      setFormContentType('url');
      setFormContent('https://');
      setFormForeground('#000000');
      setFormBackground('#ffffff');
      setFormSize(400);
      setFormEcc('M');
      setFormLogo(null);
      if (formLogoFileRef.current) formLogoFileRef.current.value = '';
      setShowCreate(true);
    }

    function openEdit(item) {
      setEditingItem(item);
      setFormName(item.name);
      setFormContentType(item.content_type || 'url');
      setFormContent(item.content);
      setFormForeground(item.foreground || '#000000');
      setFormBackground(item.background || '#ffffff');
      setFormSize(item.size || 400);
      setFormEcc(item.ecc_level || 'M');
      setFormLogo(item.logo || null);
      if (formLogoFileRef.current) formLogoFileRef.current.value = '';
      setShowCreate(true);
    }

    function handleSave() {
      if (!formContent.trim()) { showToast('请输入内容'); return; }
      if (!formName.trim()) { showToast('请输入名称'); return; }
      var payload = {
        name: formName, content: formContent, content_type: formContentType,
        foreground: formForeground, background: formBackground,
        size: formSize, ecc_level: formEcc, logo: formLogo,
      };
      var req;
      if (editingItem) {
        req = api.post('/qr/dynamic/' + editingItem.id, payload);
      } else {
        req = api.post('/qr/dynamic', payload);
      }
      req.then(function (res) {
        if (res.success === false) {
          showToast(res.message || '保存失败');
          // 如果是数量上限，打开购买弹窗
          if (res.message && res.message.indexOf('升级套餐') !== -1) {
            setShowBuy(true);
          }
          return;
        }
        showToast(editingItem ? '已更新，扫码跳转到最新内容' : '已创建动态码');
        setShowCreate(false);
        loadData();
        // 体验版首次创建后弹提示
        if (!editingItem && planInfo && planInfo.is_trial) {
          setTimeout(function () { setShowTrialTip(true); }, 300);
        }
      }).catch(function (e) {
        showToast(e.message || '保存失败');
      });
    }

    function handleDelete(item) {
      if (!confirm('确定删除"' + item.name + '"吗？')) return;
      api.delete('/qr/dynamic/' + item.id).then(function () {
        showToast('已删除');
        loadData();
      }).catch(function (e) { showToast(e.message || '删除失败'); });
    }

    function handleDownload(item) {
      var offscreen = document.createElement('canvas');
      var base = window.location.origin + window.location.pathname;
      var text = base + '#/qr/' + item.short_id;
      drawQrCode(offscreen, text,
        item.foreground || '#000000', item.background || '#ffffff',
        item.size || 400, item.ecc_level || 'M', item.logo || null);
      if (item.logo) {
        setTimeout(function () { downloadCanvas(offscreen, item.short_id, item.size || 400, showToast); }, 500);
      } else {
        downloadCanvas(offscreen, item.short_id, item.size || 400, showToast);
      }
    }

    function handleLogoUpload(e) {
      var file = e.target.files && e.target.files[0];
      if (!file) return;
      if (file.size > 2 * 1024 * 1024) { showToast('图片不能超过 2MB'); return; }
      var reader = new FileReader();
      reader.onload = function (ev) {
        setFormLogo(ev.target.result);
        showToast('Logo 已添加');
      };
      reader.readAsDataURL(file);
    }

    // 未登录
    if (!currentUser) {
      return React.createElement('div', { style: {
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        padding: 32, textAlign: 'center', background: 'var(--bg-page)',
      } },
        React.createElement('div', { style: { fontSize: 48, marginBottom: 16 } }, '🔒'),
        React.createElement('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 8, color: 'var(--text-primary)' } }, '登录后可用动态二维码'),
        React.createElement('div', { style: { fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, marginBottom: 20, maxWidth: 280 } },
          '动态二维码需要创建账号保存您的动态码。登录后可以随时修改二维码指向的内容，二维码图片无需重新生成。'
        ),
        React.createElement('button', {
          className: 'btn btn-primary',
          style: { fontSize: 14, padding: '10px 28px' },
          onClick: function () {
            if (typeof requireLogin === 'function') {
              requireLogin(function () { loadData(); });
            }
          },
        }, '登录 / 注册'),
        React.createElement('button', {
          style: { marginTop: 12, fontSize: 13, color: 'var(--text-tertiary)', background: 'transparent', border: 'none', cursor: 'pointer' },
          onClick: onRequestSwitchStatic,
        }, '先用静态二维码 →')
      );
    }

    // 到期提示条
    var warningBar = null;
    if (planInfo && planInfo.end_at) {
      if (planInfo.is_expired) {
        warningBar = React.createElement('div', {
          style: {
            flexShrink: 0, padding: '10px 16px',
            background: '#fef2f2', color: '#dc2626',
            fontSize: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            borderBottom: '1px solid #fecaca',
          },
        },
          React.createElement('div', null,
            planInfo.is_trial
              ? '体验期已结束，升级月付/季付/年付套餐后可继续使用动态码'
              : '⚠️ 套餐今日到期，续费后动态码可正常使用'
          ),
          React.createElement('button', {
            style: {
              fontSize: 11, padding: '4px 10px', borderRadius: 12,
              background: '#dc2626', color: '#fff', border: 'none', cursor: 'pointer',
            },
            onClick: function () { setShowBuy(true); },
          }, '去续费')
        );
      } else if (planInfo.is_trial) {
        // 体验版黄色提醒（始终显示，非到期前7天也提示）
        warningBar = React.createElement('div', {
          style: {
            flexShrink: 0, padding: '10px 16px',
            background: '#fffbeb', color: '#b45309',
            fontSize: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            borderBottom: '1px solid #fde68a',
          },
        },
          React.createElement('div', null,
            '🎁 免费体验版：仅 ' + planInfo.max_count + ' 个动态码，' + planInfo.days_left + ' 天后到期'
          ),
          React.createElement('button', {
            style: {
              fontSize: 11, padding: '4px 10px', borderRadius: 12,
              background: '#d97706', color: '#fff', border: 'none', cursor: 'pointer',
              fontWeight: 500,
            },
            onClick: function () { setShowBuy(true); },
          }, '去升级')
        );
      } else if (planInfo.days_left !== null && planInfo.days_left <= 7) {
        warningBar = React.createElement('div', {
          style: {
            flexShrink: 0, padding: '10px 16px',
            background: '#fefce8', color: '#a16207',
            fontSize: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            borderBottom: '1px solid #fde68a',
          },
        },
          React.createElement('div', null, '⏰ 你的动态码套餐还有 ' + planInfo.days_left + ' 天到期，请及时续费'),
          React.createElement('button', {
            style: {
              fontSize: 11, padding: '4px 10px', borderRadius: 12,
              background: '#ca8a04', color: '#fff', border: 'none', cursor: 'pointer',
            },
            onClick: function () { setShowBuy(true); },
          }, '去续费')
        );
      }
    }

    return React.createElement(React.Fragment, null,
      warningBar,

      // 顶部状态条
      React.createElement('div', { style: {
        flexShrink: 0, padding: '12px 16px',
        background: 'var(--bg-card)',
        borderBottom: '1px solid var(--border)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      } },
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
          React.createElement('div', { style: { fontSize: 13, fontWeight: 600 } },
            (planInfo ? planInfo.plan_name : '体验版') +
            (planInfo && planInfo.is_expired ? '（已过期）' : '')
          ),
          planInfo && planInfo.is_trial && !planInfo.is_expired
            ? React.createElement('div', { style: { fontSize: 11, color: '#d97706', lineHeight: 1.4 } },
                '剩余可创建 ' + planInfo.remaining_count + '/' + planInfo.max_count + ' 个' +
                ' · 剩余有效期 ' + planInfo.days_left + ' 天，到期后动态码暂停访问'
              )
            : React.createElement('div', { style: { fontSize: 11, color: 'var(--text-tertiary)' } },
                planInfo
                  ? ('已用 ' + (planInfo.used_count || 0) + ' / ' + planInfo.max_count + ' 个' +
                    (planInfo.end_at ? ' · 到期 ' + new Date(planInfo.end_at).toLocaleDateString() : ''))
                  : '加载中...'
              )
        ),
        React.createElement('div', { style: { display: 'flex', gap: 6 } },
          React.createElement('button', {
            className: 'btn btn-outline',
            style: { fontSize: 12, padding: '5px 10px' },
            onClick: function () { setShowBuy(true); },
          }, planInfo && !planInfo.is_trial ? '续费/升级' : '升级套餐'),
          React.createElement('button', {
            className: 'btn btn-primary',
            onClick: openCreate,
            style: { fontSize: 13, padding: '6px 14px' },
          }, '+ 新建')
        )
      ),

      // 列表
      React.createElement('div', { style: { flex: 1, minHeight: 0, overflowY: 'auto', padding: '12px 16px 24px' } },
        dynamicList.length === 0
          ? React.createElement('div', { style: {
            textAlign: 'center', padding: '60px 20px', color: 'var(--text-tertiary)', fontSize: 13,
          } },
            React.createElement('div', { style: { fontSize: 48, marginBottom: 12 } }, '🔳'),
            React.createElement('div', { style: { marginBottom: 6, color: 'var(--text-secondary)', fontSize: 14, fontWeight: 500 } }, '还没有动态码'),
            React.createElement('div', { style: { lineHeight: 1.6, marginBottom: 16 } },
              '创建动态码后，随时可以修改指向的内容',
              React.createElement('br', null),
              '二维码图片无需重新生成，扫码自动跳转最新内容'
            ),
            React.createElement('button', {
              className: 'btn btn-primary',
              onClick: openCreate,
              style: { fontSize: 13, padding: '8px 20px' },
            }, '立即创建')
          )
          : React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 10 } },
            dynamicList.map(function (item) {
              return React.createElement('div', {
                key: item.id,
                className: 'card card-shadow',
                style: { padding: 12, display: 'flex', gap: 12, alignItems: 'center' },
              },
                React.createElement(DynamicQrThumb, { item: item, size: 64 }),
                React.createElement('div', { style: { flex: 1, minWidth: 0 } },
                  React.createElement('div', { style: {
                    fontSize: 14, fontWeight: 600, marginBottom: 4,
                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  } }, item.name),
                  React.createElement('div', { style: {
                    fontSize: 12, color: 'var(--text-secondary)',
                    marginBottom: 4,
                    overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                  } }, item.content),
                  React.createElement('div', { style: { fontSize: 11, color: 'var(--text-tertiary)' } },
                    '创建于 ' + new Date(item.created_at).toLocaleDateString() +
                    ' · 扫码 ' + (item.scan_count || 0) + ' 次'
                  )
                ),
                React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 6 } },
                  React.createElement('button', {
                    className: 'btn btn-outline',
                    style: { fontSize: 11, padding: '4px 10px' },
                    onClick: function () { openEdit(item); },
                  }, '编辑'),
                  React.createElement('button', {
                    className: 'btn btn-primary',
                    style: { fontSize: 11, padding: '4px 10px' },
                    onClick: function () { handleDownload(item); },
                  }, '下载'),
                  React.createElement('button', {
                    style: {
                      fontSize: 11, padding: '4px 10px',
                      color: '#ef4444', background: 'transparent', border: 'none', cursor: 'pointer',
                    },
                    onClick: function () { handleDelete(item); },
                  }, '删除')
                )
              );
            })
          )
      ),

      // 创建/编辑弹窗
      showCreate && React.createElement('div', {
        style: {
          position: 'fixed', inset: 0, zIndex: 1000,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
        },
        onClick: function () { setShowCreate(false); },
      },
        React.createElement('div', {
          className: 'card',
          style: {
            width: '100%', maxWidth: 480, maxHeight: '85vh',
            background: 'var(--bg-card)',
            borderRadius: '16px 16px 0 0',
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
          },
          onClick: function (e) { e.stopPropagation(); },
        },
          React.createElement('div', { style: {
            flexShrink: 0, padding: '14px 16px',
            borderBottom: '1px solid var(--border)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          } },
            React.createElement('div', { style: { fontSize: 16, fontWeight: 600 } },
              editingItem ? '编辑动态码' : '新建动态码'
            ),
            React.createElement('button', {
              onClick: function () { setShowCreate(false); },
              style: { fontSize: 20, color: 'var(--text-tertiary)', background: 'transparent', border: 'none', cursor: 'pointer', padding: 0, lineHeight: 1 },
            }, '×')
          ),

          React.createElement('div', {
            style: {
              flex: 1, overflowY: 'auto',
              padding: '14px 16px',
              display: 'flex', flexDirection: 'column', gap: 12,
            },
          },
            // 预览
            React.createElement('div', { style: { display: 'flex', justifyContent: 'center', padding: '10px 0' } },
              React.createElement('div', { style: {
                width: 140, aspectRatio: '1 / 1', background: '#fff',
                borderRadius: 10, padding: 8, border: '1px solid var(--border)',
              } },
                React.createElement(DynamicModalPreview, {
                  content: formContent, foreground: formForeground, background: formBackground,
                  size: 200, ecc: formEcc, logo: formLogo,
                })
              )
            ),

            // 名称
            React.createElement('div', null,
              React.createElement('div', { style: { fontSize: 12, fontWeight: 500, marginBottom: 6 } }, '名称'),
              React.createElement('input', {
                value: formName,
                onChange: function (e) { setFormName(e.target.value); },
                placeholder: '给动态码起个名字',
                style: {
                  width: '100%', padding: 10,
                  border: '1px solid var(--border)', borderRadius: 8,
                  fontSize: 14, background: 'var(--bg-page)', color: 'var(--text-primary)',
                  outline: 'none', boxSizing: 'border-box',
                },
              })
            ),

            // 类型
            React.createElement(ToolGroup, { label: '内容类型' },
              typeOptions.map(function (t) {
                return React.createElement('button', {
                  key: t.value,
                  style: formContentType === t.value ? btnActive() : btnBase(),
                  onClick: function () {
                    setFormContentType(t.value);
                    if (t.value === 'url' && formContent.indexOf('http') !== 0) setFormContent('https://');
                  },
                }, t.label);
              })
            ),
            React.createElement('div', { style: { fontSize: 11, color: 'var(--text-tertiary)', lineHeight: 1.5 } },
              currentFormType.hint
            ),

            // 内容
            React.createElement('div', null,
              React.createElement('div', { style: { fontSize: 12, fontWeight: 500, marginBottom: 6 } }, '内容（可随时修改）'),
              React.createElement('textarea', {
                value: formContent,
                onChange: function (e) { setFormContent(e.target.value); },
                placeholder: currentFormType.placeholder,
                rows: 3,
                spellCheck: false,
                style: {
                  width: '100%', padding: 10,
                  border: '1px solid var(--border)', borderRadius: 8,
                  fontSize: 14, lineHeight: 1.5,
                  background: 'var(--bg-page)', color: 'var(--text-primary)',
                  resize: 'vertical', fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box',
                },
              })
            ),

            // 前景色
            React.createElement(ToolGroup, { label: '前景色' },
              colorPresets.map(function (c) {
                return React.createElement('button', {
                  key: c,
                  onClick: function () { setFormForeground(c); },
                  style: {
                    width: 26, height: 26, borderRadius: 6,
                    border: formForeground === c ? '2px solid var(--primary)' : '1px solid var(--border)',
                    background: c, cursor: 'pointer', padding: 0,
                  },
                });
              }),
              React.createElement('input', {
                type: 'color', value: formForeground,
                onChange: function (e) { setFormForeground(e.target.value); },
                style: { width: 26, height: 26, border: 'none', padding: 0, background: 'transparent', cursor: 'pointer' },
              })
            ),

            // 背景色
            React.createElement(ToolGroup, { label: '背景色' },
              bgPresets.map(function (c) {
                return React.createElement('button', {
                  key: c,
                  onClick: function () { setFormBackground(c); },
                  style: {
                    width: 26, height: 26, borderRadius: 6,
                    border: formBackground === c ? '2px solid var(--primary)' : '1px solid var(--border)',
                    background: c, cursor: 'pointer', padding: 0,
                  },
                });
              }),
              React.createElement('input', {
                type: 'color', value: formBackground,
                onChange: function (e) { setFormBackground(e.target.value); },
                style: { width: 26, height: 26, border: 'none', padding: 0, background: 'transparent', cursor: 'pointer' },
              })
            ),

            // 尺寸
            React.createElement(ToolGroup, { label: '尺寸' },
              sizeOptions.map(function (s) {
                return React.createElement('button', {
                  key: s.value,
                  style: formSize === s.value ? btnActive() : btnBase(),
                  onClick: function () { setFormSize(s.value); },
                }, s.label);
              })
            ),

            // 容错率
            React.createElement(ToolGroup, { label: '容错率' },
              eccOptions.map(function (ecc) {
                return React.createElement('button', {
                  key: ecc.value,
                  style: formEcc === ecc.value ? btnActive() : btnBase(),
                  onClick: function () { setFormEcc(ecc.value); },
                }, ecc.label);
              })
            ),

            // Logo
            React.createElement(ToolGroup, { label: 'Logo（可选）' },
              React.createElement('button', {
                style: btnBase(),
                onClick: function () { formLogoFileRef.current && formLogoFileRef.current.click(); },
              }, formLogo ? '更换 Logo' : '上传 Logo'),
              formLogo && React.createElement('button', {
                style: btnBase(),
                onClick: function () {
                  setFormLogo(null);
                  if (formLogoFileRef.current) formLogoFileRef.current.value = '';
                },
              }, '移除'),
              React.createElement('input', {
                ref: formLogoFileRef, type: 'file', accept: 'image/*',
                onChange: handleLogoUpload, style: { display: 'none' },
              }),
              formLogo && React.createElement('div', { style: {
                width: 36, height: 36, borderRadius: 6, overflow: 'hidden', border: '1px solid var(--border)',
              } },
                React.createElement('img', { src: formLogo, alt: 'logo', style: { width: '100%', height: '100%', objectFit: 'cover' } })
              )
            ),

            React.createElement('div', {
              style: {
                fontSize: 12, color: 'var(--text-tertiary)',
                padding: 10, background: 'var(--bg-page)', borderRadius: 8, lineHeight: 1.6,
              },
            },
              React.createElement('strong', null, '提示：'),
              '动态码生成后可随时修改指向的内容，二维码图片无需重新生成。建议将容错率设为 Q 或 H 档以保证 Logo 不影响扫码。'
            )
          ),

          React.createElement('div', {
            style: {
              flexShrink: 0, padding: '10px 12px',
              borderTop: '1px solid var(--border)',
              display: 'flex', gap: 8,
              paddingBottom: 'calc(10px + env(safe-area-inset-bottom))',
            },
          },
            React.createElement('button', {
              className: 'btn btn-outline',
              style: { flex: 1, fontSize: 13, padding: '10px 0' },
              onClick: function () { setShowCreate(false); },
            }, '取消'),
            React.createElement('button', {
              className: 'btn btn-primary',
              style: { flex: 2, fontSize: 13, padding: '10px 0' },
              onClick: handleSave,
            }, editingItem ? '保存修改' : '创建动态码')
          )
        )
      ),

      // 购买套餐弹窗
      React.createElement(PlanBuyModal, {
        visible: showBuy,
        onClose: function () { setShowBuy(false); },
        onSuccess: function () { loadData(); },
        planInfo: planInfo,
      }),

      // 体验版首次创建提示
      showTrialTip && React.createElement('div', {
        style: {
          position: 'fixed', inset: 0, zIndex: 1200,
          background: 'rgba(0,0,0,0.5)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 24,
        },
        onClick: function () { setShowTrialTip(false); },
      },
        React.createElement('div', {
          className: 'card',
          style: {
            width: '100%', maxWidth: 320,
            background: 'var(--bg-card)',
            borderRadius: 16, padding: 20,
            textAlign: 'center',
          },
          onClick: function (e) { e.stopPropagation(); },
        },
          React.createElement('div', { style: { fontSize: 40, marginBottom: 8 } }, '🎁'),
          React.createElement('div', { style: { fontSize: 16, fontWeight: 600, marginBottom: 8, color: 'var(--text-primary)' } },
            '动态码已创建'
          ),
          React.createElement('div', { style: { fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.7, marginBottom: 18 } },
            '你正在使用免费体验版，',
            React.createElement('br', null),
            '仅可创建 1 个动态码，7 天后到期。',
            React.createElement('br', null),
            '升级付费套餐可创建更多动态码，',
            React.createElement('br', null),
            '到期续费后动态码立即恢复访问。'
          ),
          React.createElement('div', { style: { display: 'flex', gap: 8 } },
            React.createElement('button', {
              className: 'btn btn-outline',
              style: { flex: 1, fontSize: 13, padding: '9px 0' },
              onClick: function () { setShowTrialTip(false); },
            }, '知道了'),
            React.createElement('button', {
              className: 'btn btn-primary',
              style: { flex: 1, fontSize: 13, padding: '9px 0' },
              onClick: function () {
                setShowTrialTip(false);
                setShowBuy(true);
              },
            }, '去升级')
          )
        )
      )
    );
  }

  // ============ 主页面 ============
  function QrcodePage() {
    var app = safeUseApp();
    var navigate = app.navigate;
    var currentUser = app.currentUser;
    var requireLogin = app.requireLogin;

    var sTab = useState('static'); var activeTab = sTab[0]; var setActiveTab = sTab[1];

    function handleDynamicTab() {
      if (!currentUser) {
        if (typeof requireLogin === 'function') {
          requireLogin(function () { setActiveTab('dynamic'); });
        }
      } else {
        setActiveTab('dynamic');
      }
    }

    return React.createElement(PageWrapper, { className: 'qrcode-page' },
      React.createElement(AppHeader, {
        title: '二维码生成器',
        subtitle: '快速生成专属二维码',
        showBack: true,
      }),

      // Tab
      React.createElement('div', {
        style: {
          flexShrink: 0, display: 'flex',
          background: 'var(--bg-card)',
          borderBottom: '1px solid var(--border)',
        },
      },
        React.createElement('button', {
          onClick: function () { setActiveTab('static'); },
          style: {
            flex: 1, padding: '12px 0', fontSize: 14,
            fontWeight: activeTab === 'static' ? 600 : 400,
            color: activeTab === 'static' ? 'var(--primary)' : 'var(--text-secondary)',
            background: 'transparent', border: 'none',
            borderBottom: activeTab === 'static' ? '2px solid var(--primary)' : '2px solid transparent',
            cursor: 'pointer',
          },
        }, '静态二维码'),
        React.createElement('button', {
          onClick: handleDynamicTab,
          style: {
            flex: 1, padding: '12px 0', fontSize: 14,
            fontWeight: activeTab === 'dynamic' ? 600 : 400,
            color: activeTab === 'dynamic' ? 'var(--primary)' : 'var(--text-secondary)',
            background: 'transparent', border: 'none',
            borderBottom: activeTab === 'dynamic' ? '2px solid var(--primary)' : '2px solid transparent',
            cursor: 'pointer',
          },
        }, '动态二维码')
      ),

      // 内容
      React.createElement('div', {
        style: {
          display: 'flex', flexDirection: 'column',
          height: 'calc(100dvh - 150px)', overflow: 'hidden',
        },
      },
        activeTab === 'static'
          ? React.createElement(StaticQrPanel, null)
          : React.createElement(DynamicQrPanel, {
            onRequestSwitchStatic: function () { setActiveTab('static'); },
          })
      ),

      React.createElement('style', null,
        '.qrcode-page { padding-bottom: 0 !important; height: 100dvh !important; height: 100vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }',
        '.qrcode-page > .app-header { flex-shrink: 0; }'
      )
    );
  }

  window.QrcodePage = QrcodePage;
})();