// ONS Internal Supervisor — deployment ops center
const SupervisorPage = () => {
  const [tab, setTab] = useState('fleet');
  return (
    <>
      <div className="page-header">
        <div>
          <h1 className="page-title">ONS Supervisor</h1>
          <div className="page-sub">28 customer instances · 3 regions · 2 incidents · platform v4.18.2 → 4.19.0 rollout 64%</div>
        </div>
        <div className="page-actions">
          <button className="btn"><Icon name="refresh" size={12}/>Refresh</button>
          <button className="btn"><Icon name="upload" size={12}/>Push update</button>
          <button className="btn primary"><Icon name="plus" size={12}/>Provision instance</button>
        </div>
      </div>

      <div className="tabs">
        {['fleet','incidents','deployments','resources','backups','errors'].map(t => (
          <div key={t} className={`tab ${tab===t?'active':''}`} onClick={()=>setTab(t)} style={{textTransform:'capitalize'}}>{t}{t==='incidents'?<span className="count">2</span>:t==='errors'?<span className="count">14</span>:null}</div>
        ))}
      </div>

      <div className="page-body">
        <div className="stat-grid" style={{ marginBottom: 16, gridTemplateColumns: 'repeat(6, 1fr)' }}>
          <StatCellSingle label="Instances" value="28" sub="3 cloud, 18 hybrid, 7 on-prem"/>
          <StatCellSingle label="Healthy" value="26" sub="93%" color="var(--green)"/>
          <StatCellSingle label="Active incidents" value="2" sub="1 P2, 1 P3" color="var(--accent)"/>
          <StatCellSingle label="Avg latency" value="42ms" sub="-3ms wow"/>
          <StatCellSingle label="Ingest rate" value="218k/s" sub="telemetry events"/>
          <StatCellSingle label="Storage used" value="74%" sub="of 1.2 PB"/>
        </div>

        {tab === 'fleet' && <FleetTable/>}
        {tab === 'incidents' && <IncidentsList/>}
        {tab === 'deployments' && <Deployments/>}
        {tab === 'resources' && <Resources/>}
        {tab === 'backups' && <Backups/>}
        {tab === 'errors' && <ErrorTracking/>}
      </div>
    </>
  );
};

const FLEET = [
  { id: 'aurex-mfg', name: 'Aurex Manufacturing', deploy: 'hybrid', region: 'IN-MH', plants: 6, version: '4.18.2', status: 'healthy', cpu: 42, mem: 58, disk: 64, latency: 38, mrr: '₹18.4L' },
  { id: 'sunderlal-ind', name: 'Sunderlal Industries', deploy: 'cloud', region: 'IN-MH', plants: 3, version: '4.18.2', status: 'healthy', cpu: 28, mem: 41, disk: 38, latency: 34, mrr: '₹9.2L' },
  { id: 'precimet-fab', name: 'Precimet Fabrications', deploy: 'on-prem', region: 'IN-TN', plants: 2, version: '4.17.4', status: 'healthy', cpu: 51, mem: 62, disk: 71, latency: 28, mrr: '₹6.8L' },
  { id: 'kavin-pharma', name: 'Kavin Pharmaceuticals', deploy: 'on-prem', region: 'IN-GJ', plants: 4, version: '4.18.2', status: 'attention', cpu: 78, mem: 84, disk: 88, latency: 52, mrr: '₹14.0L' },
  { id: 'crescent-pkg', name: 'Crescent Packaging', deploy: 'hybrid', region: 'PK-SD', plants: 1, version: '4.18.2', status: 'healthy', cpu: 22, mem: 38, disk: 41, latency: 68, mrr: '₹3.2L' },
  { id: 'meghdoot-fmcg', name: 'Meghdoot FMCG', deploy: 'cloud', region: 'IN-MH', plants: 8, version: '4.19.0-rc2', status: 'healthy', cpu: 64, mem: 71, disk: 58, latency: 31, mrr: '₹24.0L' },
  { id: 'oryx-chem', name: 'Oryx Chemicals', deploy: 'on-prem', region: 'AE-DU', plants: 2, version: '4.18.0', status: 'incident', cpu: 92, mem: 94, disk: 81, latency: 184, mrr: '₹12.4L' },
  { id: 'krishna-textile', name: 'Krishna Textiles', deploy: 'hybrid', region: 'IN-MH', plants: 5, version: '4.18.2', status: 'healthy', cpu: 48, mem: 55, disk: 62, latency: 41, mrr: '₹11.8L' },
];

