// ESI PLATFORM — Hosting & Vendors + Productions
const Teho = window.ArbiterTokens;

function ESIHosting({ data }) {
  const esi = window.__esi;
  const totalGB = data.hosting.reduce((s, h) => s + h.volumeGB, 0);
  const totalUsers = data.hosting.reduce((s, h) => s + h.users, 0);
  const totalCost = data.hosting.reduce((s, h) => s + h.monthlyCost, 0);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={esi.stat}><span style={esi.statLabel}>Platforms</span><span style={esi.statValue}>{data.hosting.length}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Total hosted</span><span style={esi.statValue}>{esi.bytes(totalGB)}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Total users</span><span style={esi.statValue}>{totalUsers}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Monthly hosting cost</span><span style={{ ...esi.statValue, color: esi.cyan }}>{esi.money(totalCost)}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Avg $/GB</span><span style={esi.statValue}>${(totalCost / totalGB).toFixed(2)}</span></div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))', gap: '14px', marginBottom: '16px' }}>
        {data.hosting.map(h => (
          <div key={h.id} style={{ ...esi.card, marginBottom: 0 }}>
            <div style={{ padding: '12px 14px', borderBottom: `1px solid ${Teho.color.border.light}`, background: esi.cyanBg }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
                <span style={{ fontSize: '13px', fontWeight: 700, color: esi.cyan }}>{h.platform}</span>
                <span style={{ ...esi.tag, background: esi.emeraldBg, color: esi.emerald }}>SLA {h.sla}</span>
              </div>
              <div style={{ fontSize: '11px', color: Teho.color.text.tertiary }}>{h.tier} · {h.region}</div>
            </div>
            <div style={{ padding: '14px' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '10px' }}>
                <div>
                  <div style={{ fontSize: '9px', color: Teho.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Volume</div>
                  <div style={{ fontSize: '16px', fontWeight: 700, color: Teho.color.text.primary, fontFamily: Teho.font.mono }}>{esi.bytes(h.volumeGB)}</div>
                </div>
                <div>
                  <div style={{ fontSize: '9px', color: Teho.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Users</div>
                  <div style={{ fontSize: '16px', fontWeight: 700, color: Teho.color.text.primary, fontFamily: Teho.font.mono }}>{h.users}</div>
                </div>
                <div>
                  <div style={{ fontSize: '9px', color: Teho.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>$/GB</div>
                  <div style={{ fontSize: '16px', fontWeight: 700, color: esi.cyan, fontFamily: Teho.font.mono }}>${h.pricePerGB.toFixed(2)}</div>
                </div>
              </div>
              <div style={{ marginTop: '12px', paddingTop: '10px', borderTop: `1px solid ${Teho.color.border.light}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: '10px', color: Teho.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Monthly cost</span>
                <span style={{ fontSize: '18px', fontWeight: 700, color: Teho.color.text.primary, fontFamily: Teho.font.mono }}>{esi.money(h.monthlyCost)}</span>
              </div>
            </div>
          </div>
        ))}
      </div>

      {/* Vendors table */}
      <div style={esi.card}>
        <div style={esi.cardH}>Vendor engagements · {data.vendors.length}</div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={esi.th}>ID</th>
              <th style={esi.th}>Vendor</th>
              <th style={esi.th}>Type</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>Hours MTD</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>Monthly cost</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>YTD cost</th>
              <th style={esi.th}>Contract expires</th>
              <th style={esi.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {data.vendors.map(v => {
              const ss = esi.statusColor(v.status);
              return (
                <tr key={v.id}>
                  <td style={{ ...esi.td, fontFamily: Teho.font.mono, fontWeight: 700, color: esi.cyan }}>{v.id}</td>
                  <td style={{ ...esi.td, fontWeight: 600, color: Teho.color.text.primary }}>{v.name}</td>
                  <td style={{ ...esi.td, color: Teho.color.text.secondary, fontSize: '11px' }}>{v.type}</td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Teho.font.mono, color: Teho.color.text.secondary }}>{v.hoursMTD ?? '—'}</td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Teho.font.mono, color: Teho.color.text.primary, fontWeight: 700 }}>{esi.money(v.monthlyCost)}</td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Teho.font.mono, color: esi.cyan }}>{esi.money(v.ytdCost)}</td>
                  <td style={{ ...esi.td, fontFamily: Teho.font.mono, fontSize: '11px', color: Teho.color.text.tertiary }}>{v.contractExpires}</td>
                  <td style={esi.td}><span style={{ ...esi.tag, background: ss.bg, color: ss.color }}>{v.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function ESIProductions({ data }) {
  const esi = window.__esi;
  const shipped = data.productions.filter(p => p.status === 'Produced').length;
  const totalDocs = data.productions.reduce((s, p) => s + p.docCount, 0);
  const totalRedactions = data.productions.reduce((s, p) => s + p.redactions, 0);

  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', marginBottom: '16px' }}>
        <div style={esi.stat}><span style={esi.statLabel}>Productions</span><span style={esi.statValue}>{data.productions.length}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Shipped</span><span style={{ ...esi.statValue, color: esi.emerald }}>{shipped}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>In QC</span><span style={{ ...esi.statValue, color: esi.amber }}>{data.productions.filter(p => p.status === 'In QC').length}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Bates produced</span><span style={esi.statValue}>{totalDocs.toLocaleString()}</span></div>
        <div style={esi.stat}><span style={esi.statLabel}>Redactions</span><span style={{ ...esi.statValue, color: esi.violet }}>{totalRedactions.toLocaleString()}</span></div>
      </div>

      <div style={esi.card}>
        <div style={esi.cardH}>
          <span>Productions · {data.productions.length}</span>
          <button style={esi.btnPrimary}>+ Stage production</button>
        </div>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={esi.th}>ID</th>
              <th style={esi.th}>Bates range</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>Docs</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>Volume</th>
              <th style={esi.th}>Format</th>
              <th style={{ ...esi.th, textAlign: 'right' }}>Redactions</th>
              <th style={esi.th}>Priv log</th>
              <th style={esi.th}>Sent</th>
              <th style={esi.th}>Status</th>
            </tr>
          </thead>
          <tbody>
            {data.productions.map(p => {
              const ss = esi.statusColor(p.status);
              return (
                <tr key={p.id}>
                  <td style={{ ...esi.td, fontFamily: Teho.font.mono, fontWeight: 700, color: esi.cyan }}>{p.id}</td>
                  <td style={{ ...esi.td, fontFamily: Teho.font.mono, fontSize: '11px', color: Teho.color.text.secondary }}>{p.batesRange}</td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Teho.font.mono, color: Teho.color.text.primary, fontWeight: 700 }}>{p.docCount.toLocaleString()}</td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Teho.font.mono, color: Teho.color.text.secondary }}>{esi.bytes(p.volumeGB)}</td>
                  <td style={{ ...esi.td, color: Teho.color.text.secondary, fontSize: '11px' }}>{p.format}</td>
                  <td style={{ ...esi.td, textAlign: 'right', fontFamily: Teho.font.mono, color: esi.violet, fontWeight: 600 }}>{p.redactions.toLocaleString()}</td>
                  <td style={esi.td}>{p.privLog ? <span style={{ ...esi.tag, background: esi.violetBg, color: esi.violet }}><Icons.Check size={11}/></span> : <span style={{ fontSize: '10px', color: Teho.color.text.tertiary }}>—</span>}</td>
                  <td style={{ ...esi.td, fontFamily: Teho.font.mono, fontSize: '11px', color: Teho.color.text.tertiary }}>{p.sentDate || '—'}</td>
                  <td style={esi.td}><span style={{ ...esi.tag, background: ss.bg, color: ss.color }}>{p.status}</span></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}

window.ESIHosting = ESIHosting;
window.ESIProductions = ESIProductions;