// DISCOVERY PLATFORM — Collections + Processing
const Tdcol = window.ArbiterTokens;

function DiscoveryCollections({ data }) {
  const dc = window.__dc;
  const active = data.collections.filter(c => c.status !== 'Complete');
  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 vendorColor = (v) => v.startsWith('Internal') ? { bg: dc.cobaltBg, color: dc.cobalt }
    : v === 'Cellebrite' ? { bg: dc.violetBg, color: dc.violet }
    : v === 'Lighthouse' ? { bg: dc.tealBg, color: dc.teal }
    : v === 'Consilio' ? { bg: dc.amberBg, color: dc.amber }
    : { bg: Tdcol.color.bg.secondary, color: Tdcol.color.text.secondary };

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={dc.stat}><span style={dc.statLabel}>Total jobs</span><span style={dc.statValue}>{data.collections.length}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Active</span><span style={{ ...dc.statValue, color: dc.cobalt }}>{active.length}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Volume collected</span><span style={dc.statValue}>{dc.bytes(totalGB)}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Docs collected</span><span style={dc.statValue}>{(totalDocs / 1_000_000).toFixed(2)}M</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Cross-border</span><span style={{ ...dc.statValue, color: dc.violet }}>2</span><span style={{ ...dc.statDelta, color: Tdcol.color.text.tertiary }}>foreign-counsel review</span></div>
      </div>

      <div style={dc.card}>
        <div style={dc.cardH}>
          <span>Collection jobs — {data.collections.length}</span>
          <div style={{ display: 'flex', gap: '6px' }}>
            <button style={dc.btnSecondary}>Chain of custody</button>
            <button style={dc.btnPrimary}>+ New job</button>
          </div>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={dc.th}>Job</th>
              <th style={dc.th}>Custodian / Target</th>
              <th style={dc.th}>Matter</th>
              <th style={dc.th}>Sources</th>
              <th style={{ ...dc.th, textAlign: 'right' }}>Volume</th>
              <th style={{ ...dc.th, textAlign: 'right' }}>Docs</th>
              <th style={dc.th}>Vendor</th>
              <th style={dc.th}>Started</th>
              <th style={dc.th}>ETA</th>
              <th style={dc.th}>Chain of custody</th>
              <th style={dc.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {data.collections.map(c => {
              const ss = dc.statusColor(c.status);
              const vc = vendorColor(c.vendor);
              return (
                <tr key={c.id}>
                  <td style={{ ...dc.td, fontFamily: Tdcol.font.mono, color: dc.cobalt, fontWeight: 700 }}>{c.id}</td>
                  <td style={{ ...dc.td, color: Tdcol.color.text.primary, fontWeight: 500, maxWidth: '220px', fontSize: '11px' }}>{c.custodian}</td>
                  <td style={{ ...dc.td, color: Tdcol.color.text.secondary, maxWidth: '170px', fontSize: '11px' }}>{c.matter}</td>
                  <td style={dc.td}>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '3px', maxWidth: '180px' }}>
                      {c.sources.slice(0, 3).map(s => <span key={s} style={{ ...dc.tag, background: dc.cobaltBg, color: dc.cobalt }}>{s}</span>)}
                      {c.sources.length > 3 && <span style={{ fontSize: '10px', color: Tdcol.color.text.tertiary }}>+{c.sources.length - 3}</span>}
                    </div>
                  </td>
                  <td style={{ ...dc.td, textAlign: 'right', fontFamily: Tdcol.font.mono, color: Tdcol.color.text.primary, fontWeight: 600 }}>{dc.bytes(c.volumeGB)}</td>
                  <td style={{ ...dc.td, textAlign: 'right', fontFamily: Tdcol.font.mono, color: Tdcol.color.text.secondary }}>{c.docCount ? c.docCount.toLocaleString() : '—'}</td>
                  <td style={dc.td}><span style={{ ...dc.tag, background: vc.bg, color: vc.color }}>{c.vendor}</span></td>
                  <td style={{ ...dc.td, fontFamily: Tdcol.font.mono, fontSize: '11px', color: Tdcol.color.text.tertiary }}>{c.started || '—'}</td>
                  <td style={{ ...dc.td, fontFamily: Tdcol.font.mono, fontSize: '11px', color: c.status !== 'Complete' ? dc.amber : Tdcol.color.text.secondary }}>{c.eta}</td>
                  <td style={{ ...dc.td, color: Tdcol.color.text.secondary, fontSize: '11px' }}>{c.chainOfCustody}</td>
                  <td style={dc.td}><span style={{ ...dc.tag, background: ss.bg, color: ss.color }}>{c.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function DiscoveryProcessing({ data }) {
  const dc = window.__dc;
  const proc = data.processing.stages;
  const maxVol = proc[0].volumeGB;

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={dc.stat}><span style={dc.statLabel}>Raw ingest</span><span style={dc.statValue}>{(proc[0].docs / 1_000_000).toFixed(1)}M</span><span style={{ ...dc.statDelta, color: Tdcol.color.text.tertiary }}>{dc.bytes(proc[0].volumeGB)}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Review-ready</span><span style={{ ...dc.statValue, color: dc.emerald }}>{(proc[proc.length - 1].docs / 1_000_000).toFixed(2)}M</span><span style={{ ...dc.statDelta, color: Tdcol.color.text.tertiary }}>{dc.bytes(proc[proc.length - 1].volumeGB)}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Total reduction</span><span style={{ ...dc.statValue, color: dc.cobalt }}>{proc[proc.length - 1].reductionPct}%</span><span style={{ ...dc.statDelta, color: Tdcol.color.text.tertiary }}>corpus cull</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Active jobs</span><span style={{ ...dc.statValue, color: dc.cobalt }}>{data.processing.activeJobs.length}</span></div>
        <div style={dc.stat}><span style={dc.statLabel}>Error queue</span><span style={{ ...dc.statValue, color: data.processing.errorQueue > 0 ? dc.crimson : dc.emerald }}>{data.processing.errorQueue}</span><span style={{ ...dc.statDelta, color: Tdcol.color.text.tertiary }}>need manual review</span></div>
      </div>

      {/* Funnel visualization */}
      <div style={dc.card}>
        <div style={dc.cardH}>
          <span>EDRM processing pipeline — {(proc[0].docs / 1_000_000).toFixed(1)}M → {(proc[proc.length - 1].docs / 1_000_000).toFixed(2)}M</span>
          <span style={{ fontSize: '10px', color: dc.emerald, fontWeight: 700, fontFamily: Tdcol.font.mono }}>{proc[proc.length - 1].reductionPct}% reduction · {dc.bytes(maxVol - proc[proc.length - 1].volumeGB)} culled</span>
        </div>
        <div style={{ padding: '18px 16px' }}>
          {proc.map((s, i) => {
            const widthPct = (s.volumeGB / maxVol) * 100;
            const color = s.color === 'slate' ? dc.slate
              : s.color === 'teal' ? dc.teal
              : s.color === 'cobalt' ? dc.cobalt
              : s.color === 'violet' ? dc.violet
              : s.color === 'amber' ? dc.amber
              : dc.emerald;
            return (
              <div key={s.stage} style={{ marginBottom: '14px', display: 'flex', alignItems: 'center', gap: '14px' }}>
                <div style={{ minWidth: '200px' }}>
                  <div style={{ fontSize: '9px', fontWeight: 700, color, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Stage {i + 1}</div>
                  <div style={{ fontSize: '12px', fontWeight: 600, color: Tdcol.color.text.primary }}>{s.stage}</div>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ height: '28px', background: Tdcol.color.border.light, borderRadius: '4px', overflow: 'hidden', position: 'relative' }}>
                    <div style={{ width: `${widthPct}%`, height: '100%', background: `linear-gradient(90deg, ${color} 0%, ${color}CC 100%)`, display: 'flex', alignItems: 'center', paddingLeft: '12px', color: '#fff', fontSize: '11px', fontWeight: 700, fontFamily: Tdcol.font.mono }}>
                      {(s.docs / 1_000_000).toFixed(2)}M · {dc.bytes(s.volumeGB)}
                    </div>
                  </div>
                </div>
                <div style={{ minWidth: '80px', textAlign: 'right' }}>
                  <div style={{ fontSize: '10px', color: Tdcol.color.text.tertiary }}>of raw</div>
                  <div style={{ fontSize: '14px', fontWeight: 700, color, fontFamily: Tdcol.font.mono }}>{widthPct.toFixed(1)}%</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Active jobs */}
      <div style={dc.card}>
        <div style={dc.cardH}>Active processing jobs</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={dc.th}>Job</th>
              <th style={dc.th}>Matter</th>
              <th style={dc.th}>Stage</th>
              <th style={{ ...dc.th, textAlign: 'right' }}>In flight</th>
              <th style={dc.th}>Started</th>
              <th style={dc.th}>ETA</th>
            </tr>
          </thead>
          <tbody>
            {data.processing.activeJobs.map(j => (
              <tr key={j.id}>
                <td style={{ ...dc.td, fontFamily: Tdcol.font.mono, color: dc.cobalt, fontWeight: 700 }}>{j.id}</td>
                <td style={{ ...dc.td, color: Tdcol.color.text.primary, fontWeight: 500 }}>{j.matter}</td>
                <td style={dc.td}><span style={{ ...dc.tag, background: dc.cobaltBg, color: dc.cobalt }}>{j.stage}</span></td>
                <td style={{ ...dc.td, textAlign: 'right', fontFamily: Tdcol.font.mono, color: Tdcol.color.text.primary, fontWeight: 700 }}>{j.inflight.toLocaleString()}</td>
                <td style={{ ...dc.td, fontFamily: Tdcol.font.mono, fontSize: '11px', color: Tdcol.color.text.tertiary }}>{j.started}</td>
                <td style={{ ...dc.td, fontFamily: Tdcol.font.mono, fontSize: '11px', color: dc.amber }}>{j.eta}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.DiscoveryCollections = DiscoveryCollections;
window.DiscoveryProcessing = DiscoveryProcessing;