/* global React */
// Shared primitives: icons, sidebar, topbar, layout helpers

const { useState, useRef, useEffect, useMemo, useCallback, createContext, useContext, Fragment } = React;

// ============================================================================
// ICONS (Lucide-style, original line work — stroke 1.6)
// ============================================================================
const Icon = ({ d, size = 16, fill = "none", stroke = "currentColor", sw = 1.6, children, vb = "0 0 24 24" }) => (
  <svg width={size} height={size} viewBox={vb} fill={fill} stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
    {d ? <path d={d} /> : children}
  </svg>
);

const I = {
  Calendar: (p) => <Icon {...p}><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></Icon>,
  List: (p) => <Icon {...p}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></Icon>,
  Users: (p) => <Icon {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></Icon>,
  User: (p) => <Icon {...p}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></Icon>,
  Tooth: (p) => <Icon {...p}><path d="M12 3c-2.5 0-3.5 1-5 1S4 3 4 6c0 3 1 6 2 9s1 6 2.5 6S10 18 12 18s2 3 3.5 3S17 18 18 15s2-6 2-9c0-3-1.5-2-3-2s-2.5-1-5-1z"/></Icon>,
  XRay: (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="10" r="3"/><path d="M12 13v6M8 17h8"/></Icon>,
  FileText: (p) => <Icon {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6M9 9h1"/></Icon>,
  Shield: (p) => <Icon {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></Icon>,
  CreditCard: (p) => <Icon {...p}><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></Icon>,
  Receipt: (p) => <Icon {...p}><path d="M4 2v20l3-2 3 2 3-2 3 2 3-2 1 2V2l-1 2-3-2-3 2-3-2-3 2-3-2z"/><path d="M8 8h8M8 12h8M8 16h5"/></Icon>,
  BarChart: (p) => <Icon {...p}><path d="M3 3v18h18"/><path d="M7 14l4-4 4 4 5-7"/></Icon>,
  Pill: (p) => <Icon {...p}><path d="M10.5 20.5a7 7 0 0 1-9.9-9.9l9.9-9.9a7 7 0 0 1 9.9 9.9z"/><path d="M8.5 8.5l7 7"/></Icon>,
  Settings: (p) => <Icon {...p}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></Icon>,
  MessageSquare: (p) => <Icon {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></Icon>,
  Activity: (p) => <Icon {...p}><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></Icon>,
  Search: (p) => <Icon {...p}><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></Icon>,
  ChevronDown: (p) => <Icon {...p}><path d="M6 9l6 6 6-6"/></Icon>,
  ChevronRight: (p) => <Icon {...p}><path d="M9 18l6-6-6-6"/></Icon>,
  ChevronLeft: (p) => <Icon {...p}><path d="M15 18l-6-6 6-6"/></Icon>,
  ChevronUp: (p) => <Icon {...p}><path d="M18 15l-6-6-6 6"/></Icon>,
  ChevronsUpDown: (p) => <Icon {...p}><path d="M7 15l5 5 5-5M7 9l5-5 5 5"/></Icon>,
  Plus: (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>,
  X: (p) => <Icon {...p}><path d="M18 6L6 18M6 6l12 12"/></Icon>,
  Check: (p) => <Icon {...p}><path d="M20 6L9 17l-5-5"/></Icon>,
  Phone: (p) => <Icon {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></Icon>,
  Mail: (p) => <Icon {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M2 7l10 6 10-6"/></Icon>,
  AlertCircle: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></Icon>,
  AlertTriangle: (p) => <Icon {...p}><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></Icon>,
  Info: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M12 16v-4M12 8h.01"/></Icon>,
  Clock: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></Icon>,
  MapPin: (p) => <Icon {...p}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></Icon>,
  Bell: (p) => <Icon {...p}><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 0 1-3.46 0"/></Icon>,
  Sparkles: (p) => <Icon {...p}><path d="M12 3l1.91 4.09L18 9l-4.09 1.91L12 15l-1.91-4.09L6 9l4.09-1.91zM19 12l.95 2.05L22 15l-2.05.95L19 18l-.95-2.05L16 15l2.05-.95zM5 16l.95 2.05L8 19l-2.05.95L5 22l-.95-2.05L2 19l2.05-.95z"/></Icon>,
  Filter: (p) => <Icon {...p}><path d="M22 3H2l8 9.46V19l4 2v-8.54z"/></Icon>,
  MoreHorizontal: (p) => <Icon {...p}><circle cx="12" cy="12" r="1.2" fill="currentColor"/><circle cx="19" cy="12" r="1.2" fill="currentColor"/><circle cx="5" cy="12" r="1.2" fill="currentColor"/></Icon>,
  Edit: (p) => <Icon {...p}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4z"/></Icon>,
  Trash: (p) => <Icon {...p}><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></Icon>,
  Mic: (p) => <Icon {...p}><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10a7 7 0 0 1-14 0M12 19v3"/></Icon>,
  Play: (p) => <Icon {...p} fill="currentColor"><path stroke="none" d="M5 3l14 9-14 9z"/></Icon>,
  Pause: (p) => <Icon {...p}><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></Icon>,
  Building: (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h.01M15 9h.01M9 13h.01M15 13h.01M9 17h.01M15 17h.01"/></Icon>,
  Folder: (p) => <Icon {...p}><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></Icon>,
  Upload: (p) => <Icon {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"/></Icon>,
  Download: (p) => <Icon {...p}><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></Icon>,
  Send: (p) => <Icon {...p}><path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/></Icon>,
  Eye: (p) => <Icon {...p}><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></Icon>,
  Heart: (p) => <Icon {...p}><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></Icon>,
  Star: (p) => <Icon {...p}><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></Icon>,
  Zap: (p) => <Icon {...p} fill="currentColor"><path stroke="none" d="M13 2L3 14h9l-1 8 10-12h-9z"/></Icon>,
  Lightning: (p) => <Icon {...p}><path d="M13 2L3 14h9l-1 8 10-12h-9z"/></Icon>,
  Clipboard: (p) => <Icon {...p}><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></Icon>,
  Inbox: (p) => <Icon {...p}><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></Icon>,
  Tag: (p) => <Icon {...p}><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><path d="M7 7h.01"/></Icon>,
  PaperClip: (p) => <Icon {...p}><path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></Icon>,
  Refresh: (p) => <Icon {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5"/></Icon>,
  ArrowRight: (p) => <Icon {...p}><path d="M5 12h14M12 5l7 7-7 7"/></Icon>,
  ArrowLeft: (p) => <Icon {...p}><path d="M19 12H5M12 19l-7-7 7-7"/></Icon>,
  ArrowUpRight: (p) => <Icon {...p}><path d="M7 17L17 7M7 7h10v10"/></Icon>,
  Globe: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></Icon>,
  Smartphone: (p) => <Icon {...p}><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 18h.01"/></Icon>,
  Printer: (p) => <Icon {...p}><path d="M6 9V2h12v7M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></Icon>,
  Wallet: (p) => <Icon {...p}><path d="M20 12V8a2 2 0 0 0-2-2H5a2 2 0 0 1 0-4h14v4"/><path d="M3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4h-6a2 2 0 0 1 0-4h6"/></Icon>,
  Lock: (p) => <Icon {...p}><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></Icon>,
  LogOut: (p) => <Icon {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></Icon>,
  Help: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01"/></Icon>,
  Layers: (p) => <Icon {...p}><path d="M12 2L2 7l10 5 10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></Icon>,
  CheckSquare: (p) => <Icon {...p}><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></Icon>,
  Square: (p) => <Icon {...p}><rect x="3" y="3" width="18" height="18" rx="2"/></Icon>,
  Circle: (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/></Icon>,
  DollarSign: (p) => <Icon {...p}><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></Icon>,
  GitBranch: (p) => <Icon {...p}><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></Icon>,
  Stethoscope: (p) => <Icon {...p}><path d="M4.8 2.3A.3.3 0 0 0 4.5 2h-1A1.5 1.5 0 0 0 2 3.5v3a4 4 0 0 0 4 4 4 4 0 0 0 4-4v-3A1.5 1.5 0 0 0 8.5 2h-1a.3.3 0 0 0-.3.3v.4a.3.3 0 0 0 .3.3h.5a.5.5 0 0 1 .5.5v3a3 3 0 0 1-6 0v-3a.5.5 0 0 1 .5-.5h.5a.3.3 0 0 0 .3-.3z"/><path d="M6 10v4a4 4 0 0 0 8 0v-2"/><circle cx="20" cy="10" r="2"/></Icon>,
  Move: (p) => <Icon {...p}><path d="M5 9l-3 3 3 3M9 5l3-3 3 3M15 19l-3 3-3-3M19 9l3 3-3 3M2 12h20M12 2v20"/></Icon>,
};

// ============================================================================
// SIDEBAR
// ============================================================================
const NAV_GROUPS = [
  {
    label: "Today",
    items: [
      { id: "schedule", label: "Schedule", icon: I.Calendar },
      { id: "huddle", label: "Huddle", icon: I.List, badge: "28" },
      { id: "booking", label: "Online Booking", icon: I.Globe, badge: { v: "3", kind: "warn" } },
      { id: "asap", label: "ASAP List", icon: I.Clock, badge: "12" },
    ],
  },
  {
    label: "Patient",
    items: [
      { id: "patient", label: "Patient profile", icon: I.User },
      { id: "charting", label: "Charting", icon: I.Tooth },
      { id: "perio", label: "Voice Perio", icon: I.Mic, badge: { v: "new", kind: "warn" } },
      { id: "imaging", label: "Imaging", icon: I.XRay },
      { id: "communications", label: "Communications", icon: I.MessageSquare },
      { id: "erx", label: "ePrescribe", icon: I.Pill },
      { id: "documents", label: "Documents", icon: I.Folder },
    ],
  },
  {
    label: "Revenue",
    items: [
      { id: "claims", label: "Claims", icon: I.FileText, badge: "14" },
      { id: "eob", label: "EOB Wizard", icon: I.Layers },
      { id: "billing", label: "Billing", icon: I.CreditCard },
      { id: "insurance", label: "Insurance", icon: I.Shield },
    ],
  },
  {
    label: "Practice",
    items: [
      { id: "reporting", label: "Reporting", icon: I.BarChart },
      { id: "forms", label: "Forms Library", icon: I.Clipboard, badge: "216" },
      { id: "kiosk", label: "Kiosk preview", icon: I.Smartphone },
      { id: "settings", label: "Settings", icon: I.Settings },
    ],
  },
];

function Sidebar({ current, onNav }) {
  return (
    <aside className="sidebar">
      <div className="brand">
        <BrandMark />
        <div>
          <div className="brand-name">tooth<span className="brand-dot">·</span>pillow</div>
          <div className="tiny muted" style={{ marginTop: 1 }}>v2.4.1 · forge ring</div>
        </div>
      </div>

      <div className="practice-switcher">
        <div className="ps-icon">SF</div>
        <div style={{ minWidth: 0 }}>
          <div className="ps-name">Sunfield Dental</div>
          <div className="ps-sub">3 locations · Austin, TX</div>
        </div>
        <I.ChevronsUpDown size={14} />
      </div>

      {NAV_GROUPS.map(group => (
        <div className="nav-section" key={group.label} style={{ flex: "none" }}>
          <div className="nav-label">{group.label}</div>
          {group.items.map(item => {
            const IconC = item.icon;
            const badge = item.badge;
            return (
              <div
                key={item.id}
                className={"nav-item" + (current === item.id ? " active" : "")}
                onClick={() => onNav(item.id)}
              >
                <IconC size={15} />
                <span>{item.label}</span>
                {badge && (
                  typeof badge === "string"
                    ? <span className="badge">{badge}</span>
                    : <span className={"badge " + (badge.kind || "")}>{badge.v}</span>
                )}
              </div>
            );
          })}
        </div>
      ))}

      <div className="spacer" />

      <div className="sidebar-foot">
        <div className="avatar av-3">TR</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ fontSize: 12.5, fontWeight: 550 }}>Tiffany Del Real</div>
          <div className="tiny muted">Dr · Op 4</div>
        </div>
        <button className="btn icon ghost" title="Help"><I.Help size={15} /></button>
      </div>
    </aside>
  );
}

function BrandMark({ size = 26 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 8,
      background: "linear-gradient(135deg, var(--sage-500), var(--sage-700))",
      display: "grid", placeItems: "center",
      color: "white", position: "relative",
      boxShadow: "inset 0 -1px 0 oklch(0% 0 0 / 0.12), 0 1px 2px oklch(0% 0 0 / 0.08)"
    }}>
      <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3c-2 0-3 1-5 1S3.5 3 3.5 6c0 3 1.2 5.5 2 8 .5 1.6.8 4 2 4s1.5-3 2-4.5c.3-.9.8-1.5 2.5-1.5s2.2.6 2.5 1.5c.5 1.5.8 4.5 2 4.5s1.5-2.4 2-4c.8-2.5 2-5 2-8 0-3-1-2-3.5-2s-3-1-5-1z"/>
      </svg>
    </div>
  );
}

// ============================================================================
// TOPBAR
// ============================================================================
function Topbar({ title, crumbs, actions, children }) {
  return (
    <header className="topbar">
      {crumbs && (
        <div className="crumb">
          {crumbs.flatMap((c, i) => {
            const items = [];
            if (i > 0) items.push(<span key={"s"+i} className="sep">/</span>);
            items.push(<span key={i} style={i === crumbs.length - 1 ? { color: "var(--fg-primary)", fontWeight: 550 } : {}}>{c}</span>);
            return items;
          })}
        </div>
      )}
      {title && <h1>{title}</h1>}
      {children}
      <div className="spacer" />
      <div className="search">
        <I.Search size={14} />
        <input placeholder="Find patient, claim, setting…" />
        <span className="kbd">⌘K</span>
      </div>
      {actions}
      <button className="btn icon ghost" title="Notifications" style={{ position: "relative" }}>
        <I.Bell size={15} />
        <span style={{ position: "absolute", top: 4, right: 4, width: 6, height: 6, borderRadius: "50%", background: "var(--rose-500)" }} />
      </button>
    </header>
  );
}

// ============================================================================
// MODAL
// ============================================================================
function Modal({ open, onClose, title, children, width = 560, foot }) {
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ width }} onClick={e => e.stopPropagation()}>
        {title && (
          <div className="modal-head">
            <h2>{title}</h2>
            <div className="spacer" />
            <button className="btn icon ghost" onClick={onClose}><I.X size={16} /></button>
          </div>
        )}
        <div className="modal-body">{children}</div>
        {foot && <div className="modal-foot">{foot}</div>}
      </div>
    </div>
  );
}

// ============================================================================
// DATA — patients, schedule, etc.
// ============================================================================
const PROVIDERS = [
  { id: "tdr", initials: "TDR", name: "Dr. Tiffany Del Real", color: "var(--prov-mint)", op: "Op 4" },
  { id: "mr",  initials: "MR",  name: "Dr. Mark Reilly",     color: "var(--prov-blue)", op: "Op 1" },
  { id: "sk",  initials: "SK",  name: "Dr. Sara Khoury",     color: "var(--prov-violet)", op: "Op 2" },
  { id: "jp",  initials: "JP",  name: "Hyg. Janelle Park",   color: "var(--prov-amber)", op: "Op 3" },
  { id: "el",  initials: "EL",  name: "Hyg. Elena Liang",    color: "var(--prov-rose)", op: "Op 5" },
  { id: "rg",  initials: "RG",  name: "Dr. Renu Gupta",      color: "var(--prov-sage)", op: "Op 6" },
];

const STATUS_COLORS = {
  scheduled:  { color: "oklch(80% 0.01 240)", label: "Scheduled" },
  confirmed:  { color: "oklch(75% 0.09 240)", label: "Confirmed" },
  arrived:    { color: "oklch(72% 0.12 80)",  label: "Arrived" },
  seated:     { color: "oklch(70% 0.12 145)", label: "Seated" },
  inroom:     { color: "oklch(60% 0.14 145)", label: "In room" },
  ready:      { color: "oklch(58% 0.16 145)", label: "Ready" },
  checkout:   { color: "oklch(70% 0.1 295)",  label: "Checkout" },
  complete:   { color: "oklch(55% 0.08 145)", label: "Complete" },
  noshow:     { color: "oklch(60% 0.15 25)",  label: "No show" },
  cancelled:  { color: "oklch(72% 0.01 240)", label: "Cancelled" },
};

const APPT_TYPES = {
  np:       { color: "oklch(95% 0.04 175)", label: "New Patient" },
  hyg:      { color: "oklch(95% 0.04 145)", label: "Hygiene" },
  exam:     { color: "oklch(95% 0.04 220)", label: "Exam" },
  restore:  { color: "oklch(95% 0.04 60)",  label: "Restorative" },
  surg:     { color: "oklch(95% 0.05 20)",  label: "Surgical" },
  cosmetic: { color: "oklch(95% 0.05 320)", label: "Cosmetic" },
  ortho:    { color: "oklch(95% 0.04 270)", label: "Ortho" },
  emerg:    { color: "oklch(94% 0.07 25)",  label: "Emergency" },
};

const TODAY_PATIENTS = [
  // Operatory 1 - Dr. Reilly
  { id: "p1", name: "Katie Filby", first: "Katie", last: "Filby", dob: "1985-03-12", age: 41, phone: "(512) 555-0142", avatar: "av-1", op: "Op 4", provider: "tdr", time: "09:00", end: "10:00", type: "np", typeLabel: "NP Exam · 2BW · ProphyCh · FloVarn", status: "ready", tags: ["🇫🇷", "🌿"], alerts: ["Allergy", "Recall Overdue"], balance: 0, familyBalance: 240, insurance: "Delta Dental of California", formsRed: 2, formsGreen: 4 },
  { id: "p2", name: "Chandler Bing", first: "Chandler", last: "Bing", dob: "1968-04-08", age: 58, phone: "(512) 555-0188", avatar: "av-2", op: "Op 4", provider: "tdr", time: "10:00", end: "11:00", type: "exam", typeLabel: "Periodic Exam · 4BW · ProphyAd", status: "confirmed", tags: ["💊", "🩺"], alerts: ["Peanut Allergy", "Diabetes"], balance: 184.50, familyBalance: 184.50, insurance: "MetLife PPO", formsRed: 0, formsGreen: 6 },
  { id: "p3", name: "Chase Rowley", first: "Chase", last: "Rowley", dob: "1992-11-22", age: 33, phone: "(512) 555-0119", avatar: "av-3", op: "Op 1", provider: "mr", time: "08:30", end: "09:30", type: "restore", typeLabel: "DO Composite #14 · #15", status: "inroom", tags: ["🏍️", "✅"], alerts: [], balance: 0, familyBalance: 421, insurance: "Aetna Open Access", formsRed: 0, formsGreen: 5 },
  { id: "p4", name: "Monica Geller", first: "Monica", last: "Geller", dob: "1979-06-30", age: 46, phone: "(512) 555-0177", avatar: "av-7", op: "Op 2", provider: "sk", time: "11:00", end: "12:30", type: "cosmetic", typeLabel: "Botox · Consult", status: "scheduled", tags: ["✨"], alerts: [], balance: 0, familyBalance: 0, insurance: "Self-pay", formsRed: 3, formsGreen: 0 },
  { id: "p5", name: "Joey Tribbiani", first: "Joey", last: "Tribbiani", dob: "1973-01-09", age: 53, phone: "(512) 555-0143", avatar: "av-4", op: "Op 1", provider: "mr", time: "13:00", end: "14:30", type: "surg", typeLabel: "Implant #19 · Bone Graft", status: "scheduled", tags: ["💳"], alerts: ["Payment Plan"], balance: 250, familyBalance: 250, insurance: "Cigna Dental Care", formsRed: 1, formsGreen: 4 },
  { id: "p6", name: "Ross Geller", first: "Ross", last: "Geller", dob: "1977-10-18", age: 48, phone: "(512) 555-0166", avatar: "av-8", op: "Op 3", provider: "jp", time: "09:30", end: "10:30", type: "hyg", typeLabel: "Adult Prophy · FMX", status: "arrived", tags: ["🇪🇸"], alerts: [], balance: 0, familyBalance: 0, insurance: "Delta Dental PPO", formsRed: 0, formsGreen: 5 },
  { id: "p7", name: "Rachel Green", first: "Rachel", last: "Green", dob: "1980-05-05", age: 45, phone: "(512) 555-0155", avatar: "av-5", op: "Op 3", provider: "jp", time: "11:00", end: "12:00", type: "hyg", typeLabel: "Perio Maintenance", status: "scheduled", tags: ["🌿"], alerts: [], balance: 0, familyBalance: 0, insurance: "Guardian", formsRed: 0, formsGreen: 4 },
  { id: "p8", name: "Phoebe Buffay", first: "Phoebe", last: "Buffay", dob: "1988-02-16", age: 38, phone: "(512) 555-0133", avatar: "av-6", op: "Op 5", provider: "el", time: "08:30", end: "09:15", type: "hyg", typeLabel: "Child Prophy · 2BW · FloVarn", status: "seated", tags: ["👶"], alerts: [], balance: 0, familyBalance: 60, insurance: "United Concordia", formsRed: 0, formsGreen: 3 },
  { id: "p9", name: "Ben Wyatt", first: "Ben", last: "Wyatt", dob: "1981-09-09", age: 44, phone: "(512) 555-0122", avatar: "av-2", op: "Op 6", provider: "rg", time: "14:00", end: "15:00", type: "ortho", typeLabel: "Ortho Adjust · Invisalign", status: "scheduled", tags: [], alerts: [], balance: 75, familyBalance: 75, insurance: "Anthem BCBS", formsRed: 0, formsGreen: 6 },
  { id: "p10", name: "Leslie Knope", first: "Leslie", last: "Knope", dob: "1975-01-18", age: 51, phone: "(512) 555-0190", avatar: "av-7", op: "Op 2", provider: "sk", time: "14:30", end: "15:30", type: "emerg", typeLabel: "Emergency · Tooth Pain #30", status: "scheduled", tags: ["⚠️"], alerts: ["Allergy: Latex"], balance: 0, familyBalance: 0, insurance: "Humana Dental", formsRed: 1, formsGreen: 4 },
  { id: "p11", name: "Andy Dwyer", first: "Andy", last: "Dwyer", dob: "1986-08-04", age: 39, phone: "(512) 555-0144", avatar: "av-4", op: "Op 4", provider: "tdr", time: "15:30", end: "16:30", type: "exam", typeLabel: "Periodic · 4BW", status: "scheduled", tags: [], alerts: [], balance: 0, familyBalance: 0, insurance: "Anthem BCBS", formsRed: 0, formsGreen: 4 },
  { id: "p12", name: "April Ludgate", first: "April", last: "Ludgate", dob: "1990-12-25", age: 35, phone: "(512) 555-0166", avatar: "av-5", op: "Op 5", provider: "el", time: "13:30", end: "14:30", type: "hyg", typeLabel: "Adult Prophy", status: "scheduled", tags: ["🌿"], alerts: [], balance: 0, familyBalance: 0, insurance: "MetLife PPO", formsRed: 0, formsGreen: 4 },
  { id: "p13", name: "Tom Haverford", first: "Tom", last: "Haverford", dob: "1982-04-22", age: 44, phone: "(512) 555-0211", avatar: "av-8", op: "Op 6", provider: "rg", time: "10:30", end: "12:00", type: "cosmetic", typeLabel: "Veneers Prep #8-#10", status: "confirmed", tags: ["💎"], alerts: [], balance: 1200, familyBalance: 1200, insurance: "Self-pay", formsRed: 0, formsGreen: 5 },
];

// expose
Object.assign(window, {
  React, useState, useEffect, useRef, useMemo, useCallback, createContext, useContext, Fragment,
  I, Icon, Sidebar, Topbar, Modal, BrandMark,
  PROVIDERS, STATUS_COLORS, APPT_TYPES, TODAY_PATIENTS,
});