/* global React, I, useState, useRef, useEffect, useMemo, fmtDate */

// ============================================================================
// IMAGING (X-Ray)
// ============================================================================
function Imaging() {
  const [selectedMount, setSelectedMount] = useState("fmx-2024");
  const [pearlOn, setPearlOn] = useState(true);
  const [selectedImg, setSelectedImg] = useState(null);

  const mounts = [
    { id: "fmx-2024", name: "FMX · Full Mouth Series", date: "Mar 3, 2024", n: 18, provider: "Dr. Reilly" },
    { id: "bw-2025", name: "4BW · Bitewings", date: "Oct 14, 2025", n: 4, provider: "Hyg. Park" },
    { id: "pa-2024", name: "PA · Tooth #19", date: "Aug 11, 2024", n: 1, provider: "Dr. Reilly" },
    { id: "pano-2023", name: "Panoramic", date: "Feb 17, 2023", n: 1, provider: "Dr. Reilly" },
    { id: "cbct-2025", name: "CBCT · Airway scan", date: "Nov 4, 2025", n: 1, provider: "Dr. Del Real" },
  ];

  const fmxLayout = [
    ["UR-3", "UR-2", "UR-1", "UL-1", "UL-2", "UL-3"],
    ["UR-BW", "", "UR-PA", "UL-PA", "", "UL-BW"],
    ["LR-3", "LR-2", "LR-1", "LL-1", "LL-2", "LL-3"],
  ];

  return (
    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
      <PatientHeaderStrip />

      <div style={{ flex: 1, display: "grid", gridTemplateColumns: "240px 1fr 280px", overflow: "hidden" }}>
        {/* Mount list */}
        <div style={{ borderRight: "1px solid var(--border-hairline)", overflow: "auto", background: "var(--bg-subtle)" }}>
          <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--border-hairline)" }}>
            <div style={{ display: "flex", alignItems: "center", marginBottom: 8 }}>
              <div style={{ fontSize: 11, fontWeight: 600, color: "var(--fg-tertiary)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Mounts</div>
              <div className="spacer" />
              <button className="btn icon ghost sm"><I.Plus size={12} /></button>
            </div>
          </div>
          {mounts.map(m => (
            <div key={m.id}
              onClick={() => setSelectedMount(m.id)}
              style={{
                padding: "10px 14px",
                borderBottom: "1px solid var(--border-hairline)",
                cursor: "pointer",
                background: selectedMount === m.id ? "var(--bg-surface)" : "transparent",
                borderLeft: selectedMount === m.id ? "3px solid var(--sage-500)" : "3px solid transparent",
              }}
            >
              <div style={{ fontSize: 12.5, fontWeight: 550 }}>{m.name}</div>
              <div className="tiny muted" style={{ marginTop: 2 }}>{m.date} · {m.n} image{m.n > 1 ? "s" : ""} · {m.provider}</div>
            </div>
          ))}
        </div>

        {/* Main viewer */}
        <div style={{ display: "flex", flexDirection: "column", overflow: "hidden" }}>
          <div style={{
            padding: "10px 16px",
            borderBottom: "1px solid var(--border-hairline)",
            background: "var(--bg-surface)",
            display: "flex", alignItems: "center", gap: 8,
          }}>
            <div>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>{mounts.find(m => m.id === selectedMount).name}</div>
              <div className="tiny muted">{mounts.find(m => m.id === selectedMount).date}</div>
            </div>
            <div className="spacer" />

            <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, padding: "5px 10px", background: pearlOn ? "var(--violet-50)" : "var(--bg-subtle)", borderRadius: 6, cursor: "pointer", border: "1px solid " + (pearlOn ? "var(--violet-200)" : "var(--border-hairline)") }}>
              <I.Sparkles size={13} style={{ color: pearlOn ? "var(--violet-700)" : "var(--fg-tertiary)" }} />
              <span style={{ color: pearlOn ? "var(--violet-700)" : "var(--fg-secondary)", fontWeight: 500 }}>Pearl AI</span>
              <Switch on={pearlOn} onChange={() => setPearlOn(!pearlOn)} />
            </label>

            <div className="divider v" style={{ height: 20, margin: "0 4px" }} />
            <button className="btn icon sm"><I.Refresh size={13} /></button>
            <button className="btn icon sm"><I.Download size={13} /></button>
            <button className="btn icon sm"><I.Send size={13} /></button>
            <button className="btn sm primary"><I.Upload size={13} /> Capture</button>
          </div>

          <div style={{ flex: 1, background: "oklch(15% 0.01 240)", padding: 20, overflow: "auto" }}>
            {selectedMount === "fmx-2024" && (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 6, maxWidth: 880, margin: "0 auto" }}>
                {fmxLayout.flat().map((slot, i) => (
                  slot ? (
                    <XRayCell
                      key={i}
                      label={slot}
                      pearl={pearlOn && [2, 5, 14].includes(i)}
                      onClick={() => setSelectedImg(slot)}
                      finding={[2,5,14].includes(i) ? ["Caries DO", "PARL #14", "Calculus"][[2,5,14].indexOf(i)] : null}
                    />
                  ) : <div key={i} />
                ))}
              </div>
            )}
            {selectedMount === "bw-2025" && (
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, maxWidth: 720, margin: "0 auto" }}>
                {["LR-BW", "UR-BW", "UL-BW", "LL-BW"].map((s, i) => (
                  <XRayCell key={s} label={s} large pearl={pearlOn && i === 1} finding={pearlOn && i === 1 ? "Interproximal caries · D#3" : null} />
                ))}
              </div>
            )}
            {selectedMount === "pano-2023" && (
              <XRayPano pearl={pearlOn} />
            )}
            {selectedMount === "pa-2024" && (
              <div style={{ maxWidth: 400, margin: "0 auto" }}>
                <XRayCell label="PA #19" hero pearl={pearlOn} finding={pearlOn ? "Apical lesion · #19" : null} />
              </div>
            )}
            {selectedMount === "cbct-2025" && (
              <CBCTPlaceholder />
            )}
          </div>
        </div>

        {/* Findings panel */}
        <div style={{ borderLeft: "1px solid var(--border-hairline)", background: "var(--bg-surface)", overflow: "auto", padding: 14 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--fg-tertiary)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 10, display: "flex", alignItems: "center", gap: 6 }}>
            <I.Sparkles size={11} style={{ color: "var(--violet-500)" }} />
            Pearl AI findings
            <span className="chip violet sm" style={{ marginLeft: "auto" }}>3</span>
          </div>

          {[
            { type: "Caries", tooth: "#3", surface: "DO", conf: 91, severity: "high" },
            { type: "Periapical radiolucency", tooth: "#14", surface: "—", conf: 82, severity: "med" },
            { type: "Calculus", tooth: "Subgingival", surface: "LL quadrant", conf: 76, severity: "low" },
          ].map((f, i) => (
            <div key={i} style={{ padding: 12, background: "var(--bg-subtle)", borderRadius: 8, marginBottom: 8 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span className={"chip sm " + (f.severity === "high" ? "rose" : f.severity === "med" ? "amber" : "outline")}>{f.severity}</span>
                <span style={{ fontWeight: 600, fontSize: 12.5 }}>{f.type}</span>
              </div>
              <div className="tiny muted" style={{ marginTop: 4 }}>Tooth {f.tooth} · {f.surface}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 6 }}>
                <div style={{ flex: 1, height: 3, background: "var(--bg-sunken)", borderRadius: 2 }}>
                  <div style={{ height: "100%", width: `${f.conf}%`, background: "var(--violet-500)", borderRadius: 2 }} />
                </div>
                <span className="tabular tiny muted">{f.conf}% conf</span>
              </div>
              <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
                <button className="btn sm" style={{ flex: 1 }}><I.Check size={11} /> Accept</button>
                <button className="btn sm ghost"><I.X size={11} /></button>
              </div>
            </div>
          ))}

          <div className="divider" style={{ margin: "16px 0" }} />
          <div className="tiny muted" style={{ marginBottom: 8 }}>
            Pearl AI is an optional add-on (~$200/mo). Findings are advisory — provider review required.
          </div>
          <button className="btn sm" style={{ width: "100%" }}><I.Settings size={11} /> Configure Pearl</button>
        </div>
      </div>
    </div>
  );
}

