// sidebar.jsx — account rail + folder list
// Two variants: 'rail' (narrow vertical account tabs + folders) or 'stacked' (per-account folders).

function AccountRail({ theme, accounts, activeAccount, onSelect, unreadCounts }) {
  // vertical narrow rail — account codes stacked
  return (
    <div style={{
      width: 44, background: theme.bg2,
      borderRight: `1px solid ${theme.border}`,
      display: 'flex', flexDirection: 'column',
      paddingTop: 38, // leave room for traffic lights
    }}>
      <button
        onClick={() => onSelect('all')}
        title="All accounts (unified)"
        style={{
          all: 'unset', cursor: 'pointer',
          height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: theme.mono, fontSize: 10,
          color: activeAccount === 'all' ? theme.text : theme.textDim,
          letterSpacing: '0.04em',
          borderLeft: `2px solid ${activeAccount === 'all' ? theme.text : 'transparent'}`,
          background: activeAccount === 'all' ? theme.bg3 : 'transparent',
          position: 'relative',
        }}
      >
        ALL
      </button>
      {accounts.map((a) => {
        const active = activeAccount === a.id;
        const unread = unreadCounts[a.id] || 0;
        return (
          <button
            key={a.id}
            onClick={() => onSelect(a.id)}
            title={a.email}
            style={{
              all: 'unset', cursor: 'pointer',
              height: 48, display: 'flex', flexDirection: 'column',
              alignItems: 'center', justifyContent: 'center', gap: 2,
              fontFamily: theme.mono, fontSize: 10,
              color: active ? theme.text : theme.textDim,
              letterSpacing: '0.04em',
              borderLeft: `2px solid ${active ? `oklch(0.72 0.14 ${a.hue})` : 'transparent'}`,
              background: active ? theme.bg3 : 'transparent',
              position: 'relative',
              textTransform: 'uppercase',
            }}
          >
            <span style={{ fontWeight: 600 }}>{a.short}</span>
            {unread > 0 && (
              <span style={{
                fontSize: 8, color: active ? theme.accent2 : theme.textFaint,
                fontVariantNumeric: 'tabular-nums',
              }}>{unread}</span>
            )}
          </button>
        );
      })}
      <div style={{ flex: 1 }} />
      {/* compose button */}
      <button
        onClick={() => window.__openCompose?.()}
        style={{
          all: 'unset', cursor: 'pointer',
          height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: theme.mono, fontSize: 18,
          color: theme.text,
          borderTop: `1px solid ${theme.border}`,
        }}
        title="Compose (⌘N)"
      >+</button>
    </div>
  );
}

function FolderList({ theme, folders, activeFolder, onSelect, counts, activeAccount, accounts, labels, activeLabel, onSelectLabel }) {
  const acct = activeAccount === 'all' ? null : accounts.find(a => a.id === activeAccount);
  return (
    <div style={{
      width: 184, background: theme.bg2,
      borderRight: `1px solid ${theme.border}`,
      display: 'flex', flexDirection: 'column',
      paddingTop: 32, // traffic lights clearance
      fontFamily: theme.mono, fontSize: 12,
      overflow: 'hidden',
    }}>
      {/* account header */}
      <div style={{
        padding: '14px 14px 10px',
        borderBottom: `1px solid ${theme.border}`,
      }}>
        <div style={{
          fontSize: 10, color: theme.textFaint, letterSpacing: '0.12em',
          textTransform: 'uppercase', marginBottom: 4,
        }}>{acct ? 'account' : 'inbox'}</div>
        <div style={{
          fontSize: 12, color: theme.text, fontWeight: 600,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>
          {acct ? acct.email : 'all accounts'}
        </div>
        {acct && (
          <div style={{
            fontSize: 11, color: theme.textDim, marginTop: 2,
            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          }}>
            {acct.name}
          </div>
        )}
      </div>

      <div style={{ overflowY: 'auto', flex: 1, padding: '8px 0' }}>
        {folders.map(f => {
          const active = activeFolder === f.id;
          const count = counts[f.id] || 0;
          return (
            <button
              key={f.id}
              onClick={() => onSelect(f.id)}
              style={{
                all: 'unset', cursor: 'pointer',
                width: '100%', boxSizing: 'border-box',
                padding: '6px 14px',
                display: 'flex', alignItems: 'center', gap: 10,
                background: active ? theme.bg3 : 'transparent',
                color: active ? theme.text : theme.textDim,
                borderLeft: `2px solid ${active ? theme.text : 'transparent'}`,
                fontSize: 12,
              }}
            >
              <span style={{
                width: 12, display: 'inline-block', textAlign: 'center',
                color: active ? theme.text : theme.textFaint,
              }}>{f.glyph}</span>
              <span style={{ flex: 1 }}>{f.label}</span>
              {count > 0 && (
                <span style={{
                  fontSize: 10, color: theme.textFaint,
                  fontVariantNumeric: 'tabular-nums',
                }}>{count}</span>
              )}
            </button>
          );
        })}

        {/* Labels */}
        <div style={{
          padding: '18px 14px 6px',
          fontSize: 10, color: theme.textFaint, letterSpacing: '0.12em',
          textTransform: 'uppercase',
        }}>labels</div>
        {labels.map(lb => {
          const active = activeLabel === lb.id;
          return (
            <button
              key={lb.id}
              onClick={() => onSelectLabel(active ? null : lb.id)}
              style={{
                all: 'unset', cursor: 'pointer',
                width: '100%', boxSizing: 'border-box',
                padding: '4px 14px',
                display: 'flex', alignItems: 'center', gap: 10,
                color: active ? theme.text : theme.textDim,
                background: active ? theme.bg3 : 'transparent',
                borderLeft: `2px solid ${active ? theme.text : 'transparent'}`,
                fontSize: 12,
              }}
            >
              <span style={{
                width: 12, textAlign: 'center',
                color: theme.label[lb.id] || theme.textDim,
              }}>▪</span>
              <span style={{ flex: 1 }}>[{lb.label}]</span>
            </button>
          );
        })}
      </div>

      {/* footer: connection status terminal-style */}
      <div style={{
        borderTop: `1px solid ${theme.border}`,
        padding: '8px 14px',
        fontSize: 10, color: theme.textFaint,
        fontFamily: theme.mono,
        display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <span style={{
          width: 6, height: 6, background: theme.good, display: 'inline-block',
        }} />
        <span>imap · online</span>
      </div>
    </div>
  );
}

Object.assign(window, { AccountRail, FolderList });