// Arzt-Portal — Multi-Heim switcher, incoming queue, one-tap approval, visits, patients, prescriptions.

// SpecChip — mini-chip for doctor specialties. Local to this file's compilation unit.
const ArztSpecTones = {
  Hausarzt:   { tone: "teal",   mark: "H" },
  Internist:  { tone: "amber",  mark: "I" },
  Geriater:   { tone: "teal",   mark: "G" },
  Nervenarzt: { tone: "violet", mark: "N" },
  Palliativ:  { tone: "rose",   mark: "P" },
  Urologe:    { tone: "indigo", mark: "U" },
};
const ArztSpecChip = ({ spec, big }) => {
  const meta = ArztSpecTones[spec] || ArztSpecTones.Hausarzt;
  return (
    <span className={`spec-chip ${big ? "spec-chip-big" : ""}`} data-tone={meta.tone} title={spec}>
      <span className="spec-chip-mark">{meta.mark}</span>
      <span className="spec-chip-label">{spec}</span>
    </span>
  );
};

const ArztPortal = ({ ctx }) => {
  if (window.useStoreVersion) window.useStoreVersion();
  const [view, setView] = React.useState(null);
  const [selected, setSelected] = React.useState("A-2804");
  const [heim, setHeim] = React.useState("alle");
  const [cmdOpen, setCmdOpen] = React.useState(false);
  const [filter, setFilter] = React.useState("offen");
  const [visitSelected, setVisitSelected] = React.useState(null);
  const [bewSelected, setBewSelected] = React.useState(null);

  React.useEffect(() => {
    const h = (e) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setCmdOpen(true); } };
    const sv = (e) => { if (e.detail?.portal === "arzt" && e.detail?.view) setView(e.detail.view); };
    window.addEventListener("keydown", h);
    window.addEventListener("medlink:setView", sv);
    return () => {
      window.removeEventListener("keydown", h);
      window.removeEventListener("medlink:setView", sv);
    };
  }, []);

  // Active doctor derived from ctx.arztId (login-selected profile)
  const arztId = ctx.arztId || "schn";
  const meDoctor = DOCTORS.find(d => d.id === arztId) || DOCTORS[0];
  const mySpec = meDoctor.spec;
  const isKonsil = mySpec !== "Hausarzt";
  const specToneMeta = { Hausarzt: "teal", Internist: "amber", Geriater: "teal", Nervenarzt: "violet", Palliativ: "rose", Urologe: "indigo" };
  const myTone = specToneMeta[mySpec] || "teal";
  const myHeims = HEIMS.filter(h => (meDoctor.heims || []).includes(h.id));
  const myHeimIds = myHeims.map(h => h.id);
  const scoped = ANFRAGEN.filter(a => myHeimIds.includes(a.heim) && a.arzt === arztId).filter(a => heim === "alle" || a.heim === heim);
  const queue = filter === "offen" ? scoped.filter(a => a.status === "offen" || a.status === "bearbeitung") : scoped;
  const current = ANFRAGEN.find(a => a.id === selected) || queue[0];

  const myVisits = VISITEN.filter(v => v.arzt === arztId).filter(v => heim === "alle" || v.heim === heim);
  // Nervenarzt/Palliativ/Urologe are Konsiliar — don't own Bewohner directly, but they track
  // the patients of their Konsil-Visiten.
  const myBewohner = isKonsil
    ? BEWOHNER.filter(b => myVisits.some(v => v.bewohner.includes(b.id)))
    : BEWOHNER.filter(b => b.arzt === arztId).filter(b => heim === "alle" || b.heim === heim);

  // Set sensible defaults for selection once doctor is known
  React.useEffect(() => {
    setVisitSelected(myVisits[0]?.id || null);
    setBewSelected(myBewohner[0]?.id || null);
    if (queue.length > 0) setSelected(queue[0].id);
    // Konsiliar-Ärzte starten auf "heute" (Dashboard), Hausarzt auf "queue"
    setView(isKonsil ? "heute" : "queue");
  }, [arztId]);

  // Sidebar items vary slightly by role
  const bewLabel = isKonsil ? "Konsil-Patient:innen" : "Meine Bewohner";
  const sections = [
    { label: "", items: [
      ...(isKonsil ? [] : [{ id: "queue",    label: "Warteschlange", icon: "inbox", badge: scoped.filter(a => a.status === "offen").length }]),
      { id: "heute",    label: isKonsil ? "Dashboard" : "Heute", icon: "clock" },
      { id: "visiten",  label: isKonsil ? "Konsil-Termine" : "Visiten", icon: "stethoscope", badge: myVisits.filter(v => v.status === "geplant").length },
      { id: "bewohner", label: bewLabel, icon: "users", badge: myBewohner.length },
      ...(isKonsil ? [] : [{ id: "rezepte", label: "Rezepte", icon: "pill" }]),
    ]},
    { label: "Heime",
      items: myHeims.map(h => ({ id: `heim:${h.id}`, label: h.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", ""), icon: "home", badge: h.open })),
    },
  ];

  const crumbLabel = { queue: "Warteschlange", heute: isKonsil ? "Dashboard" : "Heute", visiten: isKonsil ? "Konsil-Termine" : "Visiten", bewohner: bewLabel, rezepte: "Rezepte" }[view];
  const sidebarActive = view || "heute";

  return (
    <>
      <Topbar
        portal="Arzt-Portal"
        portalIcon="stethoscope"
        onBrand={ctx.onBrandClick}
        onToggleSidebar={ctx.onPortalSwitch}
        crumbs={[meDoctor.name.replace("Dr. med. ", "Dr. "), crumbLabel]}
        heim={heim}
        onSearchClick={() => setCmdOpen(true)}
        userName={meDoctor.name.replace("Dr. med. ", "Dr. ")}
        userRole={mySpec}
        userEmail={`${meDoctor.id}@praxis-muc.de`}
        onLogout={ctx.onLogout}
        onAdmin={ctx.onAdmin}
      />
      <Sidebar
        scopeMark={heim === "alle" ? "All" : HEIMS.find(h => h.id === heim)?.mark}
        scopeTitle={heim === "alle" ? "Alle Heime" : HEIMS.find(h => h.id === heim)?.name}
        scopeSub={heim === "alle" ? `${myHeims.length} Einrichtungen` : HEIMS.find(h => h.id === heim)?.city}
        onScopeClick={() => setHeim(heim === "alle" ? "ros" : "alle")}
        sections={sections}
        active={sidebarActive}
        onNav={(id) => {
          if (id.startsWith("heim:")) { setHeim(id.slice(5)); setView("queue"); }
          else setView(id);
        }}
        compliance="DSGVO · Extra-Schutz aktiv · HBA signiert"
      />
      <main className="content">
        {/* Multi-Heim switcher (only on queue/rezepte/bewohner) */}
        {(view === "queue" || view === "rezepte" || view === "bewohner" || view === "visiten") && (
          <div style={{padding: "8px 24px", borderBottom: "1px solid var(--border)", display: "flex", gap: 8, overflowX: "auto", alignItems: "center", background: "var(--bg-sunken)"}}>
            <span style={{fontSize: 11, color: "var(--fg-subtle)", textTransform: "uppercase", letterSpacing: "0.08em", marginRight: 4}}>Multi-Heim</span>
            <HeimPill active={heim === "alle"} onClick={() => setHeim("alle")} mark="All" label="Alle" count={myHeims.reduce((s, h) => s + h.open, 0)} />
            {myHeims.map(h => (
              <HeimPill key={h.id} active={heim === h.id} onClick={() => setHeim(h.id)} mark={h.mark} label={h.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")} count={h.open} city={h.city} />
            ))}
          </div>
        )}

        {view === "queue" && (
          <ArztQueue
            queue={queue} heim={heim} filter={filter} setFilter={setFilter}
            current={current} onSelect={setSelected}
            onAction={(act) => {
              if (!current) return;
              if (act === "approve") window.STORE?.approveAnfrage(current.id);
              else window.STORE?.rejectAnfrage(current.id);
            }}
            ctx={ctx}
          />
        )}
        {view === "heute" && (
          isKonsil
            ? <KonsilDashboard doctor={meDoctor} patients={myBewohner} visits={myVisits} tone={myTone} onJumpVisit={(vid) => { setVisitSelected(vid); setView("visiten"); }} />
            : <ArztHeute scoped={scoped} myVisits={myVisits} onJumpQueue={() => setView("queue")} onJumpVisit={(vid) => { setVisitSelected(vid); setView("visiten"); }} ctx={ctx} />
        )}
        {view === "visiten" && <ArztVisiten visits={myVisits} selected={visitSelected} onSelect={setVisitSelected} ctx={ctx} />}
        {view === "bewohner" && <ArztBewohner bewohner={myBewohner} heim={heim} selected={bewSelected} onSelect={setBewSelected} onJumpRequest={(bid) => { const a = ANFRAGEN.find(x => x.bewohner === bid); if (a) { setSelected(a.id); setView("queue"); } }} ctx={ctx} />}
        {view === "rezepte" && <ArztRezepte scoped={scoped} ctx={ctx} />}
      </main>

      <CmdK
        open={cmdOpen}
        onClose={() => setCmdOpen(false)}
        onRun={(id) => { if (id.startsWith("portal:")) ctx.setPortal(id.slice(7)); }}
      />
    </>
  );
};

// --- View: Warteschlange (existing) ---
const ArztQueue = ({ queue, heim, filter, setFilter, current, onSelect, onAction, ctx }) => (
  <>
    <div className="content-head">
      <div>
        <h1>{heim === "alle" ? "Alle Heime" : HEIMS.find(h => h.id === heim)?.name} <span className="mono" style={{fontSize: 13, color: "var(--fg-subtle)", fontWeight: 400, marginLeft: 6}}>· Warteschlange</span></h1>
        <div className="sub">Eingehende Anfragen von Pflegeteams · ≤ 10 Sek. Freigabe angestrebt</div>
      </div>
      <div className="right">
        <div className="seg">
          {[["offen", "Aktiv"], ["alle", "Alle"]].map(([k, l]) => (
            <button key={k} className={filter === k ? "active" : ""} onClick={() => setFilter(k)}>{l}</button>
          ))}
        </div>
        <Btn icon="filter" onClick={() => ctx.toast("Filter-Panel geöffnet")}>Filter</Btn>
      </div>
    </div>
    <div className="split">
      <div className="master">
        <table className="table">
          <thead>
            <tr>
              <th style={{paddingLeft: 16, width: 32}}>P</th>
              <th style={{width: 90}}>#</th>
              <th>Bewohner</th>
              <th>Medikament</th>
              <th style={{width: 110}}>Typ</th>
              <th style={{width: 120}}>Heim</th>
              <th style={{width: 110}}>Wartezeit</th>
              <th style={{width: 130}}>Status</th>
            </tr>
          </thead>
          <tbody>
            {queue.map((a, idx) => {
              const b = BEWOHNER.find(x => x.id === a.bewohner);
              const h = HEIMS.find(h => h.id === a.heim);
              return (
                <tr key={a.id} className={current?.id === a.id ? "selected" : ""} onClick={() => onSelect(a.id)} data-tour={idx === 0 ? "arzt-row" : undefined}>
                  <td style={{paddingLeft: 16}}><Prio level={a.prio} /></td>
                  <td><span className="mono muted">{a.id}</span></td>
                  <td data-bewohner={b?.id}><div className="row" style={{gap: 6}}><Avatar name={b?.name} size={18} />{b?.name}</div></td>
                  <td className="mono">{a.med}</td>
                  <td><TypBadge typ={a.typ} /></td>
                  <td><span className="badge-pill"><span className="mono" style={{fontWeight: 700}}>{h?.mark}</span> {h?.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}</span></td>
                  <td className="muted">{a.erstellt}</td>
                  <td><StatusBadge status={a.status} /></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      {current && <ArztDetail anfrage={current} onAction={onAction} />}
    </div>
  </>
);

// --- View: Heute — day briefing ---
// ================================================================
// Konsil-Dashboard — role-specific profile for Nervenarzt / Palliativ / Urologe / Geriater / Internist
// ================================================================
const KonsilDashboard = ({ doctor, patients, visits, tone, onJumpVisit }) => {
  const spec = doctor.spec;
  const planned = visits.filter(v => v.status === "geplant");
  const done = visits.filter(v => v.status === "abgeschlossen");

  // Role-specific KPI + focus lists
  const RE = {
    Nervenarzt: /(Melperon|Quetiapin|Risperidon|Haloperidol|Olanzapin|Pipamperon|Zopiclon|Diazepam|Lorazepam)/i,
    Palliativ:  /(Morphin|MST|Targin|Fentanyl|Oxycodon|Buprenorphin|Tramadol|Metamizol|Novalgin)/i,
    Internist:  /(Ramipril|Bisoprolol|Apixaban|Torasemid|Furosemid|Formoterol|Budesonid|Metformin|Insulin)/i,
    Urologe:    /(Tamsulosin|Solifenacin|Ciprofloxacin|Oxybutynin)/i,
    Geriater:   /.*/,
  }[spec] || /.*/;

  const relevantMeds = Object.entries(window.MEDPLAN || {})
    .flatMap(([bid, meds]) => meds.filter(m => RE.test(m.med)).map(m => ({ bid, ...m })))
    .filter(m => patients.some(p => p.id === m.bid));

  const patientFokus = {
    Nervenarzt: (b) => (b.diagnosen || []).filter(d => /Demenz|Parkinson|Depression|Schizophren/i.test(d)),
    Palliativ:  (b) => (b.diagnosen || []).filter(d => /Schmerz|Krebs|Tumor|Palliativ|terminal/i.test(d)),
    Internist:  (b) => (b.diagnosen || []).filter(d => /Herz|COPD|Diabetes|Vorhofflimmern|Niereninsuff/i.test(d)),
    Urologe:    (b) => (b.diagnosen || []).filter(d => /Blase|Inkontinenz|Prostata|Niere|HWI/i.test(d)),
    Geriater:   (b) => (b.diagnosen || []),
  }[spec] || ((b) => b.diagnosen || []);

  const priorityTiles = {
    Nervenarzt: [
      { label: "Konsil-Termine diese Woche", val: planned.length, hint: `${patients.length} Patient:innen im Verlauf` },
      { label: "Antipsychotika aktiv", val: relevantMeds.filter(m => /Melperon|Quetiapin|Risperidon|Haloperidol|Olanzapin|Pipamperon/i.test(m.med)).length, hint: "Reduktionsversuch alle 6 Wochen prüfen" },
      { label: "Benzo/Z-Hypnotika", val: relevantMeds.filter(m => /Zopiclon|Diazepam|Lorazepam/i.test(m.med)).length, hint: "Dauerverordnung → Deprescribing" },
      { label: "Next BPSD-Review", val: "6 Wo.", hint: "Turnus nach Leitlinie S3" },
    ],
    Palliativ: [
      { label: "Palliativ-Patient:innen", val: patients.length, hint: "aktiv begleitet" },
      { label: "Opioide laufend", val: relevantMeds.filter(m => /Morphin|Oxycodon|Fentanyl|Buprenorphin|Tramadol/i.test(m.med)).length, hint: "BTM · Dosierung prüfen" },
      { label: "Schmerz-Patienten (NRS ≥ 5)", val: patients.filter(p => (window.VITALS?.[p.id]?.nrs || []).some(n => n >= 5)).length, hint: "letzte 14 Tage" },
      { label: "Next Konsil", val: "wöchentl.", hint: "Rescue-Medikation prüfen" },
    ],
    Internist: [
      { label: "Herzinsuffizienz (NYHA II+)", val: patients.filter(p => (p.diagnosen||[]).some(d => /Herzinsuff/i.test(d))).length, hint: "Ödem-Monitoring" },
      { label: "AF · Antikoagulation", val: patients.filter(p => (p.diagnosen||[]).some(d => /Vorhofflimmern/i.test(d))).length, hint: "CHA₂DS₂-VASc score" },
      { label: "COPD / Inhalativa", val: relevantMeds.filter(m => /Formoterol|Budesonid/i.test(m.med)).length, hint: "Inhalationstechnik prüfen" },
      { label: "BZ-Patient:innen", val: relevantMeds.filter(m => /Metformin|Insulin/i.test(m.med)).length, hint: "HbA1c-Verlauf" },
    ],
    Urologe: [
      { label: "Katheter-Träger:innen", val: patients.filter(p => (p.diagnosen||[]).some(d => /Katheter|Blase/i.test(d))).length, hint: "Wechsel-Intervall ≤ 30 Tage" },
      { label: "Offene HWI-Fälle", val: 1, hint: "CRP + Urin-Kultur anordnen" },
      { label: "Anticholinergika aktiv", val: relevantMeds.filter(m => /Solifenacin|Oxybutynin/i.test(m.med)).length, hint: "Kognitions-Nebenwirkung beachten" },
      { label: "Restharn-Kontrollen", val: "monatl.", hint: "Ziel <100 ml" },
    ],
    Geriater: [
      { label: "Patient:innen im Assessment", val: patients.length, hint: "Multimorbidität" },
      { label: "Polypharmazie ≥ 5", val: patients.filter(p => ((window.MEDPLAN?.[p.id]) || []).length >= 5).length, hint: "FORTA-Review" },
      { label: "Timed-Up-&-Go > 14 s", val: "3 fällig", hint: "Sturzrisiko" },
      { label: "Next Assessment", val: "Quartal", hint: "Barthel + MNA" },
    ],
  }[spec] || [];

  const actionList = {
    Nervenarzt: [
      "Antipsychotika-Indikation alle 6 Wochen dokumentieren",
      "BPSD-Verhaltensbeobachtung mit Pflege abstimmen",
      "Reduktionsversuch-Protokoll anlegen",
      "Sturz-Protokoll bei Parkinson-Patienten",
    ],
    Palliativ: [
      "Schmerz-Rating (NRS/ECPA) bei jedem Besuch",
      "Rescue-Medikation an Bett verfügbar?",
      "Patientenverfügung einsehen",
      "Angehörigen-Gespräch planen",
    ],
    Internist: [
      "NT-proBNP & Elyte wenn dyspnoeisch",
      "Antikoag.-Indikation quartalsweise prüfen",
      "Inhalations-Technik mit Pflege demonstrieren",
    ],
    Urologe: [
      "Katheter-Wechselintervall einhalten",
      "Restharn-Sonografie nach Miktion",
      "U-Stix bei unklarem Fieber",
    ],
    Geriater: [
      "FORTA-Liste durchgehen",
      "MNA + Barthel quartalsweise",
      "Stürze der letzten 30 Tage reviewen",
    ],
  }[spec] || [];

  return (
    <div style={{padding: "24px 24px 40px", display: "flex", flexDirection: "column", gap: 20}}>
      <div className="content-head" style={{padding: 0, border: 0}}>
        <div>
          <h1 style={{marginBottom: 6}}>
            {doctor.name}
            <span style={{marginLeft: 10, verticalAlign: 3}}><ArztSpecChip spec={spec} big /></span>
          </h1>
          <div className="sub">{spec}-Dashboard · {doctor.interval || "nach Bedarf"} · {doctor.heims?.length || 0} Heime im Konsil</div>
        </div>
        <div className="right">
          <Btn icon="calendar">Konsil-Plan</Btn>
          <Btn variant="primary" icon="stethoscope" onClick={() => planned[0] && window.dispatchEvent(new CustomEvent("medlink:startVisite", { detail: { visitId: planned[0].id } }))}>
            Nächste Konsil-Visite
          </Btn>
        </div>
      </div>

      {/* KPI-Kacheln */}
      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        {priorityTiles.map((t, i) => (
          <div key={i} className="kpi" data-tone={tone}>
            <div className="kpi-v" style={{fontVariantNumeric: "tabular-nums"}}>{t.val}</div>
            <div className="kpi-l">{t.label}</div>
            {t.hint && <div style={{fontSize: 11, color: "var(--fg-subtle)", marginTop: 4}}>{t.hint}</div>}
          </div>
        ))}
      </div>

      <div className="split">
        <div className="master" style={{display: "flex", flexDirection: "column", gap: 14}}>
          <div className="card-box">
            <div className="card-head">
              <h3 style={{margin: 0, fontSize: 14}}>Anstehende Konsil-Visiten</h3>
              <div className="muted" style={{fontSize: 11}}>{planned.length} geplant</div>
            </div>
            <table className="table" style={{fontSize: 12.5}}>
              <thead><tr><th style={{paddingLeft: 16}}>#</th><th>Termin</th><th>Heim</th><th>Bewohner</th><th>Anlass</th><th></th></tr></thead>
              <tbody>
                {planned.map(v => {
                  const h = HEIMS.find(x => x.id === v.heim);
                  return (
                    <tr key={v.id} onClick={() => onJumpVisit(v.id)}>
                      <td style={{paddingLeft: 16}} className="mono muted">{v.id}</td>
                      <td className="mono">{v.datum} · {v.zeit}</td>
                      <td>{h?.name}</td>
                      <td className="num">{v.bewohner.length}</td>
                      <td className="muted" style={{fontSize: 11.5}}>{v.anlass || "Routine-Konsil"}</td>
                      <td><Btn variant="primary" icon="stethoscope" onClick={(e) => { e.stopPropagation(); window.dispatchEvent(new CustomEvent("medlink:startVisite", { detail: { visitId: v.id } })); }}>Starten</Btn></td>
                    </tr>
                  );
                })}
                {planned.length === 0 && (
                  <tr><td colSpan={6} className="muted" style={{padding: "18px 16px", fontStyle: "italic"}}>Keine offenen Konsil-Termine.</td></tr>
                )}
              </tbody>
            </table>
          </div>

          <div className="card-box">
            <div className="card-head">
              <h3 style={{margin: 0, fontSize: 14}}>{spec}-relevante Medikation (laufend)</h3>
              <div className="muted" style={{fontSize: 11}}>{relevantMeds.length} Wirkstoff-Einträge</div>
            </div>
            <table className="table" style={{fontSize: 12.5}}>
              <thead><tr><th style={{paddingLeft: 16}}>Bewohner</th><th>Medikament</th><th>Dosierung</th><th>Indikation</th><th>Seit</th></tr></thead>
              <tbody>
                {relevantMeds.slice(0, 12).map((m, i) => {
                  const b = BEWOHNER.find(x => x.id === m.bid);
                  return (
                    <tr key={i}>
                      <td style={{paddingLeft: 16}} data-bewohner={b?.id}>{b?.name}</td>
                      <td>{m.med}</td>
                      <td className="mono muted">{m.dosis}</td>
                      <td className="muted">{m.grund}</td>
                      <td className="mono muted">{m.seit}</td>
                    </tr>
                  );
                })}
                {relevantMeds.length === 0 && (
                  <tr><td colSpan={5} className="muted" style={{padding: "18px 16px", fontStyle: "italic"}}>Keine {spec}-relevante Medikation in der aktuellen Kohorte.</td></tr>
                )}
              </tbody>
            </table>
          </div>
        </div>

        <div className="detail" style={{display: "flex", flexDirection: "column", gap: 14}}>
          <div className="card-box">
            <div className="card-head">
              <h3 style={{margin: 0, fontSize: 14}}>Meine Konsil-Patient:innen</h3>
              <div className="muted" style={{fontSize: 11}}>{patients.length}</div>
            </div>
            <div style={{display: "flex", flexDirection: "column"}}>
              {patients.slice(0, 6).map(b => (
                <div key={b.id} style={{padding: "10px 16px", borderTop: "1px solid var(--border)", display: "flex", gap: 10, alignItems: "center"}}>
                  <Avatar name={b.name} size={30} />
                  <div style={{flex: 1, minWidth: 0}}>
                    <div data-bewohner={b.id} style={{fontSize: 13, fontWeight: 500}}>{b.name}</div>
                    <div className="muted" style={{fontSize: 11}}>
                      PG {b.pflegegrad} · {patientFokus(b).slice(0, 2).join(" · ") || "—"}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card-box">
            <div className="card-head">
              <h3 style={{margin: 0, fontSize: 14}}>{spec}-Leitlinie · Pflichtpunkte</h3>
            </div>
            <ul style={{margin: 0, padding: "10px 16px 14px 32px", display: "flex", flexDirection: "column", gap: 6}}>
              {actionList.map((a, i) => (
                <li key={i} style={{fontSize: 12.5, color: "var(--fg-muted)", lineHeight: 1.5}}>{a}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

const ArztHeute = ({ scoped, myVisits, onJumpQueue, onJumpVisit, ctx }) => {
  const offen = scoped.filter(a => a.status === "offen").length;
  const proc  = scoped.filter(a => a.status === "bearbeitung").length;
  const today = [
    { zeit: "08:00", label: "Praxis-Sprechstunde · 12 Patienten", typ: "praxis" },
    { zeit: "10:30", label: "Visite Rosenhof · 4 Bewohner", typ: "visite", ref: "V-104" },
    { zeit: "12:00", label: "Mittagspause", typ: "pause" },
    { zeit: "13:30", label: "Hausbesuche · 3 Adressen", typ: "hausbesuch" },
    { zeit: "15:00", label: "MedLink-Freigaben (Time-Block)", typ: "freigabe" },
    { zeit: "17:00", label: "Tages-Ende · Rezeptdruck", typ: "ende" },
  ];
  return (
    <>
      <div className="content-head">
        <div><h1>Heute · Montag, 20. April 2026</h1><div className="sub">Tagesbriefing · Praxis + Heim-Visiten + MedLink-Anfragen</div></div>
        <div className="right">
          <Btn icon="printer" onClick={() => ctx.toast("Tagesplan als PDF")}>Tagesplan</Btn>
          <Btn variant="primary" icon="inbox" onClick={onJumpQueue}>Warteschlange öffnen</Btn>
        </div>
      </div>
      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <Kpi label="Offen bei mir"         value={offen}   icon="inbox"       trend={proc + " in Bearbeitung"} points={[3,4,5,4,6,5,7,offen]} />
        <Kpi label="Visiten heute/morgen"  value="2"       icon="stethoscope" trend="Rosenhof · Linde"        points={[1,1,2,1,2,2,2,2]} />
        <Kpi label="Ø Zeit bis Freigabe"   value="1m 42s"  icon="clock"       trend="–18s ggü. Vorwoche"      points={[140,135,130,120,115,110,105,102]} />
        <Kpi label="Freigabe-Quote (30T)"  value="96%"     icon="check"       trend="3% abgelehnt · 1% Rückfrage" points={[94,94,95,96,96,97,96,96]} />
      </div>
      <div style={{padding: "16px 24px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12}}>
        <div className="card">
          <div className="card-head">Tagesablauf</div>
          <div className="card-body col" style={{gap: 4, fontSize: 12}}>
            {today.map((t, i) => (
              <div key={i} className="row" style={{justifyContent: "space-between", padding: "8px 4px", borderBottom: i < today.length - 1 ? "1px solid var(--border)" : "none", cursor: t.ref ? "pointer" : "default"}} onClick={() => t.ref && onJumpVisit(t.ref)}>
                <div className="row" style={{gap: 10}}>
                  <span className="mono" style={{width: 52, color: "var(--fg-muted)", fontSize: 12}}>{t.zeit}</span>
                  <span>{t.label}</span>
                </div>
                <Icon name={
                  t.typ === "visite" ? "stethoscope" :
                  t.typ === "freigabe" ? "check" :
                  t.typ === "praxis" ? "home" :
                  t.typ === "hausbesuch" ? "truck" :
                  t.typ === "pause" ? "clock" : "clock"
                } size={12} className="muted" />
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head">Top der Warteschlange</div>
          <div className="card-body col" style={{gap: 4, fontSize: 12}}>
            {scoped.filter(a => a.status === "offen").slice(0, 6).map(a => {
              const b = BEWOHNER.find(x => x.id === a.bewohner);
              const h = HEIMS.find(h => h.id === a.heim);
              return (
                <div key={a.id} className="row" style={{justifyContent: "space-between", padding: "8px 4px", borderBottom: "1px solid var(--border)"}}>
                  <div className="row" style={{gap: 8, minWidth: 0}}>
                    <Prio level={a.prio} />
                    <div style={{minWidth: 0}}>
                      <div style={{fontSize: 12, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}>{a.med}</div>
                      <div className="muted" style={{fontSize: 11}}>{b?.name} · {h?.mark}</div>
                    </div>
                  </div>
                  <div style={{display: "flex", gap: 4}}>
                    <Btn icon="eye" onClick={onJumpQueue}>Öffnen</Btn>
                    <Btn variant="primary" icon="check" onClick={() => window.STORE?.approveAnfrage(a.id)}>F</Btn>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </>
  );
};

// --- View: Visiten ---
const ArztVisiten = ({ visits, selected, onSelect, ctx }) => {
  const current = visits.find(v => v.id === selected) || visits[0];
  const bewIds = current?.bewohner || [];
  return (
    <>
      <div className="content-head">
        <div><h1>Visiten</h1><div className="sub">Geplante & abgeschlossene Haus-Visiten</div></div>
        <div className="right">
          <Btn icon="printer" onClick={() => ctx.toast("Visiten-Plan als PDF")}>Plan drucken</Btn>
          <Btn variant="primary" icon="plus" onClick={() => ctx.toast("Visiten-Planung geöffnet")}>Visite planen</Btn>
        </div>
      </div>
      <div className="split">
        <div className="master">
          <table className="table">
            <thead><tr><th style={{paddingLeft: 16}}>#</th><th>Heim</th><th>Termin</th><th>Bewohner</th><th>Vorbereitung</th><th>Status</th></tr></thead>
            <tbody>
              {visits.map(v => {
                const h = HEIMS.find(h => h.id === v.heim);
                return (
                  <tr key={v.id} className={current?.id === v.id ? "selected" : ""} onClick={() => onSelect(v.id)}>
                    <td className="mono muted" style={{paddingLeft: 16}}>{v.id}</td>
                    <td><span className="badge-pill"><span className="mono" style={{fontWeight: 700}}>{h?.mark}</span>{h?.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}</span></td>
                    <td className="mono">{v.datum} · {v.zeit}</td>
                    <td>{v.bewohner.length} Bewohner</td>
                    <td className="muted">{v.vorbereitung != null ? `${v.vorbereitung} offen` : "—"}</td>
                    <td><StatusBadge status={v.status === "geplant" ? "offen" : "geliefert"} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {current && (
          <div className="detail">
            <div className="detail-head">
              <div className="eyebrow row" style={{justifyContent: "space-between"}}>
                <span className="mono">{current.id}</span>
                <StatusBadge status={current.status === "geplant" ? "offen" : "geliefert"} />
              </div>
              <h2>{HEIMS.find(h => h.id === current.heim)?.name}</h2>
              <div className="muted" style={{fontSize: 12}}>{current.datum} · {current.zeit} · {current.bewohner.length} Bewohner</div>
              <div style={{marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap"}}>
                {current.status === "geplant" ? (
                  <>
                    <Btn variant="primary" icon="stethoscope" onClick={() => window.dispatchEvent(new CustomEvent("medlink:startVisite", { detail: { visitId: current.id } }))}>Visite starten</Btn>
                    <Btn icon="printer" onClick={() => ctx.toast("Vorbereitungs-Dossier gedruckt")}>Vorbereitung drucken</Btn>
                    <Btn icon="calendar" onClick={() => ctx.toast("Verlegungs-Dialog geöffnet")}>Verlegen</Btn>
                  </>
                ) : (
                  <Btn icon="eye" onClick={() => ctx.toast("Protokoll geöffnet")}>Protokoll öffnen</Btn>
                )}
              </div>
            </div>
            <div className="detail-section">
              <h3>Teilnehmende Bewohner</h3>
              <div style={{display: "flex", flexDirection: "column", gap: 6}}>
                {bewIds.map(bid => {
                  const b = BEWOHNER.find(x => x.id === bid);
                  if (!b) return null;
                  return (
                    <div key={bid} style={{display: "flex", alignItems: "center", gap: 10, padding: 10, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)"}}>
                      <Avatar name={b.name} size={28} />
                      <div style={{flex: 1, minWidth: 0}}>
                        <div style={{fontSize: 13, fontWeight: 500}}>{b.name}</div>
                        <div className="muted" style={{fontSize: 11}}>{b.zimmer} · PG {b.pflegegrad} · {b.diagnosen[0]}</div>
                      </div>
                      <Btn icon="eye" onClick={() => ctx.toast(`Profil ${b.name} geöffnet`)}>Profil</Btn>
                    </div>
                  );
                })}
              </div>
            </div>
            {current.vorbereitung > 0 && (
              <div className="detail-section">
                <h3>Vorbereitung</h3>
                <div style={{padding: 10, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", fontSize: 12, lineHeight: 1.55}}>
                  {current.vorbereitung} offene Fragen / Medikationsprüfungen vor der Visite.
                  <div style={{marginTop: 6}}><Btn icon="clipboard" onClick={() => ctx.toast("Checkliste geöffnet")}>Checkliste</Btn></div>
                </div>
              </div>
            )}
            {current.protokoll && (
              <div className="detail-section">
                <h3>Protokoll</h3>
                <div style={{padding: 10, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", fontSize: 12, lineHeight: 1.55}}>
                  „{current.protokoll}"
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </>
  );
};

// --- View: Bewohner ---
const ArztBewohner = ({ bewohner, heim, selected, onSelect, onJumpRequest, ctx }) => {
  const current = bewohner.find(b => b.id === selected) || bewohner[0];
  const plan = current ? (MEDPLAN[current.id] || []) : [];
  const [q, setQ] = React.useState("");
  const filtered = bewohner.filter(b => !q || b.name.toLowerCase().includes(q.toLowerCase()) || b.zimmer.toLowerCase().includes(q.toLowerCase()));
  return (
    <>
      <div className="content-head">
        <div><h1>Meine Bewohner</h1><div className="sub">{bewohner.length} Bewohner · {heim === "alle" ? `${HEIMS.filter(h => ["ros","lin","mar"].includes(h.id)).length} Heime` : HEIMS.find(h => h.id === heim)?.name}</div></div>
        <div className="right">
          <div style={{position: "relative"}}>
            <Icon name="search" size={12} style={{position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--fg-subtle)"}} />
            <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Bewohner suchen …" style={{padding: "7px 10px 7px 28px", width: 220, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", fontSize: 12}} />
          </div>
          <Btn icon="download" onClick={() => ctx.toast("Bewohner-Liste als CSV")}>Export</Btn>
        </div>
      </div>
      <div className="split">
        <div className="master">
          <table className="table">
            <thead><tr><th style={{paddingLeft: 16}}>Name</th><th>Zimmer</th><th>Heim</th><th>Alter</th><th>PG</th><th>Offene Anfragen</th></tr></thead>
            <tbody>
              {filtered.map(b => {
                const h = HEIMS.find(h => h.id === b.heim);
                return (
                  <tr key={b.id} className={current?.id === b.id ? "selected" : ""} onClick={() => onSelect(b.id)}>
                    <td style={{paddingLeft: 16}}><div className="row" style={{gap: 8}}><Avatar name={b.name} size={20} />{b.name}</div></td>
                    <td className="mono">{b.zimmer}</td>
                    <td className="muted">{h?.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}</td>
                    <td className="mono">{b.alter}</td>
                    <td className="mono">{b.pflegegrad}</td>
                    <td>{b.offen > 0 ? <span className="badge-pill bearbeitung">{b.offen} offen</span> : <span className="muted">—</span>}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {current && (
          <div className="detail">
            <div className="detail-head">
              <div className="eyebrow row" style={{justifyContent: "space-between"}}>
                <span className="mono">{current.id.toUpperCase()}</span>
                {current.offen > 0 && <span className="badge-pill bearbeitung">{current.offen} offen</span>}
              </div>
              <h2>{current.name}</h2>
              <div className="muted" style={{fontSize: 12}}>{current.zimmer} · {HEIMS.find(h => h.id === current.heim)?.name} · {current.alter} J. · PG {current.pflegegrad}</div>
              <div style={{marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap"}}>
                <Btn variant="primary" icon="pill" onClick={() => ctx.toast("Neues Rezept angelegt")}>Neues Rezept</Btn>
                {current.offen > 0 && <Btn icon="inbox" onClick={() => onJumpRequest(current.id)}>Offene Anfrage</Btn>}
                <Btn icon="clipboard" onClick={() => ctx.toast("Arzt-Notiz geöffnet")}>Notiz</Btn>
                <Btn icon="mail" onClick={() => ctx.toast("Brief an Pflege geöffnet")}>Nachricht</Btn>
              </div>
            </div>
            <div className="detail-section">
              <h3>Diagnosen & Allergien</h3>
              <div style={{marginBottom: 8}}>{current.diagnosen.map(d => <span key={d} className="badge-pill" style={{marginRight: 4, marginBottom: 4}}>{d}</span>)}</div>
              {current.allergien.length > 0 ? <div>{current.allergien.map(a => <span key={a} className="badge-pill abgelehnt" style={{marginRight: 4}}>⚠ {a}</span>)}</div> : <div className="muted" style={{fontSize: 12}}>Keine Allergien dokumentiert.</div>}
            </div>
            <div className="detail-section">
              <h3>Aktueller Medikationsplan · {plan.length} Präparate</h3>
              {plan.length > 0 ? (
                <table className="table" style={{fontSize: 12}}>
                  <thead><tr><th style={{paddingLeft: 0}}>Präparat</th><th>Dosis</th><th>Seit</th><th>Indikation</th></tr></thead>
                  <tbody>
                    {plan.map(m => (
                      <tr key={m.med}>
                        <td className="mono" style={{paddingLeft: 0}}>{m.med}</td>
                        <td className="mono">{m.dosis}</td>
                        <td className="muted">{m.seit}</td>
                        <td className="muted">{m.grund}{m.hinweis ? ` · ${m.hinweis}` : ""}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              ) : <div className="muted" style={{fontSize: 12}}>Kein Medikationsplan hinterlegt.</div>}
            </div>
            <div className="detail-section">
              <h3>Stammdaten</h3>
              <dl className="kv">
                <dt>Geburtsdatum</dt><dd>{current.geb}</dd>
                <dt>Versicherung</dt><dd>{current.kasse}</dd>
                {current.kontakt && <><dt>Angehörige</dt><dd>{current.kontakt}</dd></>}
                <dt>Eingezogen</dt><dd>{current.eingezogen}</dd>
              </dl>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

// --- View: Rezepte (prescriptions I authored) ---
const ArztRezepte = ({ scoped, ctx }) => {
  const [statusFilter, setStatusFilter] = React.useState("alle");
  const rows = scoped.filter(a => statusFilter === "alle" || a.status === statusFilter);
  return (
    <>
      <div className="content-head">
        <div><h1>Rezepte</h1><div className="sub">Von mir freigegebene Verordnungen · letzte 90 Tage</div></div>
        <div className="right">
          <div className="seg">
            {[["alle","Alle"],["freigegeben","Freigegeben"],["geliefert","Geliefert"],["abgelehnt","Abgelehnt"]].map(([k,l]) => (
              <button key={k} className={statusFilter === k ? "active" : ""} onClick={() => setStatusFilter(k)}>{l}</button>
            ))}
          </div>
          <Btn icon="download" onClick={() => ctx.toast("Rezept-Export als CSV")}>Export</Btn>
          <Btn icon="printer" onClick={() => ctx.toast("Batch-Druck gestartet")}>Drucken</Btn>
        </div>
      </div>
      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <Kpi label="Freigegeben (30T)" value={scoped.filter(a => a.status === "freigegeben" || a.status === "geliefert").length} icon="check" trend="+12% ggü. Vormonat" points={[22,28,32,35,38,40,42,44]} />
        <Kpi label="Abgelehnt (30T)" value={scoped.filter(a => a.status === "abgelehnt").length} icon="x" trend="begründet & dokumentiert" points={[1,0,1,1,0,1,1,1]} />
        <Kpi label="Betäubungsmittel" value="3" icon="shield" trend="HBA signiert" points={[1,2,1,2,3,2,3,3]} />
        <Kpi label="Wiederholungs-Quote" value="68%" icon="repeat" trend="Dauermedikation" points={[64,65,66,67,68,68,68,68]} />
      </div>
      <div style={{padding: "0 24px 24px", marginTop: 16}}>
        <table className="table">
          <thead><tr><th style={{paddingLeft: 0}}>#</th><th>Datum</th><th>Bewohner</th><th>Medikament</th><th>Dosis</th><th>Heim</th><th>Status</th><th>Aktion</th></tr></thead>
          <tbody>
            {rows.map(a => {
              const b = BEWOHNER.find(x => x.id === a.bewohner);
              const h = HEIMS.find(h => h.id === a.heim);
              return (
                <tr key={a.id}>
                  <td className="mono muted" style={{paddingLeft: 0}}>{a.id}</td>
                  <td className="muted">{a.erstellt}</td>
                  <td>{b?.name}</td>
                  <td className="mono">{a.med}</td>
                  <td className="mono">{a.dosis}</td>
                  <td className="muted">{h?.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}</td>
                  <td><StatusBadge status={a.status} /></td>
                  <td>
                    <div style={{display: "flex", gap: 4}}>
                      <Btn icon="eye" onClick={() => ctx.toast(`${a.id} geöffnet`)}>Detail</Btn>
                      <Btn icon="repeat" onClick={() => ctx.toast("Folgerezept vorbereitet")}>Folge</Btn>
                      <Btn icon="printer" onClick={() => ctx.toast("PDF erzeugt")}>PDF</Btn>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

const HeimPill = ({ active, onClick, mark, label, count, city }) => (
  <button onClick={onClick} style={{
    display: "inline-flex", alignItems: "center", gap: 8,
    padding: "6px 10px", height: 32,
    background: active ? "var(--bg-raised)" : "transparent",
    border: `1px solid ${active ? "var(--accent)" : "var(--border)"}`,
    borderRadius: "var(--r-md)",
    color: active ? "var(--fg)" : "var(--fg-muted)",
    fontSize: 12, cursor: "pointer",
    boxShadow: active ? "0 0 0 3px var(--accent-tint)" : "none",
    whiteSpace: "nowrap",
  }}>
    <span style={{
      width: 20, height: 20, borderRadius: 4,
      background: active ? "var(--accent)" : "var(--bg-hover)",
      color: active ? "var(--accent-fg)" : "var(--fg-muted)",
      display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11,
    }}>{mark}</span>
    <span style={{fontWeight: 500}}>{label}</span>
    {city && <span style={{color: "var(--fg-subtle)", fontSize: 11}}>· {city}</span>}
    {count > 0 && <span className="badge-pill offen" style={{height: 18, padding: "0 6px", fontSize: 10}}>{count} offen</span>}
  </button>
);

const ArztDetail = ({ anfrage, onAction }) => {
  const b = BEWOHNER.find(x => x.id === anfrage.bewohner);
  const h = HEIMS.find(h => h.id === anfrage.heim);
  const trail = TRAIL[anfrage.id] || [
    { t: "ok", who: `${anfrage.von} (Pflege, ${h?.name})`, head: "Anfrage eingereicht", ts: anfrage.erstellt },
    { t: "info", who: "System", head: "An Dr. Schneider zugestellt", ts: anfrage.erstellt },
  ];
  return (
    <div className="detail">
      <div className="detail-head">
        <div className="eyebrow row" style={{justifyContent: "space-between"}}>
          <span className="mono">{anfrage.id}</span>
          <div className="row" style={{gap: 6}}><Prio level={anfrage.prio} /><StatusBadge status={anfrage.status} /></div>
        </div>
        <h2 className="mono">{anfrage.med}</h2>
        <div className="muted" style={{fontSize: 12}}>{b?.name} · {b?.zimmer} · {h?.name}</div>

        {(anfrage.status === "offen" || anfrage.status === "bearbeitung") && (
          <div style={{marginTop: 14, padding: 12, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)"}}>
            <div style={{fontSize: 11, color: "var(--fg-subtle)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8}}>Ein-Klick Entscheidung</div>
            <div style={{display: "flex", gap: 6, flexWrap: "wrap"}}>
              <Btn variant="primary" icon="check" kbd="F" onClick={() => onAction("approve")} data-tour="arzt-approve">Freigabe</Btn>
              <Btn icon="activity" kbd="A">Anpassen</Btn>
              <Btn variant="danger-outline" icon="x" kbd="R" onClick={() => onAction("reject")}>Ablehnen</Btn>
              <div style={{marginLeft: "auto"}}><Btn icon="mail">Rückfrage</Btn></div>
            </div>
            <div style={{marginTop: 8, display: "flex", gap: 8, alignItems: "center", fontSize: 11, color: "var(--fg-subtle)"}}>
              <Icon name="shield" size={11} /> Signatur mit HBA · Weiterleitung an Adler-Apotheke (München) nach Freigabe
            </div>
          </div>
        )}
      </div>

      <div className="detail-section">
        <h3>Medizinische Prüfung</h3>
        <dl className="kv">
          <dt>Medikation</dt><dd className="mono">{anfrage.med} · {anfrage.dosis}</dd>
          <dt>Typ</dt><dd><TypBadge typ={anfrage.typ} /></dd>
          <dt>Dauer</dt><dd>{anfrage.dauer}</dd>
          <dt>Diagnosen</dt><dd>{b?.diagnosen.map(d => <span key={d} className="badge-pill" style={{marginRight: 4, marginBottom: 4}}>{d}</span>)}</dd>
          <dt>Allergien</dt><dd>{b?.allergien.length ? b.allergien.map(a => <span key={a} className="badge-pill abgelehnt" style={{marginRight: 4}}>{a}</span>) : <span className="muted">keine dokumentiert</span>}</dd>
          <dt>Wechselwirkung</dt>
          <dd>
            {anfrage.med.includes("Tramadol") ? (
              <span className="badge-pill bearbeitung"><Icon name="warning" size={10} /> Moderate Wechselwirkung mit Apixaban</span>
            ) : <span className="muted">keine kritischen Interaktionen</span>}
          </dd>
        </dl>
      </div>

      <div className="detail-section">
        <h3>Kontext vom Pflegeteam</h3>
        {anfrage.notiz ? (
          <div style={{padding: 10, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", fontSize: 12, lineHeight: 1.55}}>
            „{anfrage.notiz}"
            <div style={{fontSize: 11, color: "var(--fg-subtle)", marginTop: 6}}>— {anfrage.von}, Pflege</div>
          </div>
        ) : <div className="muted" style={{fontSize: 12}}>Keine zusätzliche Notiz.</div>}
      </div>

      <div className="detail-section">
        <h3>Verlauf</h3>
        <div className="timeline">
          {trail.map((t, i) => (
            <div key={i} className={`tl-item ${t.t}`}>
              <div className="tl-dot"><Icon name={t.t === "ok" ? "check" : t.t === "warn" ? "warning" : "activity"} size={10} /></div>
              <div className="tl-body">
                <div className="head">{t.head}</div>
                <div className="who">{t.who}</div>
                <div className="ts">{t.ts}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

window.ArztPortal = ArztPortal;