function Switch({ on, onChange }) {
  return (
    <div onClick={onChange} style={{
      width: 28, height: 16, borderRadius: 10,
      background: on ? "var(--violet-500)" : "var(--border-strong)",
      position: "relative", cursor: "pointer", transition: "background 160ms",
    }}>
      <div style={{
        position: "absolute", top: 2, left: on ? 14 : 2,
        width: 12, height: 12, borderRadius: "50%", background: "white",
        transition: "left 160ms", boxShadow: "0 1px 2px oklch(0% 0 0 / 0.2)",
      }} />
    </div>
  );
}

function XRayCell({ label, hero, large, pearl, finding, onClick }) {
  const h = hero ? 280 : large ? 160 : 120;
  return (
    <div onClick={onClick} style={{ position: "relative", cursor: "pointer" }}>
      <div style={{
        height: h,
        background: "linear-gradient(135deg, oklch(35% 0.005 240), oklch(20% 0.005 240))",
        borderRadius: 4,
        position: "relative",
        overflow: "hidden",
        boxShadow: pearl ? "inset 0 0 0 2px var(--violet-500), 0 0 20px oklch(60% 0.16 295 / 0.3)" : "inset 0 0 0 1px oklch(40% 0.005 240)",
      }}>
        <ToothXRay h={h} />
        {pearl && (
          <div style={{
            position: "absolute",
            top: "30%", left: "40%",
            width: 30, height: 30,
            border: "1.5px dashed var(--violet-500)",
            borderRadius: "50%",
            animation: "pearlPulse 2s ease-out infinite",
          }} />
        )}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 4, marginTop: 4, padding: "0 2px" }}>
        <span className="mono tiny" style={{ color: "oklch(75% 0.005 110)", letterSpacing: "0.04em" }}>{label}</span>
        {finding && (
          <span className="chip violet sm" style={{ fontSize: 9.5, marginLeft: "auto" }}>{finding}</span>
        )}
      </div>
      <style>{`@keyframes pearlPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }`}</style>
    </div>
  );
}

function ToothXRay({ h }) {
  // Synthetic tooth radiograph using SVG
  return (
    <svg width="100%" height="100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" style={{ position: "absolute", inset: 0 }}>
      <defs>
        <radialGradient id="toothGrad" cx="50%" cy="35%">
          <stop offset="0%" stopColor="oklch(94% 0.005 80)" />
          <stop offset="60%" stopColor="oklch(80% 0.005 80)" />
          <stop offset="100%" stopColor="oklch(60% 0.005 80)" />
        </radialGradient>
        <radialGradient id="boneGrad" cx="50%" cy="50%">
          <stop offset="0%" stopColor="oklch(55% 0.005 60)" />
          <stop offset="100%" stopColor="oklch(35% 0.005 60)" />
        </radialGradient>
      </defs>
      <rect width="200" height="200" fill="url(#boneGrad)" opacity="0.4" />
      {/* Teeth */}
      {[0, 1, 2].map(i => (
        <g key={i} transform={`translate(${30 + i * 55}, 60)`}>
          <path d="M 0 0 Q 20 -10 40 0 L 35 50 Q 30 75 25 75 L 15 75 Q 10 75 5 50 Z" fill="url(#toothGrad)" stroke="oklch(50% 0.005 60)" strokeWidth="0.5" />
          {/* Roots */}
          <path d="M 12 75 L 14 110 L 18 115 L 22 115 L 28 110 L 30 75 Z" fill="url(#toothGrad)" opacity="0.85" stroke="oklch(45% 0.005 60)" strokeWidth="0.4" />
          {/* Filling */}
          {i === 1 && <rect x="14" y="10" width="14" height="12" fill="oklch(95% 0.005 80)" />}
        </g>
      ))}
      {/* Noise */}
      <rect width="200" height="200" fill="url(#noise)" opacity="0.08" />
    </svg>
  );
}

