function IoTScreen() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 2200);
    return () => clearInterval(t);
  }, []);

  const jitter = (arr) => arr.map(v => v * (0.96 + Math.random() * 0.08));

  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            IoT Real-time Operations
            <span className="tag ok"><span className="live-dot"/>LIVE · MQTT stream</span>
          </div>
          <div className="screen-sub">48,242 devices connected · 12.4K events/sec · Protocols: MQTT, OPC-UA, Modbus, LoRaWAN · <span className="mono" style={{ color: 'var(--ink-2)' }}>Latency 42 ms</span></div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="filter"/>Filter devices</button>
          <button className="btn"><Icon name="alert"/>Alert rules</button>
          <button className="btn primary"><Icon name="cpu"/>Add device</button>
        </div>
      </div>

      {/* Status bar */}
      <div className="grid g-4" style={{ marginBottom: 14 }}>
        <div className="card kpi" style={{ padding: 12 }}>
          <div className="label"><span className="live-dot"/>Online devices</div>
          <div className="value">48,196<span className="unit">/48,242</span></div>
          <div className="delta up" style={{ fontSize: 11 }}>99.90% · 46 offline</div>
        </div>
        <div className="card kpi" style={{ padding: 12 }}>
          <div className="label">Events/sec</div>
          <div className="value">12.4<span className="unit">K</span></div>
          <div className="delta up" style={{ fontSize: 11 }}><Icon name="trending" size={12}/>+4.2% vs 1hr avg</div>
        </div>
        <div className="card kpi" style={{ padding: 12 }}>
          <div className="label">Active alerts</div>
          <div className="value" style={{ color: 'var(--accent-2)' }}>18</div>
          <div className="delta" style={{ color: 'var(--danger)', fontSize: 11 }}><Icon name="alert" size={12}/>2 critical · 8 warn · 8 info</div>
        </div>
        <div className="card kpi" style={{ padding: 12 }}>
          <div className="label">Data ingested (24h)</div>
          <div className="value">142.6<span className="unit">GB</span></div>
          <div className="delta up" style={{ fontSize: 11 }}>Kafka + ClickHouse</div>
        </div>
      </div>

      {/* Device grid */}
      <div className="grid" style={{ gridTemplateColumns: '2fr 1fr', gap: 14 }}>
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600, marginBottom: 8 }}>Critical Devices</div>
          <div className="grid g-3" style={{ marginBottom: 14 }}>
            {IOT_DEVICES.map((d, i) => {
              const jittered = jitter(d.series);
              const cur = jittered[jittered.length - 1];
              return (
                <div key={d.id} className="card" style={{ padding: 12, position: 'relative' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                    <div style={{ minWidth: 0, flex: 1 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <span className={`live-dot ${d.status === 'ok' ? '' : d.status}`}/>
                        <span style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>{d.type}</span>
                      </div>
                      <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 3, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.name}</div>
                      <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginTop: 1 }}>{d.id}</div>
                    </div>
                    <button className="icon-btn" style={{ width: 22, height: 22 }}><Icon name="moreH" size={13}/></button>
                  </div>
                  <div style={{ marginTop: 12, display: 'flex', alignItems: 'flex-end', gap: 8 }}>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>{d.metric}</div>
                      <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: d.status === 'ok' ? 'var(--ink)' : d.status === 'warn' ? 'var(--accent-2)' : 'var(--danger)', lineHeight: 1.1, marginTop: 2 }}>{d.value}</div>
                    </div>
                    <div style={{ flexShrink: 0 }}>
                      <Sparkline data={jittered} w={100} h={40} stroke={d.status === 'ok' ? 'var(--ok)' : d.status === 'warn' ? 'var(--accent-2)' : 'var(--danger)'} fill={d.status === 'ok' ? 'var(--ok)' : d.status === 'warn' ? 'var(--accent-2)' : 'var(--danger)'} area/>
                    </div>
                  </div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 8, paddingTop: 8, borderTop: '1px solid var(--border)' }}>{d.sub}</div>
                </div>
              );
            })}
          </div>

          {/* Device health matrix */}
          <div className="card">
            <div className="card-head">
              <div>
                <h3>Device Health Matrix — Substations</h3>
                <div className="sub">Uptime % · last 12 hours · 24 stations × 12 slots</div>
              </div>
              <span className="tag ok"><span className="live-dot"/>Streaming</span>
            </div>
            <div className="card-body">
              <Heatmap
                rows={8}
                cols={12}
                rowLabels={["Nagpur-1","Bhopal-2","Indore-3","Jaipur-4","Lucknow-5","Kanpur-6","Patna-7","Ranchi-8"]}
                colLabels={["12h","10","08","06","04","02","00","22","20","18","16","14"]}
                data={Array.from({length:8}, (_,ri) => Array.from({length:12}, (_,ci) => Math.round(88 + Math.random() * 12) - (ri === 1 && ci < 3 ? 15 : 0)))}
                w={700}
                format={v => v}
              />
            </div>
          </div>
        </div>

        {/* Alert feed */}
        <div>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--ink-4)', fontWeight: 600, marginBottom: 8 }}>Alert Stream</div>
          <div className="card" style={{ overflow: 'hidden' }}>
            <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span className="live-dot warn"/>
                <span style={{ fontSize: 12, fontWeight: 600 }}>Live alerts</span>
                <span className="tag" style={{ fontSize: 10 }}>18 active</span>
              </div>
              <button className="btn sm">All rules</button>
            </div>
            <div style={{ maxHeight: 460, overflowY: 'auto' }}>
              {IOT_ALERTS.map((a, i) => (
                <div key={i} style={{ padding: '10px 12px', borderBottom: i < IOT_ALERTS.length - 1 ? '1px solid var(--border)' : 0, opacity: a.ack ? 0.6 : 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <span className={`live-dot ${a.sev === 'info' ? 'ok' : a.sev}`}/>
                    <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-3)' }}>{a.at}</span>
                    <span className="mono" style={{ fontSize: 10.5, color: 'var(--primary)', fontWeight: 600 }}>{a.device}</span>
                    <span className="spacer"/>
                    {a.ack ? <span className="tag" style={{ fontSize: 10 }}><Icon name="check" size={9}/>Ack</span> : <button className="btn sm" style={{ height: 20, padding: '0 8px', fontSize: 10 }}>Ack</button>}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink)', lineHeight: 1.4 }}>{a.msg}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="ai-strip" style={{ marginTop: 14 }}>
            <div className="glyph"><Icon name="sparkles"/></div>
            <div style={{ flex: 1 }}>
              <div className="title">Anomaly detected on TRF-PWR-118</div>
              <div className="body" style={{ fontSize: 12 }}>Streaming Isolation Forest flagged unusual oil temperature ramp. Predicted failure window: <b>18–24 hrs</b>. Recommend scheduled inspection.</div>
              <div className="actions">
                <button className="btn sm">Create work order</button>
                <button className="btn sm">Ignore</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.IoTScreen = IoTScreen;