// Hospital Dashboard — Screens (Ward Grid, Live Vitals, Hospitals, Patients, Devices, Alerts, Floor Plan)

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

// ─── BED CARD (ward grid) ───────────────────────────────
function BedCard({ bed, onClick, live, cardStyle, accent }) {
  const [hr, setHR] = useState(bed.baseHR || 0);
  const [spo2, setSpO2] = useState(98);
  const [sys, setSys] = useState(122);
  const [dia, setDia] = useState(80);

  useEffect(() => {
    if (bed.status === 'idle' || !live) return;
    const tick = () => {
      setHR(prev => {
        const target = bed.baseHR + (Math.random() - 0.5) * 6;
        return Math.round(prev + (target - prev) * 0.35);
      });
      setSpO2(prev => Math.max(85, Math.min(100, parseFloat((prev + (Math.random() - 0.5) * 0.4).toFixed(1)))));
      setSys(prev => Math.round(120 + (Math.random() - 0.5) * 8));
      setDia(prev => Math.round(78 + (Math.random() - 0.5) * 6));
    };
    const id = setInterval(tick, 1800);
    return () => clearInterval(id);
  }, [bed, live]);

  const statusColor = {
    alert:   'var(--h-alert)',
    watch:   'var(--h-warning)',
    stable:  'var(--h-success)',
    idle:    'var(--h-muted)',
  }[bed.status];

  const wave = bed.status === 'idle' ? null : (
    <window.ECGWave bpm={hr} color={statusColor} height={48} running={live} />
  );

  return (
    <button onClick={() => onClick(bed)} className={`bed-card bed-${bed.status} card-${cardStyle}`}>
      <div className="bed-head">
        <div className="bed-id">
          <span className="bed-name">{bed.name}</span>
          <span className="bed-ward">{window.HOSP_WARDS.find(w => w.id === bed.ward)?.name}</span>
        </div>
        <window.StatusPill status={bed.status} size="sm" />
      </div>
      <div className="bed-patient">
        <div className="bed-patient-name">{bed.patient}</div>
        {bed.mrn && <div className="bed-patient-meta">{bed.mrn} · {bed.age} · {bed.sex}</div>}
      </div>

      {bed.status !== 'idle' && (
        <>
          <div className="bed-wave-wrap">{wave}</div>
          <div className="bed-vitals">
            <div className="bv-cell">
              <div className="bv-icon" style={{ color: 'var(--h-alert)' }}><window.Icon.Heart /></div>
              <div className="bv-num"><window.Ticker value={hr} /></div>
              <div className="bv-unit">bpm</div>
            </div>
            <div className="bv-cell">
              <div className="bv-icon" style={{ color: 'var(--h-primary)' }}><window.Icon.Drop /></div>
              <div className="bv-num"><window.Ticker value={spo2} decimals={1} /></div>
              <div className="bv-unit">% SpO₂</div>
            </div>
            <div className="bv-cell">
              <div className="bv-icon" style={{ color: 'var(--h-warning)' }}><window.Icon.Activity /></div>
              <div className="bv-num"><span style={{ fontVariantNumeric: 'tabular-nums' }}>{sys}/{dia}</span></div>
              <div className="bv-unit">mmHg</div>
            </div>
          </div>
        </>
      )}
      {bed.status === 'idle' && (
        <div className="bed-idle">
          <div className="bed-idle-icon"><window.Icon.Device /></div>
          <div className="bed-idle-text">Vacant · Device ready</div>
        </div>
      )}

      {bed.alertText && (
        <div className="bed-alert-banner">
          <span className="bed-alert-pulse" />
          <span>{bed.alertText}</span>
        </div>
      )}
    </button>
  );
}

