// COMMUNICATIONS PLATFORM — shared tokens (teal "signal" accent · "the secure channel")
const Tcm = window.ArbiterTokens;

const cm = {
  // Accent — teal signal (trust, encryption, calm)
  teal:      '#0D9488',
  tealDeep:  '#0F766E',
  tealLight: '#5EEAD4',
  tealBg:    'rgba(13,148,136,0.08)',
  tealBorder:'rgba(13,148,136,0.22)',

  // Encryption-specific color (subtly distinct from teal for E2EE indicators)
  cipher:    '#14B8A6',
  cipherBg:  'rgba(20,184,166,0.10)',
  cipherBorder: 'rgba(20,184,166,0.30)',

  // Functional accents
  blue:    '#2563EB', blueBg:    'rgba(37,99,235,0.08)',
  emerald: '#059669', emeraldBg: 'rgba(5,150,105,0.08)',
  amber:   '#D97706', amberBg:   'rgba(217,119,6,0.08)',
  crimson: '#B91C1C', crimsonBg: 'rgba(185,28,28,0.08)',
  violet:  '#7C3AED', violetBg:  'rgba(124,58,237,0.08)',
  slate:   '#64748B', slateBg:   'rgba(100,116,139,0.06)',
  pink:    '#DB2777', pinkBg:    'rgba(219,39,119,0.08)',

  // Presence
  presence: {
    active:  '#059669',
    away:    '#D97706',
    dnd:     '#B91C1C',
    offline: '#94A3B8',
  },

  container: { flex: 1, overflow: 'auto', background: Tcm.color.bg.primary },
  header: {
    padding: '16px 24px', borderBottom: `1px solid ${Tcm.color.border.light}`,
    background: Tcm.color.bg.card, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    flexShrink: 0,
  },
  headerTitle: { display: 'flex', alignItems: 'center', gap: '12px' },
  icon: {
    width: '32px', height: '32px', borderRadius: '6px',
    background: 'linear-gradient(135deg, #0D9488 0%, #0F766E 100%)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontSize: '16px', fontWeight: 700, color: '#fff',
  },
  title: { fontSize: '18px', fontWeight: 700, color: Tcm.color.text.primary, letterSpacing: '-0.02em' },
  subtitle: { fontSize: '12px', color: Tcm.color.text.tertiary, marginTop: '1px' },

  tabs: {
    display: 'flex', gap: '0', borderBottom: `1px solid ${Tcm.color.border.light}`,
    background: Tcm.color.bg.secondary, padding: '0 24px',
    flexShrink: 0,
  },
  tab: {
    padding: '10px 16px', fontSize: '12px', fontWeight: 500,
    color: Tcm.color.text.tertiary, cursor: 'pointer', border: 'none', background: 'none',
    borderBottom: '2px solid transparent', fontFamily: Tcm.font.family,
    transition: 'all 0.15s', marginBottom: '-1px', whiteSpace: 'nowrap',
  },
  tabActive: { color: '#0F766E', borderBottom: '2px solid #0F766E', fontWeight: 600 },
  body: { padding: '20px 24px' },

  // Layout helpers
  stripKpi: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(160px, 100%), 1fr))', gap: '10px', marginBottom: '16px' },
  cardGrid: (min) => ({ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}px, 100%), 1fr))`, gap: '12px' }),
  split: (min) => ({ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(min(${min}px, 100%), 1fr))`, gap: '16px' }),

  // Cards
  card: {
    background: Tcm.color.bg.card, border: `1px solid ${Tcm.color.border.light}`,
    borderRadius: Tcm.radius.lg, overflow: 'hidden', marginBottom: '16px',
  },
  cardH: {
    padding: '10px 16px', borderBottom: `1px solid ${Tcm.color.border.light}`,
    fontSize: '12px', fontWeight: 600, color: Tcm.color.text.primary,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px',
  },
  cardBody: { padding: '16px' },
  sectionLabel: { fontSize: '10px', fontWeight: 700, color: Tcm.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: '8px' },

  // Stats
  stat: { display: 'flex', flexDirection: 'column', gap: '2px', padding: '12px 16px', background: Tcm.color.bg.secondary, borderRadius: '6px', border: `1px solid ${Tcm.color.border.light}` },
  statLabel: { fontSize: '10px', fontWeight: 600, color: Tcm.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em' },
  statValue: { fontSize: '22px', fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.1, color: Tcm.color.text.primary },
  statDelta: { fontSize: '10px', fontWeight: 500, marginTop: '2px' },

  // Form
  input: {
    padding: '8px 12px', borderRadius: '6px', border: `1px solid ${Tcm.color.border.medium}`,
    fontSize: '12px', color: Tcm.color.text.primary, background: Tcm.color.bg.card,
    fontFamily: Tcm.font.family, outline: 'none', width: '100%', boxSizing: 'border-box',
  },
  inputMono: {
    padding: '8px 12px', borderRadius: '6px', border: `1px solid ${Tcm.color.border.medium}`,
    fontSize: '11px', color: Tcm.color.text.primary, background: Tcm.color.bg.secondary,
    fontFamily: Tcm.font.mono, outline: 'none', width: '100%', boxSizing: 'border-box',
    letterSpacing: '0.02em',
  },
  select: {
    padding: '8px 12px', borderRadius: '6px', border: `1px solid ${Tcm.color.border.medium}`,
    fontSize: '12px', color: Tcm.color.text.primary, background: Tcm.color.bg.card,
    fontFamily: Tcm.font.family, outline: 'none', width: '100%', cursor: 'pointer',
  },

  // Buttons
  btnPrimary: { padding: '7px 14px', borderRadius: '6px', background: '#0F766E', border: 'none', color: '#fff', fontSize: '12px', fontWeight: 700, cursor: 'pointer', fontFamily: Tcm.font.family, whiteSpace: 'nowrap' },
  btnSecondary: { padding: '6px 12px', borderRadius: '6px', border: `1px solid ${Tcm.color.border.medium}`, background: Tcm.color.bg.card, fontSize: '11px', fontWeight: 600, color: Tcm.color.text.secondary, cursor: 'pointer', fontFamily: Tcm.font.family, whiteSpace: 'nowrap' },
  btnGhost: { padding: '4px 10px', borderRadius: '5px', border: 'none', background: 'transparent', fontSize: '11px', fontWeight: 500, color: '#0F766E', cursor: 'pointer', fontFamily: Tcm.font.family },
  btnDanger: { padding: '6px 12px', borderRadius: '6px', border: `1px solid rgba(185,28,28,0.3)`, background: 'rgba(185,28,28,0.06)', fontSize: '11px', fontWeight: 600, color: '#B91C1C', cursor: 'pointer', fontFamily: Tcm.font.family },

  // Tag / pill
  tag: { display: 'inline-flex', alignItems: 'center', padding: '2px 8px', borderRadius: '10px', fontSize: '10px', fontWeight: 600 },
  pill: { display: 'inline-flex', alignItems: 'center', padding: '3px 10px', borderRadius: '12px', fontSize: '11px', fontWeight: 500, gap: '4px' },

  // Table
  tableWrap: { overflowX: 'auto' },
  tableFixed: { width: '100%', borderCollapse: 'collapse', fontSize: '12px' },
  th: { fontSize: '10px', fontWeight: 600, color: Tcm.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '8px 12px', textAlign: 'left', background: Tcm.color.bg.secondary, borderBottom: `1px solid ${Tcm.color.border.light}`, whiteSpace: 'nowrap' },
  td: { fontSize: '12px', color: Tcm.color.text.primary, padding: '10px 12px', borderBottom: `1px solid ${Tcm.color.border.light}`, verticalAlign: 'middle' },

  // Status pills
  statusPill: (kind) => {
    const map = {
      ok:       { bg: 'rgba(5,150,105,0.10)',  color: '#059669' },
      warn:     { bg: 'rgba(217,119,6,0.10)',  color: '#D97706' },
      fail:     { bg: 'rgba(185,28,28,0.10)',  color: '#B91C1C' },
      pending:  { bg: 'rgba(71,85,105,0.08)',  color: '#475569' },
      info:     { bg: 'rgba(37,99,235,0.10)',  color: '#2563EB' },
      e2ee:     { bg: 'rgba(20,184,166,0.10)', color: '#0F766E' },
      cipher:   { bg: 'rgba(20,184,166,0.10)', color: '#14B8A6' },
      beta:     { bg: 'rgba(124,58,237,0.10)', color: '#7C3AED' },
    };
    return { ...map[kind] || map.pending };
  },

  // Presence dot
  presenceDot: (status) => ({
    width: '8px', height: '8px', borderRadius: '50%',
    background: cm.presence[status] || cm.presence.offline,
    display: 'inline-block', flexShrink: 0,
    boxShadow: '0 0 0 2px #fff',
  }),

  // Avatar
  avatar: (initials, size = 32, color = '#0F766E') => ({
    width: `${size}px`, height: `${size}px`, borderRadius: '50%',
    background: color, color: '#fff',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    fontSize: `${Math.round(size * 0.38)}px`, fontWeight: 700, flexShrink: 0,
    fontFamily: Tcm.font.family, letterSpacing: '0.02em',
    initials,
  }),

  num: (n) => n == null ? '—' : n.toLocaleString(),

  // Format helpers
  formatTime: (iso) => {
    try {
      const d = new Date(iso);
      const now = new Date();
      const dayMs = 24 * 60 * 60 * 1000;
      const diff = now - d;
      if (diff < 60000) return 'just now';
      if (diff < 3600000) return `${Math.floor(diff / 60000)}m`;
      if (diff < dayMs) return `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
      if (diff < 7 * dayMs) return ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()];
      return `${d.getMonth()+1}/${d.getDate()}`;
    } catch { return iso; }
  },
};

function CmRow({ label, hint, children }) {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '1fr auto', gap: '14px', alignItems: 'center',
      padding: '12px 16px', borderBottom: `1px solid ${Tcm.color.border.light}`,
    }}>
      <div>
        <div style={{ fontSize: '13px', fontWeight: 600, color: Tcm.color.text.primary }}>{label}</div>
        {hint && <div style={{ fontSize: '11px', color: Tcm.color.text.tertiary, marginTop: '2px', lineHeight: 1.5 }}>{hint}</div>}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>{children}</div>
    </div>
  );
}

function CmSectionCard({ title, action, children }) {
  return (
    <div style={cm.card}>
      <div style={cm.cardH}>
        <span>{title}</span>
        {action}
      </div>
      <div>{children}</div>
    </div>
  );
}

// E2EE lock chip — reusable across Messenger/Calls/Portal
function CmLockChip({ text = 'End-to-end encrypted', size = 'sm' }) {
  const fs = size === 'sm' ? '10px' : '11px';
  const pad = size === 'sm' ? '2px 8px' : '4px 10px';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: '4px',
      padding: pad, borderRadius: '10px',
      background: cm.cipherBg, color: cm.tealDeep,
      fontSize: fs, fontWeight: 700,
      border: `1px solid ${cm.cipherBorder}`,
      fontFamily: Tcm.font.family,
    }}>
      <span style={{ fontSize: '10px' }}></span>
      {text}
    </span>
  );
}

window.__cm = cm;
window.CmRow = CmRow;
window.CmSectionCard = CmSectionCard;
window.CmLockChip = CmLockChip;