// MedLink — Bewohner-Profilsheet
// Right-side slide-in panel showing a resident's full picture across the system.
// Opens via window event: dispatchEvent(new CustomEvent("medlink:openBewohner", { detail: { id } }))
// Global click delegation: any element with [data-bewohner="bID"] opens the sheet.

// Quick-search widget inside the sheet header — filter across all residents and jump.
const BwQuickSearch = ({ query, setQuery, onSelect, onClose, currentId }) => {
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    const id = setTimeout(() => inputRef.current?.focus(), 50);
    return () => clearTimeout(id);
  }, []);
  const matches = React.useMemo(() => {
    const all = window.BEWOHNER || [];
    if (!query.trim()) return all.slice(0, 8);
    const q = query.toLowerCase();
    return all.filter((b) =>
      b.name.toLowerCase().includes(q) ||
      (b.zimmer || "").toLowerCase().includes(q) ||
      b.id.toLowerCase().includes(q)
    ).slice(0, 8);
  }, [query]);
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => { setIdx(0); }, [query]);
  const onKey = (e) => {
    if (e.key === "Escape") { e.preventDefault(); onClose(); }
    else if (e.key === "ArrowDown") { e.preventDefault(); setIdx((i) => Math.min(i + 1, matches.length - 1)); }
    else if (e.key === "ArrowUp") { e.preventDefault(); setIdx((i) => Math.max(i - 1, 0)); }
    else if (e.key === "Enter") {
      e.preventDefault();
      const m = matches[idx];
      if (m) onSelect(m.id);
    }
  };
  return (
    <div className="bw-qsearch" onClick={(e) => e.stopPropagation()}>
      <div className="bw-qsearch-input">
        <Icon name="search" size={13} />
        <input
          ref={inputRef}
          placeholder="Bewohner:in, Zimmer oder ID suchen …"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={onKey}
        />
        <kbd>Esc</kbd>
      </div>
      {matches.length > 0 && (
        <div className="bw-qsearch-list" role="listbox">
          {matches.map((m, i) => {
            const heim = (window.HEIMS || []).find((h) => h.id === m.heim);
            return (
              <button
                key={m.id}
                className="bw-qsearch-item"
                data-active={i === idx}
                data-current={m.id === currentId}
                onClick={() => onSelect(m.id)}
                onMouseEnter={() => setIdx(i)}
              >
                <span className="bw-qsearch-mark">{heim?.mark || "?"}</span>
                <span className="bw-qsearch-body">
                  <span className="bw-qsearch-name">{m.name}</span>
                  <span className="bw-qsearch-meta">
                    Zi. <strong>{m.zimmer}</strong> · {m.alter} J. · PG {m.pflegegrad}
                  </span>
                </span>
                {m.id === currentId && <Icon name="check" size={12} />}
              </button>
            );
          })}
        </div>
      )}
      {matches.length === 0 && (
        <div className="bw-qsearch-empty">Keine Treffer</div>
      )}
    </div>
  );
};

