// ESI PLATFORM — Collections + Forensics
const Tecl = window.ArbiterTokens;

function ESICollections({ data }) {
  const esi = window.__esi;
  const active = data.collections.filter(c => c.status !== 'Complete ok').length;
  const totalGB = data.collections.reduce((s, c) => s + (c.volumeGB || 0), 0);
  const totalDocs = data.collections.reduce((s, c) => s + (c.docCount || 0), 0);

  const vendorStyle = (v) => {
    if (v.includes('Cellebrite')) return { bg: esi.violetBg, color: esi.violet };
    if (v.includes('Internal')) return { bg: esi.cyanBg, color: esi.cyan };
    if (v.includes('Iron Mountain')) return { bg: esi.slateBg, color: esi.slate };
    if (v.includes('Smarsh')) return { bg: esi.amberBg, color: esi.amber };
    return { bg: Tecl.color.bg.secondary, color: Tecl.color.text.secondary };
  };

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={esi.stat}><span style={esi.statLabel}>Collection jobs</span><span style={esi.statValue}>{data.collections.length}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Active</span><span style={{ ...esi.statValue, color: esi.cyan }}>{active}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Volume collected</span><span style={esi.statValue}>{esi.bytes(totalGB)}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Docs collected</span><span style={esi.statValue}>{(totalDocs / 1_000_000).toFixed(2)}M</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Vendors engaged</span><span style={esi.statValue}>{new Set(data.collections.map(c => c.vendor)).size}</span></div>
      </div>

      <div style={esi.card}>
        <div style={esi.cardH}>
          <span>Collection pipeline — {data.collections.length} jobs</span>
          <div style={{ display: 'flex', gap: '6px' }}>
            <button style={esi.btnSecondary}>Chain of custody report</button>
            <button style={esi.btnPrimary}>+ New collection</button>
          </div>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={esi.th}>Job</th>
              <th style={esi.th}>Source</th>
              <th style={esi.th}>Custodian / target</th>
              <th style={esi.th}>Method</th>
              <th style={esi.th}>Vendor</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>Volume</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>Docs</th>
              <th style={esi.th}>Started</th>
              <th style={esi.th}>ETA</th>
              <th style={esi.th}>Chain</th>
              <th style={esi.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {data.collections.map(c => {
              const ss = esi.statusColor(c.status);
              const vs = vendorStyle(c.vendor);
              const src = esi.sourceStyle(
                c.source.includes('Exchange') || c.source.includes('Gmail') || c.source.includes('PST') ? 'Email'
                : c.source.includes('OneDrive') || c.source.includes('Drive') ? 'Cloud Storage'
                : c.source.includes('iPhone') || c.source.includes('Android') || c.source.includes('Mobile') ? 'Mobile'
                : c.source.includes('WhatsApp') || c.source.includes('Teams') || c.source.includes('Slack') ? 'Chat'
                : c.source.includes('Archive') || c.source.includes('tape') ? 'Archive'
                : c.source.includes('SharePoint') ? 'File Share'
                : 'Other'
              );
              return (
                <tr key={c.id}>
                  <td style={{ ...esi.td, fontFamily: Tecl.font.mono, fontWeight: 700, color: esi.cyan }}>{c.id}</td>
                  <td style={esi.td}><span style={{ ...esi.tag, background: src.bg, color: src.color }}>{src.icon} {c.source.length > 28 ? c.source.slice(0, 26) + '…' : c.source}</span></td>
                  <td style={{ ...esi.td, color: Tecl.color.text.secondary, fontSize: '11px', maxWidth: '220px' }}>{c.custodian}</td>
                  <td style={{ ...esi.td, color: Tecl.color.text.secondary, fontSize: '11px', maxWidth: '240px' }}>{c.method}</td>
                  <td style={esi.td}><span style={{ ...esi.tag, background: vs.bg, color: vs.color }}>{c.vendor}</span></td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Tecl.font.mono, color: Tecl.color.text.primary, fontWeight: 700 }}>{esi.bytes(c.volumeGB)}</td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Tecl.font.mono, color: Tecl.color.text.secondary }}>{c.docCount ? c.docCount.toLocaleString() : '—'}</td>
                  <td style={{ ...esi.td, fontFamily: Tecl.font.mono, fontSize: '11px', color: Tecl.color.text.tertiary }}>{c.started}</td>
                  <td style={{ ...esi.td, fontFamily: Tecl.font.mono, fontSize: '11px', color: c.status !== 'Complete ok' ? esi.amber : Tecl.color.text.secondary }}>{c.eta}</td>
                  <td style={{ ...esi.td, fontFamily: Tecl.font.mono, fontSize: '11px', color: esi.violet, fontWeight: 700 }}>{c.chainId}</td>
                  <td style={esi.td}><span style={{ ...esi.tag, background: ss.bg, color: ss.color }}>{c.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.ESICollections = ESICollections;