// COMMUNICATIONS PLATFORM — entry (header + 6 tabs)
const { useState: useCmPlatState } = React;
const Tcmpl = window.ArbiterTokens;

const CM_GROUPS = [
  { id: 'dashboard',  label: 'Dashboard' },
  { id: 'messenger',  label: 'Secure Messenger' },
  { id: 'inbox',      label: 'Unified Inbox' },
  { id: 'calls',      label: 'Calls' },
  { id: 'portal',     label: 'Client Portal' },
  { id: 'compliance', label: 'Compliance' },
];

function CommsPlatform() {
  const [activeGroup, setActiveGroup] = useCmPlatState('dashboard');
  const cm = window.__cm;
  const data = window.COMMS_DATA;
  const k = data.kpis;

  const renderContent = () => {
    switch (activeGroup) {
      case 'dashboard':  return <window.CommsDashboard />;
      case 'messenger':  return <window.CommsSecureMessenger />;
      case 'inbox':      return <window.CommsInbox />;
      case 'calls':      return <window.CommsCalls />;
      case 'portal':     return <window.CommsClientPortal />;
      case 'compliance': return <window.CommsCompliance />;
      default:           return <window.CommsDashboard />;
    }
  };

  return (
    <div style={cm.container}>
      <div style={cm.header}>
        <div style={cm.headerTitle}>
          <div style={cm.icon}></div>
          <div>
            <div style={cm.title}>Communications Platform</div>
            <div style={cm.subtitle}>Secure Messenger · Inbox · Calls · Client Portal · Compliance · All E2EE</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 12px', borderRadius: '8px', background: cm.cipherBg, border: `1px solid ${cm.cipherBorder}` }}>
            <span style={{ fontSize: '10px' }}></span>
            <span style={{ fontSize: '10px', fontWeight: 700, color: '#0F766E', textTransform: 'uppercase', letterSpacing: '0.06em' }}>E2EE active</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 12px', borderRadius: '8px', background: Tcmpl.color.bg.secondary, border: `1px solid ${Tcmpl.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Tcmpl.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Unread</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Tcmpl.color.text.primary, fontFamily: Tcmpl.font.mono }}>{k.emailsUnread + k.mentionsUnread}</span>
          </div>
          {k.mentionsUnread > 0 && (
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 12px', borderRadius: '8px', background: cm.crimsonBg, border: `1px solid ${cm.crimson}22` }}>
              <span style={{ fontSize: '10px', fontWeight: 600, color: cm.crimson, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Mentions</span>
              <span style={{ fontSize: '14px', fontWeight: 700, color: cm.crimson, fontFamily: Tcmpl.font.mono }}>{k.mentionsUnread}</span>
            </div>
          )}
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 12px', borderRadius: '8px', background: cm.tealBg, border: `1px solid ${cm.tealBorder}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: '#0F766E', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Holds</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: '#0F766E', fontFamily: Tcmpl.font.mono }}>{k.activeHolds}</span>
          </div>
          <button style={cm.btnPrimary}>+ New message</button>
        </div>
      </div>

      {/* PRIMARY TABS */}
      <div style={{ ...cm.tabs, overflowX: 'auto' }}>
        {CM_GROUPS.map(g => (
          <button key={g.id} onClick={() => setActiveGroup(g.id)}
            style={{ ...cm.tab, ...(activeGroup === g.id ? cm.tabActive : {}) }}>
            {g.label}
          </button>
        ))}
      </div>

      <div style={cm.body}>
        {renderContent()}
      </div>
    </div>
  );
}

window.CommsPlatform = CommsPlatform;