// Apotheken-Portal — multi-view: Eingang · Kommissionierung · Lieferungen · Archiv · per Heim
const ApothekePortal = ({ ctx }) => {
  if (window.useStoreVersion) window.useStoreVersion();
  const [view, setView] = React.useState("eingang");
  const [heimFilter, setHeimFilter] = React.useState(null); // null = all, or heim id
  const [selected, setSelected] = React.useState("A-2801");
  const [cmdOpen, setCmdOpen] = React.useState(false);
  const [batchPrint, setBatchPrint] = React.useState(false);

  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 === "apotheke" && 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);
    };
  }, []);

  // Domain slicing
  const all = ANFRAGEN.filter(a => a.status === "freigegeben" || a.status === "geliefert");
  const scopedByHeim = heimFilter ? all.filter(a => a.heim === heimFilter) : all;
  const eingang  = scopedByHeim.filter(a => a.status === "freigegeben" && !a.kommissioniert);
  const komm     = scopedByHeim.filter(a => a.status === "freigegeben" && a.kommissioniert !== false).slice(0, 2); // mock: some in picking
  const ausgang  = scopedByHeim.filter(a => a.status === "geliefert" || a.status === "freigegeben");
  const archiv   = scopedByHeim; // archive view shows all historical

  const current = (view === "eingang" ? eingang : view === "kommissionierung" ? komm : ausgang).find(a => a.id === selected)
              || ANFRAGEN.find(a => a.id === selected)
              || (view === "eingang" ? eingang : view === "kommissionierung" ? komm : ausgang)[0];

  const sections = [
    { label: "", items: [
      { id: "eingang",          label: "Rezept-Eingang",    icon: "inbox", badge: eingang.length },
      { id: "kommissionierung", label: "Kommissionierung",  icon: "pill",  badge: 2 },
      { id: "ausgang",          label: "Lieferungen",       icon: "truck", badge: ausgang.filter(a => a.status === "freigegeben").length },
      { id: "archiv",           label: "Archiv",            icon: "file" },
    ]},
    { label: "Verbundene Heime",
      items: HEIMS.slice(1).map(h => ({ id: `h:${h.id}`, label: h.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", ""), icon: "home", badge: ANFRAGEN.filter(a => a.heim === h.id && (a.status === "freigegeben" || a.status === "geliefert")).length })),
    },
  ];

  const crumbLabel = { eingang: "Rezept-Eingang", kommissionierung: "Kommissionierung", ausgang: "Lieferungen", archiv: "Archiv" }[view] || (view.startsWith("h:") ? HEIMS.find(h => h.id === view.slice(2))?.name : "");

  return (
    <>
      <Topbar
        portal="Apotheke"
        portalIcon="pill"
        onBrand={ctx.onBrandClick}
        onToggleSidebar={ctx.onPortalSwitch}
        crumbs={["Adler-Apotheke", crumbLabel]}
        heim={heimFilter || "alle"}
        onSearchClick={() => setCmdOpen(true)}
        userName="Klaus Berger"
        userRole="PTA"
        userEmail="rezepte@adler-muc.de"
        onLogout={ctx.onLogout}
        onAdmin={ctx.onAdmin}
      />
      <Sidebar
        scopeMark="A"
        scopeTitle="Adler-Apotheke"
        scopeSub="München · Sendling"
        sections={sections}
        active={view.startsWith("h:") ? `h:${heimFilter}` : view}
        onNav={(id) => {
          if (id.startsWith("h:")) {
            setHeimFilter(id.slice(2));
            setView("eingang");
          } else {
            setHeimFilter(null);
            setView(id);
          }
        }}
        compliance="DSGVO · Extra-Schutz · Verschlüsselte Übermittlung"
      />
      <main className="content">
        {view === "eingang" && (
          <ApoEingang
            rows={eingang} current={current} onSelect={setSelected}
            heimFilter={heimFilter} onClearHeim={() => setHeimFilter(null)}
            onBatchPrint={() => setBatchPrint(true)}
            onStartDelivery={() => ctx.toast("Lieferung gestartet · Tour West · 4 Stopps")}
            ctx={ctx}
          />
        )}
        {view === "kommissionierung" && <ApoKomm rows={komm} current={current} onSelect={setSelected} ctx={ctx} />}
        {view === "ausgang" && <ApoAusgang rows={ausgang} current={current} onSelect={setSelected} ctx={ctx} />}
        {view === "archiv" && <ApoArchiv rows={archiv} ctx={ctx} />}
      </main>

      {batchPrint && (
        <BatchPrintSheet rows={eingang} onClose={() => setBatchPrint(false)} onPrint={(n) => { setBatchPrint(false); ctx.toast(`${n} Etiketten + Lieferscheine gedruckt`); }} />
      )}

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

// --- Rezept-Eingang view (master/detail + KPIs) ---
const ApoEingang = ({ rows, current, onSelect, heimFilter, onClearHeim, onBatchPrint, onStartDelivery, ctx }) => {
  const inCount  = rows.length;
  const delivered = ANFRAGEN.filter(a => a.status === "geliefert").length;
  return (
    <>
      <div className="content-head">
        <div>
          <h1>Rezept-Eingang {heimFilter && <span style={{fontSize: 14, color: "var(--fg-subtle)", fontWeight: 400}}>· {HEIMS.find(h => h.id === heimFilter)?.name}</span>}</h1>
          <div className="sub">Freigegebene Verordnungen von verbundenen Pflegeheimen</div>
        </div>
        <div className="right">
          {heimFilter && <Btn icon="x" onClick={onClearHeim}>Filter entfernen</Btn>}
          <Btn icon="printer" onClick={onBatchPrint}>Batch drucken</Btn>
          <Btn variant="primary" icon="truck" onClick={onStartDelivery}>Lieferung starten</Btn>
        </div>
      </div>
      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <Kpi label="Neu eingegangen"        value={inCount}     icon="inbox" trend="letzte 24h"           points={[2,3,4,3,5,4,6,5]} />
        <Kpi label="In Kommissionierung"    value="2"           icon="pill"  trend="Ø 18 Min"              points={[3,4,3,5,4,3,4,2]} />
        <Kpi label="Heute geliefert"        value={delivered}   icon="truck" trend="4 Heime belieft"       points={[5,6,8,7,9,10,8,9]} />
        <Kpi label="Verbundene Heime"       value="5"           icon="home"  trend="alle online"            points={[5,5,5,5,5,5,5,5]} />
      </div>
      <div className="split" style={{marginTop: 16}}>
        <div className="master">
          <table className="table">
            <thead><tr><th style={{paddingLeft: 16, width: 90}}>#</th><th>Bewohner</th><th>Medikament</th><th>Dosis / Menge</th><th style={{width: 140}}>Heim</th><th style={{width: 120}}>Arzt</th><th style={{width: 130}}>Status</th></tr></thead>
            <tbody>
              {rows.map((a, idx) => {
                const b = BEWOHNER.find(x => x.id === a.bewohner);
                const h = HEIMS.find(h => h.id === a.heim);
                const arzt = DOCTORS.find(d => d.id === a.arzt);
                return (
                  <tr key={a.id} className={current?.id === a.id ? "selected" : ""} onClick={() => onSelect(a.id)} data-tour={idx === 0 ? "apo-row" : undefined}>
                    <td style={{paddingLeft: 16}}><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 className="mono muted">{a.dosis} · {a.dauer}</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">{arzt?.name.replace("Dr. med. ", "")}</td>
                    <td><StatusBadge status={a.status} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
        {current && <ApoDetail anfrage={current} onConfirm={() => window.STORE?.deliverAnfrage(current.id)} onAction={(a) => ctx.toast(a)} />}
      </div>
    </>
  );
};

// --- Kommissionierung view — picking stations / checklist ---
const ApoKomm = ({ rows, current, onSelect, ctx }) => {
  const [stations, setStations] = React.useState([
    { id: "ST-01", tech: "Klaus Berger",   started: "14:02", item: "A-2801 · Ibuprofen 400 mg · Fr. Schmidt (R)", progress: 3, total: 4, verified: false },
    { id: "ST-02", tech: "Andrea Hartmann",started: "13:48", item: "A-2798 · Formoterol · Fr. Hoffmann (S)",    progress: 4, total: 4, verified: true },
  ]);
  return (
    <>
      <div className="content-head">
        <div><h1>Kommissionierung</h1><div className="sub">Picking-Stationen · 2 aktiv · 6 heute fertiggestellt</div></div>
        <div className="right">
          <Btn icon="printer" onClick={() => ctx.toast("Alle offenen Etiketten gedruckt")}>Etiketten</Btn>
          <Btn variant="primary" icon="plus" onClick={() => ctx.toast("Neue Station geöffnet (ST-03)")}>Station öffnen</Btn>
        </div>
      </div>
      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <Kpi label="Aktive Stationen"     value="2"   icon="pill"    trend="2 Techniker online"    points={[1,2,2,3,2,2,2,2]} />
        <Kpi label="Ø Kommissionierung"   value="14m" icon="clock"   trend="–2m ggü. Vorwoche"     points={[18,17,16,16,15,14,14,14]} />
        <Kpi label="4-Augen-Prüfung"      value="100%" icon="shield" trend="alle verifiziert"      points={[100,100,100,100,100,100,100,100]} />
        <Kpi label="Rückläufer heute"     value="0"   icon="warning" trend="keine Fehler"          points={[1,0,1,0,0,0,0,0]} />
      </div>
      <div style={{padding: "16px 24px", display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12}}>
        {stations.map(st => (
          <div key={st.id} className="card">
            <div className="card-head row" style={{justifyContent: "space-between"}}>
              <div className="row" style={{gap: 8}}><span className="mono" style={{fontSize: 11, color: "var(--fg-subtle)"}}>{st.id}</span><span style={{fontWeight: 600}}>{st.tech}</span></div>
              <span className={`badge-pill ${st.verified ? "freigegeben" : "bearbeitung"}`}><Icon name={st.verified ? "check" : "activity"} size={10} />{st.verified ? "verifiziert" : "in Arbeit"}</span>
            </div>
            <div className="card-body col" style={{gap: 10, fontSize: 12}}>
              <div className="muted">Startet: {st.started}</div>
              <div style={{padding: 10, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", fontSize: 12}}>
                <div style={{fontSize: 11, color: "var(--fg-subtle)", marginBottom: 4}}>Aktueller Auftrag</div>
                {st.item}
              </div>
              <div>
                <div className="row" style={{justifyContent: "space-between", fontSize: 11, color: "var(--fg-muted)", marginBottom: 4}}>
                  <span>Fortschritt</span><span className="mono">{st.progress} / {st.total}</span>
                </div>
                <div style={{height: 6, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: 4, overflow: "hidden"}}>
                  <div style={{height: "100%", width: `${(st.progress / st.total) * 100}%`, background: "var(--accent)"}} />
                </div>
              </div>
              <div style={{display: "flex", gap: 4, flexWrap: "wrap"}}>
                <Btn icon="eye" onClick={() => ctx.toast(`Checkliste ${st.id} geöffnet`)}>Checkliste</Btn>
                <Btn icon="shield" onClick={() => {
                  setStations(s => s.map(x => x.id === st.id ? {...x, verified: true} : x));
                  ctx.toast(`${st.id} 4-Augen-geprüft`);
                }}>4-Augen-Prüfung</Btn>
                <Btn icon="check" variant="primary" onClick={() => ctx.toast(`${st.id} → Auslieferung`)}>Fertig</Btn>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{padding: "8px 24px 24px"}}>
        <h3 style={{margin: "8px 0 10px", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--fg-subtle)"}}>Warteschlange</h3>
        <table className="table">
          <thead><tr><th style={{paddingLeft: 0}}>#</th><th>Bewohner</th><th>Medikament</th><th>Heim</th><th>Seit</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>{b?.name}</td>
                  <td className="mono">{a.med}</td>
                  <td className="muted">{h?.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}</td>
                  <td className="muted">vor 12 Min</td>
                  <td><Btn variant="primary" icon="pill" onClick={() => window.STORE?.kommAnfrage(a.id)}>Station zuweisen</Btn></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

// --- Lieferungen view — tours ---
const ApoAusgang = ({ rows, current, onSelect, ctx }) => {
  const tours = [
    { id: "Tour-W", name: "Tour West", fahrer: "M. Vogel", fahrzeug: "M-AP 1405", heime: ["ros","son"], stopps: 4, zeit: "14:00–16:00", status: "unterwegs", progress: 2 },
    { id: "Tour-N", name: "Tour Nord", fahrer: "S. Klein", fahrzeug: "M-AP 2812", heime: ["lin","mar"], stopps: 3, zeit: "13:30–15:00", status: "abgeschlossen", progress: 3 },
    { id: "Tour-E", name: "Tour Ost",  fahrer: "—",        fahrzeug: "M-AP 7720", heime: ["son"],        stopps: 1, zeit: "16:30–17:00", status: "geplant", progress: 0 },
  ];
  return (
    <>
      <div className="content-head">
        <div><h1>Lieferungen</h1><div className="sub">Heutige Touren · 3 aktiv · 8 Stopps insgesamt</div></div>
        <div className="right">
          <Btn icon="printer" onClick={() => ctx.toast("Tourenplan gedruckt")}>Tourenplan</Btn>
          <Btn variant="primary" icon="plus" onClick={() => ctx.toast("Neue Tour geplant")}>Tour planen</Btn>
        </div>
      </div>
      <div className="kpi-grid" style={{gridTemplateColumns: "repeat(4, 1fr)"}}>
        <Kpi label="Touren heute"       value="3"  icon="truck"   trend="2 unterwegs"            points={[2,2,3,3,3,3,3,3]} />
        <Kpi label="Stopps"             value="8"  icon="home"    trend="5 erledigt"             points={[5,6,6,7,7,8,8,8]} />
        <Kpi label="Ø Tour-Dauer"       value="92m" icon="clock"  trend="innerhalb Zielfenster"  points={[98,96,94,92,92,90,92,92]} />
        <Kpi label="Quittierte Ablieferung" value="100%" icon="check" trend="digital signiert" points={[100,100,100,100,100,100,100,100]} />
      </div>
      <div style={{padding: "16px 24px", display: "flex", flexDirection: "column", gap: 10}}>
        {tours.map(t => (
          <div key={t.id} className="card">
            <div className="card-head row" style={{justifyContent: "space-between"}}>
              <div className="row" style={{gap: 8}}>
                <Icon name="truck" size={13} />
                <span style={{fontWeight: 600}}>{t.name}</span>
                <span className="mono muted" style={{fontSize: 11}}>· {t.id}</span>
              </div>
              <StatusBadge status={t.status === "abgeschlossen" ? "geliefert" : t.status === "unterwegs" ? "bearbeitung" : "offen"} />
            </div>
            <div className="card-body col" style={{gap: 10}}>
              <div className="row" style={{gap: 18, fontSize: 12, color: "var(--fg-muted)", flexWrap: "wrap"}}>
                <span><Icon name="user" size={11} /> {t.fahrer}</span>
                <span><Icon name="truck" size={11} /> {t.fahrzeug}</span>
                <span><Icon name="clock" size={11} /> {t.zeit}</span>
                <span><Icon name="home" size={11} /> {t.heime.map(hid => HEIMS.find(h => h.id === hid)?.mark).join(" · ")}</span>
              </div>
              <div>
                <div className="row" style={{justifyContent: "space-between", fontSize: 11, color: "var(--fg-muted)", marginBottom: 4}}>
                  <span>Fortschritt</span><span className="mono">{t.progress} / {t.stopps} Stopps</span>
                </div>
                <div style={{height: 6, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: 4, overflow: "hidden"}}>
                  <div style={{height: "100%", width: `${t.stopps ? (t.progress / t.stopps) * 100 : 0}%`, background: t.status === "abgeschlossen" ? "oklch(60% 0.12 160)" : "var(--accent)"}} />
                </div>
              </div>
              <div style={{display: "flex", gap: 4}}>
                <Btn icon="eye" onClick={() => ctx.toast(`${t.name}: Stopp-Details geöffnet`)}>Stopps</Btn>
                <Btn icon="printer" onClick={() => ctx.toast("Lieferschein gedruckt")}>Lieferschein</Btn>
                {t.status === "geplant" && <Btn variant="primary" icon="truck" onClick={() => ctx.toast(`${t.name} gestartet`)}>Starten</Btn>}
                {t.status === "unterwegs" && <Btn variant="primary" icon="check" onClick={() => ctx.toast(`${t.name} abgeschlossen`)}>Abschließen</Btn>}
              </div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
};

// --- Archiv view ---
const ApoArchiv = ({ rows, ctx }) => {
  const [q, setQ] = React.useState("");
  const filtered = rows.filter(a => {
    const b = BEWOHNER.find(x => x.id === a.bewohner);
    return !q || a.med.toLowerCase().includes(q.toLowerCase()) || a.id.toLowerCase().includes(q.toLowerCase()) || b?.name.toLowerCase().includes(q.toLowerCase());
  });
  return (
    <>
      <div className="content-head">
        <div><h1>Archiv</h1><div className="sub">Alle bearbeiteten Rezepte der letzten 90 Tage · {rows.length} Einträge</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="ID, Medikament, Bewohner …" style={{padding: "7px 10px 7px 28px", width: 260, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", fontSize: 12}} />
          </div>
          <Btn icon="download" onClick={() => ctx.toast("Archiv-Export als CSV (90 Tage)")}>Export</Btn>
        </div>
      </div>
      <div style={{padding: "0 24px 24px"}}>
        <table className="table">
          <thead><tr><th style={{paddingLeft: 0}}>#</th><th>Datum</th><th>Bewohner</th><th>Medikament</th><th>Menge</th><th>Heim</th><th>Arzt</th><th>Status</th><th>Aktion</th></tr></thead>
          <tbody>
            {filtered.map(a => {
              const b = BEWOHNER.find(x => x.id === a.bewohner);
              const h = HEIMS.find(h => h.id === a.heim);
              const arzt = DOCTORS.find(d => d.id === a.arzt);
              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 muted">{a.dosis} · {a.dauer}</td>
                  <td className="muted">{h?.name.replace("Haus ", "").replace("Seniorenzentrum ", "").replace("Pflegeheim ", "")}</td>
                  <td className="muted">{arzt?.name.replace("Dr. med. ", "")}</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="printer" onClick={() => ctx.toast("Lieferschein nachdruck")}>PDF</Btn>
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </>
  );
};

// --- Batch print sheet ---
const BatchPrintSheet = ({ rows, onClose, onPrint }) => {
  const [selected, setSelected] = React.useState(() => new Set(rows.map(r => r.id)));
  const toggle = (id) => setSelected(s => {
    const n = new Set(s);
    n.has(id) ? n.delete(id) : n.add(id);
    return n;
  });
  return (
    <div className="na-backdrop" onClick={onClose}>
      <div className="modal" style={{width: 560, maxWidth: "96vw", background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-lg)", boxShadow: "0 24px 60px oklch(0% 0 0 / 0.25)"}} onClick={(e) => e.stopPropagation()}>
        <div style={{padding: "16px 20px", borderBottom: "1px solid var(--border)"}}>
          <h3 style={{margin: 0, fontSize: 16}}>Batch drucken</h3>
          <div style={{fontSize: 12, color: "var(--fg-subtle)", marginTop: 2}}>Etiketten & Lieferscheine für ausgewählte Rezepte</div>
        </div>
        <div style={{padding: 6, maxHeight: 360, overflow: "auto"}}>
          {rows.map(a => {
            const b = BEWOHNER.find(x => x.id === a.bewohner);
            return (
              <label key={a.id} style={{display: "flex", alignItems: "center", gap: 10, padding: "8px 12px", borderBottom: "1px solid var(--border)", cursor: "pointer", fontSize: 13}}>
                <input type="checkbox" checked={selected.has(a.id)} onChange={() => toggle(a.id)} />
                <span className="mono muted" style={{fontSize: 11}}>{a.id}</span>
                <span style={{flex: 1}}>{b?.name} · <span className="mono">{a.med}</span></span>
                <StatusBadge status={a.status} />
              </label>
            );
          })}
        </div>
        <div style={{padding: "12px 20px", borderTop: "1px solid var(--border)", display: "flex", justifyContent: "space-between", alignItems: "center", background: "var(--bg-sunken)"}}>
          <div style={{fontSize: 12, color: "var(--fg-muted)"}}>{selected.size} Etiketten · {selected.size} Lieferscheine</div>
          <div style={{display: "flex", gap: 6}}>
            <Btn onClick={onClose}>Abbrechen</Btn>
            <Btn variant="primary" icon="printer" onClick={() => onPrint(selected.size)}>Drucken</Btn>
          </div>
        </div>
      </div>
    </div>
  );
};

const ApoDetail = ({ anfrage, onConfirm, onAction }) => {
  const b = BEWOHNER.find(x => x.id === anfrage.bewohner);
  const h = HEIMS.find(h => h.id === anfrage.heim);
  const arzt = DOCTORS.find(d => d.id === anfrage.arzt);
  const ready = anfrage.status === "freigegeben";
  return (
    <div className="detail">
      <div className="detail-head">
        <div className="eyebrow row" style={{justifyContent: "space-between"}}>
          <span className="mono">{anfrage.id} · eRezept</span>
          <StatusBadge status={anfrage.status} />
        </div>
        <h2 className="mono">{anfrage.med}</h2>
        <div className="muted" style={{fontSize: 12}}>{b?.name} · {b?.zimmer} · {h?.name}</div>
        <div style={{marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap"}}>
          {ready ? (
            <>
              <Btn variant="primary" icon="check" onClick={onConfirm}>Lieferung bestätigen</Btn>
              <Btn icon="printer" onClick={() => onAction("Etikett gedruckt")}>Etikett drucken</Btn>
              <Btn icon="mail" onClick={() => onAction("Rückfrage an Arzt gesendet")}>Rückfrage</Btn>
            </>
          ) : (
            <Btn icon="eye" onClick={() => onAction("Lieferschein geöffnet")}>Lieferschein</Btn>
          )}
        </div>
      </div>
      <div className="detail-section">
        <h3>Verordnung</h3>
        <dl className="kv">
          <dt>Arzt</dt><dd>{arzt?.name} · <span className="muted">{arzt?.spec}</span></dd>
          <dt>Dosis</dt><dd className="mono">{anfrage.dosis}</dd>
          <dt>Dauer / Menge</dt><dd>{anfrage.dauer}</dd>
          <dt>Apotheke</dt><dd>Adler-Apotheke · München</dd>
          <dt>Priorität</dt><dd><Prio level={anfrage.prio} /> {anfrage.prio === "H" ? "Hoch" : anfrage.prio === "M" ? "Mittel" : "Normal"}</dd>
        </dl>
      </div>
      <div className="detail-section">
        <h3>Lieferung</h3>
        <dl className="kv">
          <dt>Zieladresse</dt><dd>{h?.name} · Station {b?.zimmer.split("-")[1]?.slice(0, 1)}</dd>
          <dt>Geplant</dt><dd>Heute · 14:00–16:00 (Tour West)</dd>
          <dt>Empfänger</dt><dd>Stationsleitung</dd>
          <dt>Übermittlung</dt><dd><Icon name="shield" size={11} /> TLS 1.3 · signiert mit HBA</dd>
        </dl>
      </div>
      <div className="detail-section">
        <h3>Verlauf</h3>
        <div className="timeline">
          <div className="tl-item ok"><div className="tl-dot"><Icon name="check" size={10} /></div><div className="tl-body"><div className="head">Pflege eingereicht</div><div className="who">{anfrage.von}</div><div className="ts">{anfrage.erstellt}</div></div></div>
          <div className="tl-item ok"><div className="tl-dot"><Icon name="check" size={10} /></div><div className="tl-body"><div className="head">Arzt freigegeben</div><div className="who">{arzt?.name}</div><div className="ts">vor 38 Min</div></div></div>
          <div className="tl-item info"><div className="tl-dot"><Icon name="inbox" size={10} /></div><div className="tl-body"><div className="head">Bei Apotheke eingegangen</div><div className="who">Adler-Apotheke</div><div className="ts">vor 37 Min</div></div></div>
          {anfrage.status === "geliefert" && <div className="tl-item ok"><div className="tl-dot"><Icon name="truck" size={10} /></div><div className="tl-body"><div className="head">Geliefert</div><div className="who">Kurier · quittiert Stationsleitung</div><div className="ts">heute · 15:14</div></div></div>}
        </div>
      </div>
    </div>
  );
};

window.ApothekePortal = ApothekePortal;