// ESI PLATFORM — entry (matter-scoped, 13 tabs)
// Takes `matter` prop + `onBack` (parallel to WarRoom / EvidencePlatform / RiskPlatform)
const { useState: useESIPlatState } = React;
const Tesp = window.ArbiterTokens;

function ESIPlatform({ matter, onBack }) {
  const [activeTab, setActiveTab] = useESIPlatState('dashboard');
  const esi = window.__esi;
  // Matter-scoped: take per-matter data if present, else _default
  const data = (window.ESI_DATA && (window.ESI_DATA[matter?.id] || window.ESI_DATA._default)) || window.ESI_DATA._default;
  const k = data.kpis;

  const tabs = [
    { id: 'dashboard', label: 'Dashboard' },
    { id: 'sources', label: 'Data Sources' },
    { id: 'datamap', label: 'Data Map' },
    { id: 'preservation', label: 'Preservation' },
    { id: 'collections', label: 'Collections' },
    { id: 'forensics', label: 'Forensics' },
    { id: 'processing', label: 'Processing' },
    { id: 'search', label: 'Search & TAR' },
    { id: 'hosting', label: 'Hosting & Vendors' },
    { id: 'productions', label: 'Productions' },
    { id: 'cost', label: 'Cost Analytics' },
    { id: 'chain', label: 'Chain of Custody' },
    { id: 'activity', label: 'Activity' },
  ];

  const renderTab = () => {
    switch (activeTab) {
      case 'dashboard':    return <ESIDashboard data={data} />;
      case 'sources':      return <ESIDataSources data={data} />;
      case 'datamap':      return <ESIDataMapPlatform data={data} />;
      case 'preservation': return <ESIPreservation data={data} />;
      case 'collections':  return <ESICollectionsPlatform data={data} />;
      case 'forensics':    return <ESIForensicsPlatform data={data} />;
      case 'processing':   return <ESIProcessing data={data} />;
      case 'search':       return <ESISearch data={data} />;
      case 'hosting':      return <ESIHosting data={data} />;
      case 'productions':  return <ESIProductions data={data} />;
      case 'cost':         return <ESICost data={data} />;
      case 'chain':        return <ESIChainOfCustody data={data} />;
      case 'activity':     return <ESIActivity data={data} />;
      default: return <ESIDashboard data={data} />;
    }
  };

  return (
    <div style={esi.container}>
      <div style={esi.header}>
        <div style={esi.headerTitle}>
          {onBack && (
            <button onClick={onBack} style={{ padding: '4px 10px', borderRadius: '6px', border: `1px solid ${Tesp.color.border.light}`, background: Tesp.color.bg.card, fontSize: '14px', color: Tesp.color.text.secondary, cursor: 'pointer' }}>←</button>
          )}
          <div style={esi.esiIcon}>◇</div>
          <div>
            <div style={esi.title}>ESI Platform</div>
            <div style={esi.subtitle}>{matter ? `${matter.name} · ${matter.id}` : 'Electronically Stored Information — Lifecycle · Preservation · Forensics · Processing · Search · Productions'}</div>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: Tesp.color.bg.secondary, border: `1px solid ${Tesp.color.border.light}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: Tesp.color.text.tertiary, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Volume</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: Tesp.color.text.primary, fontFamily: Tesp.font.mono }}>{esi.bytes(k.totalVolumeGB)}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: esi.cyanBg, border: `1px solid ${esi.cyanBorder}` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: esi.cyan, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Sources</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: esi.cyan, fontFamily: Tesp.font.mono }}>{k.dataSources}</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: esi.violetBg, border: `1px solid ${esi.violet}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: esi.violet, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Preserved</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: esi.violet, fontFamily: Tesp.font.mono }}>100%</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 14px', borderRadius: '8px', background: esi.emeraldBg, border: `1px solid ${esi.emerald}22` }}>
            <span style={{ fontSize: '10px', fontWeight: 600, color: esi.emerald, textTransform: 'uppercase', letterSpacing: '0.06em' }}>$/GB</span>
            <span style={{ fontSize: '14px', fontWeight: 700, color: esi.emerald, fontFamily: Tesp.font.mono }}>${k.costPerGB}</span>
          </div>
          <button style={esi.btnPrimary}>+ New collection</button>
        </div>
      </div>

      <div style={{ ...esi.tabs, overflowX: 'auto' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setActiveTab(t.id)}
            style={{ ...esi.tab, ...(activeTab === t.id ? esi.tabActive : {}) }}>
            {t.label}
          </button>
        ))}
      </div>

      <div style={esi.body}>
        {renderTab()}
      </div>
    </div>
  );
}

window.ESIPlatform = ESIPlatform;