const FleetTable = () => (
  <div className="card">
    <table className="tbl">
      <thead><tr>
        <th>Customer</th><th>Deploy</th><th>Region</th><th>Plants</th><th>Version</th><th>Status</th>
        <th>CPU</th><th>Memory</th><th>Disk</th><th>Latency</th><th>MRR</th><th></th>
      </tr></thead>
      <tbody>
        {FLEET.map(f => (
          <tr key={f.id}>
            <td>
              <div style={{ fontWeight: 500 }}>{f.name}</div>
              <div className="mono" style={{ fontSize: 10.5, color: 'var(--text-3)' }}>{f.id}</div>
            </td>
            <td><span className="pill" style={{ textTransform: 'lowercase' }}>{f.deploy === 'cloud' ? <><Icon name="cloud" size={10}/> cloud</> : f.deploy === 'on-prem' ? <><Icon name="server" size={10}/> on-prem</> : <><Icon name="globe" size={10}/> hybrid</>}</span></td>
            <td className="mono">{f.region}</td>
            <td className="mono">{f.plants}</td>
            <td className="mono" style={{ color: f.version.includes('rc') ? 'var(--accent)' : f.version === '4.18.2' ? 'var(--text)' : 'var(--text-3)' }}>{f.version}</td>
            <td>
              <span className={`pill ${f.status === 'healthy' ? 'running' : f.status === 'incident' ? 'down' : 'warn'}`}>
                <span className="dot"/>{f.status}
              </span>
            </td>
            <td><MeterCell v={f.cpu}/></td>
            <td><MeterCell v={f.mem}/></td>
            <td><MeterCell v={f.disk}/></td>
            <td className="mono" style={{ color: f.latency > 100 ? 'var(--red)' : 'var(--text-2)' }}>{f.latency}ms</td>
            <td className="mono">{f.mrr}</td>
            <td><button className="btn ghost icon sm"><Icon name="more" size={12}/></button></td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const MeterCell = ({ v }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 6, width: 80 }}>
    <div style={{ flex: 1 }}><div className="bar"><div className="bar-fill" style={{ width: `${v}%`, background: v > 85 ? 'var(--red)' : v > 70 ? 'var(--accent)' : 'var(--green)' }}/></div></div>
    <span className="mono" style={{ fontSize: 10.5, width: 28, textAlign: 'right', color: v > 85 ? 'var(--red)' : 'var(--text-2)' }}>{v}%</span>
  </div>
);

const IncidentsList = () => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
    {[
      {sev:'P2',title:'Oryx Chemicals — telemetry ingest queue backed up',start:'13:48 IST',duration:'44m',affected:'2 plants · 64 machines',cause:'OPC-UA connector restart loop after firmware update',oncall:'D. Pereira',color:'var(--red)'},
      {sev:'P3',title:'Kavin Pharma — disk usage above 85% threshold',start:'12:14 IST',duration:'2h 18m',affected:'1 instance',cause:'audit log retention not pruned · 14d > 7d policy',oncall:'M. Iyer',color:'var(--accent)'},
    ].map((i,n) => (
      <div key={n} className="card" style={{ borderLeft: `3px solid ${i.color}` }}>
        <div style={{ padding: 16, display: 'flex', alignItems: 'flex-start', gap: 16 }}>
          <span className="pill" style={{ background: i.color, color: 'white' }}>{i.sev}</span>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{i.title}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 4 }}>started {i.start} · {i.duration} · affecting {i.affected}</div>
            <div style={{ fontSize: 12, marginTop: 8, color: 'var(--text-2)' }}>{i.cause}</div>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>on-call</div>
            <div style={{ fontSize: 12, fontWeight: 500 }}>{i.oncall}</div>
            <button className="btn primary sm" style={{ marginTop: 8 }}>Open runbook</button>
          </div>
        </div>
      </div>
    ))}
  </div>
);

