/* eslint-disable */
/* =========================================================
   TEO IoT Dashboard — Alerts queue + Automations list.
   Desktop: dense table. Mobile: stacked cards.
   ========================================================= */

const Alerts = ({ alerts, onAck, onOpenDevice, devices }) => {
  const isMobile = useIsMobile();
  const [filter, setFilter] = React.useState('Open');

  const visible = alerts.filter(a => {
    if (filter === 'Open') return !a.ack;
    if (filter === 'Critical') return a.severity === 'crit';
    if (filter === 'Acknowledged') return a.ack;
    return true;
  });

  const counts = {
    Open: alerts.filter(a => !a.ack).length,
    Critical: alerts.filter(a => a.severity==='crit').length,
    Acknowledged: alerts.filter(a => a.ack).length,
    All: alerts.length,
  };

  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', flexWrap:'wrap', gap:12
        }}>
          <div>
            <Eyebrow>{visible.length} of {alerts.length}</Eyebrow>
            <div style={{ fontSize:16, color:'#0A0F1F', marginTop:4 }}>Alert queue</div>
          </div>
        </div>

        {/* Filter chips — horizontal scroll on mobile */}
        <div style={{
          padding:'10px 16px', borderBottom:'1px solid #EDEDED',
          display:'flex', gap:6, overflowX:'auto', WebkitOverflowScrolling:'touch',
        }}>
          {Object.keys(counts).map(f => (
            <button key={f} onClick={()=>setFilter(f)} style={{
              flex:'0 0 auto',
              padding:'7px 12px', background: filter===f?'#0A0F1F':'#FFF',
              color: filter===f?'#FFF':'#242739',
              border:'1px solid '+(filter===f?'#0A0F1F':'#EDEDED'),
              borderRadius:0, cursor:'pointer', font:"400 13px 'IBM Plex Sans'",
              display:'inline-flex', alignItems:'center', gap:8, whiteSpace:'nowrap'
            }}>
              {f}
              <span style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11, color: filter===f?'rgba(255,255,255,.6)':'#5A5E6E' }}>{counts[f]}</span>
            </button>
          ))}
        </div>

        {visible.length === 0 && (
          <div style={{ padding:'60px 24px', textAlign:'center', color:'#5A5E6E', fontSize:14 }}>
            No alerts in this view.
          </div>
        )}

        {/* --------- Mobile cards --------- */}
        {isMobile && visible.map(a => {
          const device = devices.find(d => d.id === a.device);
          return (
            <div key={a.id} style={{
              padding:'14px 16px', borderBottom:'1px solid #EDEDED',
              background: a.ack ? '#FAFBFC' : '#FFF',
              opacity: a.ack ? 0.85 : 1,
              display:'flex', flexDirection:'column', gap:10
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:10 }}>
                <Sev s={a.severity} />
                <span style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:12, color:'#5A5E6E' }}>{a.ts}</span>
                <span style={{ flex:1, textAlign:'right', fontFamily:'IBM Plex Mono, monospace', fontSize:11, color:'#5A5E6E' }}>{a.id}</span>
              </div>
              <div style={{ color:'#0A0F1F', fontSize:14, lineHeight:1.4 }}>{a.message}</div>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:10, flexWrap:'wrap' }}>
                <button onClick={() => device && onOpenDevice(device)} style={{
                  background:'none', border:'none', padding:0, cursor:'pointer',
                  fontFamily:'IBM Plex Mono, monospace', fontSize:12, color:'#3A6FF8',
                  textDecoration:'underline', textUnderlineOffset:3
                }}>{a.device}</button>
                <span style={{ fontSize:11, color:'#5A5E6E', fontFamily:'IBM Plex Mono, monospace' }}>{a.site}</span>
              </div>
              <div>
                {a.ack
                  ? <span style={{ fontSize:12, color:'#5A5E6E' }}>Acknowledged</span>
                  : <Button kind="ghost" style={{ padding:'8px 14px', fontSize:13, width:'100%' }} onClick={()=>onAck(a)}>Acknowledge</Button>
                }
              </div>
            </div>
          );
        })}

        {/* --------- Desktop table --------- */}
        {!isMobile && (
          <>
            <div style={{
              display:'grid', gridTemplateColumns:'120px 70px 80px 130px 1fr 110px 130px',
              padding:'12px 24px', borderBottom:'1px solid #EDEDED',
              fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'#5A5E6E', fontWeight:500
            }}>
              <div>Alert</div><div>Sev</div><div>Time</div><div>Device</div><div>Message</div><div>Site</div><div>Action</div>
            </div>
            {visible.map(a => {
              const device = devices.find(d => d.id === a.device);
              return (
                <div key={a.id} style={{
                  display:'grid', gridTemplateColumns:'120px 70px 80px 130px 1fr 110px 130px',
                  padding:'14px 24px', borderBottom:'1px solid #EDEDED',
                  fontSize:14, color:'#0A0F1F', alignItems:'center',
                  background: a.ack ? '#FAFBFC' : '#FFF', opacity: a.ack ? 0.7 : 1
                }}>
                  <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:13 }}>{a.id}</div>
                  <div><Sev s={a.severity} /></div>
                  <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:12, color:'#5A5E6E' }}>{a.ts}</div>
                  <div>
                    <button onClick={() => device && onOpenDevice(device)} style={{
                      background:'none', border:'none', padding:0, cursor:'pointer',
                      fontFamily:'IBM Plex Mono, monospace', fontSize:13, color:'#3A6FF8',
                      textDecoration:'underline', textUnderlineOffset:3
                    }}>{a.device}</button>
                  </div>
                  <div style={{ color:'#242739' }}>{a.message}</div>
                  <div style={{ fontSize:12, color:'#5A5E6E', fontFamily:'IBM Plex Mono, monospace' }}>{a.site}</div>
                  <div>
                    {a.ack
                      ? <span style={{ fontSize:12, color:'#5A5E6E' }}>Acknowledged</span>
                      : <Button kind="ghost" style={{ padding:'6px 12px', fontSize:12 }} onClick={()=>onAck(a)}>Acknowledge</Button>
                    }
                  </div>
                </div>
              );
            })}
          </>
        )}
      </div>
    </div>
  );
};