function XRayPano({ pearl }) {
  return (
    <div style={{
      maxWidth: 900, margin: "0 auto",
      background: "linear-gradient(135deg, oklch(35% 0.005 240), oklch(18% 0.005 240))",
      aspectRatio: "16/9", borderRadius: 6, padding: 20,
      position: "relative", overflow: "hidden",
    }}>
      <svg viewBox="0 0 800 450" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <defs>
          <radialGradient id="panoBone" cx="50%" cy="50%" r="60%">
            <stop offset="0%" stopColor="oklch(55% 0.005 60)" />
            <stop offset="100%" stopColor="oklch(28% 0.005 60)" />
          </radialGradient>
          <radialGradient id="panoTooth" cx="50%" cy="40%">
            <stop offset="0%" stopColor="oklch(92% 0.005 80)" />
            <stop offset="100%" stopColor="oklch(65% 0.005 80)" />
          </radialGradient>
        </defs>
        {/* Mandible arc */}
        <path d="M 100 200 Q 100 350 400 380 Q 700 350 700 200" stroke="url(#panoBone)" strokeWidth="60" fill="none" opacity="0.7" />
        {/* Maxilla */}
        <path d="M 130 180 Q 130 80 400 60 Q 670 80 670 180" stroke="url(#panoBone)" strokeWidth="50" fill="none" opacity="0.6" />
        {/* Teeth (16 lower) */}
        {Array.from({length: 16}).map((_, i) => {
          const angle = (Math.PI * (i - 7.5) / 16) - Math.PI / 2;
          const r = 200;
          const x = 400 + Math.cos(angle) * r;
          const y = 200 + Math.sin(angle) * r * 0.85 + 50;
          return <ellipse key={i} cx={x} cy={y} rx="14" ry="20" fill="url(#panoTooth)" stroke="oklch(48% 0.005 60)" strokeWidth="0.5" />;
        })}
        {/* Upper teeth */}
        {Array.from({length: 16}).map((_, i) => {
          const angle = (Math.PI * (i - 7.5) / 16) - Math.PI / 2;
          const r = 200;
          const x = 400 + Math.cos(angle) * r;
          const y = 200 - Math.sin(angle + Math.PI) * r * 0.7 - 40;
          return <ellipse key={i} cx={x} cy={y} rx="14" ry="20" fill="url(#panoTooth)" stroke="oklch(48% 0.005 60)" strokeWidth="0.5" />;
        })}
        {pearl && (
          <g>
            <circle cx="540" cy="280" r="22" fill="none" stroke="var(--violet-500)" strokeWidth="1.5" strokeDasharray="3 3" />
            <text x="540" y="320" fontSize="11" fill="oklch(80% 0.05 295)" textAnchor="middle">PARL #18</text>
          </g>
        )}
      </svg>
    </div>
  );
}

