/* eslint-disable */
/* =========================================================
   TEO IoT Dashboard — Devices fleet.
   Desktop: dense table.
   Mobile: stacked cards (each row becomes a self-contained
   card with labelled fields, no horizontal scroll).
   ========================================================= */

const KINDS = [
  'All',
  // Energy / logistics
  'transformer','switchgear','battery','inverter','sensor','gateway','vehicle','conveyor',
  // Manufacturing
  'cnc','robot','paint','ahu','plant','meter',
  // HVAC
  'vrf-outdoor','vrf-indoor','chiller',
  // Campus
  'occupancy','projector','ap',
];
const STATES = ['All','ok','warn','down','idle'];

// Horizontal pill scroll strip — reused inside the toolbar
const FilterPill = ({ active, onClick, children }) => (
  <button onClick={onClick} style={{
    flex:'0 0 auto',
    padding:'6px 12px',
    background: active ? '#0A0F1F' : '#FFF',
    color: active ? '#FFF' : '#242739',
    border:'1px solid '+(active ? '#0A0F1F' : '#EDEDED'),
    borderRadius:0, cursor:'pointer',
    font:"400 12px 'IBM Plex Sans'", textTransform:'capitalize',
    whiteSpace:'nowrap',
    display:'inline-flex', alignItems:'center', gap:6,
  }}>
    {children}
  </button>
);

