// Device Management — Shell + Screens

const { useState, useEffect, useMemo, useRef } = React;

const DM_NAV = [
  { id: 'fleet',    label: 'Fleet Overview',  icon: 'Fleet' },
  { id: 'topology', label: 'Topology',        icon: 'Topology' },
  { id: 'ota',      label: 'OTA Jobs',        icon: 'OTA' },
  { id: 'release', label: 'Release',        icon: 'Release' },
  { id: 'alerts',   label: 'Alerts',          icon: 'Alert' },
  { id: 'users',    label: 'Users',           icon: 'Users' },
  { id: 'settings', label: 'Settings',        icon: 'Settings' },
];

// ─── Sidebar ─────────────────────────────────────────────
function DMSidebar({ current, onNav, mode, accent, alertCount }) {
  const collapsed = mode === 'icon';
  return (
    <aside className={`dm-sidebar dm-sidebar-${mode}`}>
      <div className="dm-sb-inner">
        <div className="dm-sb-brand">
          <div className="dm-sb-mark" style={{ background: `linear-gradient(135deg, ${accent}, #67e8f9)` }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
              <rect x="3" y="3" width="7" height="7" stroke="white" strokeWidth="2" rx="1.5"/>
              <rect x="14" y="3" width="7" height="7" stroke="white" strokeWidth="2" rx="1.5"/>
              <rect x="3" y="14" width="7" height="7" stroke="white" strokeWidth="2" rx="1.5"/>
              <rect x="14" y="14" width="7" height="7" stroke="white" strokeWidth="2" rx="1.5"/>
            </svg>
          </div>
          {!collapsed && (
            <div>
              <div className="dm-sb-name">DEVICE OPS</div>
              <div className="dm-sb-sub">v3.0 · mission control</div>
            </div>
          )}
        </div>

        {!collapsed && (
          <div className="dm-sb-status">
            <div className="dm-sb-status-dot"/>
            <div>
              <div className="dm-sb-status-label">FLEET ONLINE</div>
              <div className="dm-sb-status-num"><window.DMTicker value={window.DM_FLEET_STATS.healthy} /> <span>/ {window.DM_FLEET_STATS.total}</span></div>
            </div>
          </div>
        )}

        <nav className="dm-sb-nav">
          {DM_NAV.map((item, i) => {
            const I = window.DMIcon[item.icon];
            const active = current === item.id;
            const badge = item.id === 'alerts' ? alertCount : 0;
            return (
              <button key={item.id} onClick={() => onNav(item.id)}
                className={`dm-sb-item ${active ? 'active' : ''}`}
                style={{ animationDelay: `${i * 35}ms` }}>
                <span className="dm-sb-icon"><I /></span>
                {!collapsed && <span className="dm-sb-label">{item.label}</span>}
                {!collapsed && badge > 0 && <span className="dm-sb-badge">{badge}</span>}
                {collapsed && badge > 0 && <span className="dm-sb-badge dm-sb-badge-dot" />}
                {active && <span className="dm-sb-rail" style={{ background: accent }} />}
              </button>
            );
          })}
        </nav>

        <div className="dm-sb-footer">
          {!collapsed ? (
            <div className="dm-sb-user">
              <div className="dm-sb-avatar" style={{ background: `linear-gradient(135deg, ${accent}, #67e8f9)` }}>
                {window.DM_USER.name.split(' ').map(n => n[0]).join('')}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="dm-sb-uname">{window.DM_USER.name}</div>
                <div className="dm-sb-urole">{window.DM_USER.role.toUpperCase()} · DEVOPS</div>
              </div>
              <button className="dm-sb-logout"><window.DMIcon.Logout /></button>
            </div>
          ) : (
            <div className="dm-sb-avatar" style={{ background: `linear-gradient(135deg, ${accent}, #67e8f9)`, margin: '0 auto' }}>
              {window.DM_USER.name.split(' ').map(n => n[0]).join('')}
            </div>
          )}
        </div>
      </div>
    </aside>
  );
}

// ─── Header ──────────────────────────────────────────────
function DMHeader({ title, subtitle, dark, onToggleDark, live, onToggleLive, search, onSearch }) {
  const [time, setTime] = useState(new Date());
  useEffect(() => { const id = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(id); }, []);

  return (
    <header className="dm-header">
      <div className="dm-h-left">
        <h1 className="dm-page-title">{title}</h1>
        {subtitle && <div className="dm-page-sub">{subtitle}</div>}
      </div>
      <div className="dm-h-right">
        <div className="dm-search">
          <window.DMIcon.Search />
          <input placeholder="Find device, MAC, hospital…" value={search} onChange={e => onSearch(e.target.value)}/>
          <kbd>⌘K</kbd>
        </div>
        <button className={`dm-live ${live ? 'on' : ''}`} onClick={onToggleLive}>
          <span className="dm-live-dot"/>{live ? 'STREAMING' : 'PAUSED'}
        </button>
        <div className="dm-clock">
          <div className="dm-clock-time">{time.toTimeString().slice(0, 8)}</div>
          <div className="dm-clock-date">UTC+05:30 · {time.toLocaleDateString('en-GB', { weekday: 'short', day: '2-digit', month: 'short' })}</div>
        </div>
        <button className="dm-icon-btn" onClick={onToggleDark}>{dark ? <window.DMIcon.Sun/> : <window.DMIcon.Moon/>}</button>
      </div>
    </header>
  );
}

// ─── FLEET OVERVIEW (focus screen) ──────────────────────
function FleetOverview({ accent, cardStyle, live, onOpenDevice }) {
  const s = window.DM_FLEET_STATS;
  const [healthy, setHealthy] = useState(s.healthy);
  const [warning, setWarning] = useState(s.warning);
  const [critical, setCritical] = useState(s.critical);
  useEffect(() => {
    if (!live) return;
    const id = setInterval(() => {
      setHealthy(prev => Math.max(1170, Math.min(1200, prev + Math.round((Math.random() - 0.5) * 4))));
      setWarning(prev => Math.max(45, Math.min(75, prev + Math.round((Math.random() - 0.5) * 3))));
      setCritical(prev => Math.max(20, Math.min(45, prev + Math.round((Math.random() - 0.5) * 2))));
    }, 4000);
    return () => clearInterval(id);
  }, [live]);

  return (
    <div className="dm-fleet">
      {/* Top stats strip */}
      <div className="dm-stats-row">
        <FleetStat label="Total devices" value={s.total} icon="Fleet" color={accent} cardStyle={cardStyle} sub="across 6 hospitals" />
        <FleetStat label="Healthy" value={healthy} icon="Check" color="var(--dm-success)" cardStyle={cardStyle} spark={s.healthySpark} delta={+1.2}/>
        <FleetStat label="Warning" value={warning} icon="Alert" color="var(--dm-warning)" cardStyle={cardStyle} spark={s.warningSpark} delta={+8.3}/>
        <FleetStat label="Critical" value={critical} icon="Alert" color="var(--dm-alert)" cardStyle={cardStyle} spark={s.criticalSpark} delta={+12.1} bad/>
        <FleetStat label="Offline" value={s.offline} icon="Wifi" color="var(--dm-muted)" cardStyle={cardStyle} sub="6h+ no heartbeat"/>
      </div>

      <div className="dm-row-2">
        {/* Live health metrics */}
        <div className={`dm-panel card-${cardStyle}`}>
          <div className="dm-panel-head">
            <div>
              <div className="dm-panel-title">Live system metrics · fleet-wide</div>
              <div className="dm-panel-sub">Avg CPU, memory, disk, queue depth · 5s polling</div>
            </div>
            <div className="dm-tabs">
              <button className="dm-tab active">5m</button>
              <button className="dm-tab">1h</button>
              <button className="dm-tab">24h</button>
            </div>
          </div>
          <window.DMHealthChart height={260} live={live}/>
        </div>

        {/* Release distribution donut */}
        <div className={`dm-panel card-${cardStyle}`}>
          <div className="dm-panel-head">
            <div>
              <div className="dm-panel-title">Release versions</div>
              <div className="dm-panel-sub">Distribution across fleet</div>
            </div>
            <button className="dm-chip"><window.DMIcon.OTA/> Bulk update</button>
          </div>
          <div className="dm-donut-wrap">
            <window.DMDonut data={window.DM_RELEASE} total={s.total} size={200}/>
            <div className="dm-fw-legend">
              {window.DM_RELEASE.map((fw, i) => (
                <div key={fw.version} className="dm-fw-row" style={{ animationDelay: `${i * 60}ms` }}>
                  <span className="dm-fw-dot" style={{ background: fw.color }}/>
                  <span className="dm-fw-ver mono">{fw.version} {fw.latest && <span className="dm-fw-latest">LATEST</span>}</span>
                  <span className="dm-fw-count mono"><window.DMTicker value={fw.count} /></span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Device table */}
      <div className={`dm-panel card-${cardStyle}`}>
        <div className="dm-panel-head">
          <div>
            <div className="dm-panel-title">Connected units · live</div>
            <div className="dm-panel-sub">14 sample devices · 1,270 more across fleet</div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button className="dm-chip"><window.DMIcon.Filter/> Filter</button>
            <button className="dm-chip"><window.DMIcon.Refresh/> Refresh</button>
            <button className="dm-btn dm-btn-primary"><window.DMIcon.OTA/> Bulk OTA</button>
          </div>
        </div>
        <table className="dm-table">
          <thead>
            <tr>
              <th>Device</th>
              <th>Hospital · Ward</th>
              <th>Release</th>
              <th>Health</th>
              <th>CPU</th>
              <th>Memory</th>
              <th>Disk</th>
              <th>Status</th>
              <th>Last seen</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {window.DM_DEVICES.map((d, i) => (
              <tr key={d.id} className="dm-row" onClick={() => onOpenDevice(d)} style={{ animationDelay: `${i * 25}ms` }}>
                <td>
                  <div className="dm-cell-dev">
                    <div className="dm-cell-name mono">{d.name}</div>
                    <div className="dm-cell-mac mono">{d.mac}</div>
                  </div>
                </td>
                <td>
                  <div className="dm-cell-hosp">{d.hospital}</div>
                  <div className="dm-cell-ward">{d.ward}</div>
                </td>
                <td>
                  <span className={`dm-fw-pill ${d.release === 'v1.3.0' ? 'latest' : 'old'}`}>{d.release}</span>
                </td>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <window.HealthBar value={d.health} status={d.status === 'offline' ? 'offline' : 'auto'}/>
                    <span className="mono" style={{ fontSize: 12, minWidth: 32, textAlign: 'right' }}>{d.health}%</span>
                  </div>
                </td>
                <td className="mono dm-metric-cell">{d.status === 'offline' ? '—' : `${d.cpu}%`}</td>
                <td className="mono dm-metric-cell">{d.status === 'offline' ? '—' : `${d.mem}%`}</td>
                <td className="mono dm-metric-cell">{d.status === 'offline' ? '—' : `${d.disk}%`}</td>
                <td><window.DMStatusPill status={d.status} size="sm"/></td>
                <td className="mono" style={{ fontSize: 11, color: d.status === 'offline' ? 'var(--dm-alert)' : 'var(--dm-muted)' }}>{d.lastSeen}</td>
                <td><window.DMIcon.ChevronRight style={{ color: 'var(--dm-muted)' }}/></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

function FleetStat({ label, value, icon, color, cardStyle, sub, spark, delta, bad }) {
  const I = window.DMIcon[icon];
  return (
    <div className={`dm-stat card-${cardStyle}`} style={{ '--stat-color': color }}>
      <div className="dm-stat-head">
        <div className="dm-stat-icon" style={{ background: `${color}22`, color }}><I /></div>
        {delta !== undefined && (
          <span className={`dm-stat-delta ${bad ? (delta > 0 ? 'bad' : 'good') : (delta > 0 ? 'good' : 'bad')}`}>
            {delta > 0 ? '↑' : '↓'} {Math.abs(delta).toFixed(1)}%
          </span>
        )}
      </div>
      <div className="dm-stat-label">{label}</div>
      <div className="dm-stat-value" style={{ color }}>
        <window.DMTicker value={value} />
      </div>
      {sub && <div className="dm-stat-sub">{sub}</div>}
      {spark && (
        <div className="dm-stat-spark">
          <window.DMSpark data={spark} color={color} width={200} height={32}/>
        </div>
      )}
    </div>
  );
}

// ─── TOPOLOGY ────────────────────────────────────────────
function TopologyScreen({ cardStyle, live }) {
  return (
    <div className={`dm-topology card-${cardStyle}`}>
      <div className="dm-topo-head">
        <div>
          <div className="dm-panel-title">Hospital topology · live</div>
          <div className="dm-panel-sub">6 hospitals · 668 devices on this map · pulses indicate device-side heartbeats</div>
        </div>
        <div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--dm-muted)' }}>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--dm-success)', marginRight: 6 }}/>Healthy</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--dm-warning)', marginRight: 6 }}/>Warning</span>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--dm-alert)', marginRight: 6 }}/>Critical</span>
        </div>
      </div>
      <div className="dm-topo-map">
        <svg viewBox="0 0 100 80" preserveAspectRatio="xMidYMid meet" style={{ width: '100%', height: '100%' }}>
          {/* Grid backdrop */}
          <defs>
            <pattern id="topoGrid" width="4" height="4" patternUnits="userSpaceOnUse">
              <path d="M 4 0 L 0 0 0 4" fill="none" stroke="rgba(0,212,255,0.04)" strokeWidth="0.1"/>
            </pattern>
            <radialGradient id="topoGlow">
              <stop offset="0%" stopColor="rgba(0,212,255,0.2)"/>
              <stop offset="100%" stopColor="rgba(0,212,255,0)"/>
            </radialGradient>
          </defs>
          <rect width="100" height="80" fill="url(#topoGrid)"/>

          {/* Central data center */}
          <circle cx="50" cy="45" r="3" fill="var(--dm-primary)" opacity="0.9"/>
          <circle cx="50" cy="45" r="6" fill="none" stroke="var(--dm-primary)" strokeWidth="0.2" opacity="0.4">
            <animate attributeName="r" from="3" to="12" dur="3s" repeatCount="indefinite"/>
            <animate attributeName="opacity" from="0.5" to="0" dur="3s" repeatCount="indefinite"/>
          </circle>
          <text x="50" y="55" textAnchor="middle" fill="var(--dm-primary)" fontSize="2" fontFamily="JetBrains Mono">CORE</text>

          {/* Links */}
          {window.DM_MAP_NODES.map((n, i) => {
            const dx = n.x - 50, dy = n.y - 45;
            const dist = Math.sqrt(dx * dx + dy * dy);
            const color = n.health === 'critical' ? 'var(--dm-alert)' : n.health === 'warning' ? 'var(--dm-warning)' : n.health === 'healthy' ? 'var(--dm-success)' : 'var(--dm-primary)';
            return (
              <g key={'l' + i}>
                <line x1="50" y1="45" x2={n.x} y2={n.y} stroke={color} strokeWidth="0.15" opacity="0.4" strokeDasharray="0.5,0.5"/>
                {live && (
                  <circle cx="50" cy="45" r="0.4" fill={color}>
                    <animateMotion dur={`${2 + i * 0.3}s`} repeatCount="indefinite" path={`M 0 0 L ${dx} ${dy}`}/>
                  </circle>
                )}
              </g>
            );
          })}

          {/* Hospital nodes */}
          {window.DM_MAP_NODES.map((n, i) => {
            const color = n.health === 'critical' ? 'var(--dm-alert)' : n.health === 'warning' ? 'var(--dm-warning)' : n.health === 'healthy' ? 'var(--dm-success)' : 'var(--dm-primary)';
            const radius = 1.6 + (n.size / 60);
            return (
              <g key={n.id} style={{ cursor: 'pointer' }}>
                {/* Pulse */}
                {live && (
                  <circle cx={n.x} cy={n.y} r={radius} fill="none" stroke={color} strokeWidth="0.2" opacity="0.6">
                    <animate attributeName="r" from={radius} to={radius * 3} dur="2.5s" repeatCount="indefinite" begin={`${i * 0.4}s`}/>
                    <animate attributeName="opacity" from="0.6" to="0" dur="2.5s" repeatCount="indefinite" begin={`${i * 0.4}s`}/>
                  </circle>
                )}
                <circle cx={n.x} cy={n.y} r={radius} fill={color} opacity="0.9"/>
                <text x={n.x} y={n.y + 0.6} textAnchor="middle" fill="white" fontSize="1.4" fontWeight="700" fontFamily="JetBrains Mono">{n.label}</text>
                <text x={n.x} y={n.y + radius + 2.5} textAnchor="middle" fill="var(--dm-text-2)" fontSize="1.4" fontFamily="Inter">{n.size}</text>
              </g>
            );
          })}
        </svg>
      </div>
      <div className="dm-topo-legend">
        {window.DM_HOSPITALS.map((h, i) => (
          <div key={h.id} className="dm-topo-hosp" style={{ animationDelay: `${i * 60}ms` }}>
            <div className="dm-topo-hosp-label">
              <span className="mono">{h.short}</span>
              <span>{h.name}</span>
            </div>
            <div className="dm-topo-hosp-stats">
              <span><strong style={{ color: 'var(--dm-success)' }}>{h.healthy}</strong> ok</span>
              <span><strong style={{ color: 'var(--dm-warning)' }}>{h.warning}</strong> warn</span>
              <span><strong style={{ color: 'var(--dm-alert)' }}>{h.critical}</strong> crit</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── OTA JOBS ───────────────────────────────────────────
function OTAScreen({ cardStyle, live }) {
  return (
    <div className="dm-ota">
      <div className={`dm-panel card-${cardStyle}`}>
        <div className="dm-panel-head">
          <div>
            <div className="dm-panel-title">OTA update jobs</div>
            <div className="dm-panel-sub">{window.DM_OTA_JOBS.length} jobs · 1 active · last 7 days</div>
          </div>
          <button className="dm-btn dm-btn-primary"><window.DMIcon.Plus/> New OTA campaign</button>
        </div>

        <div className="dm-ota-list">
          {window.DM_OTA_JOBS.map((job, i) => {
            const pctDone = (job.completed / job.total) * 100;
            const pctProg = (job.inProgress / job.total) * 100;
            const pctFail = (job.failed / job.total) * 100;
            return (
              <div key={job.id} className={`dm-ota-card card-${cardStyle}`} style={{ animationDelay: `${i * 60}ms` }}>
                <div className="dm-ota-card-head">
                  <div>
                    <div className="dm-ota-id mono">{job.id}</div>
                    <div className="dm-ota-target mono">→ {job.target}</div>
                  </div>
                  <window.DMStatusPill status={job.status}/>
                </div>
                <div className="dm-ota-progress">
                  <div className="dm-ota-progress-bar">
                    <div className="dm-ota-prog-done" style={{ width: `${pctDone}%` }}/>
                    <div className="dm-ota-prog-active" style={{ width: `${pctProg}%`, left: `${pctDone}%` }}/>
                    <div className="dm-ota-prog-fail" style={{ width: `${pctFail}%`, left: `${pctDone + pctProg}%` }}/>
                  </div>
                  <div className="dm-ota-prog-pct mono">
                    {Math.round(pctDone)}%
                  </div>
                </div>
                <div className="dm-ota-counts">
                  <div><span className="dot" style={{ background: 'var(--dm-success)' }}/><strong>{job.completed}</strong> done</div>
                  {job.inProgress > 0 && <div><span className="dot" style={{ background: 'var(--dm-primary)' }}/><strong>{job.inProgress}</strong> running</div>}
                  {job.failed > 0 && <div><span className="dot" style={{ background: 'var(--dm-alert)' }}/><strong>{job.failed}</strong> failed</div>}
                  <div className="dm-ota-meta">
                    <span>{job.startedAt}</span>
                    <span className="dot-sep">·</span>
                    <span>{job.initiatedBy}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// ─── RELEASE ───────────────────────────────────────────
function ReleaseScreen({ cardStyle }) {
  return (
    <div className={`dm-panel card-${cardStyle}`}>
      <div className="dm-panel-head">
        <div>
          <div className="dm-panel-title">Release catalog</div>
          <div className="dm-panel-sub">{window.DM_RELEASE_CATALOG.length} packages · S3 bucket: arogyasync-release</div>
        </div>
        <button className="dm-btn dm-btn-primary"><window.DMIcon.Plus/> Upload release</button>
      </div>
      <table className="dm-table">
        <thead>
          <tr><th>Package</th><th>Version</th><th>Model</th><th>Size</th><th>Uploaded</th><th>Status</th><th>Actions</th></tr>
        </thead>
        <tbody>
          {window.DM_RELEASE_CATALOG.map((fw, i) => (
            <tr key={fw.id} className="dm-row" style={{ animationDelay: `${i * 40}ms` }}>
              <td className="mono"><strong>{fw.id}</strong></td>
              <td><span className={`dm-fw-pill ${fw.approved ? 'latest' : 'unapproved'}`}>{fw.version}</span></td>
              <td className="mono" style={{ fontSize: 12 }}>{fw.unitType}</td>
              <td className="mono" style={{ fontSize: 12 }}>{fw.size}</td>
              <td className="mono" style={{ fontSize: 12 }}>{fw.uploaded}</td>
              <td>
                {fw.approved
                  ? <span className="dm-fw-status approved"><window.DMIcon.Check/> Approved · {fw.approvedAt}</span>
                  : <span className="dm-fw-status pending">⌛ Pending approval</span>}
              </td>
              <td>
                <div style={{ display: 'flex', gap: 4 }}>
                  {!fw.approved && <button className="dm-btn dm-btn-sm dm-btn-primary">Approve</button>}
                  <button className="dm-btn dm-btn-sm dm-btn-ghost"><window.DMIcon.Download/></button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ─── ALERTS ─────────────────────────────────────────────
function AlertsScreen({ cardStyle }) {
  return (
    <div className="dm-alerts">
      {window.DM_ALERTS.map((a, i) => (
        <div key={a.id} className={`dm-alert dm-alert-${a.sev} card-${cardStyle}`} style={{ animationDelay: `${i * 60}ms` }}>
          <div className="dm-alert-rail"/>
          <div className="dm-alert-icon">
            {a.sev === 'critical' ? '⚠' : a.sev === 'warning' ? '!' : 'i'}
          </div>
          <div className="dm-alert-body">
            <div className="dm-alert-head">
              <span className="dm-alert-device mono">{a.device}</span>
              <span className="dm-alert-hospital">{a.hospital}</span>
              <span className="dm-alert-time mono">{a.time}</span>
            </div>
            <div className="dm-alert-msg">{a.msg}</div>
          </div>
          <div className="dm-alert-actions">
            <button className="dm-btn dm-btn-sm dm-btn-ghost">Acknowledge</button>
            <button className="dm-btn dm-btn-sm dm-btn-primary">Investigate</button>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── USERS / SETTINGS ───────────────────────────────────
function UsersScreen({ cardStyle }) {
  const users = [
    { name: 'Saanvi Rao',   email: 's.rao@arogyasync.com',     role: 'admin', created: '2025-08-12' },
    { name: 'Marcus Lin',   email: 'm.lin@arogyasync.com',     role: 'ops',   created: '2025-09-04' },
    { name: 'Priya Suresh', email: 'p.suresh@arogyasync.com',  role: 'ops',   created: '2026-01-21' },
    { name: 'Daniel Kim',   email: 'd.kim@arogyasync.com',     role: 'ops',   created: '2026-02-09' },
  ];
  return (
    <div className={`dm-panel card-${cardStyle}`}>
      <div className="dm-panel-head">
        <div>
          <div className="dm-panel-title">User management</div>
          <div className="dm-panel-sub">{users.length} accounts · admin-only access</div>
        </div>
        <button className="dm-btn dm-btn-primary"><window.DMIcon.Plus/> Add user</button>
      </div>
      <table className="dm-table">
        <thead><tr><th>User</th><th>Email</th><th>Role</th><th>Created</th><th></th></tr></thead>
        <tbody>
          {users.map((u, i) => (
            <tr key={u.email} className="dm-row" style={{ animationDelay: `${i * 40}ms` }}>
              <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div className="dm-avatar-mini">{u.name.split(' ').map(n => n[0]).join('')}</div>
                  <strong>{u.name}</strong>
                  {i === 0 && <span className="dm-you-tag">YOU</span>}
                </div>
              </td>
              <td className="mono" style={{ fontSize: 12 }}>{u.email}</td>
              <td><span className={`dm-role-pill role-${u.role}`}>{u.role}</span></td>
              <td className="mono" style={{ fontSize: 12 }}>{u.created}</td>
              <td>{i !== 0 && <button className="dm-btn dm-btn-sm dm-btn-ghost">Delete</button>}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function SettingsScreen({ cardStyle, dark }) {
  return (
    <div className="dm-settings">
      <div className={`dm-panel card-${cardStyle}`}>
        <div className="dm-panel-title">Account</div>
        <div className="dm-set-row"><div className="dm-set-label">Name</div><div className="dm-set-val">{window.DM_USER.name}</div></div>
        <div className="dm-set-row"><div className="dm-set-label">Email</div><div className="dm-set-val mono">{window.DM_USER.email}</div></div>
        <div className="dm-set-row"><div className="dm-set-label">Role</div><div className="dm-set-val"><span className="dm-role-pill role-admin">{window.DM_USER.role}</span></div></div>
      </div>
      <div className={`dm-panel card-${cardStyle}`}>
        <div className="dm-panel-title">Health-score thresholds</div>
        <div className="dm-panel-sub">Stored in your browser session</div>
        <div className="dm-set-row"><div className="dm-set-label">Warning ≤</div><div className="dm-set-val mono">60</div></div>
        <div className="dm-set-row"><div className="dm-set-label">Critical ≤</div><div className="dm-set-val mono">40</div></div>
      </div>
    </div>
  );
}

// ─── DEVICE DETAIL MODAL ───────────────────────────────
function DeviceModal({ device, onClose, cardStyle, live }) {
  const [tab, setTab] = useState('overview');
  if (!device) return null;
  return (
    <div className="dm-modal-backdrop" onClick={onClose}>
      <div className={`dm-modal card-${cardStyle}`} onClick={e => e.stopPropagation()}>
        <button onClick={onClose} className="dm-modal-x"><window.DMIcon.X/></button>
        <div className="dm-modal-head">
          <div>
            <div className="dm-modal-id mono">{device.name}</div>
            <div className="dm-modal-meta mono">{device.mac} · {device.hospital} · {device.ward}</div>
          </div>
          <window.DMStatusPill status={device.status}/>
        </div>
        <div className="dm-modal-tabs">
          {['overview', 'release', 'health', 'alerts'].map(t => (
            <button key={t} onClick={() => setTab(t)} className={`dm-modal-tab ${tab === t ? 'active' : ''}`}>{t}</button>
          ))}
        </div>
        <div className="dm-modal-body">
          {tab === 'overview' && (
            <div className="dm-mod-grid">
              <Stat label="Health" value={`${device.health}%`} color={device.health >= 80 ? 'var(--dm-success)' : 'var(--dm-warning)'}/>
              <Stat label="CPU" value={`${device.cpu}%`} color="var(--dm-primary)"/>
              <Stat label="Memory" value={`${device.mem}%`} color="var(--dm-primary)"/>
              <Stat label="Disk" value={`${device.disk}%`} color="var(--dm-warning)"/>
              <Stat label="Release" value={device.release} mono/>
              <Stat label="Last seen" value={device.lastSeen} mono/>
              <div style={{ gridColumn: '1 / -1', display: 'flex', gap: 8, marginTop: 8 }}>
                <button className="dm-btn dm-btn-ghost"><window.DMIcon.Power/> Reboot device</button>
                <button className="dm-btn dm-btn-ghost"><window.DMIcon.Refresh/> Force reprovision</button>
                <button className="dm-btn dm-btn-primary"><window.DMIcon.OTA/> Trigger OTA</button>
              </div>
            </div>
          )}
          {tab === 'release' && (
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--dm-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Current</div>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 700 }}>{device.release}</div>
                </div>
                <div style={{ fontSize: 24, color: 'var(--dm-muted)' }}>→</div>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--dm-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>Available</div>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 700, color: 'var(--dm-primary)' }}>v1.3.0</div>
                </div>
              </div>
              <div className="dm-set-row"><div className="dm-set-label">Download URL</div><div className="dm-set-val mono" style={{ fontSize: 11 }}>https://s3.../release/v1.3.0.tar.gz</div></div>
              <div className="dm-set-row"><div className="dm-set-label">SHA-256</div><div className="dm-set-val mono" style={{ fontSize: 11 }}>3f8a92b1c0d4e7…</div></div>
              <button className="dm-btn dm-btn-primary" style={{ marginTop: 12 }}><window.DMIcon.OTA/> Trigger OTA update</button>
            </div>
          )}
          {tab === 'health' && (
            <window.DMHealthChart height={240} live={live}/>
          )}
          {tab === 'alerts' && (
            <div className="dm-alerts" style={{ gap: 8 }}>
              {window.DM_ALERTS.filter(a => a.device === device.name).map(a => (
                <div key={a.id} className="dm-alert dm-alert-warning card-flat" style={{ padding: 12 }}>
                  <div className="dm-alert-rail"/>
                  <div className="dm-alert-body">
                    <div className="dm-alert-msg">{a.msg}</div>
                    <div className="dm-alert-time mono">{a.time}</div>
                  </div>
                </div>
              ))}
              {!window.DM_ALERTS.find(a => a.device === device.name) && (
                <div style={{ padding: 32, textAlign: 'center', color: 'var(--dm-muted)' }}>No alerts for this device.</div>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Stat({ label, value, color, mono }) {
  return (
    <div className="dm-mod-stat">
      <div className="dm-mod-stat-label">{label}</div>
      <div className={`dm-mod-stat-value ${mono ? 'mono' : ''}`} style={{ color: color || 'var(--dm-text)' }}>{value}</div>
    </div>
  );
}

Object.assign(window, {
  DMSidebar, DMHeader, FleetOverview, TopologyScreen,
  OTAScreen, ReleaseScreen, AlertsScreen, UsersScreen, SettingsScreen,
  DeviceModal, DM_NAV,
});