/* eslint-disable */
/* =========================================================
   TEO IoT Dashboard — Telemetry workspace.
   Cross-device telemetry comparison + raw inspector.
   ========================================================= */

const Telemetry = ({ devices, site }) => {
  const siteDevices = devices.filter(d => d.site === site.id);
  const [picked, setPicked] = React.useState(siteDevices.slice(0, 3).map(d => d.id));
  const [range, setRange] = React.useState('24h');

  const togglePick = (id) => {
    setPicked(p => p.includes(id) ? p.filter(x => x !== id) : [...p, id].slice(0, 5));
  };

  const palette = ['#3A6FF8','#0A0F1F','#E0A13B','#C44A4A','#878787'];
  const series = picked.map((id, i) => {
    const d = siteDevices.find(x => x.id === id);
    if (!d) return null;
    return { label:`${d.id} · ${d.metric.label}`, unit:d.metric.unit, color: palette[i % palette.length], data: MOCK.makeSeries(d.metric.value, d.metric.value*0.05) };
  }).filter(Boolean);

  return (
    <div data-pad-md data-collapse-md style={{ padding:32, background:'#F6F7F9', minHeight:'calc(100vh - 73px)', display:'grid', gridTemplateColumns:'1fr 320px', gap:24 }}>
      <div style={{ display:'flex', flexDirection:'column', gap:24 }}>
        {/* Chart */}
        <Card pad={0}>
          <div style={{ padding:'18px 24px', borderBottom:'1px solid #EDEDED', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div>
              <Eyebrow>Comparison</Eyebrow>
              <div style={{ fontSize:18, color:'#0A0F1F', marginTop:4 }}>{picked.length} of 5 series</div>
            </div>
            <SegmentedControl value={range} onChange={setRange} options={['1h','24h','7d','30d']} />
          </div>
          <div style={{ padding:24 }}>
            {series.length === 0 ? (
              <div style={{ padding:'80px 24px', textAlign:'center', color:'#5A5E6E', fontSize:14 }}>
                Pick up to 5 devices from the inspector to compare telemetry.
              </div>
            ) : (
              <TimeSeriesChart series={series} height={280} range={range} />
            )}
          </div>
        </Card>

        {/* Raw stream */}
        <Card dark pad={24}>
          <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)' }}>Raw telemetry</div>
              <div style={{ fontSize:18, 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 · {picked.length} devices
              </div>
            </div>
            <div style={{ display:'flex', gap:8 }}>
              <Button kind="subtle" style={{ background:'transparent', borderColor:'rgba(255,255,255,.25)', color:'#FFF' }}>Pause</Button>
              <Button kind="subtle" style={{ background:'transparent', borderColor:'rgba(255,255,255,.25)', color:'#FFF' }}>Export</Button>
            </div>
          </div>
          <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:12, lineHeight:1.8 }}>
            {picked.map(id => {
              const d = siteDevices.find(x => x.id === id);
              if (!d) return null;
              return (
                <div key={id} style={{ display:'grid', gridTemplateColumns:'70px 120px 100px 1fr', gap:12, padding:'6px 0', borderBottom:'1px solid rgba(255,255,255,.08)' }}>
                  <span style={{ color:'rgba(255,255,255,.4)' }}>12:42:08</span>
                  <span style={{ color:'#7A9CFF' }}>{d.id}</span>
                  <span style={{ color:'rgba(255,255,255,.7)' }}>{d.metric.label}</span>
                  <span style={{ color:'rgba(255,255,255,.92)' }}>{`{"v": ${d.metric.value}, "unit": "${d.metric.unit}", "state": "${d.state}"}`}</span>
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      {/* Inspector */}
      <Card pad={0}>
        <div style={{ padding:'18px 24px', borderBottom:'1px solid #EDEDED' }}>
          <Eyebrow>Series</Eyebrow>
          <div style={{ fontSize:16, color:'#0A0F1F', marginTop:6 }}>Pick devices</div>
          <div style={{ fontSize:12, color:'#5A5E6E', marginTop:4 }}>{site.name}</div>
        </div>
        <div style={{ maxHeight:'calc(100vh - 320px)', overflowY:'auto' }}>
          {siteDevices.map((d, i) => {
            const on = picked.includes(d.id);
            const color = palette[picked.indexOf(d.id) % palette.length];
            return (
              <label key={d.id} style={{
                display:'grid', gridTemplateColumns:'24px 1fr 12px',
                padding:'12px 24px', borderBottom:'1px solid #EDEDED',
                cursor:'pointer', alignItems:'center', gap:8
              }}>
                <input type="checkbox" checked={on} onChange={()=>togglePick(d.id)} style={{ accentColor:'#0A0F1F' }} />
                <div>
                  <div style={{ fontSize:13, color:'#0A0F1F', fontFamily:'IBM Plex Mono, monospace' }}>{d.id}</div>
                  <div style={{ fontSize:12, color:'#5A5E6E', marginTop:2 }}>{d.name} · {d.metric.label}</div>
                </div>
                {on && <span style={{ width:10, height:2, background:color }} />}
              </label>
            );
          })}
        </div>
      </Card>
    </div>
  );
};

Object.assign(window, { Telemetry });