// STUDIO — Canvas tab (improvements 1–6: tracked changes, outline nav, health score, bates, presence, timer)
const { useState: useStCv } = React;
const TspCv = window.ArbiterTokens;

function StudioCanvas() {
  const st = window.__st;
  const data = window.STUDIO_DATA;
  const [mode, setMode]                   = useStCv('normal');
  const [rightTab, setRightTab]           = useStCv('context');
  const [activeDoc, setActiveDoc]         = useStCv(0);
  const [sharedComments, setSharedComments] = useStCv([]);
  const [editorStats, setEditorStats]     = useStCv({ words: 8420, chars: 42100, pages: 12 });

  const docs = data.drafts.slice(0, 5);
  const doc  = docs[activeDoc];

  const presence = [
    { ini: 'SC', color: '#1D4ED8', name: 'S. Chen',  where: 'Editing §III' },
    { ini: 'JW', color: '#059669', name: 'J. Walsh', where: 'Reading comments' },
  ];

  const outline = [
    { id: 'prelim', level: 1, title: 'Preliminary Statement',       words: 580,  comments: 0 },
    { id: 's1',     level: 1, title: 'I. Factual Background',        words: 1240, comments: 1 },
    { id: 's2',     level: 1, title: 'II. Legal Standard',           words: 890,  comments: 0 },
    { id: 's3',     level: 1, title: 'III. Argument',                words: 2840, comments: 2 },
    { id: 's3a',    level: 2, title: 'A. Failure to Produce',        words: 980,  comments: 1 },
    { id: 's3b',    level: 2, title: "B. Objections Lack Merit",     words: 1120, comments: 0 },
    { id: 's3c',    level: 2, title: 'C. Sanctions Warranted',       words: 740,  comments: 1 },
    { id: 's4',     level: 1, title: 'IV. Conclusion',               words: 870,  comments: 0 },
  ];

  const healthChecks = [
    { label: 'All required sections present',  ok: true,  warn: false, pts: 20 },
    { label: 'Citations verified (12/12)',      ok: true,  warn: false, pts: 20 },
    { label: 'No overruled case law detected',  ok: true,  warn: false, pts: 15 },
    { label: 'Metadata scrubbed',              ok: true,  warn: false, pts: 15 },
    { label: 'Bates stamp applied',            ok: true,  warn: false, pts: 10 },
    { label: '2 placeholder fields remain',    ok: false, warn: false, pts: -5  },
    { label: '1 unresolved comment',           ok: false, warn: false, pts: -5  },
    { label: 'Partner sign-off pending',       ok: false, warn: true,  pts:  0  },
  ];
  const healthScore = healthChecks.filter(h => h.ok).reduce((s, h) => s + h.pts, 0);

  const integrations = [
    { id: 'westlaw',    name: 'Westlaw',        cat: 'Research',   icon: '◈', status: 'connected',  detail: '3 citations linked',   action: 'View'    },
    { id: 'imanage',    name: 'iManage',        cat: 'DMS',        icon: '▦', status: 'connected',  detail: 'v1.8 synced',          action: 'Open'    },
    { id: 'clio',       name: 'Clio',           cat: 'Matter',     icon: '⊟', status: 'connected',  detail: 'Matter #4421 linked',  action: 'View'    },
    { id: 'docusign',   name: 'DocuSign',       cat: 'eSignature', icon: '◇', status: 'connected',  detail: '2 envelopes active',   action: 'Manage'  },
    { id: 'netdocs',    name: 'NetDocuments',   cat: 'DMS',        icon: '▤', status: 'connected',  detail: 'Auto-backup on',       action: 'Sync'    },
    { id: 'lexis',      name: 'LexisNexis',     cat: 'Research',   icon: '◈', status: 'available',  detail: '12 citations ready',   action: 'Link'    },
    { id: 'relativity', name: 'Relativity',     cat: 'eDiscovery', icon: '⟐', status: 'available',  detail: 'PROD-003 indexed',     action: 'Browse'  },
    { id: 'cmecf',      name: 'CM/ECF',         cat: 'e-Filing',   icon: '▶', status: 'available',  detail: 'SDNY · doc ready',     action: 'File'    },
    { id: 'everlaw',    name: 'Everlaw',        cat: 'eDiscovery', icon: '◉', status: 'available',  detail: '1,847 docs linked',    action: 'Search'  },
    { id: 'outlook',    name: 'Outlook',        cat: 'Calendar',   icon: '▦', status: 'available',  detail: 'Apr 25 synced',        action: 'Sync'    },
    { id: 'teams',      name: 'MS Teams',       cat: 'Collab',     icon: '◎', status: 'inactive',   detail: 'Share to channel',     action: 'Connect' },
    { id: 'slack',      name: 'Slack',          cat: 'Notify',     icon: '⊞', status: 'inactive',   detail: 'Notify on publish',    action: 'Connect' },
    { id: 'adobesign',  name: 'Adobe Sign',     cat: 'eSignature', icon: '•', status: 'inactive',   detail: 'Alt. signing flow',    action: 'Connect' },
    { id: 'powerauto',  name: 'Power Automate', cat: 'Workflow',   icon: '◆', status: 'inactive',   detail: 'Trigger review flow',  action: 'Connect' },
    { id: 'zoom',       name: 'Zoom',           cat: 'Meetings',   icon: '◉', status: 'inactive',   detail: 'Schedule review call', action: 'Connect' },
  ];
  const intColor = { connected: '#059669', available: st.gold, inactive: TspCv.color.text.tertiary };

  const cols = mode === 'outline' ? '188px 1fr 252px' : '1fr 252px';

  const activeCommentCount = 3 + sharedComments.filter(c => !c.resolved).length;

  return (
    <div style={{ display: 'grid', gridTemplateColumns: cols, gap: '14px', alignItems: 'start' }}>

      {/* ── Outline navigator ─────────────────────────────────────── */}
      {mode === 'outline' && (
        <div style={{ ...st.card, marginBottom: 0 }}>
          <div style={st.cardH}>
            <span>Outline</span>
            <span style={{ fontSize: '10px', color: TspCv.color.text.tertiary, fontFamily: TspCv.font.mono }}>{editorStats.words.toLocaleString()}w</span>
          </div>
          {outline.map((o, i) => (
            <div key={o.id} style={{
              padding: `8px ${o.level === 2 ? '10px' : '14px'} 8px ${o.level === 2 ? '26px' : '14px'}`,
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
              borderBottom: i < outline.length - 1 ? `1px solid ${TspCv.color.border.light}` : 'none',
              borderLeft: o.level === 2 ? `2px solid ${TspCv.color.border.light}` : 'none',
              background: 'transparent',
            }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: o.level === 1 ? '11px' : '10px', fontWeight: o.level === 1 ? 600 : 400, color: TspCv.color.text.primary, lineHeight: 1.3 }}>{o.title}</div>
                <div style={{ fontSize: '10px', color: TspCv.color.text.tertiary, fontFamily: TspCv.font.mono }}>{o.words.toLocaleString()}w</div>
              </div>
              {o.comments > 0 && <span style={{ fontSize: '10px', color: st.amber, fontWeight: 700 }}>◉{o.comments}</span>}
            </div>
          ))}
          <div style={{ padding: '10px 12px', borderTop: `1px solid ${TspCv.color.border.light}` }}>
            <button style={{ ...st.btnSecondary, width: '100%', fontSize: '11px' }}>+ Insert Section</button>
          </div>
        </div>
      )}

      {/* ── Document column ────────────────────────────────────────── */}
      <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>

        {/* Title bar + presence */}
        <div style={{ background: TspCv.color.bg.card, border: `1px solid ${TspCv.color.border.light}`, borderRadius: `${TspCv.radius.lg} ${TspCv.radius.lg} 0 0`, padding: '7px 14px', display: 'flex', alignItems: 'center', gap: '10px' }}>
          <span style={{ fontSize: '12px', fontWeight: 600, color: TspCv.color.text.primary, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{doc.title}</span>
          <span style={{ ...st.tag, ...st.docStatusColor(doc.status) }}>{doc.status}</span>
          {/* Presence avatars */}
          <div style={{ display: 'flex', alignItems: 'center', gap: '0' }}>
            {presence.map((p, i) => (
              <div key={p.ini} title={`${p.name} — ${p.where}`}
                style={{ width: '22px', height: '22px', borderRadius: '50%', background: `${p.color}22`, border: `2px solid ${p.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '8px', fontWeight: 700, color: p.color, marginLeft: i > 0 ? '-4px' : '0', position: 'relative', zIndex: 10 - i, cursor: 'default' }}>
                {p.ini}
              </div>
            ))}
            <span style={{ marginLeft: '7px', fontSize: '10px', color: TspCv.color.text.tertiary }}>+2 viewing</span>
          </div>
          <span style={{ fontSize: '10px', color: TspCv.color.text.tertiary }}>v1.8 · Saved 2m ago</span>
        </div>

        {/* Word processor */}
        <StudioEditor
          doc={doc}
          mode={mode}
          onModeChange={setMode}
          onCommentAdd={(c) => setSharedComments(prev => [...prev, c])}
          onStatsUpdate={(s) => setEditorStats(s)}
        />
      </div>

      {/* ── Right panel ────────────────────────────────────────────── */}
      <div>
        {/* Tab selector */}
        <div style={{ background: TspCv.color.bg.card, border: `1px solid ${TspCv.color.border.light}`, borderRadius: `${TspCv.radius.lg} ${TspCv.radius.lg} 0 0`, borderBottom: 'none', display: 'flex' }}>
          {[['context', 'Matter'], ['health', ''], ['sources', 'Src'], ['ai', 'AI'], ['comments', `◉${activeCommentCount}`], ['integrations', '⊞']].map(([id, label]) => (
            <button key={id} onClick={() => setRightTab(id)}
              style={{ flex: 1, padding: '7px 2px', fontSize: '10px', fontWeight: 500, cursor: 'pointer', border: 'none', background: rightTab === id ? st.goldBg : 'transparent', color: rightTab === id ? st.gold : TspCv.color.text.tertiary, borderBottom: rightTab === id ? `2px solid ${st.gold}` : '2px solid transparent', fontFamily: TspCv.font.family, transition: 'all 0.12s' }}>
              {label}
            </button>
          ))}
        </div>
        <div style={{ background: TspCv.color.bg.card, border: `1px solid ${TspCv.color.border.light}`, borderTop: 'none', borderRadius: `0 0 ${TspCv.radius.lg} ${TspCv.radius.lg}` }}>

          {/* Matter */}
          {rightTab === 'context' && (
            <div style={{ padding: '12px 14px' }}>
              <div style={{ fontSize: '12px', fontWeight: 600, color: TspCv.color.text.primary, marginBottom: '2px', lineHeight: 1.4 }}>Meridian Oil Corp v. Coastal Energy LLC</div>
              <div style={{ fontSize: '11px', color: TspCv.color.text.tertiary, marginBottom: '10px' }}>#4421 · Commercial Litigation</div>
              {[['Phase', 'Discovery'], ['Filing Deadline', 'Apr 25, 2026'], ['Court', 'SDNY'], ['Partner', 'M. Kirkland'], ['Budget Left', '$48,200']].map(([k, v]) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '7px', paddingBottom: '7px', borderBottom: `1px solid ${TspCv.color.border.light}` }}>
                  <span style={{ fontSize: '11px', color: TspCv.color.text.tertiary }}>{k}</span>
                  <span style={{ fontSize: '11px', fontWeight: 500, color: TspCv.color.text.primary }}>{v}</span>
                </div>
              ))}
              <button style={{ ...st.btnSecondary, width: '100%', fontSize: '11px' }}>Open Matter →</button>
            </div>
          )}

          {/* Health score */}
          {rightTab === 'health' && (
            <div style={{ padding: '12px 14px' }}>
              <div style={{ textAlign: 'center', padding: '12px', background: TspCv.color.bg.secondary, borderRadius: '8px', marginBottom: '12px' }}>
                <div style={{ fontSize: '42px', fontWeight: 700, fontFamily: TspCv.font.mono, lineHeight: 1, color: healthScore >= 80 ? st.emerald : healthScore >= 60 ? st.amber : st.crimson }}>{healthScore}</div>
                <div style={{ fontSize: '10px', color: TspCv.color.text.tertiary, marginTop: '3px', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Document Health</div>
                <div style={{ height: '5px', borderRadius: '3px', background: TspCv.color.border.light, marginTop: '8px', overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${healthScore}%`, background: healthScore >= 80 ? st.emerald : healthScore >= 60 ? st.amber : st.crimson, borderRadius: '3px' }} />
                </div>
              </div>
              {healthChecks.map((h, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: '6px', marginBottom: '7px' }}>
                  <span style={{ fontSize: '11px', fontWeight: 700, color: h.ok ? st.emerald : h.warn ? st.amber : st.crimson, flexShrink: 0 }}>{h.ok ? 'ok' : h.warn ? '!' : 'x'}</span>
                  <span style={{ fontSize: '11px', color: TspCv.color.text.secondary, lineHeight: 1.4, flex: 1 }}>{h.label}</span>
                  {!h.ok && !h.warn && <span style={{ fontSize: '10px', color: st.crimson, fontFamily: TspCv.font.mono, fontWeight: 600 }}>{h.pts}</span>}
                </div>
              ))}
              {/* Document statistics */}
              <div style={{ marginTop: '8px', marginBottom: '8px', padding: '8px 10px', background: TspCv.color.bg.secondary, borderRadius: '6px' }}>
                <div style={{ fontSize: '10px', fontWeight: 600, color: TspCv.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: '6px' }}>Document Statistics</div>
                {[['Words', editorStats.words.toLocaleString()], ['Characters', editorStats.chars.toLocaleString()], ['Pages', '~' + Math.ceil(editorStats.words / 500)], ['Reading Time', '~' + Math.ceil(editorStats.words / 238) + ' min']].map(([k, v]) => (
                  <div key={k} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
                    <span style={{ fontSize: '11px', color: TspCv.color.text.secondary }}>{k}</span>
                    <span style={{ fontSize: '11px', fontWeight: 600, color: TspCv.color.text.primary, fontFamily: TspCv.font.mono }}>{v}</span>
                  </div>
                ))}
              </div>
              <button style={{ ...st.btnPrimary, width: '100%', fontSize: '11px' }}>Fix Issues →</button>
            </div>
          )}

          {/* Sources quick */}
          {rightTab === 'sources' && (
            <div style={{ padding: '8px' }}>
              {[
                { icon: '◈', label: 'Twombly — Plausibility', src: 'Research', c: '#7C3AED' },
                { icon: '⟐', label: 'PROD-003 · 1,847 docs',  src: 'ESI',      c: '#0891B2' },
                { icon: '◉', label: 'EXH-047, EXH-048',       src: 'Evidence', c: '#EA580C' },
                { icon: '▦', label: 'Filing: Apr 25',          src: 'Calendar', c: '#65A30D' },
                { icon: '•', label: 'Filing wf ready',         src: 'Auto',     c: '#C9A84C' },
              ].map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '7px', padding: '6px 8px', borderRadius: '5px', marginBottom: '3px', background: TspCv.color.bg.secondary }}>
                  <span style={{ color: s.c, fontSize: '12px', flexShrink: 0 }}>{s.icon}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '11px', fontWeight: 500, color: TspCv.color.text.primary, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{s.label}</div>
                    <div style={{ fontSize: '10px', color: TspCv.color.text.tertiary }}>{s.src}</div>
                  </div>
                  <button style={{ ...st.btnGhost, padding: '1px 5px', fontSize: '10px' }}>→</button>
                </div>
              ))}
              <button style={{ ...st.btnSecondary, width: 'calc(100% - 16px)', margin: '6px 8px 4px', fontSize: '11px' }}>Full Sources Tab →</button>
            </div>
          )}

          {/* AI */}
          {rightTab === 'ai' && (
            <div style={{ padding: '10px 12px' }}>
              {['Cite Ashcroft v. Iqbal for §I plausibility standard', 'Add table of contents — doc exceeds 10 pages', 'Footnote 7: case may be reversed — verify'].map((s, i) => (
                <div key={i} style={{ marginBottom: '7px', padding: '7px 9px', background: st.goldBg, borderRadius: '5px', border: `1px solid ${st.goldBorder}` }}>
                  <div style={{ fontSize: '11px', color: TspCv.color.text.primary, lineHeight: 1.5, marginBottom: '3px' }}>{s}</div>
                  <button style={{ ...st.btnGhost, padding: '1px 5px', fontSize: '10px' }}>Apply →</button>
                </div>
              ))}
              <div style={{ marginTop: '8px', padding: '10px', background: TspCv.color.bg.secondary, borderRadius: '6px' }}>
                <div style={{ fontSize: '11px', color: TspCv.color.text.secondary, marginBottom: '6px' }}>Ask AI to write a section...</div>
                <button style={{ ...st.btnPrimary, width: '100%', fontSize: '11px' }}>◈ Draft with AI</button>
              </div>
            </div>
          )}

          {/* Comments */}
          {rightTab === 'comments' && (
            <div style={{ padding: '8px 12px' }}>
              {/* Inline comments from editor */}
              {sharedComments.map((c, i) => (
                <div key={'sc-' + i} style={{ marginBottom: '10px', padding: '8px 10px', borderRadius: '6px', background: c.resolved ? TspCv.color.bg.secondary : TspCv.color.bg.card, border: `1px solid ${c.resolved ? TspCv.color.border.light : st.goldBorder}`, opacity: c.resolved ? 0.6 : 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
                    <div style={{ width: '18px', height: '18px', borderRadius: '50%', background: st.goldBg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '8px', fontWeight: 700, color: st.gold }}>ME</div>
                    <span style={{ fontSize: '10px', color: TspCv.color.text.tertiary }}>just now</span>
                    <span style={{ marginLeft: 'auto', fontSize: '9px', color: st.cobalt, fontWeight: 600 }}>inline</span>
                  </div>
                  <div style={{ fontSize: '11px', color: TspCv.color.text.primary, lineHeight: 1.5 }}>
                    <span style={{ fontStyle: 'italic', color: TspCv.color.text.tertiary }}>"{c.selectedText}"</span>
                    {c.note && <div style={{ marginTop: '3px' }}>{c.note}</div>}
                  </div>
                </div>
              ))}
              {/* Hardcoded thread comments */}
              {[
                { ini: 'JW', comment: 'Strengthen proportionality — Coastal will cite Rule 26(b)(1)', time: '1h', resolved: false },
                { ini: 'SC', comment: 'Missing cert. of conference per Local Rule 37.2',              time: '2h', resolved: false },
                { ini: 'MK', comment: "Add Coastal's Oct 2025 letter as Exhibit A",                   time: '3h', resolved: true },
              ].map((c, i) => (
                <div key={i} style={{ marginBottom: '10px', padding: '8px 10px', borderRadius: '6px', background: c.resolved ? TspCv.color.bg.secondary : TspCv.color.bg.card, border: `1px solid ${c.resolved ? TspCv.color.border.light : st.goldBorder}`, opacity: c.resolved ? 0.6 : 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '4px' }}>
                    <div style={{ width: '18px', height: '18px', borderRadius: '50%', background: st.goldBg, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '8px', fontWeight: 700, color: st.gold }}>{c.ini}</div>
                    <span style={{ fontSize: '10px', color: TspCv.color.text.tertiary }}>{c.time} ago</span>
                    {c.resolved && <span style={{ marginLeft: 'auto', fontSize: '9px', color: st.emerald, fontWeight: 600 }}>ok Resolved</span>}
                  </div>
                  <div style={{ fontSize: '11px', color: TspCv.color.text.primary, lineHeight: 1.5 }}>{c.comment}</div>
                  {!c.resolved && (
                    <div style={{ marginTop: '5px', display: 'flex', gap: '5px' }}>
                      <button style={{ ...st.btnGhost, fontSize: '10px', padding: '1px 6px' }}>Reply</button>
                      <button style={{ ...st.btnGhost, fontSize: '10px', padding: '1px 6px', color: st.emerald }}>Resolve</button>
                    </div>
                  )}
                </div>
              ))}
              <button style={{ ...st.btnSecondary, width: '100%', fontSize: '11px' }}>+ Add Comment</button>
            </div>
          )}

          {/* Integrations */}
          {rightTab === 'integrations' && (
            <div style={{ padding: '8px 10px' }}>
              {/* Summary strip */}
              <div style={{ display: 'flex', gap: '6px', marginBottom: '10px' }}>
                {[['connected', 'Connected', integrations.filter(x => x.status === 'connected').length],
                  ['available', 'Available', integrations.filter(x => x.status === 'available').length],
                  ['inactive',  'Inactive',  integrations.filter(x => x.status === 'inactive').length]].map(([s, label, n]) => (
                  <div key={s} style={{ flex: 1, textAlign: 'center', padding: '5px 2px', borderRadius: '6px', background: s === 'connected' ? 'rgba(5,150,105,0.07)' : s === 'available' ? st.goldBg : TspCv.color.bg.secondary, border: `1px solid ${s === 'connected' ? 'rgba(5,150,105,0.2)' : s === 'available' ? st.goldBorder : TspCv.color.border.light}` }}>
                    <div style={{ fontSize: '15px', fontWeight: 700, fontFamily: TspCv.font.mono, color: intColor[s], lineHeight: 1 }}>{n}</div>
                    <div style={{ fontSize: '9px', color: TspCv.color.text.tertiary, marginTop: '2px' }}>{label}</div>
                  </div>
                ))}
              </div>

              {/* Group: Connected */}
              <div style={{ fontSize: '9px', fontWeight: 700, color: '#059669', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '4px', paddingLeft: '2px' }}>● Connected</div>
              {integrations.filter(x => x.status === 'connected').map(itg => (
                <div key={itg.id} style={{ display: 'flex', alignItems: 'center', gap: '7px', padding: '6px 8px', borderRadius: '5px', marginBottom: '3px', background: 'rgba(5,150,105,0.04)', border: '1px solid rgba(5,150,105,0.14)' }}>
                  <span style={{ fontSize: '13px', color: '#059669', flexShrink: 0, width: '16px', textAlign: 'center' }}>{itg.icon}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '11px', fontWeight: 600, color: TspCv.color.text.primary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{itg.name}</div>
                    <div style={{ fontSize: '9px', color: TspCv.color.text.tertiary }}>{itg.cat} · {itg.detail}</div>
                  </div>
                  <button style={{ ...st.btnGhost, fontSize: '9px', padding: '2px 6px', color: '#059669', flexShrink: 0 }}>{itg.action}</button>
                </div>
              ))}

              {/* Group: Available */}
              <div style={{ fontSize: '9px', fontWeight: 700, color: st.goldDeep, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '8px 0 4px 2px' }}>◆ Available</div>
              {integrations.filter(x => x.status === 'available').map(itg => (
                <div key={itg.id} style={{ display: 'flex', alignItems: 'center', gap: '7px', padding: '6px 8px', borderRadius: '5px', marginBottom: '3px', background: st.goldBg, border: `1px solid ${st.goldBorder}` }}>
                  <span style={{ fontSize: '13px', color: st.gold, flexShrink: 0, width: '16px', textAlign: 'center' }}>{itg.icon}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '11px', fontWeight: 600, color: TspCv.color.text.primary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{itg.name}</div>
                    <div style={{ fontSize: '9px', color: TspCv.color.text.tertiary }}>{itg.cat} · {itg.detail}</div>
                  </div>
                  <button style={{ ...st.btnPrimary, fontSize: '9px', padding: '2px 6px', flexShrink: 0 }}>{itg.action}</button>
                </div>
              ))}

              {/* Group: Inactive */}
              <div style={{ fontSize: '9px', fontWeight: 700, color: TspCv.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', margin: '8px 0 4px 2px' }}>○ Not Connected</div>
              {integrations.filter(x => x.status === 'inactive').map(itg => (
                <div key={itg.id} style={{ display: 'flex', alignItems: 'center', gap: '7px', padding: '6px 8px', borderRadius: '5px', marginBottom: '3px', background: TspCv.color.bg.secondary, border: `1px solid ${TspCv.color.border.light}` }}>
                  <span style={{ fontSize: '13px', color: TspCv.color.text.tertiary, flexShrink: 0, width: '16px', textAlign: 'center' }}>{itg.icon}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: '11px', fontWeight: 500, color: TspCv.color.text.secondary, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{itg.name}</div>
                    <div style={{ fontSize: '9px', color: TspCv.color.text.tertiary }}>{itg.cat} · {itg.detail}</div>
                  </div>
                  <button style={{ ...st.btnSecondary, fontSize: '9px', padding: '2px 6px', flexShrink: 0 }}>{itg.action}</button>
                </div>
              ))}

              <button style={{ ...st.btnSecondary, width: '100%', marginTop: '8px', fontSize: '11px' }}>⊞ Manage Integrations</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

window.StudioCanvas = StudioCanvas;