const BewohnerSheet = () => {
  if (window.useStoreVersion) window.useStoreVersion();

  const [bid, setBid] = React.useState(null);
  const [tab, setTab] = React.useState("uebersicht");
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [searchQuery, setSearchQuery] = React.useState("");
  const sheetRef = React.useRef(null);

  React.useEffect(() => {
    const onOpen = (e) => {
      const id = e?.detail?.id;
      if (!id) return;
      setBid(id);
      setTab("uebersicht");
    };
    const onDoc = (e) => {
      const el = e.target.closest("[data-bewohner]");
      if (!el) return;
      const id = el.getAttribute("data-bewohner");
      if (!id) return;
      e.preventDefault();
      e.stopPropagation();
      setBid(id);
      setTab("uebersicht");
    };
    window.addEventListener("medlink:openBewohner", onOpen);
    document.addEventListener("click", onDoc, true);
    return () => {
      window.removeEventListener("medlink:openBewohner", onOpen);
      document.removeEventListener("click", onDoc, true);
    };
  }, []);

  // Liste der Bewohner im aktuellen Heim-Kontext (für Prev/Next-Navigation)
  const scopedList = React.useMemo(() => {
    const all = window.BEWOHNER || [];
    if (!bid) return all;
    const current = all.find((x) => x.id === bid);
    if (!current) return all;
    // Gleiche Heim-Zugehörigkeit → alphabetisch im Heim
    return all
      .filter((x) => x.heim === current.heim)
      .slice()
      .sort((a, z) => a.name.localeCompare(z.name, "de"));
  }, [bid]);

  const navigateTo = React.useCallback((direction) => {
    const idx = scopedList.findIndex((x) => x.id === bid);
    if (idx < 0) return;
    const next = scopedList[(idx + direction + scopedList.length) % scopedList.length];
    if (next && next.id !== bid) {
      setBid(next.id);
      setTab("uebersicht");
      window.dispatchEvent(new CustomEvent("medlink:openBewohner", { detail: { id: next.id } }));
    }
  }, [bid, scopedList]);

  // Touch-Swipe für Mobile (horizontal, Prev/Next)
  const touchRef = React.useRef(null);
  React.useEffect(() => {
    if (!bid || !sheetRef.current) return;
    const el = sheetRef.current;
    let startX = 0, startY = 0, dx = 0, active = false, horiz = false;
    const onStart = (e) => {
      if (e.touches.length !== 1) return;
      startX = e.touches[0].clientX;
      startY = e.touches[0].clientY;
      dx = 0; active = true; horiz = false;
    };
    const onMove = (e) => {
      if (!active || e.touches.length !== 1) return;
      const x = e.touches[0].clientX - startX;
      const y = e.touches[0].clientY - startY;
      if (!horiz && (Math.abs(x) > 8 || Math.abs(y) > 8)) {
        horiz = Math.abs(x) > Math.abs(y);
      }
      dx = x;
    };
    const onEnd = () => {
      if (active && horiz) {
        if (dx < -80) navigateTo(1);
        else if (dx > 80) navigateTo(-1);
      }
      active = false; horiz = false; dx = 0;
    };
    // Nur auf den Header-Bereich registrieren, damit Scrollen in Body nicht stört
    const headEl = el.querySelector(".bw-head");
    const target = headEl || el;
    target.addEventListener("touchstart", onStart, { passive: true });
    target.addEventListener("touchmove", onMove, { passive: true });
    target.addEventListener("touchend", onEnd, { passive: true });
    return () => {
      target.removeEventListener("touchstart", onStart);
      target.removeEventListener("touchmove", onMove);
      target.removeEventListener("touchend", onEnd);
    };
  }, [bid, navigateTo]);

  React.useEffect(() => {
    if (!bid) return;
    const onKey = (e) => {
      if (e.key === "Escape") {
        if (searchOpen) { setSearchOpen(false); setSearchQuery(""); return; }
        setBid(null);
        window.dispatchEvent(new CustomEvent("medlink:closeBewohner"));
        return;
      }
      // Strg/Cmd+F öffnet Quick-Search
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "f") {
        e.preventDefault();
        setSearchOpen(true);
        return;
      }
      // Ignore if typing in input/textarea
      if (["INPUT","TEXTAREA"].includes(e.target.tagName)) return;
      if (e.key === "ArrowLeft") { e.preventDefault(); navigateTo(-1); }
      if (e.key === "ArrowRight") { e.preventDefault(); navigateTo(1); }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [bid, navigateTo, searchOpen]);

  if (!bid) return null;

  const b = (window.BEWOHNER || []).find((x) => x.id === bid);
  if (!b) return null;

  const currentIdx = scopedList.findIndex((x) => x.id === bid);
  const canPrev = scopedList.length > 1;
  const canNext = scopedList.length > 1;

  const heim = (window.HEIMS || []).find((h) => h.id === b.heim);
  const arzt = (window.DOCTORS || []).find((d) => d.id === b.arzt);
  const plan = (window.MEDPLAN || {})[bid] || [];
  const vitals = (window.VITALS || {})[bid];
  const anfragen = (window.ANFRAGEN || []).filter((a) => a.bewohner === bid);
  const visiten = (window.VISITEN || []).filter((v) => (v.bewohner || []).includes(bid));
  const therapien = (window.THERAPIEN || []).filter((t) => t.bewohner === bid);
  const audit = (window.AUDIT || []).filter((a) => a.target && a.target.includes(b.name.split(",")[0])).slice(0, 8);

  const counts = {
    offen: anfragen.filter((a) => a.status === "offen" || a.status === "bearbeitung").length,
    plan: plan.length,
    visiten: visiten.filter((v) => v.status === "geplant").length,
  };

  const close = () => {
    setBid(null);
    window.dispatchEvent(new CustomEvent("medlink:closeBewohner"));
  };

  const sparkBP = vitals?.bp
    ? vitals.bp.map(([s]) => s)
    : null;
  const sparkPuls = vitals?.puls || null;
  const sparkGlu = vitals?.glucose || null;
  const sparkNrs = vitals?.nrs || null;

  return (
    <>
      <div className="bw-backdrop" onClick={close} />
      <aside
        ref={sheetRef}
        className="bw-sheet"
        onClick={(e) => e.stopPropagation()}
        role="dialog"
        aria-label={`Profil von ${b.name}`}
      >
        <div className="bw-head">
          <div className="bw-nav">
            <button
              className="bw-nav-btn"
              onClick={() => navigateTo(-1)}
              disabled={!canPrev}
              aria-label="Vorheriger Bewohner"
              title="Vorheriger Bewohner (←)"
            >
              <Icon name="chevronRight" size={14} style={{ transform: "rotate(180deg)" }} />
            </button>
            <span className="bw-nav-pos" title={`Heim: ${heim?.name}`}>
              {currentIdx + 1} / {scopedList.length}
            </span>
            <button
              className="bw-nav-btn"
              onClick={() => navigateTo(1)}
              disabled={!canNext}
              aria-label="Nächster Bewohner"
              title="Nächster Bewohner (→)"
            >
              <Icon name="chevronRight" size={14} />
            </button>
            <button
              className="bw-nav-btn"
              onClick={() => setSearchOpen((v) => !v)}
              aria-label="Bewohner suchen"
              title="Suchen (Strg+F)"
              data-active={searchOpen}
            >
              <Icon name="search" size={13} />
            </button>
          </div>
          {searchOpen && (
            <BwQuickSearch
              query={searchQuery}
              setQuery={setSearchQuery}
              onSelect={(id) => {
                setBid(id);
                setTab("uebersicht");
                setSearchOpen(false);
                setSearchQuery("");
                window.dispatchEvent(new CustomEvent("medlink:openBewohner", { detail: { id } }));
              }}
              onClose={() => { setSearchOpen(false); setSearchQuery(""); }}
              currentId={bid}
            />
          )}
          <div className="bw-avatar"><Avatar name={b.name} size={42} /></div>
          <div className="bw-id">
            <div className="bw-name">{b.name}</div>
            <div className="bw-sub">
              {heim?.name} · Zimmer <span className="mono">{b.zimmer}</span> · {b.alter} J.
            </div>
            <div className="bw-chips">
              <span className="chip"><Icon name="shield" size={10} /> Pflegegrad {b.pflegegrad}</span>
              {counts.offen > 0 && <span className="chip danger"><Icon name="inbox" size={10} /> {counts.offen} offen</span>}
              <span className="chip muted"><Icon name="stethoscope" size={10} /> {arzt?.name.replace("Dr. med. ", "Dr. ")}</span>
            </div>
          </div>
          <button className="bw-close" onClick={close} aria-label="Schließen"><Icon name="x" size={14} /></button>
        </div>

        <div className="bw-tabs">
          {[
            ["uebersicht", "Übersicht", "eye"],
            ["medplan", "Medikation", "pill", plan.length],
            ["vitals", "Vitalwerte", "activity"],
            ["anfragen", "Anfragen", "inbox", anfragen.length],
            ["visiten", "Visite/Therapie", "stethoscope", visiten.length + therapien.length],
            ["historie", "Historie", "clock"],
          ].map(([id, label, icon, badge]) => (
            <button key={id} className={`bw-tab ${tab === id ? "active" : ""}`} onClick={() => setTab(id)}>
              <Icon name={icon} size={12} />
              <span>{label}</span>
              {badge != null && badge > 0 && <span className="bw-badge">{badge}</span>}
            </button>
          ))}
        </div>

        <div className="bw-body">
          {tab === "uebersicht" && (
            <div className="bw-section">
              <div className="bw-grid2">
                <div className="card">
                  <div className="card-head">Stammdaten</div>
                  <div className="card-body">
                    <dl className="kv">
                      <dt>Geboren</dt><dd>{b.geb} <span className="muted">· {b.alter} J.</span></dd>
                      <dt>Geschlecht</dt><dd>{b.geschlecht === "m" ? "männlich" : b.geschlecht === "w" ? "weiblich" : "divers"}</dd>
                      <dt>Eingezogen</dt><dd>{b.eingezogen || "—"}</dd>
                      <dt>Kasse</dt><dd>{b.kasse || "—"}</dd>
                      {b.kontakt && <><dt>Angehöriger</dt><dd>{b.kontakt}</dd></>}
                      <dt>Arzt</dt><dd>{arzt?.name} <span className="muted">· {arzt?.spec}</span></dd>
                      <dt>Heim</dt><dd>{heim?.name} <span className="muted">· {heim?.city}</span></dd>
                    </dl>
                  </div>
                </div>
                <div className="card">
                  <div className="card-head">Klinisch</div>
                  <div className="card-body col" style={{ gap: 8, fontSize: 12 }}>
                    <div>
                      <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Diagnosen</div>
                      <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                        {b.diagnosen.map((d) => <span key={d} className="badge-pill">{d}</span>)}
                      </div>
                    </div>
                    <div>
                      <div className="muted" style={{ fontSize: 11, marginBottom: 4 }}>Allergien</div>
                      <div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
                        {b.allergien && b.allergien.length ? b.allergien.map((a) => <span key={a} className="badge-pill abgelehnt">{a}</span>) : <span className="muted" style={{ fontSize: 11 }}>keine dokumentiert</span>}
                      </div>
                    </div>
                    <div className="row" style={{ justifyContent: "space-between" }}>
                      <span>Medikationsplan</span>
                      <span className="mono">{plan.length} Wirkstoffe</span>
                    </div>
                    <div className="row" style={{ justifyContent: "space-between" }}>
                      <span>Offene Anfragen</span>
                      <span className="mono">{counts.offen}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bw-actions">
                <Btn icon="plus" variant="primary" onClick={() => window.dispatchEvent(new CustomEvent("medlink:toast", { detail: `Neue Anfrage für ${b.name.split(",")[0]}` }))}>Neue Anfrage</Btn>
                <Btn icon="stethoscope" onClick={() => window.dispatchEvent(new CustomEvent("medlink:toast", { detail: "Visite-Planer geöffnet" }))}>Visite planen</Btn>
                <Btn icon="activity" onClick={() => window.dispatchEvent(new CustomEvent("medlink:toast", { detail: "Vitalwert-Erfassung gestartet" }))}>Vitals erfassen</Btn>
                <Btn icon="mic" onClick={() => window.dispatchEvent(new CustomEvent("medlink:openvoice"))}>Sprach-Notiz</Btn>
                <Btn icon="printer">Medikationsplan drucken</Btn>
              </div>
            </div>
          )}

          {tab === "medplan" && (
            <div className="bw-section">
              <div className="card">
                <div className="card-head">
                  Aktueller Medikationsplan
                  <div className="right">
                    <Btn icon="printer">Drucken</Btn>
                    <Btn icon="plus" variant="primary">Medikament hinzufügen</Btn>
                  </div>
                </div>
                {plan.length === 0 ? (
                  <div className="card-body" style={{ fontSize: 12, color: "var(--fg-subtle)", textAlign: "center", padding: 20 }}>
                    Kein aktiver Medikationsplan hinterlegt.
                  </div>
                ) : (
                  <table className="table">
                    <thead>
                      <tr>
                        <th style={{ paddingLeft: 16 }}>Medikament</th>
                        <th style={{ width: 110 }}>Dosis</th>
                        <th style={{ width: 90 }}>Typ</th>
                        <th style={{ width: 110 }}>Seit</th>
                        <th>Grund</th>
                      </tr>
                    </thead>
                    <tbody>
                      {plan.map((m, i) => (
                        <tr key={i}>
                          <td style={{ paddingLeft: 16 }} className="mono">{m.med}</td>
                          <td className="mono">{m.dosis}</td>
                          <td><span className="badge-pill">{m.typ}</span></td>
                          <td className="muted">{m.seit}</td>
                          <td>
                            {m.grund}
                            {m.hinweis && <div className="muted" style={{ fontSize: 11, marginTop: 2 }}>⚠ {m.hinweis}</div>}
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>
            </div>
          )}

          {tab === "vitals" && (
            <div className="bw-section">
              {!vitals ? (
                <div className="card">
                  <div className="card-body" style={{ fontSize: 12, color: "var(--fg-subtle)", textAlign: "center", padding: 28 }}>
                    Keine Vitalwerte erfasst · letzte 14 Tage.
                  </div>
                </div>
              ) : (
                <div className="bw-grid2">
                  {sparkBP && (
                    <div className="card">
                      <div className="card-head">Blutdruck (syst.)</div>
                      <div className="card-body col" style={{ gap: 6 }}>
                        <div className="row" style={{ justifyContent: "space-between" }}>
                          <span className="mono" style={{ fontSize: 20, fontWeight: 600 }}>{vitals.bp[vitals.bp.length - 1][0]}/{vitals.bp[vitals.bp.length - 1][1]}</span>
                          <span className="muted" style={{ fontSize: 11 }}>mmHg · heute</span>
                        </div>
                        <Sparkline points={sparkBP} w={240} h={44} />
                        <div className="muted" style={{ fontSize: 11 }}>Ø 14 Tage: {Math.round(sparkBP.reduce((s, x) => s + x, 0) / sparkBP.length)} mmHg</div>
                      </div>
                    </div>
                  )}
                  {sparkPuls && (
                    <div className="card">
                      <div className="card-head">Puls</div>
                      <div className="card-body col" style={{ gap: 6 }}>
                        <div className="row" style={{ justifyContent: "space-between" }}>
                          <span className="mono" style={{ fontSize: 20, fontWeight: 600 }}>{sparkPuls[sparkPuls.length - 1]}</span>
                          <span className="muted" style={{ fontSize: 11 }}>/min · heute</span>
                        </div>
                        <Sparkline points={sparkPuls} w={240} h={44} />
                        <div className="muted" style={{ fontSize: 11 }}>Ø 14 Tage: {Math.round(sparkPuls.reduce((s, x) => s + x, 0) / sparkPuls.length)} /min</div>
                      </div>
                    </div>
                  )}
                  {sparkGlu && (
                    <div className="card">
                      <div className="card-head">Blutzucker</div>
                      <div className="card-body col" style={{ gap: 6 }}>
                        <div className="row" style={{ justifyContent: "space-between" }}>
                          <span className="mono" style={{ fontSize: 20, fontWeight: 600 }}>{sparkGlu[sparkGlu.length - 1]}</span>
                          <span className="muted" style={{ fontSize: 11 }}>mg/dl · heute</span>
                        </div>
                        <Sparkline points={sparkGlu} w={240} h={44} />
                        <div className="muted" style={{ fontSize: 11 }}>Ø 14 Tage: {Math.round(sparkGlu.reduce((s, x) => s + x, 0) / sparkGlu.length)} mg/dl</div>
                      </div>
                    </div>
                  )}
                  {sparkNrs && (
                    <div className="card">
                      <div className="card-head">Schmerz (NRS)</div>
                      <div className="card-body col" style={{ gap: 6 }}>
                        <div className="row" style={{ justifyContent: "space-between" }}>
                          <span className="mono" style={{ fontSize: 20, fontWeight: 600 }}>{sparkNrs[sparkNrs.length - 1]}/10</span>
                          <span className="muted" style={{ fontSize: 11 }}>heute morgen</span>
                        </div>
                        <Sparkline points={sparkNrs} w={240} h={44} />
                        <div className="muted" style={{ fontSize: 11 }}>Ø 14 Tage: {(sparkNrs.reduce((s, x) => s + x, 0) / sparkNrs.length).toFixed(1)}/10</div>
                      </div>
                    </div>
                  )}
                </div>
              )}
              <div className="bw-actions">
                <Btn icon="plus" variant="primary" onClick={() => window.dispatchEvent(new CustomEvent("medlink:toast", { detail: "Vitalwerte-Erfassung gestartet" }))}>Vitals erfassen</Btn>
                <Btn icon="barChart">Trend-Report</Btn>
                <Btn icon="printer">Kurve drucken</Btn>
              </div>
            </div>
          )}

          {tab === "anfragen" && (
            <div className="bw-section">
              <div className="card">
                <div className="card-head">Medikamenten-Anfragen · {anfragen.length}</div>
                {anfragen.length === 0 ? (
                  <div className="card-body" style={{ fontSize: 12, color: "var(--fg-subtle)", textAlign: "center", padding: 20 }}>
                    Noch keine Anfragen für {b.name.split(",")[0]}.
                  </div>
                ) : (
                  <table className="table">
                    <thead>
                      <tr>
                        <th style={{ paddingLeft: 16, width: 90 }}>#</th>
                        <th>Medikament</th>
                        <th style={{ width: 100 }}>Typ</th>
                        <th style={{ width: 110 }}>Erstellt</th>
                        <th style={{ width: 130 }}>Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      {anfragen.map((a) => (
                        <tr key={a.id}>
                          <td style={{ paddingLeft: 16 }}><span className="mono muted">{a.id}</span></td>
                          <td className="mono">{a.med}</td>
                          <td><TypBadge typ={a.typ} /></td>
                          <td className="muted">{a.erstellt}</td>
                          <td><StatusBadge status={a.status} /></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                )}
              </div>
            </div>
          )}

          {tab === "visiten" && (
            <div className="bw-section">
              <div className="card">
                <div className="card-head">Visiten</div>
                <div className="card-body col" style={{ gap: 6, fontSize: 12 }}>
                  {visiten.length === 0 ? (
                    <div className="muted" style={{ textAlign: "center", padding: 10 }}>Keine Visiten eingetragen.</div>
                  ) : visiten.map((v) => (
                    <div key={v.id} className="row" style={{ justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid var(--border)" }}>
                      <div>
                        <div style={{ fontWeight: 500 }}>{v.datum} · {v.zeit}</div>
                        <div className="muted" style={{ fontSize: 11 }}>{(window.DOCTORS || []).find((d) => d.id === v.arzt)?.name} · {v.id}</div>
                      </div>
                      <StatusBadge status={v.status === "geplant" ? "offen" : "freigegeben"} />
                    </div>
                  ))}
                </div>
              </div>
              <div className="card">
                <div className="card-head">Therapien</div>
                <div className="card-body col" style={{ gap: 6, fontSize: 12 }}>
                  {therapien.length === 0 ? (
                    <div className="muted" style={{ textAlign: "center", padding: 10 }}>Keine Therapien eingetragen.</div>
                  ) : therapien.map((t) => (
                    <div key={t.id} className="row" style={{ justifyContent: "space-between", padding: "6px 0", borderBottom: "1px solid var(--border)" }}>
                      <div>
                        <div style={{ fontWeight: 500 }}>{t.typ} · {t.datum} · {t.zeit}</div>
                        <div className="muted" style={{ fontSize: 11 }}>{t.therapeut} · {t.id}</div>
                      </div>
                      <StatusBadge status={t.status === "geplant" ? "offen" : "freigegeben"} />
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {tab === "historie" && (
            <div className="bw-section">
              <div className="card">
                <div className="card-head">Audit-Einträge · diesen Bewohner betreffend</div>
                <div className="card-body col" style={{ gap: 0, fontSize: 12 }}>
                  {audit.length === 0 ? (
                    <div className="muted" style={{ textAlign: "center", padding: 16 }}>Keine Einträge für diesen Bewohner im aktuellen Zeitfenster.</div>
                  ) : audit.map((e, i) => (
                    <div key={i} className="row" style={{ justifyContent: "space-between", padding: "8px 0", borderBottom: i < audit.length - 1 ? "1px solid var(--border)" : "none" }}>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontWeight: 500 }}>{e.action}</div>
                        <div className="muted" style={{ fontSize: 11 }}>{e.target}</div>
                      </div>
                      <div className="muted mono" style={{ fontSize: 11, whiteSpace: "nowrap" }}>{e.ts}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </div>
      </aside>
    </>
  );
};

window.BewohnerSheet = BewohnerSheet;