const Devices = ({ devices, site, onOpen }) => {
  const isMobile = useIsMobile();
  const [kind, setKind] = React.useState('All');
  const [state, setState] = React.useState('All');
  const [query, setQuery] = React.useState('');
  const [scope, setScope] = React.useState('This site');

  const filtered = devices.filter(d => {
    if (scope === 'This site' && d.site !== site.id) return false;
    if (kind !== 'All' && d.kind !== kind) return false;
    if (state !== 'All' && d.state !== state) return false;
    if (query && !(`${d.id} ${d.name} ${d.zone}`.toLowerCase().includes(query.toLowerCase()))) return false;
    return true;
  });

  return (
    <div data-pad-md style={{ padding:32, background:'#F6F7F9', minHeight:'calc(100vh - 73px)' }}>
      <div style={{ background:'#FFF', border:'1px solid #EDEDED' }}>
        {/* Header */}
        <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>Fleet · {filtered.length} of {devices.length}</Eyebrow>
            <div style={{ fontSize:16, color:'#0A0F1F', marginTop:4 }}>All devices</div>
          </div>
          <SegmentedControl value={scope} onChange={setScope} options={['This site','All sites']} />
        </div>

        {/* Search */}
        <div style={{ padding:'10px 16px', borderBottom:'1px solid #EDEDED' }}>
          <input value={query} onChange={e=>setQuery(e.target.value)} placeholder="Search id, name, zone…"
            style={{
              background:'transparent', border:'1px solid #878787', borderRadius:0,
              padding:'10px 12px', font:"400 14px 'IBM Plex Sans'", width:'100%', boxSizing:'border-box'
            }} />
        </div>

        {/* Filters as horizontal scrollers */}
        <div style={{ padding:'10px 0 6px', borderBottom:'1px solid #EDEDED' }}>
          <div style={{ padding:'0 16px 6px' }}>
            <Eyebrow>Class</Eyebrow>
          </div>
          <div style={{
            display:'flex', gap:6, overflowX:'auto', WebkitOverflowScrolling:'touch',
            padding:'2px 16px 10px',
          }}>
            {KINDS.map(k => <FilterPill key={k} active={kind===k} onClick={()=>setKind(k)}>{k}</FilterPill>)}
          </div>
          <div style={{ padding:'4px 16px 6px' }}>
            <Eyebrow>State</Eyebrow>
          </div>
          <div style={{
            display:'flex', gap:6, overflowX:'auto', WebkitOverflowScrolling:'touch',
            padding:'2px 16px 10px',
          }}>
            {STATES.map(s => (
              <FilterPill key={s} active={state===s} onClick={()=>setState(s)}>
                {s!=='All' && <StatusDot state={s} size={6} />}
                {s}
              </FilterPill>
            ))}
          </div>
        </div>

        {/* Empty state */}
        {filtered.length === 0 && (
          <div style={{ padding:'60px 24px', textAlign:'center', color:'#5A5E6E', fontSize:14 }}>
            No devices match these filters.
          </div>
        )}

        {/* --------- Mobile: stacked cards --------- */}
        {isMobile && filtered.map(d => {
          const valColor = d.state==='down' ? '#C44A4A' : d.state==='warn' ? '#E0A13B' : '#0A0F1F';
          return (
            <div key={d.id} onClick={() => onOpen(d)} style={{
              padding:'16px', borderBottom:'1px solid #EDEDED', cursor:'pointer',
              display:'flex', flexDirection:'column', gap:12
            }}>
              {/* Header row */}
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:12 }}>
                <div style={{ minWidth:0, flex:1 }}>
                  <div style={{ fontSize:11, color:'#5A5E6E', fontFamily:'IBM Plex Mono, monospace' }}>{d.id}</div>
                  <div style={{ fontSize:15, color:'#0A0F1F', marginTop:3, lineHeight:1.3 }}>{d.name}</div>
                  <div style={{ fontSize:12, color:'#5A5E6E', marginTop:3 }}>{d.zone}</div>
                </div>
                <StatusPill state={d.state} />
              </div>

              {/* Metric + class */}
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
                <Field label={d.metric.label}>
                  <span style={{
                    fontFamily:'IBM Plex Mono, monospace', color: valColor,
                    fontVariantNumeric:'tabular-nums', fontSize:15
                  }}>
                    {d.state==='down' ? '—' : `${d.metric.value} ${d.metric.unit}`}
                  </span>
                </Field>
                <Field label="Class">
                  <span style={{ display:'inline-flex', alignItems:'center', gap:6, textTransform:'capitalize' }}>
                    <KindIcon kind={d.kind} />{d.kind}
                  </span>
                </Field>
              </div>

              {/* Envelope */}
              <div>
                <Eyebrow style={{ marginBottom:6 }}>Operating envelope</Eyebrow>
                <ThresholdBar value={d.metric.value} min={d.metric.min} max={d.metric.max}
                              warn={d.metric.warn} crit={d.metric.crit} unit={d.metric.unit} height={6} />
              </div>

              {/* Trend + open chevron */}
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:12 }}>
                <Sparkline data={MOCK.makeSeries(d.metric.value, d.metric.value*0.04)} w={120} h={24}
                           color={d.state==='down'?'#C44A4A': d.state==='warn'?'#E0A13B':'#3A6FF8'} />
                <span style={{ fontSize:12, color:'#3A6FF8', letterSpacing:'0.04em', textTransform:'uppercase' }}>
                  Open detail →
                </span>
              </div>
            </div>
          );
        })}

        {/* --------- Desktop: table --------- */}
        {!isMobile && (
          <>
            <div style={{
              display:'grid', gridTemplateColumns:'120px 1fr 130px 140px 120px 160px 90px 40px',
              padding:'12px 24px', borderBottom:'1px solid #EDEDED',
              fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'#5A5E6E', fontWeight:500
            }}>
              <div>ID</div><div>Name · Zone</div><div>Class</div><div>State</div>
              <div>Live metric</div><div>Envelope</div><div>Trend</div><div></div>
            </div>
            {filtered.map(d => (
              <div key={d.id} onClick={() => onOpen(d)} style={{
                display:'grid', gridTemplateColumns:'120px 1fr 130px 140px 120px 160px 90px 40px',
                padding:'14px 24px', borderBottom:'1px solid #EDEDED', alignItems:'center',
                fontSize:14, color:'#0A0F1F', cursor:'pointer',
                transition:'background 200ms cubic-bezier(0.68,0.01,0.58,0.75)'
              }} onMouseOver={e => e.currentTarget.style.background = '#FAFBFC'}
                 onMouseOut={e => e.currentTarget.style.background = '#FFF'}>
                <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:13 }}>{d.id}</div>
                <div>
                  <div>{d.name}</div>
                  <div style={{ fontSize:12, color:'#5A5E6E', marginTop:2 }}>{d.zone}</div>
                </div>
                <div style={{ display:'flex', alignItems:'center', gap:8, color:'#242739', textTransform:'capitalize' }}>
                  <KindIcon kind={d.kind} />{d.kind}
                </div>
                <div><StatusPill state={d.state} /></div>
                <div style={{
                  fontVariantNumeric:'tabular-nums', fontFamily:"'IBM Plex Mono', monospace", fontSize:13,
                  color: d.state==='down'?'#C44A4A': d.state==='warn'?'#E0A13B':'#0A0F1F'
                }}>
                  {d.state==='down' ? '—' : `${d.metric.value} ${d.metric.unit}`}
                </div>
                <div>
                  <ThresholdBar value={d.metric.value} min={d.metric.min} max={d.metric.max}
                                warn={d.metric.warn} crit={d.metric.crit} unit={d.metric.unit} height={6} />
                </div>
                <div>
                  <Sparkline data={MOCK.makeSeries(d.metric.value, d.metric.value*0.04)}
                             color={d.state==='down'?'#C44A4A': d.state==='warn'?'#E0A13B':'#3A6FF8'} />
                </div>
                <div style={{ color:'#5A5E6E', textAlign:'right', fontSize:16 }}>→</div>
              </div>
            ))}
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Devices });