const { Icon } = window;

function Sidebar({ onCompose, onOpenCommand, onOpenAgent }) {
  const { NAV, LABELS } = window.DATA;
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">
          <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
            <path d="M3 6l7 5 7-5"/><rect x="3" y="5" width="14" height="10" rx="2"/>
          </svg>
        </div>
        <span className="brand-name" title="jie.zhao@relay.mail">jie.zhao@relay.mail</span>
        <span className="brand-dot" />
      </div>

      <div className="account">
        <div className="avatar">JZ</div>
        <span className="account-email">Jie Zhao · Relay</span>
        <Icon name="chevron" size={13} style={{ color: 'var(--ink-4)' }} />
      </div>

      <button className="compose-btn" onClick={onCompose}>
        <Icon name="plus" size={14} />
        写邮件
        <span className="kbd">C</span>
      </button>

      <button className="nav-item" onClick={onOpenCommand} style={{ marginBottom: 2 }}>
        <Icon name="command" size={15} />
        <span>Command</span>
        <span className="nav-count">⌘K</span>
      </button>
      <button className="nav-item" onClick={onOpenAgent}>
        <Icon name="sparkle" size={15} style={{ color: 'var(--accent)' }} />
        <span>Agent</span>
        <span className="nav-count pill">1</span>
      </button>

      <div className="nav-section-label">Mail</div>
      {NAV.map(item => (
        <button key={item.id} className={`nav-item ${item.active ? 'active' : ''}`}>
          <Icon name={item.icon} size={15} />
          <span>{item.label}</span>
          {item.count != null && <span className="nav-count">{item.count}</span>}
        </button>
      ))}

      <div className="nav-section-label">Labels</div>
      {LABELS.map(l => (
        <button key={l.id} className="nav-item">
          <span style={{
            width: 8, height: 8, borderRadius: 2, background: l.color, flexShrink: 0
          }} />
          <span>{l.label}</span>
        </button>
      ))}

      <div style={{ flex: 1 }} />
      <button className="nav-item">
        <Icon name="settings" size={15} />
        <span>设置</span>
      </button>
    </aside>
  );
}

window.Sidebar = Sidebar;