// Web fleet dashboard — desktop, 1280×860
function FleetDashboard({ accent = '#FF8A2B', dark = true }) {
  const t = useTheme(dark, accent);
  const [selected, setSelected] = React.useState('ada-01');
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { const id = setInterval(() => setTick(x => x + 1), 1200); return () => clearInterval(id); }, []);

  const robots = [
    { id: 'ada-01', name: 'Ada-01', kind: 'humanoid', model: 'Unitree H1', status: 'active', task: 'cleanup-kitchen', battery: 78, signal: 95, cpu: 42, location: 'Lab · zone 2' },
    { id: 'rex-04', name: 'Rex-04', kind: 'quadruped', model: 'Spot', status: 'active', task: 'patrol-perimeter', battery: 64, signal: 88, cpu: 31, location: 'Outdoor' },
    { id: 'arm-12', name: 'Arm-12', kind: 'arm', model: 'UR5e', status: 'idle', task: '—', battery: 100, signal: 100, cpu: 4, location: 'Workbench A' },
    { id: 'sky-02', name: 'Sky-02', kind: 'drone', model: 'PX4 Holybro', status: 'charging', task: '—', battery: 23, signal: 72, cpu: 8, location: 'Dock 3' },
    { id: 'roam-7', name: 'Roam-7', kind: 'rover', model: 'Roomba j7', status: 'active', task: 'tidy-living-rm', battery: 56, signal: 99, cpu: 18, location: 'Living rm' },
    { id: 'ada-02', name: 'Ada-02', kind: 'humanoid', model: 'Unitree H1', status: 'error', task: '—', battery: 41, signal: 14, cpu: 0, location: 'Lab · zone 1' },
  ];

  const cur = robots.find(r => r.id === selected);
  const statusColor = (s) => s === 'active' ? t.ok : s === 'idle' ? t.t2 : s === 'charging' ? t.info : t.danger;

  // Rolling sparkline data
  const cpuData = React.useMemo(() => Array.from({ length: 40 }, (_, i) => 30 + Math.sin((i + tick) / 4) * 15 + Math.random() * 8), [tick]);
  const latData = React.useMemo(() => Array.from({ length: 40 }, (_, i) => 12 + Math.sin((i + tick) / 5) * 4 + Math.random() * 3), [tick]);

  return (
    <div style={{
      width: 1280, height: 860, background: t.bg0, color: t.t0,
      fontFamily: OR.font.sans, display: 'grid', gridTemplateColumns: '220px 1fr', overflow: 'hidden',
      ['--accent']: accent,
    }}>
      <ORStyles/>

      {/* Sidebar */}
      <div style={{ borderRight: `1px solid ${t.line}`, background: t.bg1, display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '16px 16px 14px', borderBottom: `1px solid ${t.line}` }}>
          <ORWordmark color={t.t0} accent={accent} size={14}/>
        </div>
        <div style={{ padding: 12, flex: 1 }}>
          {[
            { i: Icons.home, l: 'Overview', n: '' },
            { i: Icons.robot, l: 'Fleet', n: '6', active: true },
            { i: Icons.store, l: 'Skills', n: '142' },
            { i: Icons.map, l: 'Map' },
            { i: Icons.repeat, l: 'Automations', n: '24' },
            { i: Icons.terminal, l: 'Logs' },
            { i: Icons.settings, l: 'Settings' },
          ].map((m, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
              borderRadius: 6, fontSize: 13, color: m.active ? t.t0 : t.t1,
              background: m.active ? t.bg3 : 'transparent', cursor: 'pointer', marginBottom: 2,
            }}>
              <Icon d={m.i} size={15}/>
              <span style={{ flex: 1 }}>{m.l}</span>
              {m.n && <span style={{ fontFamily: OR.font.mono, fontSize: 10, color: t.t2 }}>{m.n}</span>}
            </div>
          ))}
        </div>
        <div style={{ padding: 12, borderTop: `1px solid ${t.line}` }}>
          <div style={{ padding: 10, background: t.bg2, borderRadius: 6, fontSize: 11, color: t.t2, fontFamily: OR.font.mono }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: t.ok, marginBottom: 4 }}>
              <Pip color={t.ok} pulse size={6}/> hub.local
            </div>
            <div>v0.9.4 · 14ms</div>
          </div>
        </div>
      </div>

      {/* Main area */}
      <div style={{ display: 'grid', gridTemplateRows: '52px 1fr', overflow: 'hidden' }}>
        {/* Top bar */}
        <div style={{ borderBottom: `1px solid ${t.line}`, padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            <span style={{ fontSize: 13, color: t.t2, fontFamily: OR.font.mono }}>Fleet</span>
            <Icon d={Icons.chev} size={12} stroke={t.t3}/>
            <span style={{ fontSize: 13, color: t.t0, fontWeight: 500 }}>All robots</span>
            <Tag theme={t} color={t.ok} dot>4 active</Tag>
            <Tag theme={t} color={t.danger} dot>1 error</Tag>
          </div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 10px', border: `1px solid ${t.line}`, borderRadius: 6, fontSize: 12, color: t.t2, width: 220 }}>
              <Icon d={Icons.search} size={13}/> Search robots, skills, logs…
              <span style={{ marginLeft: 'auto', fontFamily: OR.font.mono, fontSize: 10, padding: '1px 5px', border: `1px solid ${t.line}`, borderRadius: 3 }}>⌘K</span>
            </div>
            <button style={{ width: 30, height: 30, border: `1px solid ${t.line}`, background: 'transparent', color: t.t1, borderRadius: 6, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}><Icon d={Icons.bell} size={14}/></button>
            <div style={{ width: 30, height: 30, borderRadius: '50%', background: accent, color: t.bg0, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 600 }}>K</div>
          </div>
        </div>

        {/* Body grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '320px 1fr', overflow: 'hidden' }}>
          {/* Robot list */}
          <div style={{ borderRight: `1px solid ${t.line}`, overflow: 'auto' }}>
            <div style={{ padding: '14px 16px 8px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.1em' }}>ROBOTS · 6</span>
              <button style={{ background: 'transparent', border: 'none', color: t.t2, cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center', gap: 4, fontSize: 11, fontFamily: OR.font.mono }}>
                <Icon d={Icons.add} size={12}/> add
              </button>
            </div>
            {robots.map(r => (
              <div key={r.id}
                onClick={() => setSelected(r.id)}
                style={{
                  padding: '12px 16px', display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 12,
                  alignItems: 'center', borderLeft: `2px solid ${selected === r.id ? accent : 'transparent'}`,
                  background: selected === r.id ? t.bg2 : 'transparent', cursor: 'pointer',
                  borderBottom: `1px solid ${t.lineSoft}`,
                }}>
                <div style={{ width: 40, height: 40, background: t.bg2, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <RobotGlyph kind={r.kind} size={28} color={t.t1} accent={accent}/>
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <span style={{ fontSize: 13, fontWeight: 500, color: t.t0 }}>{r.name}</span>
                    <Pip color={statusColor(r.status)} pulse={r.status === 'active'} size={6}/>
                  </div>
                  <div style={{ fontSize: 11, color: t.t2, fontFamily: OR.font.mono, marginTop: 2, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {r.task !== '—' ? r.task : r.model}
                  </div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: r.battery < 30 ? t.warn : t.t1 }}>{r.battery}%</div>
                  <div style={{ width: 28, height: 3, background: t.bg3, borderRadius: 99, marginTop: 4, overflow: 'hidden' }}>
                    <div style={{ width: `${r.battery}%`, height: '100%', background: r.battery < 30 ? t.warn : t.ok }}/>
                  </div>
                </div>
              </div>
            ))}
          </div>

          {/* Detail panel */}
          <div style={{ overflow: 'auto', padding: 24 }}>
            {/* Header */}
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
              <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <div style={{ width: 60, height: 60, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <RobotGlyph kind={cur.kind} size={42} color={t.t0} accent={accent}/>
                </div>
                <div>
                  <div style={{ fontFamily: OR.font.mono, fontSize: 11, color: t.t2, letterSpacing: '0.08em' }}>{cur.id.toUpperCase()} · {cur.model}</div>
                  <h1 style={{ fontFamily: OR.font.display, fontSize: 30, fontWeight: 500, letterSpacing: '-0.02em', margin: '4px 0 6px' }}>{cur.name}</h1>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: t.t1 }}>
                    <Pip color={statusColor(cur.status)} pulse={cur.status === 'active'} size={7}/>
                    <span style={{ textTransform: 'capitalize', fontWeight: 500 }}>{cur.status}</span>
                    <span style={{ color: t.t3 }}>·</span>
                    <span>{cur.location}</span>
                    {cur.task !== '—' && <>
                      <span style={{ color: t.t3 }}>·</span>
                      <span style={{ fontFamily: OR.font.mono, color: accent }}>running {cur.task}</span>
                    </>}
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={{ ...btnGhost2(t), color: t.danger, borderColor: hexA(t.danger, 0.3) }}>
                  <Icon d={Icons.power} size={13}/> E-stop
                </button>
                <button style={btnGhost2(t)}><Icon d={Icons.cam} size={13}/> Teleop</button>
                <button style={btnPrim2(t, accent)}><Icon d={Icons.play} size={13}/> Run skill</button>
              </div>
            </div>

            {/* Telemetry strip */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 20 }}>
              {[
                { k: 'battery', v: `${cur.battery}%`, sub: '~3.2h remaining', spark: cpuData.map(x => 60 + Math.sin(x / 10) * 5), color: t.ok },
                { k: 'cpu', v: `${cur.cpu}%`, sub: 'NVIDIA Orin · 32GB', spark: cpuData, color: accent },
                { k: 'latency', v: '14ms', sub: 'p99 24ms · WiFi 6', spark: latData, color: t.info },
                { k: 'uptime', v: '18d 4h', sub: 'last reboot · ota 2.4.1', spark: cpuData.map(x => 50 + Math.cos(x / 8) * 10), color: t.t1 },
              ].map((m, i) => (
                <div key={i} style={{ padding: 14, background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 8 }}>
                  <div style={{ fontSize: 10, fontFamily: OR.font.mono, color: t.t2, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{m.k}</div>
                  <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginTop: 6 }}>
                    <div style={{ fontSize: 24, fontWeight: 500, fontFamily: OR.font.display, letterSpacing: '-0.02em' }}>{m.v}</div>
                    <Sparkline values={m.spark} color={m.color} width={68} height={24}/>
                  </div>
                  <div style={{ fontSize: 10, color: t.t2, fontFamily: OR.font.mono, marginTop: 4 }}>{m.sub}</div>
                </div>
              ))}
            </div>

            {/* Two-col body */}
            <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 16 }}>
              {/* Camera + joints */}
              <div style={{ background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 8, overflow: 'hidden' }}>
                <div style={{ padding: '10px 14px', borderBottom: `1px solid ${t.line}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontSize: 12, color: t.t1, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon d={Icons.cam} size={13}/> Live feed
                    <Tag theme={t} color={t.ok}>1080p · 30fps</Tag>
                  </div>
                  <div style={{ display: 'flex', gap: 4 }}>
                    {['head', 'wrist-l', 'wrist-r', 'rear'].map((c, i) => (
                      <span key={c} style={{ padding: '3px 8px', fontSize: 10, fontFamily: OR.font.mono, color: i === 0 ? t.t0 : t.t2, background: i === 0 ? t.bg3 : 'transparent', borderRadius: 4 }}>{c}</span>
                    ))}
                  </div>
                </div>
                <div style={{ height: 220, background: `linear-gradient(135deg, #1a2030, #0e1117)`, position: 'relative', overflow: 'hidden' }}>
                  {/* simulated scene */}
                  <div className="or-noise" style={{ position: 'absolute', inset: 0, opacity: 0.4 }}/>
                  <svg viewBox="0 0 400 220" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
                    <defs>
                      <linearGradient id="floor" x1="0" x2="0" y1="0" y2="1">
                        <stop offset="0" stopColor="#1a2030"/>
                        <stop offset="1" stopColor="#0a0d14"/>
                      </linearGradient>
                    </defs>
                    <rect y="120" width="400" height="100" fill="url(#floor)"/>
                    {/* perspective grid */}
                    {[0, 1, 2, 3, 4, 5].map(i => (
                      <line key={i} x1={50 + i * 60} y1="120" x2={-100 + i * 100} y2="220" stroke="rgba(255,255,255,0.08)"/>
                    ))}
                    {[0, 1, 2, 3].map(i => (
                      <line key={i} x1="0" y1={130 + i * 25} x2="400" y2={130 + i * 25} stroke="rgba(255,255,255,0.08)"/>
                    ))}
                    {/* detected objects */}
                    <g>
                      <rect x="140" y="140" width="36" height="40" fill="none" stroke={accent} strokeWidth="1.5"/>
                      <text x="142" y="135" fontFamily="JetBrains Mono" fontSize="9" fill={accent}>mug · 0.94</text>
                    </g>
                    <g>
                      <rect x="220" y="148" width="50" height="32" fill="none" stroke={t.info} strokeWidth="1.5"/>
                      <text x="222" y="143" fontFamily="JetBrains Mono" fontSize="9" fill={t.info}>plate · 0.88</text>
                    </g>
                    <g>
                      <rect x="50" y="160" width="28" height="22" fill="none" stroke={t.ok} strokeWidth="1.5"/>
                      <text x="52" y="155" fontFamily="JetBrains Mono" fontSize="9" fill={t.ok}>spoon · 0.79</text>
                    </g>
                    {/* crosshair */}
                    <g stroke="rgba(255,255,255,0.4)" strokeWidth="1">
                      <line x1="200" y1="100" x2="200" y2="120"/>
                      <line x1="190" y1="110" x2="210" y2="110"/>
                    </g>
                  </svg>
                  {/* HUD overlay */}
                  <div style={{ position: 'absolute', top: 8, left: 10, fontFamily: OR.font.mono, fontSize: 10, color: 'rgba(255,255,255,0.7)' }}>
                    REC ● 00:14:22 <span style={{ marginLeft: 8 }}>YOLO-v8</span>
                  </div>
                  <div style={{ position: 'absolute', bottom: 8, right: 10, fontFamily: OR.font.mono, fontSize: 10, color: 'rgba(255,255,255,0.7)' }}>
                    head · 1920×1080
                  </div>
                </div>

                {/* Joint state strip */}
                <div style={{ padding: 14 }}>
                  <div style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.1em', marginBottom: 8 }}>JOINTS · 27 actuators</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(9, 1fr)', gap: 4 }}>
                    {Array.from({ length: 27 }, (_, i) => {
                      const v = Math.abs(Math.sin((i + tick) / 4));
                      return (
                        <div key={i} style={{ height: 26, background: t.bg2, borderRadius: 3, position: 'relative', overflow: 'hidden' }}>
                          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${20 + v * 70}%`, background: i === 14 ? t.warn : accent, opacity: 0.7 + v * 0.3, transition: 'height 0.6s' }}/>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>

              {/* Right column */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                {/* Active task */}
                <div style={{ background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 8, padding: 14 }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                    <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.1em' }}>ACTIVE TASK</span>
                    <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: accent }}>step 3 / 7</span>
                  </div>
                  <div style={{ fontSize: 14, color: t.t0, fontWeight: 500, fontFamily: OR.font.mono }}>cleanup-kitchen <span style={{ color: t.t3 }}>v2.1.0</span></div>
                  <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {[
                      { s: 'scan environment', d: true },
                      { s: 'identify clutter', d: true },
                      { s: 'pick up coffee_mug', d: false, active: true, p: 64 },
                      { s: 'place in dishwasher', d: false },
                      { s: 'pick up plate', d: false },
                    ].map((s, i) => (
                      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: s.d ? t.t2 : s.active ? t.t0 : t.t3, fontFamily: OR.font.mono }}>
                        <span style={{
                          width: 14, height: 14, borderRadius: '50%',
                          border: `1.5px solid ${s.d ? t.ok : s.active ? accent : t.bg4}`,
                          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                          background: s.d ? t.ok : 'transparent',
                        }}>
                          {s.d && <Icon d={Icons.check} size={8} stroke={t.bg0} sw={3}/>}
                        </span>
                        <span style={{ flex: 1, textDecoration: s.d ? 'line-through' : 'none' }}>{s.s}</span>
                        {s.active && <span style={{ color: accent, fontSize: 10 }}>{s.p}%</span>}
                      </div>
                    ))}
                  </div>
                </div>

                {/* Logs */}
                <div style={{ background: t.bg1, border: `1px solid ${t.line}`, borderRadius: 8, padding: 14, flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
                    <span style={{ fontSize: 11, fontFamily: OR.font.mono, color: t.t2, letterSpacing: '0.1em' }}>LOG STREAM</span>
                    <Pip color={t.ok} pulse size={6}/>
                  </div>
                  <div style={{ fontFamily: OR.font.mono, fontSize: 10.5, lineHeight: 1.7, color: t.t1, overflow: 'hidden' }}>
                    {[
                      ['14:22:08', 'INFO', 'planner', 'goal: place mug in dishwasher', t.t1],
                      ['14:22:09', 'DEBUG', 'vision', '14 objects detected · conf 0.87', t.t2],
                      ['14:22:10', 'INFO', 'motion', 'arm trajectory accepted (1.4s)', t.t1],
                      ['14:22:11', 'WARN', 'grasp', 'low friction · re-grasp scheduled', t.warn],
                      ['14:22:12', 'INFO', 'motion', 'grasp confirmed · 12N', t.t1],
                      ['14:22:13', 'INFO', 'planner', 'lifting → transport phase', accent],
                    ].map((l, i) => (
                      <div key={i} style={{ display: 'grid', gridTemplateColumns: '60px 50px 60px 1fr', gap: 4 }}>
                        <span style={{ color: t.t3 }}>{l[0]}</span>
                        <span style={{ color: l[4] }}>{l[1]}</span>
                        <span style={{ color: t.t2 }}>{l[2]}</span>
                        <span style={{ color: l[4] }}>{l[3]}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const btnGhost2 = (t) => ({
  display: 'inline-flex', alignItems: 'center', gap: 6,
  padding: '7px 12px', fontSize: 12, fontWeight: 500, fontFamily: OR.font.sans,
  background: 'transparent', color: t.t0,
  border: `1px solid ${t.line}`, borderRadius: 6, cursor: 'pointer',
});
const btnPrim2 = (t, a) => ({
  display: 'inline-flex', alignItems: 'center', gap: 6,
  padding: '7px 12px', fontSize: 12, fontWeight: 500, fontFamily: OR.font.sans,
  background: a, color: '#0A0B0D', border: 'none', borderRadius: 6, cursor: 'pointer',
});

window.FleetDashboard = FleetDashboard;