function CBCTPlaceholder() {
  return (
    <div style={{ maxWidth: 900, margin: "0 auto" }}>
      <div style={{ padding: 16, background: "oklch(22% 0.01 240)", borderRadius: 8, marginBottom: 12, display: "flex", alignItems: "center", gap: 12 }}>
        <I.AlertCircle size={16} style={{ color: "var(--amber-500)" }} />
        <div style={{ flex: 1, color: "oklch(85% 0.005 110)", fontSize: 12.5 }}>
          3D CBCT viewer · launched in Anatomage. Airway analysis from Toothpillow pipeline shown below.
        </div>
        <button className="btn sm"><I.ArrowUpRight size={11} /> Open in Anatomage</button>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}>
        {["Axial", "Sagittal", "Coronal"].map(view => (
          <div key={view} style={{ aspectRatio: "1", background: "oklch(18% 0.005 240)", borderRadius: 6, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle, oklch(45% 0.005 60), oklch(15% 0.005 60))" }} />
            <div style={{ position: "absolute", top: 8, left: 8, color: "oklch(75% 0.05 145)", fontSize: 11, fontFamily: "monospace" }}>{view}</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 12, padding: 14, background: "oklch(22% 0.01 240)", borderRadius: 8, color: "oklch(85% 0.005 110)" }}>
        <div style={{ fontSize: 12.5, fontWeight: 600, marginBottom: 8, display: "flex", alignItems: "center", gap: 6 }}>
          <I.Activity size={13} style={{ color: "var(--sage-400)" }} />
          Airway analysis · baseline
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, fontSize: 11.5 }}>
          {[
            ["MCA", "84 mm²", "var(--amber-500)"],
            ["Volume", "12.4 cm³", "var(--sage-400)"],
            ["Narrowing", "47%", "var(--rose-500)"],
            ["Constriction", "Retropalatal", "var(--blue-500)"],
          ].map(([l, v, c]) => (
            <div key={l}>
              <div style={{ opacity: 0.6, marginBottom: 2 }}>{l}</div>
              <div className="tabular" style={{ fontSize: 16, color: c, fontWeight: 600 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// PATIENT PROFILE
// ============================================================================
function PatientProfile() {
  return (
    <div style={{ flex: 1, overflow: "auto" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: 20 }}>
        {/* Header */}
        <div style={{ display: "flex", gap: 16, marginBottom: 18 }}>
          <div className="avatar xl av-3" style={{ width: 80, height: 80, fontSize: 26 }}>CR</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
              <h2 style={{ margin: 0, fontSize: 24, fontWeight: 650, letterSpacing: "-0.02em" }}>Chase Rowley</h2>
              <span className="chip outline">He/him</span>
              <span className="chip mint sm">Pt #4421</span>
            </div>
            <div style={{ display: "flex", gap: 14, marginTop: 4, fontSize: 12.5 }} className="muted">
              <span>33 y/o · DOB Nov 22, 1992</span>
              <span>·</span>
              <span>Last visit: Apr 22, 2026</span>
              <span>·</span>
              <span>Next: today 9:00a</span>
            </div>
            <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
              <span className="chip outline sm">🏍️ Harley</span>
              <span className="chip outline sm">✅ Easy patient</span>
              <span className="chip sage sm"><I.Check size={10} /> Active</span>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6, width: 220 }}>
            <button className="btn primary"><I.Calendar size={13} /> Schedule</button>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4 }}>
              <button className="btn sm"><I.Phone size={12} /></button>
              <button className="btn sm"><I.MessageSquare size={12} /></button>
              <button className="btn sm"><I.Mail size={12} /></button>
            </div>
            <button className="btn sm"><I.CreditCard size={12} /> Take payment</button>
          </div>
        </div>

        {/* Tabs */}
        <div className="tabs" style={{ marginBottom: 16 }}>
          <div className="tab active">Overview</div>
          <div className="tab">Clinical</div>
          <div className="tab">Insurance & billing</div>
          <div className="tab">Documents <span className="count">847</span></div>
          <div className="tab">Communications</div>
          <div className="tab">Sleep & airway</div>
          <div className="tab">Activity</div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 16 }}>
          {/* Left col */}
          <div className="col" style={{ gap: 16 }}>
            <div className="card">
              <div className="card-head">
                <h3>Demographics</h3>
                <div className="spacer" />
                <button className="btn ghost sm"><I.Edit size={11} /> Edit</button>
              </div>
              <div className="card-body" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px 24px" }}>
                <DKV label="Legal name" v="Chase Andrew Rowley" />
                <DKV label="Preferred name" v="Chase" />
                <DKV label="Email" v="chase.rowley@email.com" />
                <DKV label="Mobile" v="(512) 555-0119" />
                <DKV label="Home" v="(512) 555-0118" />
                <DKV label="SMS consent" v={<span className="chip sage sm"><I.Check size={10} /> Opted in</span>} />
                <DKV label="Address" v="2104 Oltorf St, Austin, TX 78704" />
                <DKV label="Emergency contact" v="Sarah Rowley · spouse · (512) 555-0120" />
                <DKV label="Employer" v="Stripe (Software Eng)" />
                <DKV label="Preferred provider" v="Dr. Reilly" />
                <DKV label="Preferred operatory" v="Op 1" />
                <DKV label="HIPAA contact pref" v="Email + SMS" />
              </div>
            </div>

            <div className="card">
              <div className="card-head">
                <h3>Family</h3>
                <span className="chip outline sm">$421 total household balance</span>
                <div className="spacer" />
                <button className="btn ghost sm"><I.Plus size={11} /> Add member</button>
              </div>
              <div className="card-body">
                <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10 }}>
                  {[
                    { name: "Chase", role: "Self", age: 33, balance: 0, avatar: "av-3" },
                    { name: "Sarah", role: "Spouse · Guarantor", age: 31, balance: 240, avatar: "av-1" },
                    { name: "Ava", role: "Child", age: 8, balance: 0, avatar: "av-7" },
                    { name: "Leo", role: "Child", age: 5, balance: 181, avatar: "av-6" },
                  ].map((m, i) => (
                    <div key={i} style={{ padding: 12, background: "var(--bg-subtle)", borderRadius: 8, cursor: "pointer" }}>
                      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
                        <div className={"avatar lg " + m.avatar}>{m.name[0]}</div>
                        <div style={{ minWidth: 0, flex: 1 }}>
                          <div style={{ fontWeight: 600, fontSize: 13 }}>{m.name}</div>
                          <div className="tiny muted">{m.age} y/o</div>
                        </div>
                      </div>
                      <div className="tiny muted">{m.role}</div>
                      <div className="tabular" style={{ fontSize: 13, fontWeight: 600, marginTop: 4, color: m.balance > 0 ? "var(--rose-700)" : "var(--sage-700)" }}>
                        ${m.balance.toFixed(2)}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="card">
              <div className="card-head">
                <h3>Recent appointments</h3>
                <div className="spacer" />
                <button className="btn ghost sm">All history →</button>
              </div>
              <div className="card-body tight">
                {[
                  { date: "Apr 30, 2026", time: "9:00a", proc: "DO Composite #14 · #15", prov: "Dr. Reilly", status: "Scheduled" },
                  { date: "Oct 14, 2025", time: "10:30a", proc: "Adult Prophy · 4BW", prov: "Hyg. Park", status: "Complete" },
                  { date: "Apr 03, 2025", time: "8:30a", proc: "Periodic exam", prov: "Dr. Reilly", status: "Complete" },
                  { date: "Oct 11, 2024", time: "2:00p", proc: "Adult Prophy", prov: "Hyg. Liang", status: "Complete" },
                  { date: "Mar 03, 2024", time: "9:00a", proc: "Comprehensive exam · FMX", prov: "Dr. Reilly", status: "Complete" },
                ].map((a, i) => (
                  <div key={i} style={{ padding: "10px 14px", borderBottom: "1px solid var(--border-hairline)", display: "flex", alignItems: "center", gap: 12 }}>
                    <div className="tabular" style={{ minWidth: 110 }}>
                      <div style={{ fontSize: 12.5, fontWeight: 500 }}>{a.date}</div>
                      <div className="tiny muted">{a.time}</div>
                    </div>
                    <div style={{ flex: 1, fontSize: 12.5 }}>{a.proc}</div>
                    <div className="tiny muted" style={{ width: 110 }}>{a.prov}</div>
                    <span className={"chip sm " + (a.status === "Complete" ? "sage" : "outline")}>{a.status}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right col */}
          <div className="col" style={{ gap: 16 }}>
            <div className="card">
              <div className="card-head"><h3>Insurance</h3></div>
              <div className="card-body">
                <div style={{ marginBottom: 10 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    <span className="chip outline sm">Primary</span>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>Aetna Open Access</span>
                  </div>
                  <div className="tiny muted" style={{ marginTop: 2 }}>Policy #AET-1138 · Group #02184</div>
                  <div style={{ display: "flex", gap: 4, marginTop: 6 }}>
                    <span className="chip sage sm"><I.Check size={10} /> Verified Apr 27</span>
                    <span className="chip violet sm"><I.Zap size={10} /> Vyne</span>
                  </div>
                </div>
                <div className="divider" />
                <div>
                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                    <span className="chip outline sm">Secondary</span>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>None on file</span>
                  </div>
                  <button className="btn sm ghost" style={{ marginTop: 6 }}><I.Plus size={11} /> Add coverage</button>
                </div>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><h3>Alerts</h3><span className="chip outline sm">0 active</span></div>
              <div className="card-body">
                <div className="muted tiny" style={{ textAlign: "center", padding: "12px 0" }}>No active alerts.</div>
                <button className="btn sm" style={{ width: "100%", justifyContent: "center" }}><I.Plus size={11} /> Add alert</button>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><h3>Sleep & airway</h3><span className="chip blue sm">DSM</span></div>
              <div className="card-body">
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginBottom: 10 }}>
                  <Metric label="STOP-Bang" v="3" sub="Moderate risk" color="amber" />
                  <Metric label="Last HSAT" v="AHI 14.2" sub="Apr 8, 2026" color="amber" />
                </div>
                <button className="btn sm" style={{ width: "100%", justifyContent: "center" }}>Open Sleep cockpit →</button>
              </div>
            </div>

            <div className="card">
              <div className="card-head"><h3>Recall</h3></div>
              <div className="card-body">
                <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                  <span className="tabular medium" style={{ fontSize: 18 }}>Oct 14, 2026</span>
                  <span className="tiny muted">in 5 months</span>
                </div>
                <div className="tiny muted">6-month prophy recall</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
function DKV({ label, v }) {
  return (
    <div>
      <div className="tiny muted" style={{ marginBottom: 2 }}>{label}</div>
      <div style={{ fontSize: 13 }}>{v}</div>
    </div>
  );
}
function Metric({ label, v, sub, color }) {
  return (
    <div style={{ background: `var(--${color}-50)`, borderRadius: 6, padding: 10 }}>
      <div className="tiny" style={{ color: `var(--${color}-700)`, opacity: 0.8 }}>{label}</div>
      <div className="tabular" style={{ fontSize: 16, fontWeight: 600, color: `var(--${color}-700)` }}>{v}</div>
      <div className="tiny" style={{ color: `var(--${color}-700)`, opacity: 0.7 }}>{sub}</div>
    </div>
  );
}

// ============================================================================
// COMMUNICATIONS
// ============================================================================
function Communications() {
  const [thread, setThread] = useState("p1");

  const threads = [
    { id: "p1", name: "Katie Filby", last: "Confirmed — see you tomorrow!", time: "11:14a", unread: 0, avatar: "av-1" },
    { id: "p2", name: "Chandler Bing", last: "Can I reschedule to next week?", time: "10:42a", unread: 2, avatar: "av-2" },
    { id: "p13", name: "Tom Haverford", last: "Photo of the chip on my front tooth attached", time: "9:30a", unread: 1, avatar: "av-8" },
    { id: "p4", name: "Monica Geller", last: "Forms submitted ✓", time: "yesterday", unread: 0, avatar: "av-7" },
    { id: "p5", name: "Joey Tribbiani", last: "Payment of $50.00 confirmed", time: "yesterday", unread: 0, avatar: "av-4" },
    { id: "p10", name: "Leslie Knope", last: "Need to come in today, severe pain", time: "8:01a", unread: 1, avatar: "av-7" },
  ];

  return (
    <div style={{ flex: 1, display: "grid", gridTemplateColumns: "320px 1fr 280px", overflow: "hidden" }}>
      {/* Thread list */}
      <div style={{ borderRight: "1px solid var(--border-hairline)", background: "var(--bg-subtle)", overflow: "auto" }}>
        <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--border-hairline)" }}>
          <div className="row">
            <div style={{ fontSize: 14, fontWeight: 600 }}>Inbox</div>
            <span className="chip rose sm">4 unread</span>
            <div className="spacer" />
            <button className="btn icon ghost sm"><I.Plus size={13} /></button>
          </div>
          <div className="search" style={{ marginTop: 8, minWidth: 0 }}>
            <I.Search size={12} />
            <input placeholder="Search messages…" />
          </div>
          <div style={{ display: "flex", gap: 4, marginTop: 8 }}>
            <span className="chip sage sm">Patient</span>
            <span className="chip outline sm">Staff chat</span>
            <span className="chip outline sm">Auto</span>
          </div>
        </div>
        {threads.map(t => (
          <div key={t.id}
            onClick={() => setThread(t.id)}
            style={{
              padding: "12px 14px",
              borderBottom: "1px solid var(--border-hairline)",
              cursor: "pointer",
              background: thread === t.id ? "var(--bg-surface)" : "transparent",
              borderLeft: thread === t.id ? "3px solid var(--sage-500)" : "3px solid transparent",
              display: "flex", gap: 10,
            }}
          >
            <div className={"avatar lg " + t.avatar}>{t.name.split(" ").map(s => s[0]).join("")}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
                <span style={{ fontSize: 13, fontWeight: t.unread ? 600 : 500, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.name}</span>
                <span className="tiny muted">{t.time}</span>
              </div>
              <div className="tiny" style={{ color: t.unread ? "var(--fg-primary)" : "var(--fg-tertiary)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", fontWeight: t.unread ? 500 : 400 }}>
                {t.last}
              </div>
            </div>
            {t.unread > 0 && (
              <span className="chip sage sm" style={{ fontSize: 10, padding: "0 5px" }}>{t.unread}</span>
            )}
          </div>
        ))}
      </div>

      {/* Conversation */}
      <div style={{ display: "flex", flexDirection: "column", overflow: "hidden", background: "var(--bg-canvas)" }}>
        <div style={{ padding: "12px 18px", borderBottom: "1px solid var(--border-hairline)", background: "var(--bg-surface)", display: "flex", alignItems: "center", gap: 10 }}>
          <div className="avatar lg av-2">CB</div>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600 }}>Chandler Bing</div>
            <div className="tiny muted">(512) 555-0188 · SMS · 1,424 messages total</div>
          </div>
          <div className="spacer" />
          <span className="chip sage sm"><I.Check size={10} /> Opted in</span>
          <button className="btn icon ghost sm"><I.Phone size={13} /></button>
          <button className="btn icon ghost sm"><I.Calendar size={13} /></button>
          <button className="btn icon ghost sm"><I.MoreHorizontal size={13} /></button>
        </div>

        <div style={{ flex: 1, overflow: "auto", padding: 20 }}>
          <DayDivider label="Today, May 22" />
          <Msg outbound auto time="9:00a" content="Hi Chandler, this is Sunfield Dental confirming your appointment tomorrow at 10:00a with Dr. Del Real. Reply YES to confirm or RESCHEDULE to change." />
          <Msg time="10:38a" content="Hey can we move this to next week? Something came up at work" />
          <Msg time="10:42a" content="Also, do I need the new medical history form? Got an email about it" />
          <Msg outbound staff="Maya · Front Desk" time="10:48a" content="Hi Chandler! Yes we can reschedule. I have Wed May 28 at 9:00a or Thu May 29 at 2:00p. The form just needs an update on your medications — takes 2 min." />
          <Msg outbound staff="Maya · Front Desk" time="10:48a" content={<span>Form link: <a style={{ color: "var(--sage-700)" }}>sunfield.tp/f/cb-medhx</a></span>} />
          <Msg time="11:02a" content="May 28 9am works, thanks. Filling out the form now" />
          <SystemMsg label="📅 Appt rescheduled · Apr 30 10:00a → May 28 9:00a" />
          <Msg time="11:14a" content="Done. Anything else?" />
        </div>

        <div style={{ padding: "12px 16px", borderTop: "1px solid var(--border-hairline)", background: "var(--bg-surface)" }}>
          <div style={{ display: "flex", gap: 4, marginBottom: 8 }}>
            <button className="btn sm ghost"><I.FileText size={11} /> Insert template</button>
            <button className="btn sm ghost"><I.PaperClip size={11} /> Attach</button>
            <button className="btn sm ghost"><I.CreditCard size={11} /> Payment link</button>
            <button className="btn sm ghost"><I.Calendar size={11} /> Schedule link</button>
          </div>
          <div style={{ display: "flex", gap: 8, alignItems: "flex-end", border: "1px solid var(--border-hairline)", borderRadius: 8, padding: 8 }}>
            <textarea
              placeholder="Reply to Chandler…"
              style={{ flex: 1, border: 0, outline: 0, resize: "none", background: "transparent", fontSize: 13, minHeight: 36, fontFamily: "inherit", color: "var(--fg-primary)" }}
              rows={2}
            />
            <button className="btn primary sm"><I.Send size={12} /> Send</button>
          </div>
        </div>
      </div>

      {/* Right: Staff chat + context */}
      <div style={{ borderLeft: "1px solid var(--border-hairline)", background: "var(--bg-surface)", overflow: "auto" }}>
        <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--border-hairline)" }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--fg-tertiary)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>Patient context</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            <div className="avatar lg av-2">CB</div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>Chandler Bing</div>
              <div className="tiny muted">58 · MetLife · Bal $184.50</div>
            </div>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginBottom: 8 }}>
            <span className="chip rose sm">Peanut</span>
            <span className="chip rose sm">Diabetes</span>
          </div>
          <button className="btn sm" style={{ width: "100%" }}><I.User size={12} /> Open chart</button>
        </div>

        <div style={{ padding: "12px 14px", borderBottom: "1px solid var(--border-hairline)" }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--fg-tertiary)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8, display: "flex", alignItems: "center", gap: 6 }}>
            <I.Sparkles size={11} style={{ color: "var(--violet-500)" }} />
            AI conversation tags
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
            <span className="chip violet sm">reschedule</span>
            <span className="chip violet sm">forms</span>
            <span className="chip outline sm">resolved</span>
          </div>
        </div>

        <div style={{ padding: "12px 14px" }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: "var(--fg-tertiary)", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8 }}>Staff chat · #front-desk</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <StaffMsg name="Maya" avatar="av-3" time="10:50a" t="Moved Chandler to 5/28 9a, gave him 2 options" />
            <StaffMsg name="Dr. Del Real" avatar="av-7" time="10:51a" t="thanks 👍" />
            <StaffMsg name="Eric" avatar="av-4" time="11:00a" t="reminder, his medhx still flags Metformin — confirm with him on update" />
          </div>
          <div style={{ marginTop: 8, padding: 6, border: "1px solid var(--border-hairline)", borderRadius: 6, fontSize: 12 }}>
            <input placeholder="Message #front-desk…" style={{ width: "100%", border: 0, outline: 0, background: "transparent", fontSize: 12 }} />
          </div>
        </div>
      </div>
    </div>
  );
}

