// RESEARCH PLATFORM — Workspace sub-platform (Grid / Detail / Bundles / Activity)
const { useState: useWsState, useMemo: useWsMemo } = React;
const Tws = window.ArbiterTokens;

// ── Grid — all workspaces ─────────────────
function WorkspacesGrid({ data, onOpen }) {
  const rs = window.__rs;
  const [q, setQ] = useWsState('');
  const filtered = data.workspaces.filter(w =>
    !q || w.matter.toLowerCase().includes(q.toLowerCase()) || w.tags.some(t => t.includes(q.toLowerCase()))
  );

  const totalItems = data.workspaces.reduce((s, w) => s + w.items, 0);
  const totalBundles = data.workspaces.reduce((s, w) => s + w.bundles, 0);

  return (
    <div>
      {/* KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Workspaces</span>
          <span style={rs.statValue}>{data.workspaces.length}</span>
          <span style={{ ...rs.statDelta, color: Tws.color.text.tertiary }}>one per active matter</span>
        </div>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Saved items</span>
          <span style={rs.statValue}>{totalItems}</span>
          <span style={{ ...rs.statDelta, color: Tws.color.text.tertiary }}>across all matters</span>
        </div>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Bundles</span>
          <span style={{ ...rs.statValue, color: rs.indigo }}>{totalBundles}</span>
          <span style={{ ...rs.statDelta, color: Tws.color.text.tertiary }}>grouped authorities</span>
        </div>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Team members</span>
          <span style={rs.statValue}>6</span>
          <span style={{ ...rs.statDelta, color: Tws.color.text.tertiary }}>with research access</span>
        </div>
      </div>

      {/* Search */}
      <div style={{ display: 'flex', gap: '8px', marginBottom: '14px', alignItems: 'center' }}>
        <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search matters or tags…"
          style={{ flex: 1, maxWidth: '360px', height: '34px', border: `1px solid ${Tws.color.border.medium}`, borderRadius: '6px', padding: '0 12px', fontSize: '12px', fontFamily: Tws.font.family, background: Tws.color.bg.card, color: Tws.color.text.primary, outline: 'none' }} />
        <span style={{ fontSize: '11px', color: Tws.color.text.tertiary }}>{filtered.length} of {data.workspaces.length}</span>
        <div style={{ flex: 1 }} />
        <button style={rs.btnSecondary}>Import bundle</button>
        <button style={rs.btnPrimary}>+ New workspace</button>
      </div>

      {/* Grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', gap: '14px' }}>
        {filtered.map(w => (
          <div key={w.id} style={{ ...rs.card, marginBottom: 0, cursor: 'pointer' }} onClick={() => onOpen(w.id)}>
            <div style={{ padding: '14px 16px', borderBottom: `1px solid ${Tws.color.border.light}`, background: 'linear-gradient(135deg, rgba(67,56,202,0.04) 0%, transparent 100%)' }}>
              <div style={{ fontSize: '14px', fontWeight: 700, color: Tws.color.text.primary }}>{w.matter}</div>
              <div style={{ fontSize: '11px', color: Tws.color.text.tertiary, fontFamily: Tws.font.mono, marginTop: '2px' }}>{w.matterId}</div>
            </div>
            <div style={{ padding: '14px 16px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '10px', marginBottom: '14px' }}>
                <div>
                  <div style={{ fontSize: '10px', color: Tws.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Items</div>
                  <div style={{ fontSize: '18px', fontWeight: 700, color: Tws.color.text.primary, fontFamily: Tws.font.mono }}>{w.items}</div>
                </div>
                <div>
                  <div style={{ fontSize: '10px', color: Tws.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Bundles</div>
                  <div style={{ fontSize: '18px', fontWeight: 700, color: rs.indigo, fontFamily: Tws.font.mono }}>{w.bundles}</div>
                </div>
                <div>
                  <div style={{ fontSize: '10px', color: Tws.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Owner</div>
                  <div style={{ fontSize: '12px', fontWeight: 500, color: Tws.color.text.primary, marginTop: '3px' }}>{w.owner}</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px', marginBottom: '12px' }}>
                {w.tags.map(t => (
                  <span key={t} style={{ ...rs.tag, background: rs.indigoBg, color: rs.indigo }}>#{t}</span>
                ))}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: '10px', color: Tws.color.text.tertiary }}>Updated {w.lastUpdated}</span>
                <button style={rs.btnGhost}>Open workspace →</button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Detail — single workspace deep view ─────────────────
function WorkspaceDetail({ data, wsId, onBack }) {
  const rs = window.__rs;
  const w = data.workspaces.find(x => x.id === wsId);
  const d = data.workspaceDetails[wsId];
  if (!w) return null;

  const kindIcon = (k) => ({
    add: '+', pin: '*', create: '◎', annotate: '', share: '→', export: '↑', alert: '!',
  }[k] || '•');
  const kindColor = (k) => ({
    add: { bg: rs.indigoBg, color: rs.indigo },
    pin: { bg: rs.violetBg, color: rs.violet },
    create: { bg: rs.tealBg, color: rs.teal },
    annotate: { bg: rs.amberBg, color: rs.amber },
    share: { bg: 'rgba(27,122,74,0.08)', color: '#1B7A4A' },
    export: { bg: rs.indigoBg, color: rs.indigo },
    alert: { bg: 'rgba(194,48,48,0.08)', color: '#C23030' },
  }[k] || { bg: Tws.color.bg.secondary, color: Tws.color.text.secondary });

  if (!d) {
    return (
      <div>
        <button onClick={onBack} style={rs.btnSecondary}>← Back to workspaces</button>
        <div style={{ ...rs.card, marginTop: '16px', padding: '40px', textAlign: 'center' }}>
          <div style={{ fontSize: '14px', color: Tws.color.text.primary, fontWeight: 600, marginBottom: '4px' }}>{w.matter}</div>
          <div style={{ fontSize: '12px', color: Tws.color.text.tertiary }}>Detail view not yet populated for this workspace.</div>
        </div>
      </div>
    );
  }

  const pinnedWithCases = d.pinnedAuthorities.map(p => ({
    ...p,
    caseObj: data.cases.find(c => c.id === p.caseId),
  })).filter(p => p.caseObj);

  return (
    <div>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
        <button onClick={onBack} style={rs.btnSecondary}>← Back to workspaces</button>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: '16px', fontWeight: 700, color: Tws.color.text.primary, letterSpacing: '-0.01em' }}>{w.matter}</div>
          <div style={{ fontSize: '11px', color: Tws.color.text.tertiary, marginTop: '2px', fontFamily: Tws.font.mono }}>{w.matterId}</div>
        </div>
        <button style={rs.btnSecondary}>Share →</button>
        <button style={rs.btnSecondary}>Export bundle</button>
        <button style={rs.btnPrimary}>+ New bundle</button>
      </div>

      {/* Description + tags */}
      <div style={{ ...rs.card, padding: '14px 16px' }}>
        <div style={{ fontSize: '13px', color: Tws.color.text.primary, lineHeight: 1.6, marginBottom: '10px' }}>{d.description}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
          {w.tags.map(t => <span key={t} style={{ ...rs.tag, background: rs.indigoBg, color: rs.indigo }}>#{t}</span>)}
        </div>
      </div>

      {/* KPIs */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Saved items</span>
          <span style={rs.statValue}>{w.items}</span>
        </div>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Bundles</span>
          <span style={{ ...rs.statValue, color: rs.indigo }}>{d.bundles.length}</span>
        </div>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Pinned</span>
          <span style={{ ...rs.statValue, color: rs.violet }}>{d.bundles.reduce((s, b) => s + b.pinned, 0)}</span>
        </div>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Team</span>
          <span style={rs.statValue}>{d.team.length}</span>
        </div>
        <div style={rs.stat}>
          <span style={rs.statLabel}>Notes</span>
          <span style={rs.statValue}>{d.notes.length}</span>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: '16px' }}>
        <div>
          {/* Bundles */}
          <div style={rs.card}>
            <div style={rs.cardH}>Bundles — {d.bundles.length}</div>
            <div>
              {d.bundles.map((b, i) => (
                <div key={b.id} style={{ padding: '12px 16px', borderBottom: i < d.bundles.length - 1 ? `1px solid ${Tws.color.border.light}` : 'none' }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: '6px' }}>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: '12px', fontWeight: 600, color: Tws.color.text.primary, marginBottom: '3px' }}>{b.name}</div>
                      <div style={{ fontSize: '11px', color: Tws.color.text.tertiary, fontFamily: Tws.font.mono }}>{b.id} · {b.owner} · updated {b.updated}</div>
                    </div>
                    <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
                      <span style={{ ...rs.tag, background: rs.indigoBg, color: rs.indigo }}>{b.items} items</span>
                      <span style={{ ...rs.tag, background: rs.violetBg, color: rs.violet }}>* {b.pinned}</span>
                    </div>
                  </div>
                  <div style={{ fontSize: '11px', color: Tws.color.text.secondary, marginBottom: '6px', fontStyle: 'italic' }}>Coverage: {b.coverage}</div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px' }}>
                    {b.tags.map(t => <span key={t} style={{ ...rs.tag, background: Tws.color.bg.secondary, color: Tws.color.text.secondary }}>#{t}</span>)}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Pinned authorities */}
          {pinnedWithCases.length > 0 && (
            <div style={rs.card}>
              <div style={rs.cardH}>* Pinned authorities — {pinnedWithCases.length}</div>
              <div>
                {pinnedWithCases.map(p => {
                  const sig = p.caseObj.signal === 'positive' ? rs.signalPositive
                    : p.caseObj.signal === 'caution' ? rs.signalCaution
                    : p.caseObj.signal === 'negative' ? rs.signalNegative : rs.signalNeutral;
                  return (
                    <div key={p.caseId} style={{ padding: '12px 16px', borderBottom: `1px solid ${Tws.color.border.light}` }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '12px' }}>
                        <div style={{ flex: 1, minWidth: 0 }}>
                          <div style={{ fontSize: '12px', fontWeight: 600, color: Tws.color.text.primary }}>{p.caseObj.shortCite}</div>
                          <div style={{ fontSize: '11px', color: Tws.color.text.tertiary, fontFamily: Tws.font.mono, marginTop: '2px' }}>{p.caseObj.cite}</div>
                          <div style={{ fontSize: '11px', color: Tws.color.text.secondary, marginTop: '6px', lineHeight: 1.5 }}>{p.note}</div>
                        </div>
                        <span style={{ ...rs.tag, ...sig }}>{p.caseObj.signal}</span>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          )}
        </div>

        <div>
          {/* Team */}
          <div style={rs.card}>
            <div style={rs.cardH}>Team · {d.team.length}</div>
            <div>
              {d.team.map((m, i) => (
                <div key={m.name} style={{ padding: '10px 16px', borderBottom: i < d.team.length - 1 ? `1px solid ${Tws.color.border.light}` : 'none', display: 'flex', gap: '10px', alignItems: 'center' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '30px', height: '30px', borderRadius: '50%', background: rs.indigo, color: '#fff', fontSize: '11px', fontWeight: 700, flexShrink: 0 }}>{m.initials}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: '12px', fontWeight: 600, color: Tws.color.text.primary }}>{m.name}</div>
                    <div style={{ fontSize: '10px', color: Tws.color.text.tertiary }}>{m.role}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Notes */}
          <div style={rs.card}>
            <div style={rs.cardH}>
              <span>Notes · {d.notes.length}</span>
              <button style={rs.btnGhost}>+ Add note</button>
            </div>
            <div>
              {d.notes.map((n, i) => (
                <div key={n.id} style={{ padding: '12px 16px', borderBottom: i < d.notes.length - 1 ? `1px solid ${Tws.color.border.light}` : 'none' }}>
                  <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '6px' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '22px', height: '22px', borderRadius: '50%', background: rs.indigo, color: '#fff', fontSize: '9px', fontWeight: 700 }}>{n.initials}</span>
                    <span style={{ fontSize: '11px', fontWeight: 600, color: Tws.color.text.primary }}>{n.author}</span>
                    <span style={{ fontSize: '10px', color: Tws.color.text.tertiary }}>· {n.time}</span>
                  </div>
                  <div style={{ fontSize: '12px', fontWeight: 600, color: Tws.color.text.primary, marginBottom: '4px' }}>{n.title}</div>
                  <div style={{ fontSize: '11px', color: Tws.color.text.secondary, lineHeight: 1.55, marginBottom: '6px' }}>{n.body}</div>
                  <div style={{ display: 'flex', gap: '3px', flexWrap: 'wrap' }}>
                    {n.tags.map(t => <span key={t} style={{ ...rs.tag, background: Tws.color.bg.secondary, color: Tws.color.text.secondary }}>#{t}</span>)}
                  </div>
                </div>
              ))}
              {d.notes.length === 0 && <div style={{ padding: '20px', textAlign: 'center', fontSize: '11px', color: Tws.color.text.tertiary }}>No notes yet.</div>}
            </div>
          </div>

          {/* Timeline */}
          <div style={rs.card}>
            <div style={rs.cardH}>Timeline</div>
            <div style={{ padding: '10px 16px' }}>
              {d.timeline.map((ev, i) => {
                const kc = kindColor(ev.kind);
                return (
                  <div key={i} style={{ display: 'flex', gap: '10px', padding: '8px 0', borderBottom: i < d.timeline.length - 1 ? `1px solid ${Tws.color.border.light}` : 'none' }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: '22px', height: '22px', borderRadius: '50%', background: kc.bg, color: kc.color, fontSize: '10px', fontWeight: 700, flexShrink: 0 }}>{kindIcon(ev.kind)}</span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: '11px', color: Tws.color.text.primary }}><span style={{ fontWeight: 600 }}>{ev.actor}</span> <span style={{ color: Tws.color.text.secondary }}>{ev.event}</span></div>
                      <div style={{ fontSize: '10px', color: Tws.color.text.tertiary, marginTop: '2px' }}>{ev.date}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ── Bundles — all bundles across workspaces ─────────────────
function WorkspaceBundles({ data, onOpenWs }) {
  const rs = window.__rs;
  const allBundles = [];
  Object.entries(data.workspaceDetails).forEach(([wsId, wd]) => {
    const ws = data.workspaces.find(w => w.id === wsId);
    wd.bundles.forEach(b => allBundles.push({ ...b, wsId, matter: ws?.matter || wsId }));
  });

  const [tagFilter, setTagFilter] = useWsState('All');
  const allTags = useWsMemo(() => ['All', ...new Set(allBundles.flatMap(b => b.tags))], [allBundles]);
  const filtered = allBundles.filter(b => tagFilter === 'All' || b.tags.includes(tagFilter));

  return (
    <div>
      <div style={{ display: 'flex', gap: '6px', marginBottom: '14px', flexWrap: 'wrap' }}>
        {allTags.slice(0, 12).map(t => (
          <button key={t} onClick={() => setTagFilter(t)} style={{
            padding: '4px 12px', borderRadius: '12px', border: `1px solid ${tagFilter === t ? rs.indigo : Tws.color.border.light}`,
            background: tagFilter === t ? rs.indigoBg : Tws.color.bg.card, color: tagFilter === t ? rs.indigo : Tws.color.text.secondary,
            fontSize: '11px', fontWeight: 500, cursor: 'pointer', fontFamily: Tws.font.family,
          }}>{t === 'All' ? t : `#${t}`}</button>
        ))}
      </div>

      <div style={rs.card}>
        <div style={rs.cardH}>All bundles — {filtered.length}</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={rs.th}>Bundle</th>
              <th style={rs.th}>Matter</th>
              <th style={rs.th}>Owner</th>
              <th style={{ ...rs.th, textAlign: 'right' }}>Items</th>
              <th style={{ ...rs.th, textAlign: 'right' }}>Pinned</th>
              <th style={rs.th}>Tags</th>
              <th style={rs.th}>Updated</th>
            </tr>
          </thead>
          <tbody>
            {filtered.map(b => (
              <tr key={`${b.wsId}-${b.id}`} style={{ cursor: 'pointer' }} onClick={() => onOpenWs(b.wsId)}>
                <td style={{ ...rs.td, maxWidth: '300px' }}>
                  <div style={{ fontSize: '12px', fontWeight: 600, color: Tws.color.text.primary }}>{b.name}</div>
                  <div style={{ fontSize: '10px', color: Tws.color.text.tertiary, fontFamily: Tws.font.mono, marginTop: '2px' }}>{b.id}</div>
                </td>
                <td style={{ ...rs.td, color: Tws.color.text.secondary }}>{b.matter}</td>
                <td style={{ ...rs.td, color: Tws.color.text.secondary }}>{b.owner}</td>
                <td style={{ ...rs.td, textAlign: 'right', fontFamily: Tws.font.mono, color: Tws.color.text.primary, fontWeight: 600 }}>{b.items}</td>
                <td style={{ ...rs.td, textAlign: 'right', fontFamily: Tws.font.mono, color: rs.violet, fontWeight: 600 }}>{b.pinned}</td>
                <td style={rs.td}>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px' }}>
                    {b.tags.slice(0, 3).map(t => <span key={t} style={{ ...rs.tag, background: rs.indigoBg, color: rs.indigo }}>#{t}</span>)}
                    {b.tags.length > 3 && <span style={{ fontSize: '10px', color: Tws.color.text.tertiary }}>+{b.tags.length - 3}</span>}
                  </div>
                </td>
                <td style={{ ...rs.td, color: Tws.color.text.tertiary, fontSize: '11px' }}>{b.updated}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

// ── Activity — all workspace timelines merged ─────────────────
function WorkspaceActivity({ data }) {
  const rs = window.__rs;
  const stream = [];
  Object.entries(data.workspaceDetails).forEach(([wsId, wd]) => {
    const matter = data.workspaces.find(w => w.id === wsId)?.matter;
    wd.timeline.forEach((ev, i) => stream.push({ ...ev, wsId, matter, key: `${wsId}-${i}` }));
  });

  const kindColor = (k) => ({
    add: { bg: rs.indigoBg, color: rs.indigo },
    pin: { bg: rs.violetBg, color: rs.violet },
    create: { bg: rs.tealBg, color: rs.teal },
    annotate: { bg: rs.amberBg, color: rs.amber },
    share: { bg: 'rgba(27,122,74,0.08)', color: '#1B7A4A' },
    export: { bg: rs.indigoBg, color: rs.indigo },
    alert: { bg: 'rgba(194,48,48,0.08)', color: '#C23030' },
  }[k] || { bg: Tws.color.bg.secondary, color: Tws.color.text.secondary });

  return (
    <div style={rs.card}>
      <div style={rs.cardH}>
        <span>Workspace activity · {stream.length} events</span>
        <button style={rs.btnSecondary}>Export CSV</button>
      </div>
      <table style={{ width: '100%', borderCollapse: 'collapse' }}>
        <thead>
          <tr>
            <th style={rs.th}>When</th>
            <th style={rs.th}>Matter</th>
            <th style={rs.th}>Actor</th>
            <th style={rs.th}>Event</th>
            <th style={rs.th}>Kind</th>
          </tr>
        </thead>
        <tbody>
          {stream.map(ev => {
            const kc = kindColor(ev.kind);
            return (
              <tr key={ev.key}>
                <td style={{ ...rs.td, fontFamily: Tws.font.mono, color: Tws.color.text.tertiary, fontSize: '11px' }}>{ev.date}</td>
                <td style={{ ...rs.td, color: Tws.color.text.primary, fontWeight: 500 }}>{ev.matter}</td>
                <td style={{ ...rs.td, color: Tws.color.text.primary, fontWeight: 500 }}>{ev.actor}</td>
                <td style={{ ...rs.td, color: Tws.color.text.secondary }}>{ev.event}</td>
                <td style={rs.td}><span style={{ ...rs.tag, background: kc.bg, color: kc.color }}>{ev.kind}</span></td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// ── Entry — sub-nav pill bar ─────────────────
function ResearchWorkspace({ data }) {
  const rs = window.__rs;
  const [sub, setSub] = useWsState('grid');
  const [openWsId, setOpenWsId] = useWsState(null);

  const subs = [
    { id: 'grid', label: 'All workspaces' },
    { id: 'detail', label: 'Workspace detail', disabled: !openWsId },
    { id: 'bundles', label: 'Bundles' },
    { id: 'activity', label: 'Activity' },
  ];

  const handleOpen = (wsId) => { setOpenWsId(wsId); setSub('detail'); };

  return (
    <div>
      {/* Sub-nav pill bar */}
      <div style={{ display: 'flex', gap: '6px', marginBottom: '16px', padding: '4px', background: Tws.color.bg.secondary, borderRadius: '8px', border: `1px solid ${Tws.color.border.light}`, width: 'fit-content' }}>
        {subs.map(s => (
          <button key={s.id} onClick={() => !s.disabled && setSub(s.id)} disabled={s.disabled} style={{
            padding: '5px 14px', borderRadius: '5px', border: 'none',
            background: sub === s.id ? Tws.color.bg.card : 'transparent',
            color: s.disabled ? Tws.color.text.tertiary : sub === s.id ? rs.indigo : Tws.color.text.secondary,
            fontSize: '11px', fontWeight: sub === s.id ? 700 : 500, cursor: s.disabled ? 'not-allowed' : 'pointer',
            fontFamily: Tws.font.family, boxShadow: sub === s.id ? '0 1px 2px rgba(10,22,40,0.06)' : 'none',
            opacity: s.disabled ? 0.5 : 1,
          }}>{s.label}</button>
        ))}
      </div>

      {sub === 'grid' && <WorkspacesGrid data={data} onOpen={handleOpen} />}
      {sub === 'detail' && openWsId && <WorkspaceDetail data={data} wsId={openWsId} onBack={() => setSub('grid')} />}
      {sub === 'bundles' && <WorkspaceBundles data={data} onOpenWs={handleOpen} />}
      {sub === 'activity' && <WorkspaceActivity data={data} />}
    </div>
  );
}

window.ResearchWorkspace = ResearchWorkspace;