// COMMUNICATIONS PLATFORM — Compliance (retention, legal holds, recording consent)
function CommsCompliance() {
  const cm = window.__cm;
  const Tc = window.ArbiterTokens;
  const data = window.COMMS_DATA;
  const personById = Object.fromEntries(data.people.map(p => [p.id, p]));

  const kpis = [
    { label: 'Retention policies',  value: data.policies.length },
    { label: 'Active legal holds',  value: data.holds.filter(h => h.status === 'active').length, hint: `${data.holds.length} total` },
    { label: 'E2EE coverage',       value: '100%' },
    { label: 'Consented recordings', value: data.calls.filter(c => c.recorded && c.consent === 'opt-in').length },
  ];

  return (
    <div>
      <div style={cm.stripKpi}>
        {kpis.map(k => (
          <div key={k.label} style={cm.stat}>
            <div style={cm.statLabel}>{k.label}</div>
            <div style={cm.statValue}>{k.value}</div>
            {k.hint && <div style={{ ...cm.statDelta, color: Tc.color.text.tertiary }}>{k.hint}</div>}
          </div>
        ))}
      </div>

      {/* Posture band */}
      <div style={{
        ...cm.card,
        background: cm.tealBg,
        border: `1px solid ${cm.tealBorder}`,
      }}>
        <div style={{ padding: '14px 16px', display: 'flex', gap: '14px', alignItems: 'flex-start' }}>
          <div style={{ fontSize: '28px' }}></div>
          <div>
            <div style={{ fontSize: '13px', fontWeight: 700, color: '#0F766E', marginBottom: '4px' }}>
              Legal-grade comms posture · defensible by design
            </div>
            <div style={{ fontSize: '11px', color: Tc.color.text.secondary, lineHeight: 1.6 }}>
              All channels, DMs, email, calls, and portal rooms are end-to-end encrypted with device-bound keys.
              Retention is policy-driven per matter type. Legal holds immutably preserve communications for discovery.
              Recording consent is captured per-session per-jurisdiction. Full audit trail preserved in tamper-evident log.
            </div>
          </div>
        </div>
      </div>

      {/* Retention policies */}
      <CmSectionCard title="Retention policies" action={<button style={cm.btnPrimary}>+ Policy</button>}>
        <div style={cm.tableWrap}>
          <table style={cm.tableFixed}>
            <thead>
              <tr>
                <th style={cm.th}>Policy</th>
                <th style={cm.th}>Applies to</th>
                <th style={cm.th}>Retention</th>
                <th style={cm.th}>Hold</th>
                <th style={cm.th}>Encryption</th>
                <th style={cm.th}>Legal basis</th>
              </tr>
            </thead>
            <tbody>
              {data.policies.map(p => (
                <tr key={p.id}>
                  <td style={cm.td}><span style={{ fontWeight: 600 }}>{p.name}</span></td>
                  <td style={{ ...cm.td, fontFamily: Tc.font.mono, fontSize: '11px', color: Tc.color.text.secondary }}>{p.channelFilter}</td>
                  <td style={cm.td}><span style={{ fontWeight: 600 }}>{p.retention}</span></td>
                  <td style={cm.td}>
                    <span style={{ ...cm.tag, ...cm.statusPill(p.hold ? 'e2ee' : 'pending') }}>
                      {p.hold ? 'Hold-eligible' : 'No hold'}
                    </span>
                  </td>
                  <td style={cm.td}>{p.encryption}</td>
                  <td style={cm.td}><span style={{ fontSize: '11px', color: Tc.color.text.secondary }}>{p.legalBasis}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CmSectionCard>

      {/* Legal holds */}
      <CmSectionCard title="Legal holds on communications" action={<button style={cm.btnPrimary}>+ Issue hold</button>}>
        <div style={cm.tableWrap}>
          <table style={cm.tableFixed}>
            <thead>
              <tr>
                <th style={cm.th}>Matter</th>
                <th style={cm.th}>Hold label</th>
                <th style={cm.th}>Custodians</th>
                <th style={cm.th}>Channels</th>
                <th style={cm.th}>Issued by</th>
                <th style={cm.th}>Issued</th>
                <th style={cm.th}>Ack</th>
                <th style={cm.th}>Status</th>
              </tr>
            </thead>
            <tbody>
              {data.holds.map(h => {
                const issuer = personById[h.by];
                return (
                  <tr key={h.id}>
                    <td style={{ ...cm.td, fontFamily: Tc.font.mono, fontSize: '11px' }}>{h.matter}</td>
                    <td style={cm.td}><span style={{ fontWeight: 600 }}>{h.label}</span></td>
                    <td style={cm.td}>{h.custodians}</td>
                    <td style={cm.td}>{h.channels}</td>
                    <td style={cm.td}>
                      {issuer ? (
                        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '6px' }}>
                          <span style={{
                            width: '20px', height: '20px', borderRadius: '50%',
                            background: issuer.color, color: '#fff',
                            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                            fontSize: '9px', fontWeight: 700,
                          }}>{issuer.initials}</span>
                          {issuer.name}
                        </span>
                      ) : '—'}
                    </td>
                    <td style={cm.td}><span style={{ fontSize: '11px', color: Tc.color.text.tertiary }}>{cm.formatTime(h.issued)}</span></td>
                    <td style={cm.td}>
                      <span style={{
                        fontFamily: Tc.font.mono, fontSize: '11px', fontWeight: 700,
                        color: h.acknowledgment.split('/')[0] === h.acknowledgment.split('/')[1] ? '#059669' : '#D97706',
                      }}>{h.acknowledgment}</span>
                    </td>
                    <td style={cm.td}>
                      <span style={{ ...cm.tag, ...cm.statusPill(h.status === 'active' ? 'e2ee' : 'pending') }}>
                        {h.status}
                      </span>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </CmSectionCard>

      {/* Split: recording consent + key transparency */}
      <div style={cm.split(360)}>
        {/* Recording consent matrix */}
        <CmSectionCard title="Recording consent · by jurisdiction">
          <div style={{ padding: '12px 16px' }}>
            {[
              { juris: 'Federal / most US states', rule: 'One-party consent', status: 'ok', note: 'Default — any participant can consent to recording.' },
              { juris: 'CA, FL, IL, MD, MA, MT, NV, NH, PA, WA', rule: 'All-party consent required', status: 'warn', note: 'Explicit consent prompt shown to every participant at start.' },
              { juris: 'EU / UK (GDPR)', rule: 'Lawful basis + disclosure', status: 'warn', note: 'Privacy notice shown; recordings flagged as personal data; DSAR-eligible.' },
              { juris: 'Cross-border matters', rule: 'Strictest rule applies', status: 'fail', note: 'System defaults to all-party consent when any participant is in a two-party jurisdiction.' },
            ].map((row, i) => (
              <div key={i} style={{
                padding: '10px 0', borderBottom: i < 3 ? `1px solid ${Tc.color.border.light}` : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '4px' }}>
                  <span style={{ fontSize: '12px', fontWeight: 700, color: Tc.color.text.primary }}>{row.juris}</span>
                  <span style={{ ...cm.tag, ...cm.statusPill(row.status) }}>{row.rule}</span>
                </div>
                <div style={{ fontSize: '11px', color: Tc.color.text.tertiary, lineHeight: 1.5 }}>{row.note}</div>
              </div>
            ))}
          </div>
        </CmSectionCard>

        {/* Recent key transparency events */}
        <CmSectionCard title="Key transparency log (recent)" action={<button style={cm.btnGhost}>Export →</button>}>
          <div>
            {data.keyEvents.map(ev => {
              const p = personById[ev.userId];
              const actionMap = {
                device_registered:    { label: 'Device registered',   color: '#2563EB' },
                key_rotated:          { label: 'Encryption key rotated', color: '#D97706' },
                fingerprint_verified: { label: 'Fingerprint verified', color: '#059669' },
                session_pinned:       { label: 'Session pinned',       color: '#0F766E' },
              };
              const a = actionMap[ev.action] || { label: ev.action, color: '#64748B' };
              return (
                <div key={ev.id} style={{
                  padding: '10px 16px', borderBottom: `1px solid ${Tc.color.border.light}`,
                  display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: '10px', alignItems: 'center',
                }}>
                  <div style={{
                    width: '28px', height: '28px', borderRadius: '50%',
                    background: p?.color || '#64748B', color: '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: '11px', fontWeight: 700,
                  }}>{p?.initials || '?'}</div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: '12px', fontWeight: 600, color: Tc.color.text.primary }}>{p?.name}</div>
                    <div style={{ fontSize: '10px', color: Tc.color.text.tertiary, fontFamily: Tc.font.mono }}>
                      {ev.deviceId} · {ev.fingerprint}
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: '11px', fontWeight: 700, color: a.color }}>{a.label}</div>
                    <div style={{ fontSize: '10px', color: Tc.color.text.tertiary, marginTop: '2px' }}>{cm.formatTime(ev.ts)}</div>
                  </div>
                </div>
              );
            })}
          </div>
        </CmSectionCard>
      </div>
    </div>
  );
}

window.CommsCompliance = CommsCompliance;