function Msg({ outbound, auto, staff, time, content }) {
  return (
    <div style={{ display: "flex", justifyContent: outbound ? "flex-end" : "flex-start", marginBottom: 10 }}>
      <div style={{ maxWidth: "65%" }}>
        {(auto || staff) && (
          <div className="tiny muted" style={{ marginBottom: 3, textAlign: outbound ? "right" : "left" }}>
            {auto ? "Auto · Reminder" : staff}
          </div>
        )}
        <div style={{
          padding: "8px 12px",
          background: outbound ? (auto ? "var(--violet-50)" : "var(--sage-600)") : "var(--bg-surface)",
          color: outbound ? (auto ? "var(--violet-700)" : "white") : "var(--fg-primary)",
          borderRadius: 14,
          borderBottomRightRadius: outbound ? 4 : 14,
          borderBottomLeftRadius: outbound ? 14 : 4,
          border: outbound ? (auto ? "1px solid var(--violet-200)" : "none") : "1px solid var(--border-hairline)",
          fontSize: 13, lineHeight: 1.4,
        }}>
          {content}
        </div>
        <div className="tiny muted tabular" style={{ marginTop: 2, textAlign: outbound ? "right" : "left" }}>{time} {outbound && "· delivered"}</div>
      </div>
    </div>
  );
}
function SystemMsg({ label }) {
  return (
    <div style={{ display: "flex", justifyContent: "center", margin: "12px 0" }}>
      <div className="chip outline sm">{label}</div>
    </div>
  );
}
function DayDivider({ label }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, margin: "8px 0 16px" }}>
      <div style={{ flex: 1, height: 1, background: "var(--border-hairline)" }} />
      <span className="tiny muted medium">{label}</span>
      <div style={{ flex: 1, height: 1, background: "var(--border-hairline)" }} />
    </div>
  );
}
function StaffMsg({ name, avatar, time, t }) {
  return (
    <div style={{ display: "flex", gap: 6 }}>
      <div className={"avatar sm " + avatar}>{name[0]}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
          <span style={{ fontSize: 11.5, fontWeight: 600 }}>{name}</span>
          <span className="tiny muted">{time}</span>
        </div>
        <div style={{ fontSize: 12, marginTop: 1 }}>{t}</div>
      </div>
    </div>
  );
}

