/* eslint-disable */
/* =========================================================
   TEO IoT Dashboard — Overview screen.
   ========================================================= */

const KPIStrip = ({ devices, alerts }) => {
  const total = devices.length;
  const online = devices.filter(d => d.state === 'ok').length;
  const warn   = devices.filter(d => d.state === 'warn').length;
  const down   = devices.filter(d => d.state === 'down').length;
  const openAlerts = alerts.filter(a => !a.ack).length;
  return (
    <div data-kpi-strip style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', borderTop:'1px solid #EDEDED', borderBottom:'1px solid #EDEDED', background:'#FFF' }}>
      <MetricTile label="Devices online"    value={`${online}`} unit={`/ ${total}`} delta={down ? `-${down}` : '+0'} sub={down ? `${down} offline · ${warn} degraded` : 'All operational'} />
      <MetricTile label="Telemetry rate"    value="842"  unit="msg/s" delta="+8.1%" sub="vs prior hour" />
      <MetricTile label="Open alerts"       value={`${openAlerts}`} delta={openAlerts ? `+${openAlerts}` : '+0'} sub="0 critical pending ack" />
      <MetricTile label="Mean time to ack"  value="1m"   unit="12s"   delta="-34%" sub="30-day rolling" />
    </div>
  );
};

const FleetStatusDonut = ({ devices }) => {
  const counts = { ok:0, warn:0, down:0, idle:0 };
  devices.forEach(d => { counts[d.state] = (counts[d.state]||0)+1; });
  const slices = [
    { label:'Online',   value:counts.ok,   color:'#3A6FF8' },
    { label:'Degraded', value:counts.warn, color:'#E0A13B' },
    { label:'Offline',  value:counts.down, color:'#C44A4A' },
    { label:'Idle',     value:counts.idle, color:'#878787' },
  ].filter(s => s.value > 0);
  return (
    <Donut
      title="Fleet status"
      total={devices.length}
      totalLabel="devices"
      slices={slices}
    />
  );
};

const SectorBreakdown = ({ devices }) => {
  // Aggregate by kind, take top 6
  const byKind = {};
  devices.forEach(d => { byKind[d.kind] = (byKind[d.kind]||0)+1; });
  const palette = ['#0A0F1F','#3A6FF8','#7A9CFF','#23459E','#5A5E6E','#878787'];
  const slices = Object.entries(byKind)
    .sort((a,b) => b[1]-a[1])
    .slice(0, 6)
    .map(([k,v], i) => ({ label: k.charAt(0).toUpperCase()+k.slice(1).replace('-',' '), value:v, color:palette[i % palette.length] }));
  return (
    <Donut
      title="Devices by class"
      total={devices.length}
      totalLabel="total"
      slices={slices}
    />
  );
};

// Synthetic 24h x 7d alert-volume heatmap
const AlertHeatmap = () => {
  // deterministic pseudo-random based on (row, col) so it doesn't jitter every render
  const cols = ['00','03','06','09','12','15','18','21'];
  const rows = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
  const matrix = rows.map((_, r) => cols.map((_, c) => {
    // peak around 09-15 weekdays
    const peakHour = c >= 3 && c <= 5 ? 1 : 0.3;
    const weekday  = r < 5 ? 1 : 0.4;
    const noise = ((r * 7 + c * 13) % 7) / 10;
    return Math.round(peakHour * weekday * (3 + noise * 5));
  }));
  return <Heatmap title="Alert volume · last 7 days" matrix={matrix} rows={rows} cols={cols} palette="warn" />;
};

const LiveEventStream = ({ events }) => {
  const isMobile = useIsMobile();
  return (
    <Card dark pad={isMobile ? 16 : 24} style={{ height:'100%' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:16 }}>
        <div>
          <div style={{ fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,.5)' }}>Event stream</div>
          <div style={{ fontSize:16, fontWeight:400, marginTop:4, display:'flex', alignItems:'center', gap:8 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'#7A9CFF', boxShadow:'0 0 0 4px rgba(122,156,255,.25)' }} />
            Following
          </div>
        </div>
        <Button kind="subtle" style={{ background:'transparent', borderColor:'rgba(255,255,255,.25)', color:'#FFF' }}>Pause</Button>
      </div>
      <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:12, lineHeight:1.7 }}>
        {events.map(([t,lvl,src,msg],i) => {
          if (isMobile) {
            return (
              <div key={i} style={{
                padding:'10px 0', borderBottom:'1px solid rgba(255,255,255,.08)',
                display:'flex', flexDirection:'column', gap:4
              }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', fontSize:11 }}>
                  <span style={{ color: lvl==='crit'?'#C44A4A':lvl==='warn'?'#E0A13B':'#7A9CFF' }}>{lvl.toUpperCase()}</span>
                  <span style={{ color:'rgba(255,255,255,.4)' }}>{t}</span>
                </div>
                <div style={{ color:'rgba(255,255,255,.92)', fontSize:12, lineHeight:1.4 }}>{msg}</div>
                <div style={{ color:'rgba(255,255,255,.55)', fontSize:11 }}>{src}</div>
              </div>
            );
          }
          return (
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'70px 50px 110px 1fr', gap:12,
              padding:'8px 0', borderBottom:'1px solid rgba(255,255,255,.08)'
            }}>
              <span style={{ color:'rgba(255,255,255,.4)' }}>{t}</span>
              <span style={{ color: lvl==='crit'?'#C44A4A':lvl==='warn'?'#E0A13B':'rgba(255,255,255,.6)' }}>{lvl.toUpperCase()}</span>
              <span style={{ color:'rgba(255,255,255,.7)' }}>{src}</span>
              <span style={{ color:'rgba(255,255,255,.92)' }}>{msg}</span>
            </div>
          );
        })}
      </div>
    </Card>
  );
};

