// ─────────────────────────────────────────────────────────────
// Shared header + Pulse strip + view-toggle segmented control.
// Both Ladder and Rings views compose these.
// ─────────────────────────────────────────────────────────────

function FolkHeader({ view, onSetView, searchQuery, onSearchChange, onSearchClear }) {
  return (
    <div style={{ flexShrink: 0 }}>
      <div style={{ padding: '14px 18px 8px', display: 'flex', alignItems: 'flex-end', gap: 10 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ font: '500 10px var(--font-sans)', color: '#8A9678',
                        letterSpacing: '0.10em', textTransform: 'uppercase' }}>FOLK</div>
          <div style={{ font: '500 26px var(--font-mono)', color: '#F2EDE4',
                        letterSpacing: '-0.01em', marginTop: 2 }}>folk</div>
          <div style={{ font: '400 italic 13px var(--font-serif)', color: '#8A9678', marginTop: 4 }}>
            {searchQuery
              ? `Searching for “${searchQuery}”`
              : view === 'ladder' ? 'The way they came in.' : 'Closer in, further out.'}
          </div>
        </div>
        <ViewToggle view={view} onSetView={onSetView} disabled={!!searchQuery}/>
      </div>
      <SearchBar
        value={searchQuery}
        onChange={onSearchChange}
        onClear={onSearchClear}/>
    </div>
  );
}

// Segmented control — Ladder ⇄ Rings
function ViewToggle({ view, onSetView, disabled }) {
  const btn = (id, IconNode, label) => {
    const active = view === id;
    return (
      <button onClick={() => !disabled && onSetView(id)} key={id}
        aria-label={`Switch to ${label} view`}
        disabled={disabled}
        style={{
          width: 36, height: 32, padding: 0, border: 'none',
          cursor: disabled ? 'default' : 'pointer',
          background: active && !disabled ? '#1B3A1D' : 'transparent',
          color: active && !disabled ? '#F2EDE4' : '#586552',
          borderRadius: 8,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'background 160ms var(--ease-organic), color 160ms var(--ease-organic)',
          opacity: disabled ? 0.5 : 1,
        }}>
        {IconNode}
      </button>
    );
  };
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center',
      padding: 3, gap: 2,
      background: '#111D0A', border: '0.5px solid #2D3A22', borderRadius: 10,
    }}>
      {btn('ladder', <PIcons.Ladder size={16}/>, 'list ladder')}
      {btn('rings',  <PIcons.Rings  size={16}/>, 'rings')}
    </div>
  );
}


// ─── Pulse strip ───────────────────────────────────────────
// "Around now" — small horizontal scroll of folk who did something recently.
// Borrowed from the Pulse variant. Persistent across both views.

function PulseStrip({ folk, onTap }) {
  return (
    <div style={{ flexShrink: 0 }}>
      <div style={{ padding: '4px 18px 6px', display: 'flex',
                    alignItems: 'center', gap: 8, flexWrap: 'nowrap' }}>
        <span style={{ font: '500 10.5px var(--font-sans)', color: '#76AB78',
                       letterSpacing: '0.12em', textTransform: 'uppercase',
                       whiteSpace: 'nowrap', flexShrink: 0 }}>Around now</span>
        <span style={{ font: 'italic 400 11px var(--font-serif)', color: '#586552',
                       whiteSpace: 'nowrap', flexShrink: 0 }}>· last 4h</span>
      </div>
      <div style={{
        display: 'flex', gap: 8, padding: '0 14px 10px',
        overflowX: 'auto', overflowY: 'hidden',
        scrollbarWidth: 'none',
      }}
        onWheel={e => { if (Math.abs(e.deltaX) < 4) e.currentTarget.scrollLeft += e.deltaY; }}>
        {AROUND_NOW.map(p => {
          const u = folk.find(f => f.handle === p.handle); if (!u) return null;
          const accent = STAGE_META[u.stage].accent;
          return (
            <button key={p.handle} onClick={() => onTap(u.handle)}
              style={{
                flexShrink: 0, width: 80, padding: '10px 6px 8px',
                background: '#111D0A', border: '0.5px solid #1F2B16',
                borderRadius: 12,
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
                cursor: 'pointer',
              }}>
              <div style={{ position: 'relative' }}>
                <FolkAvatar user={u} size={38} online={u.online}/>
                <span style={{
                  position: 'absolute', left: -2, top: -2,
                  width: 42, height: 42, borderRadius: '50%',
                  border: `0.5px solid ${accent}`, opacity: 0.55,
                  pointerEvents: 'none',
                }}/>
              </div>
              <span style={{
                font: '500 11px var(--font-mono)', color: '#F2EDE4',
                maxWidth: 70, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
              }}>{u.handle}</span>
              <span style={{ font: '400 10px var(--font-sans)', color: '#8A9678' }}>
                {p.verb} · {p.when}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}


window.FolkHeader = FolkHeader;
window.ViewToggle = ViewToggle;
window.PulseStrip = PulseStrip;