/* Sidebar: mini-month navigator + event group toggles */
function MiniMonth({ cursor, selected, today, events, onPick, onShift }) {
  const y = cursor.getFullYear(), m = cursor.getMonth();
  const cells = buildMonthGrid(y, m);
  const has = {};
  events.forEach(e => { has[e.key] = true; });
  return React.createElement('div', { className: 'mini' },
    React.createElement('div', { className: 'mini-head' },
      React.createElement('div', { className: 'mini-title' }, MONTHS[m] + ' ' + y),
      React.createElement('div', { className: 'mini-nav' },
        React.createElement('button', { className: 'icon-btn', onClick: () => onShift(-1) }, React.createElement(Icons.chevL, { size: 15 })),
        React.createElement('button', { className: 'icon-btn', onClick: () => onShift(1) }, React.createElement(Icons.chevR, { size: 15 })))),
    React.createElement('div', { className: 'mini-grid' },
      ['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) =>
        React.createElement('div', { className: 'mini-dow', key: 'd' + i }, d)),
      cells.map((dt, i) => {
        const dim = dt.getMonth() !== m;
        const cls = ['mini-cell'];
        if (dim) cls.push('dim');
        if (isSameDay(dt, today)) cls.push('today');
        else if (isSameDay(dt, selected)) cls.push('sel');
        return React.createElement('div', {
          key: i, className: cls.join(' '), onClick: () => onPick(dt),
        }, dt.getDate(), has[dateKey(dt)] && !isSameDay(dt, today) ? React.createElement('span', { className: 'dot' }) : null);
      })));
}

function Sidebar(props) {
  const { groups, active, counts, onToggle, onAddGroup, onRenameGroup, onDeleteGroup } = props;
  return React.createElement('aside', { className: 'cal-side' },
    React.createElement(MiniMonth, {
      cursor: props.cursor, selected: props.selected, today: props.today,
      events: props.events, onPick: props.onPick, onShift: props.onShift,
    }),
    React.createElement('div', null,
      React.createElement('div', { className: 'side-section-label' },
        React.createElement('span', { className: 'vault-label' }, 'Event Groups')),
      React.createElement('div', { className: 'groups' },
        groups.map(g => {
          const on = active[g.id] !== false;
          return React.createElement('div', {
            key: g.id, className: 'group-row' + (on ? '' : ' off'),
            style: { '--cc': g.color }, onClick: () => onToggle(g.id),
            onDoubleClick: onRenameGroup ? (e) => { e.stopPropagation(); onRenameGroup(g.id); } : null,
            title: 'Click to toggle · double-click to rename',
          },
            React.createElement('span', { className: 'group-check' + (on ? ' on' : '') },
              React.createElement(Icons.check, { size: 11, sw: 3, style: { color: '#0B0B0D' } })),
            React.createElement('span', { className: 'group-name' }, g.name),
            React.createElement('span', { className: 'group-count' }, counts[g.id] || 0),
            onDeleteGroup ? React.createElement('span', {
              className: 'group-x', title: 'Delete group',
              onClick: (e) => { e.stopPropagation(); onDeleteGroup(g.id); },
            }, React.createElement(Icons.x, { size: 12 })) : null);
        }),
        React.createElement('button', { className: 'add-group', onClick: onAddGroup },
          React.createElement(Icons.plus, { size: 14 }), 'New group'))));
}

window.Sidebar = Sidebar;
window.MiniMonth = MiniMonth;