










(function () {
  'use strict';

  










  function makeSection(opts) {
    var sec = document.createElement('div');
    sec.className = 'section';
    sec.style.background = 'rgba(20,22,26,.75)';
    sec.style.userSelect = 'none';
    sec.style.webkitUserSelect = 'none';

    var head = document.createElement('div');
    head.style.cssText = 'display:flex; align-items:center; gap:6px; margin:0 0 8px;';

    
    var caret = document.createElement('span');
    caret.style.cssText = 'flex:0 0 auto; width:10px; color:#8ab4f8; cursor:pointer;';
    head.appendChild(caret);

    var h3 = document.createElement('h3');
    
    
    h3.style.cssText = 'margin:0; flex:0 1 auto; min-width:0; cursor:pointer;';
    h3.setAttribute('data-i18n', opts.i18nKey);
    h3.textContent = VizI18n.tr(opts.i18nKey, opts.title);
    h3.title = VizI18n.tr('viz_panel_fold', '点标题折叠/展开');
    head.appendChild(h3);

    






    var countEl = document.createElement('span');
    countEl.className = 'ps-count';
    countEl.style.cssText = 'display:none; flex:0 0 auto; min-width:16px; height:16px; ' +
      'line-height:16px; text-align:center; border-radius:8px; background:#2f3640; ' +
      'color:#c2c9d0; font-size:10px; padding:0 5px; cursor:pointer;';
    head.appendChild(countEl);

    



    var hintEl = null;
    if (opts.hint) {
      hintEl = document.createElement('span');
      hintEl.className = 'ps-hint';
      hintEl.style.cssText = 'display:none; flex:0 0 auto; width:14px; height:14px; ' +
        'color:#ffcc44; cursor:help;';
      hintEl.setAttribute('data-i18n-title', opts.hint.i18nTitleKey);
      hintEl.title = VizI18n.tr(opts.hint.i18nTitleKey, opts.hint.title || '');
      hintEl.innerHTML =
        '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" ' +
        'stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
        '<path d="M9 18h6M10 22h4"/>' +
        '<path d="M12 2a7 7 0 0 0-4 12.7V18h8v-3.3A7 7 0 0 0 12 2z"/></svg>';
      head.appendChild(hintEl);
    }

    
    var spacer = document.createElement('span');
    spacer.style.cssText = 'flex:1 1 auto;';
    head.appendChild(spacer);

    (opts.buttons || []).forEach(function (b) {
      var btn = document.createElement('button');
      if (b.id) btn.id = b.id;
      btn.textContent = b.text;
      if (b.i18nTitleKey) btn.setAttribute('data-i18n-title', b.i18nTitleKey);
      btn.title = b.i18nTitleKey ? VizI18n.tr(b.i18nTitleKey, b.title) : (b.title || '');
      btn.style.cssText = 'flex:0 0 auto; padding:0 8px; line-height:1.5;';
      
      btn.addEventListener('click', function (e) {
        e.stopPropagation();
        if (b.onClick) b.onClick(e);
      });
      head.appendChild(btn);
    });
    sec.appendChild(head);

    



    var extraEl = document.createElement('div');
    extraEl.className = 'ps-extra';
    sec.appendChild(extraEl);

    
    
    
    var listEl = document.createElement('div');
    listEl.className = 'ps-list';
    if (opts.listId) listEl.id = opts.listId;
    sec.appendChild(listEl);

    var state = { collapsed: false };

    function paint() {
      caret.textContent = state.collapsed ? '▸' : '▾';
      listEl.style.display = state.collapsed ? 'none' : '';
      
      extraEl.style.display = state.collapsed ? 'none' : '';
    }

    function setCollapsed(on, silent) {
      on = !!on;
      if (state.collapsed === on) return;
      state.collapsed = on;
      paint();
      if (!silent && opts.onToggle) opts.onToggle(opts.key, on);
    }

    

    function setCount(n) {
      n = n | 0;
      countEl.textContent = n > 0 ? String(n) : '';
      countEl.style.display = n > 0 ? '' : 'none';
    }

    function setHintVisible(on) {
      if (hintEl) hintEl.style.display = on ? '' : 'none';
    }

    function toggle(e) {
      e.stopPropagation();
      setCollapsed(!state.collapsed);
    }
    caret.addEventListener('click', toggle);
    h3.addEventListener('click', toggle);
    
    countEl.addEventListener('click', toggle);
    paint();

    return {
      sec: sec,
      listEl: listEl,
      extraEl: extraEl,
      setCollapsed: setCollapsed,
      setCount: setCount,
      setHintVisible: setHintVisible,
      isCollapsed: function () { return state.collapsed; }
    };
  }

  window.PanelSection = { make: makeSection };
})();
