// NEXUS PLATFORM — entry (13 tabs)
const { useState: useNxPlatState } = React;
const Tnpl = window.ArbiterTokens;

function NexusPlatform() {
  const [activeTab, setActiveTab] = useNxPlatState('canvas');
  const nx = window.__nx;
  const data = window.NEXUS_DATA;
  const k = data.kpis;

  const tabs = [
    { id: 'canvas', label: 'Canvas ◆' },
    { id: 'graph', label: 'Graph' },
    { id: 'entities', label: 'Entities' },
    { id: 'documents', label: 'Documents' },
    { id: 'doc-chain', label: 'Doc Chain ◆' },
    { id: 'timeline', label: 'Timeline' },
    { id: 'chains', label: 'Chains' },
    { id: 'threads', label: 'Threads' },
    { id: 'patterns', label: 'Patterns' },
    { id: 'issues', label: 'Issues' },
    { id: 'witnesses', label: 'Witnesses' },
    { id: 'hypotheses', label: 'Hypotheses' },
    { id: 'matrix', label: 'Matrix' },
    { id: 'activity', label: 'Activity' },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'canvas': return <NexusCanvas data={data} />;
      case 'graph': return <NexusGraph data={data} />;
      case 'entities': return <NexusEntities data={data} />;
      case 'documents': return <NexusDocuments data={data} />;
      case 'doc-chain': return <NexusDocumentChain data={data} />;
      case 'timeline': return <NexusTimeline data={data} />;
      case 'chains': return <NexusChains data={data} />;
      case 'threads': return <NexusThreads data={data} />;
      case 'patterns': return <NexusPatterns data={data} />;
      case 'issues': return <NexusIssues data={data} />;
      case 'witnesses': return <NexusWitnesses data={data} />;
      case 'hypotheses': return <NexusHypotheses data={data} />;
      case 'matrix': return <NexusMatrix data={data} />;
      case 'activity': return <NexusActivity data={data} />;
      default: return <NexusCanvas data={data} />;
    }
  };

  return (
    <div style={nx.container}>
      <div style={nx.header}>
        <div style={nx.headerTitle}>
          <div style={nx.nxIcon}>{window.Icons && <window.Icons.Nexus size={16} color="#fff" strokeWidth={1.75} />}</div>
          <div>
            <div style={nx.title}>Nexus Platform</div>
            <div style={nx.subtitle}>Link anything to anything · Documents · Entities · Artifacts · Timelines · Threads · Hypotheses</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Tnpl.color.bg.secondary, border: `1px solid ${Tnpl.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Tnpl.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Entities</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Tnpl.color.text.primary, fontFamily: Tnpl.font.mono }}>{k.entitiesIndexed.toLocaleString()}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: nx.fuchsiaBg, border: `1px solid ${nx.fuchsiaBorder}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: nx.fuchsia, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Links</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: nx.fuchsia, fontFamily: Tnpl.font.mono }}>{k.linksActive.toLocaleString()}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: nx.orgBg, border: `1px solid ${nx.org}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: nx.org, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Threads</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: nx.org, fontFamily: Tnpl.font.mono }}>{k.threadsSaved}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: nx.eventBg, border: `1px solid ${nx.event}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: nx.event, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Patterns</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: nx.event, fontFamily: Tnpl.font.mono }}>{k.patternsDetected}</span>
          </div>
          <button style={nx.btnPrimary}>+ New thread</button>
        </div>
      </div>

      <div style={{ ...nx.tabs, overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)}
            style={{ ...nx.tab, ...(activeTab === t.id ? nx.tabActive : {}) }}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={nx.body}>
        {renderTab()}
      </div>
    </div>
  );
}

window.NexusPlatform = NexusPlatform;