const HealthTrend = () => {
  const series = [
    { label:'Throughput', unit:'msg/s', color:'#3A6FF8', data: MOCK.makeSeries(800, 60) },
    { label:'Errors',     unit:'/min',  color:'#C44A4A', data: MOCK.makeSeries(2, 1) },
  ];
  const [range, setRange] = React.useState('24h');
  return <TimeSeriesChart series={series} height={200} range={range} onRange={setRange} />;
};

const ZoneSummary = ({ devices, site, onZoneClick }) => {
  const isMobile = useIsMobile();
  const siteDevices = devices.filter(d => d.site === site.id);
  const zones = {};
  siteDevices.forEach(d => {
    if (!zones[d.zone]) zones[d.zone] = { total:0, ok:0, warn:0, down:0, idle:0 };
    zones[d.zone].total++;
    zones[d.zone][d.state]++;
  });
  return (
    <Card pad={0}>
      <div style={{
        padding: isMobile ? '14px 16px' : '18px 24px',
        borderBottom:'1px solid #EDEDED',
        display:'flex', justifyContent:'space-between', alignItems:'center', gap:12, flexWrap:'wrap'
      }}>
        <div>
          <Eyebrow>Site rollup</Eyebrow>
          <div style={{ fontSize:16, color:'#0A0F1F', marginTop:4 }}>{site.name}</div>
        </div>
        <Button kind="subtle" onClick={() => onZoneClick && onZoneClick()}>Open twin</Button>
      </div>
      {Object.entries(zones).map(([zone, s]) => (
        <div key={zone} style={{
          padding: isMobile ? '14px 16px' : '16px 24px',
          borderBottom:'1px solid #EDEDED'
        }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:12 }}>
            <div style={{ minWidth:0, flex:1 }}>
              <div style={{ fontSize:14, color:'#0A0F1F' }}>{zone}</div>
              <div style={{ fontSize:12, color:'#5A5E6E', marginTop:2 }}>{s.total} devices</div>
            </div>
            <div style={{ display:'flex', gap:12, fontSize:12, fontVariantNumeric:'tabular-nums', fontFamily:'IBM Plex Mono, monospace' }}>
              {s.ok>0   && <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}><StatusDot state="ok" />{s.ok}</span>}
              {s.warn>0 && <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}><StatusDot state="warn" />{s.warn}</span>}
              {s.down>0 && <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}><StatusDot state="down" />{s.down}</span>}
              {s.idle>0 && <span style={{ display:'inline-flex', alignItems:'center', gap:4 }}><StatusDot state="idle" />{s.idle}</span>}
            </div>
          </div>
        </div>
      ))}
    </Card>
  );
};

const Overview = ({ site, devices, alerts, events, onNav }) => (
  <div>
    <KPIStrip devices={devices} alerts={alerts} />
    <div data-collapse-md style={{ display:'grid', gridTemplateColumns:'2fr 1fr', borderBottom:'1px solid #EDEDED' }}>
      <HealthTrend />
      <SectorBreakdown devices={devices.filter(d => d.site === site.id)} />
    </div>
    <div data-pad-md style={{ padding:32, background:'#F6F7F9', display:'flex', flexDirection:'column', gap:24 }}>
      <div data-collapse-md style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24 }}>
        <FleetStatusDonut devices={devices.filter(d => d.site === site.id)} />
        <AlertHeatmap />
        <ZoneSummary site={site} devices={devices} onZoneClick={() => onNav('twin')} />
      </div>
      <LiveEventStream events={events} />
    </div>
  </div>
);

Object.assign(window, { Overview });