// ============================================================================
// eRx
// ============================================================================
function Erx() {
  return (
    <div style={{ flex: 1, overflow: "auto" }}>
      <PatientHeaderStrip />
      <div style={{ maxWidth: 1000, margin: "0 auto", padding: 24 }}>
        <div style={{ display: "flex", alignItems: "center", marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 600 }}>Prescriptions</div>
            <div className="tiny muted">Surescripts-connected · all rx history stays in chart</div>
          </div>
          <div className="spacer" />
          <button className="btn sm"><I.Printer size={12} /> Print pad</button>
          <button className="btn primary sm" style={{ marginLeft: 6 }}><I.Plus size={12} /> New prescription</button>
        </div>

        <div className="card" style={{ marginBottom: 16 }}>
          <div className="card-head">
            <h3>New prescription</h3>
            <span className="chip outline sm">Draft</span>
          </div>
          <div className="card-body">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div className="field">
                <label className="label">Medication</label>
                <div className="input" style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span className="chip sage sm">Amoxicillin 500mg</span>
                  <span className="muted small">Capsule</span>
                </div>
              </div>
              <div className="field">
                <label className="label">SIG</label>
                <input className="input" defaultValue="Take 1 capsule by mouth three times daily" />
              </div>
              <div className="field"><label className="label">Quantity</label><input className="input tabular" defaultValue="21" /></div>
              <div className="field"><label className="label">Days supply</label><input className="input tabular" defaultValue="7" /></div>
              <div className="field"><label className="label">Refills</label><input className="input tabular" defaultValue="0" /></div>
              <div className="field"><label className="label">Pharmacy</label><div className="input">CVS · 1801 Lavaca St · Austin</div></div>
            </div>
            <div style={{ marginTop: 14, padding: 12, background: "var(--rose-50)", border: "1px solid var(--rose-200)", borderRadius: 8, display: "flex", alignItems: "flex-start", gap: 8 }}>
              <I.AlertTriangle size={14} style={{ color: "var(--rose-700)", marginTop: 1 }} />
              <div style={{ flex: 1, fontSize: 12, color: "var(--rose-700)" }}>
                <div style={{ fontWeight: 600, marginBottom: 2 }}>Patient is not flagged for penicillin allergy — proceeding ok.</div>
                <div>Last antibiotic Rx: Clindamycin 300mg, Oct 2024 (no AE).</div>
              </div>
            </div>
          </div>
          <div style={{ padding: "10px 14px", borderTop: "1px solid var(--border-hairline)", background: "var(--bg-subtle)", display: "flex", gap: 6, justifyContent: "flex-end" }}>
            <button className="btn sm">Save draft</button>
            <button className="btn primary sm">Sign + send to pharmacy</button>
          </div>
        </div>

        <div className="card">
          <div className="card-head">
            <h3>Prescription history</h3>
            <span className="chip outline sm">12 total</span>
          </div>
          <div className="card-body tight">
            {[
              { date: "Oct 14, 2025", med: "Clindamycin HCl 300mg", qty: 28, sig: "1 cap PO TID × 7d", prov: "Dr. Reilly", status: "Filled", pharmacy: "CVS Lavaca" },
              { date: "Aug 11, 2024", med: "Ibuprofen 600mg", qty: 20, sig: "1 tab PO Q6H PRN pain", prov: "Dr. Reilly", status: "Filled", pharmacy: "Walgreens" },
              { date: "Aug 11, 2024", med: "Chlorhexidine 0.12% rinse", qty: 16, sig: "Rinse 15ml BID × 14d", prov: "Hyg. Park", status: "Filled", pharmacy: "Walgreens" },
              { date: "Mar 03, 2024", med: "Amoxicillin 500mg", qty: 30, sig: "1 cap PO TID × 10d", prov: "Dr. Reilly", status: "Filled", pharmacy: "CVS Lavaca" },
            ].map((r, i) => (
              <div key={i} style={{ padding: "12px 14px", borderBottom: "1px solid var(--border-hairline)", display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{ minWidth: 100 }}>
                  <div className="tabular medium" style={{ fontSize: 12.5 }}>{r.date}</div>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 600, fontSize: 13 }}>{r.med}</div>
                  <div className="tiny muted">Qty {r.qty} · {r.sig}</div>
                </div>
                <div className="tiny muted" style={{ width: 130 }}>{r.prov}<br/>{r.pharmacy}</div>
                <span className="chip sage sm"><I.Check size={10} /> {r.status}</span>
                <button className="btn icon ghost sm"><I.Refresh size={12} /></button>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============================================================================
// DOCUMENTS
// ============================================================================
function Documents() {
  const folders = [
    { name: "Medical History", count: 65, color: "rose" },
    { name: "Consents", count: 23, color: "sage" },
    { name: "Receipts", count: 651, color: "blue" },
    { name: "Statements", count: 91, color: "amber" },
    { name: "Treatment Plans", count: 33, color: "violet" },
    { name: "Insurance Claims", count: 78, color: "blue" },
    { name: "Lab Slips", count: 12, color: "mint" },
    { name: "Referrals", count: 4, color: "sage" },
    { name: "Photos", count: 24, color: "amber" },
    { name: "CBCT screenshots", count: 6, color: "violet" },
  ];
  return (
    <div style={{ flex: 1, overflow: "auto" }}>
      <PatientHeaderStrip />
      <div style={{ padding: 20 }}>
        <div style={{ display: "flex", alignItems: "center", marginBottom: 14 }}>
          <div>
            <div style={{ fontSize: 16, fontWeight: 600 }}>Documents</div>
            <div className="tiny muted">847 files · 2 GB used</div>
          </div>
          <div className="spacer" />
          <button className="btn sm"><I.Upload size={12} /> Upload</button>
          <button className="btn sm" style={{ marginLeft: 6 }}><I.Folder size={12} /> New folder</button>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))", gap: 10, marginBottom: 24 }}>
          {folders.map(f => (
            <div key={f.name} style={{ padding: 14, background: "var(--bg-surface)", border: "1px solid var(--border-hairline)", borderRadius: 8, cursor: "pointer" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <div style={{ width: 30, height: 30, borderRadius: 6, background: `var(--${f.color}-50)`, color: `var(--${f.color}-700)`, display: "grid", placeItems: "center" }}>
                  <I.Folder size={15} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 550, fontSize: 13 }}>{f.name}</div>
                  <div className="tabular tiny muted">{f.count} files</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="card">
          <div className="card-head"><h3>Recent files</h3><div className="spacer" /><button className="btn ghost sm">View all →</button></div>
          <table className="table">
            <thead>
              <tr><th>Name</th><th>Folder</th><th>Type</th><th>Size</th><th>Uploaded</th><th>By</th><th></th></tr>
            </thead>
            <tbody>
              {[
                ["Medical History — May 2026.pdf", "Medical History", "PDF", "78 KB", "today, 9:14a", "Kiosk · Chandler Bing"],
                ["Botox consent — signed.pdf", "Consents", "PDF", "112 KB", "today, 8:42a", "Monica Geller"],
                ["Treatment plan #4421-12.pdf", "Treatment Plans", "PDF", "210 KB", "yesterday", "Dr. Reilly"],
                ["EOB Delta May payment.pdf", "Insurance Claims", "PDF", "1.2 MB", "yesterday", "Eric (billing)"],
                ["Intraoral photo — buccal R.jpg", "Photos", "JPG", "3.4 MB", "May 18", "Hyg. Park"],
                ["Lab slip — Crown #14.pdf", "Lab Slips", "PDF", "44 KB", "May 16", "Dr. Reilly"],
              ].map((r, i) => (
                <tr key={i}>
                  <td><div style={{ display: "flex", alignItems: "center", gap: 8 }}><I.FileText size={13} style={{ color: "var(--fg-tertiary)" }} /><span style={{ fontWeight: 500, fontSize: 13 }}>{r[0]}</span></div></td>
                  <td><span className="chip outline sm">{r[1]}</span></td>
                  <td className="tiny muted">{r[2]}</td>
                  <td className="tabular tiny muted">{r[3]}</td>
                  <td className="tiny muted">{r[4]}</td>
                  <td className="tiny muted">{r[5]}</td>
                  <td><button className="btn icon ghost sm"><I.MoreHorizontal size={12} /></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Imaging, PatientProfile, Communications, Erx, Documents });