// 右栏：事件流 · 可折叠（折叠后仅图标）
function MaestroEventIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flex: 'none' }}>
      <polyline points="2 12 7 12 10 5 14 19 17 12 22 12" />
    </svg>
  );
}

function maestroPanelToggleProps(onClick, title) {
  return {
    onClick, title,
    style: {
      cursor: 'pointer', flex: 'none', fontFamily: 'var(--mono)', fontSize: 12, lineHeight: 1,
      background: 'transparent', color: 'var(--muted)',
      border: '1px solid var(--line)', borderRadius: 'var(--radius-sm, 4px)', padding: '4px 7px',
    },
    onMouseEnter: (e) => { e.currentTarget.style.color = 'var(--green)'; e.currentTarget.style.borderColor = 'var(--green-dim)'; },
    onMouseLeave: (e) => { e.currentTarget.style.color = 'var(--muted)'; e.currentTarget.style.borderColor = 'var(--line)'; },
  };
}

function EventPanel({ events, collapsed, onToggleCollapse, t }) {
  const { EventItem, SectionHead } = window.MaestroDesignSystem_a6a290;
  if (collapsed) {
    return (
      <aside style={{ background: 'var(--bg-deep)', borderLeft: '1px solid var(--line)', display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '16px 0', gap: 14 }}>
        <button {...maestroPanelToggleProps(onToggleCollapse, t.expandEvents)}>«</button>
        <span style={{ color: 'var(--muted)' }} title={t.events + ' · ' + events.length}><MaestroEventIcon size={18} /></span>
        <span style={{ fontSize: 10.5, color: 'var(--faint)', letterSpacing: '.04em' }}>{events.length}</span>
      </aside>
    );
  }
  return (
    <aside style={{ background: 'var(--bg-deep)', borderLeft: '1px solid var(--line)', overflowY: 'auto', paddingBottom: 30 }}>
      <SectionHead title={t.events} action={<button {...maestroPanelToggleProps(onToggleCollapse, t.collapseEvents)}>»</button>}
        style={{ padding: '14px 14px 10px', position: 'sticky', top: 0, zIndex: 5, background: 'linear-gradient(var(--bg-deep) 75%, transparent)' }} />
      <ul style={{ listStyle: 'none', padding: '0 14px', margin: 0 }}>
        {events.map((e, i) => <EventItem key={i} type={e.type} label={t.eventTypes[e.type]} time={e.time} detail={e.detail} />)}
      </ul>
    </aside>
  );
}
window.MaestroKitEventPanel = EventPanel;