// ─── WARD GRID SCREEN ───────────────────────────────────
function WardGridScreen({ onSelectBed, live, cardStyle, density, accent }) {
  const [wardFilter, setWardFilter] = useState('all');
  const beds = wardFilter === 'all' ? window.HOSP_BEDS : window.HOSP_BEDS.filter(b => b.ward === wardFilter);

  const stats = useMemo(() => {
    const all = window.HOSP_BEDS;
    return {
      total: all.length,
      alert: all.filter(b => b.status === 'alert').length,
      watch: all.filter(b => b.status === 'watch').length,
      stable: all.filter(b => b.status === 'stable').length,
      idle: all.filter(b => b.status === 'idle').length,
    };
  }, []);

  return (
    <div className="screen-ward">
      {/* Filter strip */}
      <div className="ward-filters">
        <button onClick={() => setWardFilter('all')} className={`ward-chip ${wardFilter === 'all' ? 'active' : ''}`}>
          <span>All wards</span>
          <span className="chip-count">{window.HOSP_BEDS.length}</span>
        </button>
        {window.HOSP_WARDS.map(w => (
          <button key={w.id} onClick={() => setWardFilter(w.id)}
            className={`ward-chip ${wardFilter === w.id ? 'active' : ''}`}
            style={{ '--ward-color': w.color }}>
            <span className="ward-dot" style={{ background: w.color }} />
            <span>{w.name}</span>
            <span className="chip-count">{window.HOSP_BEDS.filter(b => b.ward === w.id).length}</span>
          </button>
        ))}

        <div style={{ flex: 1 }} />

        <div className="ward-summary">
          <span><span className="dot" style={{ background: 'var(--h-alert)' }}/> {stats.alert} alert</span>
          <span><span className="dot" style={{ background: 'var(--h-warning)' }}/> {stats.watch} watch</span>
          <span><span className="dot" style={{ background: 'var(--h-success)' }}/> {stats.stable} stable</span>
          <span><span className="dot" style={{ background: 'var(--h-muted)' }}/> {stats.idle} idle</span>
        </div>
      </div>

      {/* Bed grid */}
      <div className={`ward-grid density-${density}`}>
        {beds.map((bed, i) => (
          <div key={bed.id} className="bed-entry" style={{ animationDelay: `${i * 50}ms` }}>
            <BedCard bed={bed} onClick={onSelectBed} live={live} cardStyle={cardStyle} accent={accent}/>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── LIVE VITALS (single patient deep view) ──────────────
function LiveVitalsScreen({ bed, onBack, live, cardStyle, accent }) {
  const targetBed = bed || window.HOSP_BEDS[0];
  const [hr, setHR] = useState(targetBed.baseHR);
  const [spo2, setSpO2] = useState(98.2);
  const [sys, setSys] = useState(122);
  const [dia, setDia] = useState(80);
  const [temp, setTemp] = useState(37.0);
  const [rr, setRR] = useState(16);
  const [hrHist, setHrHist] = useState(() => Array.from({ length: 40 }, (_, i) => targetBed.baseHR + Math.sin(i / 4) * 4));
  const [duration, setDuration] = useState('15m');

  useEffect(() => {
    if (!live) return;
    const id = setInterval(() => {
      setHR(prev => {
        const target = targetBed.baseHR + (Math.random() - 0.5) * 6;
        const next = Math.round(prev + (target - prev) * 0.35);
        setHrHist(h => [...h.slice(1), next]);
        return next;
      });
      setSpO2(prev => Math.max(85, Math.min(100, parseFloat((prev + (Math.random() - 0.5) * 0.4).toFixed(1)))));
      setSys(prev => Math.round(120 + (Math.random() - 0.5) * 8));
      setDia(prev => Math.round(78 + (Math.random() - 0.5) * 6));
      setTemp(prev => parseFloat((prev + (Math.random() - 0.5) * 0.1).toFixed(1)));
      setRR(prev => Math.round(16 + (Math.random() - 0.5) * 2));
    }, 1400);
    return () => clearInterval(id);
  }, [targetBed, live]);

  const vitalColor = (v, lo, hi) => v < lo || v > hi ? 'var(--h-alert)' : 'var(--h-text)';

  return (
    <div className="screen-live">
      {/* Patient header */}
      <div className={`live-patient-card card-${cardStyle}`}>
        <button onClick={onBack} className="live-back"><window.Icon.ChevronLeft /> Ward grid</button>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <div className="live-avatar" style={{ background: `linear-gradient(135deg, ${accent}, #ec4899)` }}>
            {targetBed.patient.split(' ').map(n => n[0]).slice(0,2).join('')}
          </div>
          <div style={{ flex: 1 }}>
            <div className="live-patient-name">{targetBed.patient}</div>
            <div className="live-patient-meta">
              <span>{targetBed.mrn}</span>
              <span className="dot-sep">·</span>
              <span>{targetBed.age}y {targetBed.sex}</span>
              <span className="dot-sep">·</span>
              <span>{targetBed.name} · {window.HOSP_WARDS.find(w => w.id === targetBed.ward)?.name}</span>
              <span className="dot-sep">·</span>
              <span>{targetBed.device}</span>
            </div>
          </div>
          <window.StatusPill status={targetBed.status} />
        </div>
      </div>

      {/* Big ECG strip */}
      <div className={`live-strip card-${cardStyle}`}>
        <div className="live-strip-head">
          <div>
            <div className="strip-label">Electrocardiogram · Lead II</div>
            <div className="strip-meta">25 mm/s · 10 mm/mV · 200 Hz</div>
          </div>
          <div className="strip-actions">
            {['15m', '1h', '6h', '12h'].map(d => (
              <button key={d} onClick={() => setDuration(d)} className={`strip-btn ${duration === d ? 'active' : ''}`}>{d}</button>
            ))}
          </div>
        </div>
        <div className="live-strip-canvas">
          <window.ECGWave bpm={hr} color="var(--h-alert)" height={140} running={live} />
        </div>
      </div>

      {/* Vital cards */}
      <div className="live-vitals-grid">
        <VitalBigCard label="Heart Rate" unit="bpm" value={hr} icon="Heart" color="var(--h-alert)" sub={`Range 60–100`} history={hrHist} ok={hr >= 60 && hr <= 100} live={live} cardStyle={cardStyle}/>
        <VitalBigCard label="SpO₂" unit="%" value={spo2} decimals={1} icon="Drop" color="var(--h-primary)" sub="≥ 95%" ok={spo2 >= 95} live={live} cardStyle={cardStyle}/>
        <VitalBigCard label="Blood Pressure" unit="mmHg" value={`${sys}/${dia}`} icon="Activity" color="var(--h-warning)" sub="≤ 140/90" ok={sys <= 140 && dia <= 90} live={live} cardStyle={cardStyle}/>
        <VitalBigCard label="Temperature" unit="°C" value={temp} decimals={1} icon="Therm" color="#f97316" sub="36.1–37.2" ok={temp >= 35.5 && temp < 38} live={live} cardStyle={cardStyle}/>
        <VitalBigCard label="Respiration" unit="rpm" value={rr} icon="Wind" color="#8b5cf6" sub="12–20" ok={rr >= 12 && rr <= 20} live={live} cardStyle={cardStyle}/>
        <VitalBigCard label="Pulse Pressure" unit="mmHg" value={sys - dia} icon="Activity" color="#06b6d4" sub="30–50" ok={sys - dia >= 30 && sys - dia <= 50} live={live} cardStyle={cardStyle}/>
      </div>
    </div>
  );
}

function VitalBigCard({ label, value, unit, decimals = 0, icon, color, sub, ok, history, live, cardStyle }) {
  const I = window.Icon[icon];
  return (
    <div className={`vital-big card-${cardStyle} ${ok ? '' : 'vital-out'}`} style={{ '--vital-color': color }}>
      <div className="vital-head">
        <div className="vital-icon" style={{ background: `${color}1F`, color }}><I /></div>
        <div className="vital-label">{label}</div>
        {!ok && <span className="vital-flag">OUT OF RANGE</span>}
      </div>
      <div className="vital-value">
        {typeof value === 'number' ? <window.Ticker value={value} decimals={decimals} /> : value}
        <span className="vital-unit">{unit}</span>
      </div>
      <div className="vital-sub">Normal {sub}</div>
      {history && (
        <div className="vital-spark">
          <window.Sparkline data={history} color={color} width={240} height={40} />
        </div>
      )}
    </div>
  );
}

// ─── HOSPITALS LIST ──────────────────────────────────────
function HospitalsScreen({ onSelect, cardStyle, accent }) {
  return (
    <div className="screen-hospitals">
      {window.HOSP_HOSPITALS.map((h, i) => (
        <div key={h.id} className={`hospital-card card-${cardStyle}`} style={{ animationDelay: `${i * 80}ms` }}>
          <div className="hospital-banner" style={{ background: `linear-gradient(135deg, ${accent}, #ec4899)` }}>
            <div className="hospital-code">{h.code}</div>
            <window.Icon.Building style={{ position: 'absolute', right: 16, bottom: 16, opacity: 0.4, width: 60, height: 60, color: 'white' }}/>
          </div>
          <div className="hospital-body">
            <div className="hospital-name">{h.name}</div>
            <div className="hospital-city">{h.city}</div>
            <div className="hospital-stats">
              <div><div className="hs-num">{h.beds}</div><div className="hs-lbl">Beds</div></div>
              <div><div className="hs-num">{h.patients}</div><div className="hs-lbl">Patients</div></div>
              <div><div className="hs-num">{h.devices}</div><div className="hs-lbl">Devices</div></div>
              <div><div className="hs-num" style={{ color: h.alerts > 0 ? 'var(--h-alert)' : 'var(--h-success)' }}>{h.alerts}</div><div className="hs-lbl">Alerts</div></div>
            </div>
            <button className="hospital-cta" onClick={() => onSelect(h)}>
              <span>Open ward grid</span>
              <window.Icon.ChevronRight />
            </button>
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── PATIENTS TABLE ──────────────────────────────────────
function PatientsScreen({ cardStyle }) {
  const [search, setSearch] = useState('');
  const filtered = window.HOSP_PATIENTS.filter(p =>
    p.name.toLowerCase().includes(search.toLowerCase()) ||
    p.id.toLowerCase().includes(search.toLowerCase()) ||
    p.condition.toLowerCase().includes(search.toLowerCase())
  );
  return (
    <div className={`screen-patients card-${cardStyle}`}>
      <div className="screen-toolbar">
        <div className="toolbar-search">
          <window.Icon.Search />
          <input placeholder="Search patient, MRN, condition…" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <button className="btn btn-primary"><window.Icon.Plus /> Register patient</button>
      </div>
      <table className="data-table">
        <thead>
          <tr>
            <th>Patient</th>
            <th>MRN</th>
            <th>Age / Sex</th>
            <th>Bed / Ward</th>
            <th>Condition</th>
            <th>Admitted</th>
            <th>Risk</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {filtered.map((p, i) => (
            <tr key={p.id} className="data-row" style={{ animationDelay: `${i * 40}ms` }}>
              <td>
                <div className="cell-patient">
                  <div className="cell-avatar">{p.name.split(' ').map(n => n[0]).join('')}</div>
                  <div>{p.name}</div>
                </div>
              </td>
              <td className="mono">{p.id}</td>
              <td>{p.age} · {p.sex}</td>
              <td><div style={{ fontWeight: 600 }}>{p.bed}</div><div style={{ fontSize: 11, color: 'var(--h-muted)' }}>{p.ward}</div></td>
              <td>{p.condition}</td>
              <td className="mono" style={{ fontSize: 12 }}>{p.admitted}</td>
              <td><window.StatusPill status={p.risk === 'high' ? 'alert' : p.risk === 'medium' ? 'watch' : 'stable'} size="sm">{p.risk}</window.StatusPill></td>
              <td><button className="btn btn-ghost btn-sm">View</button></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ─── DEVICES TABLE ───────────────────────────────────────
function DevicesScreen({ cardStyle }) {
  const [search, setSearch] = useState('');
  const filtered = window.HOSP_DEVICES.filter(d =>
    d.name.toLowerCase().includes(search.toLowerCase()) ||
    d.mac.toLowerCase().includes(search.toLowerCase()) ||
    d.patient.toLowerCase().includes(search.toLowerCase())
  );
  return (
    <div className={`screen-devices card-${cardStyle}`}>
      <div className="screen-toolbar">
        <div className="toolbar-search">
          <window.Icon.Search />
          <input placeholder="Search device, MAC, patient…" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <button className="btn btn-ghost"><window.Icon.Filter /> Filter</button>
      </div>
      <table className="data-table">
        <thead>
          <tr>
            <th>Device</th>
            <th>MAC</th>
            <th>Bed / Patient</th>
            <th>Release</th>
            <th>Battery</th>
            <th>Signal</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          {filtered.map((d, i) => (
            <tr key={d.id} className="data-row" style={{ animationDelay: `${i * 30}ms` }}>
              <td><div style={{ fontWeight: 600 }}>{d.name}</div></td>
              <td className="mono" style={{ fontSize: 11, color: 'var(--h-muted)' }}>{d.mac}</td>
              <td>
                <div style={{ fontWeight: 500 }}>{d.bed}</div>
                <div style={{ fontSize: 11, color: 'var(--h-muted)' }}>{d.patient}</div>
              </td>
              <td className="mono" style={{ fontSize: 12 }}>
                {d.release} {d.release !== 'v1.3.0' && <span style={{ marginLeft: 6, padding: '1px 6px', borderRadius: 4, background: 'var(--h-warning-bg)', color: 'var(--h-warning)', fontSize: 10 }}>UPDATE</span>}
              </td>
              <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div className="bar-mini">
                    <div className="bar-mini-fill" style={{ width: `${d.battery}%`, background: d.battery > 50 ? 'var(--h-success)' : d.battery > 20 ? 'var(--h-warning)' : 'var(--h-alert)' }}/>
                  </div>
                  <span style={{ fontSize: 12, minWidth: 30, textAlign: 'right' }}>{d.battery}%</span>
                </div>
              </td>
              <td>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div className="bar-mini">
                    <div className="bar-mini-fill" style={{ width: `${d.signal}%`, background: 'var(--h-primary)' }}/>
                  </div>
                  <span style={{ fontSize: 12, minWidth: 30, textAlign: 'right' }}>{d.signal}%</span>
                </div>
              </td>
              <td><window.StatusPill status={d.status} size="sm" /></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

// ─── ALERTS LIST ─────────────────────────────────────────
function AlertsScreen({ alerts, onAck, cardStyle }) {
  const [filter, setFilter] = useState('all');
  const filtered = alerts.filter(a => filter === 'all' || a.sev === filter);
  return (
    <div className="screen-alerts">
      <div className="alert-filters">
        {['all', 'critical', 'warning', 'info'].map(f => (
          <button key={f} onClick={() => setFilter(f)} className={`ward-chip ${filter === f ? 'active' : ''}`}>
            <span style={{ textTransform: 'capitalize' }}>{f}</span>
            <span className="chip-count">{f === 'all' ? alerts.length : alerts.filter(a => a.sev === f).length}</span>
          </button>
        ))}
      </div>
      <div className="alert-list">
        {filtered.map((a, i) => (
          <div key={a.id} className={`alert-row card-${cardStyle} alert-sev-${a.sev} ${a.ack ? 'alert-ack' : ''}`} style={{ animationDelay: `${i * 50}ms` }}>
            <div className="alert-sev-bar"/>
            <div className="alert-icon">
              {a.sev === 'critical' ? '⚠' : a.sev === 'warning' ? '!' : 'ℹ'}
            </div>
            <div className="alert-body">
              <div className="alert-title">
                <span className="alert-vital">{a.vital}</span>
                <span className="alert-value mono">{a.value}</span>
                <span className="alert-thresh">Threshold {a.threshold}</span>
              </div>
              <div className="alert-meta">
                <span><strong>{a.bed}</strong> · {a.patient}</span>
                <span className="dot-sep">·</span>
                <span>{a.time}</span>
              </div>
              <div className="alert-note">{a.note}</div>
            </div>
            <div className="alert-actions">
              {!a.ack ? (
                <>
                  <button className="btn btn-ghost btn-sm" onClick={() => onAck(a.id)}>Acknowledge</button>
                  <button className="btn btn-primary btn-sm">Resolve</button>
                </>
              ) : (
                <span className="alert-ack-tag">✓ Acknowledged</span>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── FLOOR PLAN (pulsing map) ─────────────────────────────
function FloorPlanScreen({ onSelectBed, live, cardStyle }) {
  // Lay out beds on an SVG floor plan with pulse animation
  const bedPositions = {
    1: { x: 12, y: 18 }, 2: { x: 22, y: 18 }, 3: { x: 32, y: 18 }, 4: { x: 42, y: 18 },
    5: { x: 60, y: 18 }, 6: { x: 70, y: 18 }, 7: { x: 80, y: 18 }, 8: { x: 90, y: 18 },
    9: { x: 14, y: 60 }, 10: { x: 26, y: 60 },
    11: { x: 56, y: 60 }, 12: { x: 68, y: 60 },
  };

  return (
    <div className={`floor-plan card-${cardStyle}`}>
      <div className="fp-head">
        <div>
          <div className="fp-title">Apollo General Hospital · Floor 3</div>
          <div className="fp-sub">Live bed positions · click to inspect</div>
        </div>
        <div className="fp-legend">
          <span><span className="ldot" style={{ background: 'var(--h-alert)' }}/> Critical</span>
          <span><span className="ldot" style={{ background: 'var(--h-warning)' }}/> Watch</span>
          <span><span className="ldot" style={{ background: 'var(--h-success)' }}/> Stable</span>
          <span><span className="ldot" style={{ background: 'var(--h-muted)' }}/> Vacant</span>
        </div>
      </div>
      <svg className="fp-svg" viewBox="0 0 100 80" preserveAspectRatio="xMidYMid meet">
        {/* Ward zones */}
        {window.HOSP_WARDS.map(w => (
          <g key={w.id}>
            <rect x={w.x} y={w.y} width={w.w} height={w.h} fill={`${w.color}10`} stroke={`${w.color}50`} strokeWidth="0.15" strokeDasharray="0.8,0.4" rx="1.5"/>
            <text x={w.x + 1} y={w.y + 3.5} fill={w.color} fontSize="2.2" fontWeight="700" style={{ textTransform: 'uppercase', letterSpacing: '0.1em' }}>{w.name}</text>
          </g>
        ))}
        {/* Beds */}
        {window.HOSP_BEDS.map(bed => {
          const pos = bedPositions[bed.id];
          if (!pos) return null;
          const color = { alert: 'var(--h-alert)', watch: 'var(--h-warning)', stable: 'var(--h-success)', idle: 'var(--h-muted)' }[bed.status];
          return (
            <g key={bed.id} style={{ cursor: 'pointer' }} onClick={() => onSelectBed(bed)}>
              {/* Pulse ring */}
              {live && bed.status !== 'idle' && (
                <circle cx={pos.x} cy={pos.y} r="2" fill="none" stroke={color} strokeWidth="0.2" opacity="0.6">
                  <animate attributeName="r" from="2" to="5" dur={bed.status === 'alert' ? '1.2s' : '2.5s'} repeatCount="indefinite"/>
                  <animate attributeName="opacity" from="0.6" to="0" dur={bed.status === 'alert' ? '1.2s' : '2.5s'} repeatCount="indefinite"/>
                </circle>
              )}
              <rect x={pos.x - 2.5} y={pos.y - 1.5} width="5" height="3" rx="0.5" fill={color} opacity="0.85"/>
              <text x={pos.x} y={pos.y + 0.5} textAnchor="middle" fill="white" fontSize="1.6" fontWeight="700">{bed.name.replace('Bed ', '')}</text>
            </g>
          );
        })}
      </svg>
      <div className="fp-summary">
        {window.HOSP_BEDS.filter(b => b.status === 'alert').map(b => (
          <div key={b.id} className="fp-alert-row" onClick={() => onSelectBed(b)}>
            <span className="ldot" style={{ background: 'var(--h-alert)', boxShadow: '0 0 8px var(--h-alert)', animation: 'pulse 1.2s infinite' }}/>
            <span><strong>{b.name}</strong> · {b.patient}</span>
            <span style={{ flex: 1, color: 'var(--h-muted)', fontSize: 12 }}>{b.alertText}</span>
            <window.Icon.ChevronRight style={{ color: 'var(--h-muted)' }}/>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  WardGridScreen, LiveVitalsScreen, HospitalsScreen, PatientsScreen,
  DevicesScreen, AlertsScreen, FloorPlanScreen, BedCard,
});