const Deployments = () => (
  <div className="card">
    <div className="card-header"><div className="card-title">Rollout — v4.19.0 → 28 instances</div><span className="pill running"><span className="dot"/>in progress</span><div className="card-meta">started 12:00 IST · ETA 16:00</div></div>
    <div style={{ padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <div style={{ flex: 1 }}><div className="bar" style={{ height: 8 }}><div className="bar-fill" style={{ width: '64%', background: 'var(--accent)' }}/></div></div>
        <span className="mono" style={{ fontSize: 12 }}>18 / 28 deployed · 64%</span>
      </div>
      <table className="tbl">
        <thead><tr><th>Wave</th><th>Customers</th><th>Status</th><th>Started</th><th>Duration</th><th>Health probe</th></tr></thead>
        <tbody>
          {[
            ['Canary (1)','Internal demo','complete','12:00','08:00','✓ pass'],
            ['Wave 1 (3)','3 small cloud','complete','12:30','12:00','✓ pass'],
            ['Wave 2 (8)','Cloud tier','complete','13:00','22:00','✓ pass'],
            ['Wave 3 (10)','Hybrid tier','in-progress','14:00','—','running'],
            ['Wave 4 (6)','On-prem · scheduled','pending','—','—','—'],
          ].map((r,i)=>(
            <tr key={i}><td className="mono">{r[0]}</td><td>{r[1]}</td>
              <td><span className={`pill ${r[2]==='complete'?'running':r[2]==='in-progress'?'warn':''}`}><span className="dot"/>{r[2]}</span></td>
              <td className="mono" style={{fontSize:11.5}}>{r[3]}</td><td className="mono" style={{fontSize:11.5}}>{r[4]}</td><td className="mono" style={{fontSize:11.5,color:r[5].includes('pass')?'var(--green)':'var(--text-3)'}}>{r[5]}</td></tr>
          ))}
        </tbody>
      </table>
    </div>
  </div>
);

const Resources = () => (
  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
    <div className="card">
      <div className="card-header"><div className="card-title">Compute · last 24h</div></div>
      <div style={{ padding: 14 }}>
        <LineChart w={460} h={200} multi={[
          {data:series(48,1,62,8),color:'var(--accent)'},
          {data:series(48,2,48,6),color:'var(--blue)'},
          {data:series(48,3,38,5),color:'var(--green)'},
        ]}/>
        <div style={{ display: 'flex', gap: 14, marginTop: 8, fontSize: 11 }}>
          <Legend color="var(--accent)" label="CPU"/><Legend color="var(--blue)" label="Memory"/><Legend color="var(--green)" label="Disk I/O"/>
        </div>
      </div>
    </div>
    <div className="card">
      <div className="card-header"><div className="card-title">Telemetry ingest · 218k events/s</div></div>
      <div style={{ padding: 14 }}>
        <LineChart w={460} h={200} data={series(48,4,210,30)} color="var(--accent)"/>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--text-3)' }} className="mono">
          <span>p50: 218k</span><span>p95: 264k</span><span>peak: 312k</span>
        </div>
      </div>
    </div>
    <div className="card" style={{ gridColumn: '1 / -1' }}>
      <div className="card-header"><div className="card-title">Storage — by tenant</div></div>
      <div style={{ padding: 14 }}>
        {FLEET.map(f => (
          <div key={f.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '6px 0', borderBottom: '1px solid var(--line)' }}>
            <div style={{ width: 200, fontSize: 12 }}>{f.name}</div>
            <div style={{ flex: 1 }}><div className="bar"><div className="bar-fill" style={{ width: `${f.disk}%`, background: f.disk > 85 ? 'var(--red)' : 'var(--accent)' }}/></div></div>
            <span className="mono" style={{ fontSize: 11, color: 'var(--text-2)', width: 60, textAlign: 'right' }}>{(f.disk * 0.4).toFixed(1)} TB</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)', width: 40, textAlign: 'right' }}>{f.disk}%</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const Backups = () => (
  <div className="card">
    <table className="tbl">
      <thead><tr><th>Tenant</th><th>Last backup</th><th>Schedule</th><th>Size</th><th>Retention</th><th>Status</th><th>Restore tested</th></tr></thead>
      <tbody>
        {FLEET.map(f=>(
          <tr key={f.id}>
            <td>{f.name}</td>
            <td className="mono" style={{fontSize:11.5}}>14:00 IST today</td>
            <td className="mono" style={{fontSize:11.5}}>hourly · daily · weekly</td>
            <td className="mono">{(f.disk*0.4).toFixed(1)} TB</td>
            <td className="mono" style={{fontSize:11.5}}>30d / 1y</td>
            <td><span className="pill running"><span className="dot"/>ok</span></td>
            <td className="mono" style={{fontSize:11.5,color:'var(--text-3)'}}>4d ago</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const ErrorTracking = () => (
  <div className="card">
    <div className="card-header"><div className="card-title">Recent errors · last 1h</div><div className="card-meta">14 events</div></div>
    <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
      {[
        ['ERR','OPCConnectionResetError','Oryx Chemicals · plant-2',184,'14:31:02'],
        ['ERR','TelemetryIngestQueueFull','Oryx Chemicals',42,'14:30:18'],
        ['WARN','BackupRetentionPolicyMismatch','Kavin Pharma · plant-1',1,'14:28:00'],
        ['WARN','SlowQueryDetected — 4.2s','Meghdoot FMCG',8,'14:22:14'],
        ['INFO','ScheduledMaintenanceWindow','Crescent Packaging',1,'14:00:00'],
      ].map((r,i)=>(
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '8px 10px', background: 'var(--panel-2)', borderRadius: 4 }}>
          <span className="pill" style={{ background: r[0]==='ERR'?'color-mix(in srgb,var(--red) 14%,transparent)':r[0]==='WARN'?'color-mix(in srgb,var(--accent) 14%,transparent)':'var(--panel-3)', color: r[0]==='ERR'?'var(--red)':r[0]==='WARN'?'var(--accent)':'var(--blue)' }}>{r[0]}</span>
          <span className="mono" style={{ fontSize: 12, fontWeight: 500 }}>{r[1]}</span>
          <span style={{ flex: 1, fontSize: 11.5, color: 'var(--text-2)' }}>{r[2]}</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>×{r[3]}</span>
          <span className="mono" style={{ fontSize: 11, color: 'var(--text-3)' }}>{r[4]}</span>
        </div>
      ))}
    </div>
  </div>
);

window.SupervisorPage = SupervisorPage;