const Automations = ({ rules }) => {
  const isMobile = useIsMobile();
  return (
    <div data-pad-md style={{ padding:32, background:'#F6F7F9', minHeight:'calc(100vh - 73px)' }}>
      <div style={{ background:'#FFF', border:'1px solid #EDEDED' }}>
        <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>{rules.length} rules</Eyebrow>
            <div style={{ fontSize:16, color:'#0A0F1F', marginTop:4 }}>Automations</div>
          </div>
          <Button kind="primary">+ New rule</Button>
        </div>

        {/* Mobile cards */}
        {isMobile && rules.map(r => (
          <div key={r.id} style={{
            padding:'14px 16px', borderBottom:'1px solid #EDEDED',
            display:'flex', flexDirection:'column', gap:10
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:8 }}>
              <span style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:11, color:'#5A5E6E' }}>{r.id}</span>
              <StatusPill state={r.state==='enabled'?'ok':'idle'}>{r.state}</StatusPill>
            </div>
            <div style={{ fontSize:15, color:'#0A0F1F', lineHeight:1.3 }}>{r.name}</div>
            <Field label="Trigger" mono>{r.trigger}</Field>
            <Field label="Action">{r.action}</Field>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', gap:12, marginTop:2 }}>
              <span style={{ fontSize:11, color:'#5A5E6E' }}>
                Runs · 7d: <strong style={{ fontFamily:'IBM Plex Mono, monospace', color:'#0A0F1F' }}>{r.runs7d}</strong>
              </span>
              <span style={{ fontSize:11, color:'#5A5E6E', fontFamily:'IBM Plex Mono, monospace' }}>Last · {r.lastRun}</span>
            </div>
          </div>
        ))}

        {/* Desktop table */}
        {!isMobile && (
          <>
            <div style={{
              display:'grid', gridTemplateColumns:'90px 1fr 1fr 1fr 90px 70px 100px 90px',
              padding:'12px 24px', borderBottom:'1px solid #EDEDED',
              fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'#5A5E6E', fontWeight:500
            }}>
              <div>Rule</div><div>Name</div><div>Trigger</div><div>Action</div>
              <div>State</div><div style={{ textAlign:'right' }}>7d</div><div style={{ textAlign:'right' }}>Last run</div><div></div>
            </div>
            {rules.map(r => (
              <div key={r.id} style={{
                display:'grid', gridTemplateColumns:'90px 1fr 1fr 1fr 90px 70px 100px 90px',
                padding:'16px 24px', borderBottom:'1px solid #EDEDED',
                fontSize:14, color:'#0A0F1F', alignItems:'center'
              }}>
                <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:13 }}>{r.id}</div>
                <div>{r.name}</div>
                <div style={{ fontFamily:'IBM Plex Mono, monospace', fontSize:12, color:'#242739' }}>{r.trigger}</div>
                <div style={{ fontSize:13, color:'#242739' }}>{r.action}</div>
                <div><StatusPill state={r.state==='enabled'?'ok':'idle'}>{r.state}</StatusPill></div>
                <div style={{ textAlign:'right', fontVariantNumeric:'tabular-nums', fontFamily:'IBM Plex Mono, monospace', fontSize:13 }}>{r.runs7d}</div>
                <div style={{ textAlign:'right', color:'#5A5E6E', fontSize:13, fontFamily:'IBM Plex Mono, monospace' }}>{r.lastRun}</div>
                <div style={{ textAlign:'right' }}>
                  <button style={{ background:'none', border:'none', cursor:'pointer', color:'#3A6FF8', font:"400 13px 'IBM Plex Sans'" }}>Edit</button>
                </div>
              </div>
            ))}
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Alerts, Automations });