// Heim portal additional views: Rezepte, Reports, Audit, Benutzer, Einstellungen.
// Each is fully populated and every button triggers a real handler.

const RezepteView = ({ scoped, actions }) => {
  const [q, setQ] = React.useState("");
  const [statusFilter, setStatusFilter] = React.useState("alle");
  const [selected, setSelected] = React.useState(window.REZEPTE[0]?.id);

  const list = window.REZEPTE.filter(r => {
    if (statusFilter !== "alle" && r.status !== statusFilter) return false;
    if (q && !(r.id + r.med + (BEWOHNER.find(b => b.id === r.bewohner)?.name || "")).toLowerCase().includes(q.toLowerCase())) return false;
    return true;
  });
  const current = list.find(r => r.id === selected) || list[0];
  const bew = current && BEWOHNER.find(b => b.id === current.bewohner);
  const arzt = current && DOCTORS.find(d => d.id === current.arzt);
  const apo = current && PHARMACIES.find(p => p.id === current.apotheke);

  return (
    <>
      <div className="content-head">
        <div>
          <h1>Rezepte</h1>
          <div className="sub">eRezepte, Papier-Rezepte und BtM-Rezepte · {list.length} Einträge</div>
        </div>
        <div className="right">
          <Btn icon="printer" onClick={() => actions.toast("Rezept-Liste als PDF generiert")}>Drucken</Btn>
          <Btn icon="download" onClick={() => actions.toast("CSV-Export gestartet")}>Export</Btn>
          <Btn variant="primary" icon="plus" onClick={() => actions.toast("Neues eRezept angefordert")}>eRezept anfordern</Btn>
        </div>
      </div>
      <div className="tabs">
        {[
          { id: "alle",        label: "Alle",              count: REZEPTE.length },
          { id: "offen",       label: "Offen",             count: REZEPTE.filter(r => r.status === "offen").length },
          { id: "in Lieferung",label: "In Lieferung",      count: REZEPTE.filter(r => r.status === "in Lieferung").length },
          { id: "eingelöst",   label: "Eingelöst",         count: REZEPTE.filter(r => r.status === "eingelöst").length },
          { id: "wartet auf Freigabe", label: "BtM-Freigabe", count: REZEPTE.filter(r => r.status === "wartet auf Freigabe").length },
        ].map(t => (
          <button key={t.id} className={`tab ${statusFilter === t.id ? "active" : ""}`} onClick={() => setStatusFilter(t.id)}>
            {t.label} <span className="count">{t.count}</span>
          </button>
        ))}
      </div>
      <div className="toolbar">
        <div className="search-inp" style={{display: "flex", alignItems: "center", gap: 6, flex: 1, maxWidth: 320, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", padding: "6px 10px"}}>
          <Icon name="search" size={12} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Rezept-ID, Medikament, Bewohner…" style={{border: 0, outline: "none", background: "transparent", flex: 1, fontSize: 12}} />
        </div>
        <span className="chip" style={{fontSize: 11}}>GKV: 186 · Privat: 12</span>
      </div>
      <div className="split">
        <div className="master">
          {list.length === 0 ? (
            <EmptyState
              icon="pill"
              title="Keine Rezepte gefunden"
              sub={q ? `Kein Treffer für „${q}". Suche zurücksetzen oder einen anderen Filter wählen.` : "Für diesen Filter sind keine Rezepte vorhanden."}
              cta={q ? <Btn icon="x" onClick={() => setQ("")}>Suche zurücksetzen</Btn> : null}
            />
          ) : (
          <table className="table">
            <thead><tr><th style={{paddingLeft: 16}}>ID</th><th>Typ</th><th>Bewohner</th><th>Medikament</th><th>Apotheke</th><th>Status</th><th>Gültig bis</th></tr></thead>
            <tbody>
              {list.map(r => {
                const b = BEWOHNER.find(x => x.id === r.bewohner);
                return (
                  <tr key={r.id} className={current?.id === r.id ? "selected" : ""} onClick={() => setSelected(r.id)}>
                    <td className="mono muted" style={{paddingLeft: 16}}>{r.id}</td>
                    <td><span className="badge-pill" style={r.typ === "BtM-Rezept" ? {background: "oklch(94% 0.04 25)", color: "var(--danger)", borderColor: "oklch(85% 0.06 25)"} : {}}>{r.typ}</span></td>
                    <td>{b?.name}</td>
                    <td>{r.med}</td>
                    <td className="muted">{PHARMACIES.find(p => p.id === r.apotheke)?.name}</td>
                    <td><StatusBadge status={r.status === "eingelöst" ? "geliefert" : r.status === "offen" ? "offen" : r.status === "in Lieferung" ? "bearbeitung" : "offen"} /></td>
                    <td className="mono muted">{r.gueltig_bis}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
          )}
        </div>
        {current && bew && (
          <div className="detail">
            <div className="detail-head">
              <div className="eyebrow row" style={{justifyContent: "space-between"}}>
                <span className="mono">{current.id} · {current.typ}</span>
                <StatusBadge status={current.status === "eingelöst" ? "geliefert" : current.status === "offen" ? "offen" : "bearbeitung"} />
              </div>
              <h2>{current.med}</h2>
              <div className="muted" style={{fontSize: 12}}>{current.menge} · für {bew.name}</div>
              <div style={{marginTop: 14, display: "flex", gap: 6, flexWrap: "wrap"}}>
                <Btn variant="primary" icon="download" onClick={() => actions.toast(`${current.id} als PDF generiert`)}>PDF anzeigen</Btn>
                <Btn icon="mail" onClick={() => actions.toast(`${current.id} an ${apo?.name} gesendet`)}>An Apotheke senden</Btn>
                <Btn icon="copy" onClick={() => actions.toast("ID in Zwischenablage kopiert")}>ID kopieren</Btn>
                <Btn icon="x" onClick={() => actions.confirm({
                  title: "Rezept stornieren?",
                  message: `Rezept ${current.id} (${current.med}) wirklich stornieren? Apotheke wird informiert.`,
                  danger: true,
                  confirmLabel: "Stornieren",
                  onConfirm: () => actions.toast(`${current.id} storniert`)
                })}>Stornieren</Btn>
              </div>
            </div>
            <div className="detail-section">
              <h3>Rezept-Details</h3>
              <dl className="kv">
                <dt>Ausstellender Arzt</dt><dd>{arzt?.name} · {arzt?.spec}</dd>
                <dt>LANR</dt><dd className="mono">{arzt?.lanr}</dd>
                <dt>Ausgestellt</dt><dd>{current.ausgestellt}</dd>
                <dt>Gültig bis</dt><dd>{current.gueltig_bis}</dd>
                <dt>Muster</dt><dd>{current.muster}</dd>
                <dt>Apotheke</dt><dd>{apo?.name} · {apo?.city}</dd>
                <dt>Kostenträger</dt><dd>{bew.kasse}</dd>
              </dl>
            </div>
            <div className="detail-section">
              <h3>Bewohner</h3>
              <div style={{display: "flex", gap: 10, alignItems: "center"}}>
                <Avatar name={bew.name} size={40} />
                <div style={{flex: 1}}>
                  <div style={{fontWeight: 500}}>{bew.name}</div>
                  <div className="muted" style={{fontSize: 12}}>{bew.zimmer} · {HEIMS.find(h => h.id === bew.heim)?.name} · Pflegegrad {bew.pflegegrad}</div>
                </div>
                <Btn icon="chevronRight" onClick={() => actions.navigate({ view: "bewohner", bewohnerId: bew.id })}>Zum Profil</Btn>
              </div>
            </div>
            <div className="detail-section">
              <h3>Abrechnung</h3>
              <dl className="kv">
                <dt>Zuzahlung</dt><dd>€ 5,00</dd>
                <dt>Apothekenpreis</dt><dd>€ 48,12</dd>
                <dt>GKV-Anteil</dt><dd>€ 43,12</dd>
              </dl>
            </div>
          </div>
        )}
      </div>
    </>
  );
};

const ReportsView = ({ scoped, heim, actions }) => {
  const [period, setPeriod] = React.useState("6w");
  const data = window.REPORT_WEEKLY;
  const maxAnf = Math.max(...data.map(d => d.anfragen));
  const maxTta = Math.max(...data.map(d => d.ttaMin));

  return (
    <>
      <div className="content-head">
        <div>
          <h1>Reports & Analytics</h1>
          <div className="sub">{heim?.name || "Alle Heime"} · Zeitraum: letzte 6 Wochen</div>
        </div>
        <div className="right">
          <div className="seg" style={{display: "inline-flex", background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", padding: 2}}>
            {["4w","6w","12w","YTD"].map(p => (
              <button key={p} onClick={() => setPeriod(p)} style={{padding: "4px 10px", fontSize: 12, border: 0, background: period === p ? "var(--bg)" : "transparent", borderRadius: 4, cursor: "pointer", color: period === p ? "var(--fg)" : "var(--fg-muted)"}}>{p}</button>
            ))}
          </div>
          <Btn icon="printer" onClick={() => actions.toast("PDF-Bericht wird generiert …")}>PDF</Btn>
          <Btn variant="primary" icon="download" onClick={() => actions.toast("CSV-Export · reports-2026-04.csv")}>Export CSV</Btn>
        </div>
      </div>

      <div className="kpi-grid">
        <div className="kpi-card">
          <div className="label">Anfragen gesamt</div>
          <div className="value">282</div>
          <div className="sub">▲ 12% vs. Vorperiode</div>
        </div>
        <div className="kpi-card">
          <div className="label">Freigabe-Quote</div>
          <div className="value">92%</div>
          <div className="sub">▲ 3 pp</div>
        </div>
        <div className="kpi-card">
          <div className="label">Ø Time-to-Approval</div>
          <div className="value">1h 54min</div>
          <div className="sub">▼ 36min</div>
        </div>
        <div className="kpi-card">
          <div className="label">Ablehnungsrate</div>
          <div className="value">3,2%</div>
          <div className="sub">11 Anfragen</div>
        </div>
      </div>

      <div className="detail-section" style={{padding: "16px 24px"}}>
        <h3 style={{marginBottom: 12}}>Anfragen pro Woche</h3>
        <div style={{display: "flex", alignItems: "flex-end", gap: 14, height: 180, padding: "8px 0", borderBottom: "1px solid var(--border)"}}>
          {data.map(d => (
            <div key={d.week} style={{flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 6}}>
              <div style={{fontSize: 10.5, color: "var(--fg-subtle)"}}>{d.anfragen}</div>
              <div style={{width: "100%", height: `${(d.anfragen / maxAnf) * 140}px`, background: "linear-gradient(180deg, var(--accent), var(--accent-hover))", borderRadius: "4px 4px 0 0", cursor: "pointer"}} onClick={() => actions.toast(`${d.week}: ${d.anfragen} Anfragen · ${d.freigegeben} freigegeben`)} title={`${d.freigegeben} freigegeben · ${d.abgelehnt} abgelehnt`} />
              <div style={{fontSize: 11, color: "var(--fg-muted)"}}>{d.week}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="detail-section" style={{padding: "16px 24px"}}>
        <h3 style={{marginBottom: 12}}>Top Medikamente (30 Tage)</h3>
        <div style={{display: "flex", flexDirection: "column", gap: 6}}>
          {window.TOP_MEDS.map(m => (
            <div key={m.med} onClick={() => actions.toast(`${m.med}: ${m.n} Anfragen in 30 Tagen`)} style={{display: "grid", gridTemplateColumns: "180px 1fr 40px", gap: 10, alignItems: "center", padding: "4px 0", cursor: "pointer"}}>
              <span style={{fontSize: 12}}>{m.med}</span>
              <div style={{height: 8, background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: 4, overflow: "hidden"}}>
                <div style={{height: "100%", width: `${(m.n / window.TOP_MEDS[0].n) * 100}%`, background: "var(--accent)"}} />
              </div>
              <span className="mono" style={{fontSize: 11, textAlign: "right", color: "var(--fg-muted)"}}>{m.n}</span>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

const AuditView = ({ actions }) => {
  const [filter, setFilter] = React.useState("alle");
  const list = window.AUDIT.filter(a => filter === "alle" || a.heim === filter);
  return (
    <>
      <div className="content-head">
        <div>
          <h1>Audit-Log</h1>
          <div className="sub">Unveränderliche, manipulationssichere Ereignis-Historie · DSGVO Art. 30</div>
        </div>
        <div className="right">
          <Btn icon="download" onClick={() => actions.toast("Audit-Log als CSV exportiert")}>Export</Btn>
          <Btn icon="shield" onClick={() => actions.toast("Integritäts-Prüfung: OK · SHA-256 validiert")}>Integrität prüfen</Btn>
        </div>
      </div>
      <div className="toolbar">
        <div className="seg" style={{display: "inline-flex", background: "var(--bg-raised)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", padding: 2}}>
          {[{id: "alle", label: "Alle Heime"}, ...HEIMS.slice(1).map(h => ({id: h.id, label: h.mark}))].map(f => (
            <button key={f.id} onClick={() => setFilter(f.id)} style={{padding: "4px 10px", fontSize: 11.5, border: 0, background: filter === f.id ? "var(--bg)" : "transparent", borderRadius: 4, cursor: "pointer", color: filter === f.id ? "var(--fg)" : "var(--fg-muted)"}}>{f.label}</button>
          ))}
        </div>
      </div>
      {list.length === 0 ? (
        <EmptyState
          icon="shield"
          title="Keine Audit-Einträge"
          sub={`Für ${filter === "alle" ? "diesen Zeitraum" : HEIMS.find(h => h.id === filter)?.name + " in diesem Zeitraum"} liegen keine Ereignisse vor.`}
          cta={filter !== "alle" ? <Btn icon="x" onClick={() => setFilter("alle")}>Filter zurücksetzen</Btn> : null}
        />
      ) : (
      <table className="table">
        <thead><tr><th style={{paddingLeft: 16}}>Zeitstempel</th><th>Benutzer</th><th>Aktion</th><th>Ziel</th><th>Heim</th><th>IP</th></tr></thead>
        <tbody>
          {list.map((a, i) => (
            <tr key={i} onClick={() => actions.detail({
              title: `Audit-Eintrag #${String(i + 1).padStart(5, "0")}`,
              subtitle: a.ts,
              body: (
                <div>
                  <dl className="kv">
                    <dt>Benutzer</dt><dd>{a.who}</dd>
                    <dt>Aktion</dt><dd><span className="badge-pill">{a.action}</span></dd>
                    <dt>Ziel</dt><dd>{a.target}</dd>
                    <dt>Heim</dt><dd>{HEIMS.find(h => h.id === a.heim)?.name || "—"}</dd>
                    <dt>IP-Adresse</dt><dd className="mono">{a.ip}</dd>
                    <dt>User-Agent</dt><dd style={{fontSize: 11}}>Mozilla/5.0 (Windows NT 10.0) · Chrome 124</dd>
                    <dt>Session-ID</dt><dd className="mono">sess_8af1c2{i}{i}</dd>
                    <dt>Hash (SHA-256)</dt><dd className="mono" style={{fontSize: 11}}>f2c8…{(i*7919).toString(16).slice(0,8)}</dd>
                  </dl>
                </div>
              ),
              footer: (close) => <Btn onClick={close}>Schließen</Btn>
            })} style={{cursor: "pointer"}}>
              <td className="mono" style={{paddingLeft: 16, fontSize: 11}}>{a.ts}</td>
              <td>{a.who}</td>
              <td><span className="badge-pill">{a.action}</span></td>
              <td className="muted">{a.target}</td>
              <td className="mono">{a.heim}</td>
              <td className="mono" style={{fontSize: 11, color: "var(--fg-subtle)"}}>{a.ip}</td>
            </tr>
          ))}
        </tbody>
      </table>
      )}
    </>
  );
};

const BenutzerView = ({ actions }) => {
  const [q, setQ] = React.useState("");
  const list = window.BENUTZER.filter(u =>
    !q || (u.name + u.email + u.rolle).toLowerCase().includes(q.toLowerCase())
  );
  return (
    <>
      <div className="content-head">
        <div>
          <h1>Benutzer & Rollen</h1>
          <div className="sub">{BENUTZER.length} Benutzer · {BENUTZER.filter(u => u.status === "aktiv").length} aktiv · {BENUTZER.filter(u => u.mfa).length} mit 2FA</div>
        </div>
        <div className="right">
          <Btn icon="download" onClick={() => actions.toast("Benutzer-CSV exportiert")}>Export</Btn>
          <Btn icon="shield" onClick={() => actions.toast("2FA-Pflicht-Richtlinie ist aktiv")}>Richtlinien</Btn>
          <Btn variant="primary" icon="plus" onClick={() => actions.detail({
            title: "Neuen Benutzer anlegen",
            body: (
              <div style={{display: "grid", gap: 10}}>
                <label style={{display: "grid", gap: 4}}><span style={{fontSize: 11, color: "var(--fg-muted)"}}>Name</span><input className="input" placeholder="Max Mustermann" /></label>
                <label style={{display: "grid", gap: 4}}><span style={{fontSize: 11, color: "var(--fg-muted)"}}>E-Mail</span><input className="input" placeholder="max@rosenhof.de" /></label>
                <label style={{display: "grid", gap: 4}}><span style={{fontSize: 11, color: "var(--fg-muted)"}}>Rolle</span>
                  <select className="input"><option>Pflegehilfe</option><option>Pflegefachkraft</option><option>Pflegeleitung</option><option>Auszubildende</option></select>
                </label>
                <label style={{display: "flex", alignItems: "center", gap: 8, fontSize: 13}}><input type="checkbox" defaultChecked /> 2FA-Pflicht</label>
                <label style={{display: "flex", alignItems: "center", gap: 8, fontSize: 13}}><input type="checkbox" defaultChecked /> Einladungs-Mail senden</label>
              </div>
            ),
            footer: (close) => <>
              <Btn onClick={close}>Abbrechen</Btn>
              <Btn variant="primary" onClick={() => { close(); actions.toast("Benutzer eingeladen · E-Mail versendet"); }}>Anlegen & einladen</Btn>
            </>
          })}>Benutzer einladen</Btn>
        </div>
      </div>
      <div className="toolbar">
        <div className="search-inp" style={{display: "flex", alignItems: "center", gap: 6, flex: 1, maxWidth: 320, background: "var(--bg)", border: "1px solid var(--border)", borderRadius: "var(--r-md)", padding: "6px 10px"}}>
          <Icon name="search" size={12} />
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Name, E-Mail, Rolle…" style={{border: 0, outline: "none", background: "transparent", flex: 1, fontSize: 12}} />
        </div>
      </div>
      {list.length === 0 ? (
        <EmptyState
          icon="users"
          title="Keine Benutzer gefunden"
          sub={`Kein Treffer für „${q}". Suche zurücksetzen oder neuen Benutzer einladen.`}
          cta={<Btn icon="x" onClick={() => setQ("")}>Suche zurücksetzen</Btn>}
        />
      ) : (
      <table className="table">
        <thead><tr><th style={{paddingLeft: 16}}>Benutzer</th><th>Rolle</th><th>Heim</th><th>2FA</th><th>Status</th><th>Letzter Login</th><th></th></tr></thead>
        <tbody>
          {list.map(u => (
            <tr key={u.id}>
              <td style={{paddingLeft: 16}}>
                <div style={{display: "flex", alignItems: "center", gap: 10}}>
                  <Avatar name={u.name} size={28} />
                  <div>
                    <div style={{fontSize: 13, fontWeight: 500}}>{u.name}</div>
                    <div style={{fontSize: 11, color: "var(--fg-subtle)"}}>{u.email}</div>
                  </div>
                </div>
              </td>
              <td><span className="badge-pill">{u.rolle}</span></td>
              <td className="muted">{HEIMS.find(h => h.id === u.heim)?.mark}</td>
              <td>{u.mfa ? <span style={{color: "var(--ok)", fontSize: 11}}>✓ Aktiv</span> : <span style={{color: "var(--warn)", fontSize: 11}}>Fehlt</span>}</td>
              <td><StatusBadge status={u.status === "aktiv" ? "freigegeben" : "offen"} /></td>
              <td className="muted mono" style={{fontSize: 11}}>{u.letzter_login}</td>
              <td>
                <div style={{display: "flex", gap: 4}}>
                  <Btn icon="mail" onClick={() => actions.toast(`Einladung an ${u.email} neu gesendet`)}>Mail</Btn>
                  <Btn icon="shield" onClick={() => actions.confirm({
                    title: `2FA für ${u.name} zurücksetzen?`,
                    message: "Benutzer muss 2FA beim nächsten Login neu einrichten.",
                    danger: true,
                    confirmLabel: "Zurücksetzen",
                    onConfirm: () => actions.toast(`2FA für ${u.name} zurückgesetzt`)
                  })}>2FA</Btn>
                  <Btn icon="x" onClick={() => actions.confirm({
                    title: `${u.name} deaktivieren?`,
                    message: "Benutzer verliert sofort Zugang. Audit-Spuren bleiben erhalten.",
                    danger: true,
                    confirmLabel: "Deaktivieren",
                    onConfirm: () => actions.toast(`${u.name} deaktiviert`)
                  })}>Deaktivieren</Btn>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      )}
    </>
  );
};

const SettingsView = ({ actions }) => {
  const [s, setS] = React.useState(window.SETTINGS_DEFAULTS);
  const upd = (path, v) => {
    const copy = JSON.parse(JSON.stringify(s));
    const keys = path.split(".");
    let cur = copy;
    for (let i = 0; i < keys.length - 1; i++) cur = cur[keys[i]];
    cur[keys[keys.length - 1]] = v;
    setS(copy);
    actions.toast("Einstellung gespeichert");
  };
  const Row = ({ label, hint, children }) => (
    <div style={{display: "grid", gridTemplateColumns: "1fr auto", gap: 14, alignItems: "center", padding: "12px 0", borderBottom: "1px solid var(--border)"}}>
      <div>
        <div style={{fontSize: 13, fontWeight: 500}}>{label}</div>
        {hint && <div style={{fontSize: 11, color: "var(--fg-subtle)", marginTop: 2}}>{hint}</div>}
      </div>
      <div>{children}</div>
    </div>
  );
  const Toggle = ({ on, onChange }) => (
    <button onClick={() => onChange(!on)} style={{width: 36, height: 20, borderRadius: 10, border: 0, cursor: "pointer", background: on ? "var(--accent)" : "var(--border)", position: "relative", padding: 0}}>
      <span style={{position: "absolute", top: 2, left: on ? 18 : 2, width: 16, height: 16, borderRadius: 8, background: "white", transition: "left .15s"}} />
    </button>
  );

  return (
    <>
      <div className="content-head">
        <div><h1>Einstellungen</h1><div className="sub">Präferenzen dieses Heims · Maria Lehmann</div></div>
        <div className="right">
          <Btn onClick={() => { setS(window.SETTINGS_DEFAULTS); actions.toast("Zurückgesetzt"); }}>Zurücksetzen</Btn>
        </div>
      </div>
      <div style={{display: "grid", gap: 24, padding: "4px 24px 40px", maxWidth: 760}}>
        <section>
          <h3 style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--fg-muted)", margin: "16px 0 4px"}}>Benachrichtigungen</h3>
          <Row label="E-Mail bei neuen Anfragen" hint="Zusammenfassung aller neuen Anfragen">
            <Toggle on={s.benachrichtigungen.email_anfragen} onChange={(v) => upd("benachrichtigungen.email_anfragen", v)} />
          </Row>
          <Row label="E-Mail bei Eskalationen" hint="Rückfragen > 2 Stunden unbeantwortet">
            <Toggle on={s.benachrichtigungen.email_eskalation} onChange={(v) => upd("benachrichtigungen.email_eskalation", v)} />
          </Row>
          <Row label="Push-Nachrichten (Mobil)" hint="Nur für dringende Vorgänge">
            <Toggle on={s.benachrichtigungen.push_mobile} onChange={(v) => upd("benachrichtigungen.push_mobile", v)} />
          </Row>
          <Row label="Tages-Zusammenfassung" hint={`Täglich um ${s.benachrichtigungen.summary_zeit}`}>
            <Toggle on={s.benachrichtigungen.tages_summary} onChange={(v) => upd("benachrichtigungen.tages_summary", v)} />
          </Row>
        </section>

        <section>
          <h3 style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--fg-muted)", margin: "16px 0 4px"}}>Sicherheit</h3>
          <Row label="Zwei-Faktor-Authentifizierung" hint="TOTP-App oder FIDO2-Stick">
            <Toggle on={s.sicherheit.twofa} onChange={(v) => upd("sicherheit.twofa", v)} />
          </Row>
          <Row label="Single Sign-On (Azure AD)" hint="Für Mitarbeiter mit Firmenkonto">
            <Toggle on={s.sicherheit.sso} onChange={(v) => upd("sicherheit.sso", v)} />
          </Row>
          <Row label="Session-Timeout" hint="Automatisches Abmelden nach Inaktivität">
            <select value={s.sicherheit.session_min} onChange={(e) => upd("sicherheit.session_min", Number(e.target.value))} className="input" style={{width: 120}}>
              {[15, 30, 60, 120].map(n => <option key={n} value={n}>{n} Min</option>)}
            </select>
          </Row>
          <Row label="Passwort-Wechsel" hint="Intervall erzwingen">
            <select value={s.sicherheit.passwort_wechsel_tage} onChange={(e) => upd("sicherheit.passwort_wechsel_tage", Number(e.target.value))} className="input" style={{width: 120}}>
              {[60, 90, 180, 365].map(n => <option key={n} value={n}>{n} Tage</option>)}
            </select>
          </Row>
        </section>

        <section>
          <h3 style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--fg-muted)", margin: "16px 0 4px"}}>Standard-Partner</h3>
          <Row label="Standard-Apotheke" hint="Vorauswahl in neuen Anfragen">
            <select value={s.apotheke_default} onChange={(e) => upd("apotheke_default", e.target.value)} className="input" style={{width: 220}}>
              {PHARMACIES.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </Row>
          <Row label="Standard-Arzt" hint="Für neue Bewohner">
            <select value={s.arzt_default} onChange={(e) => upd("arzt_default", e.target.value)} className="input" style={{width: 260}}>
              {DOCTORS.map(d => <option key={d.id} value={d.id}>{d.name}</option>)}
            </select>
          </Row>
          <Row label="Automatische Freigabe bei Verlängerungen" hint="Nur für Dauermedikation, kein BtM, keine Dosis-Änderung">
            <Toggle on={s.automatisch_freigabe} onChange={(v) => upd("automatisch_freigabe", v)} />
          </Row>
        </section>

        <section>
          <h3 style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--fg-muted)", margin: "16px 0 4px"}}>Erscheinungsbild</h3>
          <Row label="Dunkelmodus automatisch" hint="Folgt System-Einstellung">
            <Toggle on={s.dark_auto} onChange={(v) => upd("dark_auto", v)} />
          </Row>
          <Row label="Sprache">
            <select value={s.sprache} onChange={(e) => upd("sprache", e.target.value)} className="input" style={{width: 140}}>
              <option value="de">Deutsch</option>
              <option value="en">English</option>
              <option value="tr">Türkçe</option>
            </select>
          </Row>
        </section>

        <section>
          <h3 style={{fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: "var(--fg-muted)", margin: "16px 0 4px"}}>Gefahrenzone</h3>
          <div style={{border: "1px solid oklch(85% 0.08 25)", background: "oklch(97% 0.02 25)", padding: 14, borderRadius: "var(--r-md)"}}>
            <div style={{fontSize: 13, fontWeight: 500, color: "var(--danger)", marginBottom: 4}}>Mandant löschen</div>
            <div style={{fontSize: 12, color: "var(--fg-muted)", marginBottom: 10}}>Alle Daten werden innerhalb von 30 Tagen unwiederbringlich gelöscht.</div>
            <Btn onClick={() => actions.confirm({
              title: "Mandant wirklich löschen?",
              message: "Diese Aktion kann nicht rückgängig gemacht werden. Alle Daten (Bewohner, Anfragen, Rezepte, Audit-Log) werden nach 30 Tagen gelöscht.",
              danger: true,
              confirmLabel: "Endgültig löschen",
              onConfirm: () => actions.toast("Löschprozess eingeleitet · Bestätigungs-Mail versendet")
            })} style={{background: "transparent", color: "var(--danger)", borderColor: "var(--danger)"}}>Mandant löschen</Btn>
          </div>
        </section>
      </div>
    </>
  );
};

Object.assign(window, { RezepteView, ReportsView, AuditView, BenutzerView, SettingsView });