// Admin console — MedLink GmbH (the SaaS operator).
// Answers the "who's the admin altenheim" question: MedLink's platform-level admin
// manages all Heim-Mandanten (tenants), doctors, pharmacies, system health.
const AdminPortal = ({ onExit, onEnterPortal, toastEl }) => {
  if (window.useStoreVersion) window.useStoreVersion();
  const [view, setView] = React.useState("overview");

  const nav = [
    { group: "Betrieb", items: [
      { id: "overview",   label: "Übersicht",      icon: "grid" },
      { id: "mandanten",  label: "Mandanten",      icon: "home",       badge: HEIMS.length - 1 },
      { id: "aerzte",     label: "Ärzte",          icon: "stethoscope",badge: DOCTORS.length },
      { id: "apotheken",  label: "Apotheken",      icon: "pill",       badge: PHARMACIES.length },
      { id: "nutzer",     label: "Alle Nutzer",    icon: "users",      badge: 42 },
    ]},
    { group: "System", items: [
      { id: "audit",      label: "System-Audit",   icon: "shield" },
      { id: "health",     label: "Systemstatus",   icon: "activity" },
      { id: "abrechnung", label: "Abrechnung",     icon: "barChart" },
      { id: "config",     label: "Konfiguration",  icon: "settings" },
    ]},
  ];

  return (
    <div className="admin-app">
      <div className="admin-top">
        <div className="brand">
          <span className="mark"><Icon name="heart" size={13} /></span>
          <span>MedLink</span>
          <span className="badge">Admin-Konsole</span>
        </div>
        <div className="sep" />
        <span style={{fontSize: 12, color: "oklch(70% 0.01 260)"}}>Plattform-Verwaltung · MedLink GmbH</span>
        <div className="spacer" />
        <div className="search"><Icon name="search" size={12} /> Mandanten, Nutzer, Logs… <kbd>⌘K</kbd></div>
        <button className="item" onClick={() => onEnterPortal("heim")}><Icon name="swap" size={12} /> Portal-Ansicht</button>
        <div className="sep" />
        <div className="user">
          <div className="avatar">HM</div>
          <div style={{display: "flex", flexDirection: "column", lineHeight: 1.1}}>
            <span style={{fontWeight: 500}}>Hans Mayer</span>
            <span style={{fontSize: 10, color: "oklch(65% 0.01 260)"}}>Super-Admin</span>
          </div>
          <button className="item" onClick={onExit} title="Abmelden"><Icon name="back" size={13} /></button>
        </div>
      </div>

      <div className="admin-body">
        <aside className="admin-nav">
          {nav.map(sec => (
            <div key={sec.group} style={{marginBottom: 8}}>
              <div className="nav-label">{sec.group}</div>
              {sec.items.map(it => (
                <a key={it.id} href="#"
                   className={`nav-item ${view === it.id ? "active" : ""}`}
                   onClick={(e) => { e.preventDefault(); setView(it.id); }}>
                  <Icon name={it.icon} size={14} />
                  <span className="label">{it.label}</span>
                  {it.badge != null && <span className="badge">{it.badge}</span>}
                </a>
              ))}
            </div>
          ))}
        </aside>
        <main className="admin-main">
          <div className="danger-banner">
            <Icon name="warning" size={13} />
            Sie befinden sich in der Admin-Konsole. Aktionen sind plattformweit wirksam und werden im System-Audit protokolliert.
          </div>
          {view === "overview"   && <OverviewView onEnterPortal={onEnterPortal} />}
          {view === "mandanten"  && <MandantenView onEnter={onEnterPortal} />}
          {view === "aerzte"     && <AerzteView />}
          {view === "apotheken"  && <ApothekenView />}
          {view === "nutzer"     && <NutzerView />}
          {view === "audit"      && <SysAuditView />}
          {view === "health"     && <HealthView />}
          {view === "abrechnung" && <AbrechnungView />}
          {view === "config"     && <ConfigView />}
        </main>
      </div>
      {toastEl}
    </div>
  );
};

const OverviewView = ({ onEnterPortal }) => {
  const heime = HEIMS.filter(h => h.id !== "alle");
  return (
    <>
      <div className="content-head">
        <div><h1>Plattform-Übersicht</h1><div className="sub">MedLink GmbH · Produktiv · Mandant #001–#042</div></div>
        <div className="right">
          <Btn icon="printer">Monatsbericht</Btn>
          <Btn variant="primary" icon="plus">Mandant anlegen</Btn>
        </div>
      </div>

      <div className="kpi-grid">
        <Kpi label="Aktive Mandanten"  value={heime.length} icon="home"        trend="+ 1 diesen Monat" points={[1,2,2,3,3,3,4,4]} />
        <Kpi label="Aktive Nutzer"     value="247" icon="users"                 trend="letzte 30 Tage: 189 aktiv" points={[110,140,165,180,200,220,235,247]} />
        <Kpi label="Anfragen gesamt"   value="8 412" icon="inbox"               trend="Q2: 2 108" points={[820,910,1050,1120,1240,1380,1420,1470]} />
        <Kpi label="Uptime (30 Tage)"  value="99,97%" icon="activity"           trend="SLA: 99,5%" points={[100,100,99.8,100,99.9,100,100,99.97]} />
      </div>

      <div style={{padding: "16px 24px", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 16}}>
        <div className="card">
          <div className="card-head">
            Mandanten · Nutzung
            <div className="right"><Btn sm icon="arrowRight">Alle</Btn></div>
          </div>
          <table className="table">
            <thead><tr><th>Mandant</th><th>Stadt</th><th>Bewohner</th><th>Anfragen (30d)</th><th>Aktive Nutzer</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {heime.map(h => (
                <tr key={h.id}>
                  <td><div className="row" style={{gap: 8}}><span style={{width: 22, height: 22, borderRadius: 5, background: "var(--accent-tint)", color: "var(--accent)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11, border: "1px solid var(--accent-border)"}}>{h.mark}</span>{h.name}</div></td>
                  <td className="muted">{h.city}</td>
                  <td className="num">{h.residents}</td>
                  <td className="num">{84 + h.id.length * 37}</td>
                  <td className="num">{Math.round(h.residents / 5)}</td>
                  <td><span className="badge-pill freigegeben"><Icon name="check" size={10} /> aktiv</span></td>
                  <td><Btn sm icon="eye" onClick={() => onEnterPortal("heim")}>Öffnen</Btn></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div className="col" style={{gap: 16}}>
          <div className="card">
            <div className="card-head">Systemstatus · Live</div>
            <div className="card-body col" style={{gap: 8, fontSize: 12}}>
              {[
                ["API-Gateway", "OK", "success"],
                ["PostgreSQL Primary", "OK · Replikation 2ms", "success"],
                ["Redis Cache", "OK · 94% Hit-Rate", "success"],
                ["Mail-Zustellung (KIM)", "Degraded · 1,2s Latenz", "warning"],
                ["Apotheken-API Bahnhof", "Offline", "danger"],
              ].map(([name, msg, tone]) => (
                <div key={name} className="row" style={{justifyContent: "space-between"}}>
                  <span className="row" style={{gap: 8}}>
                    <span style={{width: 8, height: 8, borderRadius: "50%", background: `var(--${tone})`}} />
                    {name}
                  </span>
                  <span className={`muted`} style={{fontSize: 11, color: tone === "danger" ? "var(--danger)" : tone === "warning" ? "var(--warning)" : "var(--fg-muted)"}}>{msg}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="card">
            <div className="card-head">Letzte Admin-Ereignisse</div>
            <div className="card-body">
              <div className="timeline">
                <TlItem t="ok"   head="Mandant 'Sonnenwiese' aktiviert" who="Hans Mayer" ts="heute · 09:12" />
                <TlItem t="info" head="Dr. Bauer: 2FA zurückgesetzt"    who="Support · Ticket #4402" ts="heute · 08:41" />
                <TlItem t="warn" head="Bahnhof-Apotheke API-Token abgelaufen" who="System"  ts="gestern · 22:00" />
                <TlItem t="ok"   head="AVV mit Haus Rosenhof gegengezeichnet" who="Legal" ts="vor 2 Tagen" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

const TlItem = ({ t, head, who, ts }) => (
  <div className={`tl-item ${t}`}>
    <div className="tl-dot"><Icon name={t === "ok" ? "check" : t === "warn" ? "warning" : "activity"} size={10} /></div>
    <div className="tl-body">
      <div className="head">{head}</div>
      <div className="who">{who}</div>
      <div className="ts">{ts}</div>
    </div>
  </div>
);

const MandantenView = ({ onEnter }) => {
  const heime = HEIMS.filter(h => h.id !== "alle");
  return (
    <>
      <div className="content-head">
        <div><h1>Mandanten</h1><div className="sub">Alten- und Pflegeheime unter Vertrag</div></div>
        <div className="right">
          <Btn icon="filter">Filter</Btn>
          <Btn icon="printer">Export (CSV)</Btn>
          <Btn variant="primary" icon="plus">Neuen Mandanten anlegen</Btn>
        </div>
      </div>
      <table className="table" style={{margin: "0 24px", width: "calc(100% - 48px)"}}>
        <thead>
          <tr>
            <th style={{paddingLeft: 0}}>Mandant</th>
            <th>Stadt</th>
            <th>Plan</th>
            <th>AVV</th>
            <th>Seit</th>
            <th>Bewohner</th>
            <th>Nutzer</th>
            <th>MRR</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {heime.map((h, i) => (
            <tr key={h.id}>
              <td style={{paddingLeft: 0}}><div className="row" style={{gap: 8}}><span style={{width: 22, height: 22, borderRadius: 5, background: "var(--accent-tint)", color: "var(--accent)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11, border: "1px solid var(--accent-border)"}}>{h.mark}</span><div><div>{h.name}</div><div className="muted" style={{fontSize: 11}}>mandant-{String(i+1).padStart(3, "0")}</div></div></div></td>
              <td className="muted">{h.city}</td>
              <td>{i === 0 ? "Enterprise" : i === 3 ? "Starter" : "Standard"}</td>
              <td>{i !== 3 ? <span className="badge-pill freigegeben"><Icon name="check" size={10} /> unterzeichnet</span> : <span className="badge-pill bearbeitung"><Icon name="clock" size={10} /> ausstehend</span>}</td>
              <td className="mono muted">{["12.01.2026","03.02.2026","18.02.2026","07.04.2026"][i]}</td>
              <td className="num">{h.residents}</td>
              <td className="num">{Math.round(h.residents / 5)}</td>
              <td className="num mono">{[1840, 1240, 1180, 490][i]} €</td>
              <td>{i === 3 ? <span className="badge-pill bearbeitung"><Icon name="clock" size={10} /> Onboarding</span> : <span className="badge-pill freigegeben"><Icon name="check" size={10} /> aktiv</span>}</td>
              <td><Btn sm icon="eye" onClick={() => onEnter("heim")}>Öffnen</Btn></td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
};

const AerzteView = () => (
  <>
    <div className="content-head">
      <div><h1>Ärzte</h1><div className="sub">Plattformweit registrierte Ärzte & Zuordnungen</div></div>
      <div className="right"><Btn variant="primary" icon="plus">Arzt einladen</Btn></div>
    </div>
    <table className="table" style={{margin: "0 24px", width: "calc(100% - 48px)"}}>
      <thead><tr><th style={{paddingLeft: 0}}>Arzt</th><th>Fachrichtung</th><th>LANR</th><th>Heime</th><th>Anfragen (30d)</th><th>Ø Freigabe</th><th>Letzter Login</th><th>Status</th></tr></thead>
      <tbody>
        {DOCTORS.map((d, i) => (
          <tr key={d.id}>
            <td style={{paddingLeft: 0}}><div className="row" style={{gap: 8}}><Avatar name={d.name} size={22} />{d.name}</div></td>
            <td className="muted">{d.spec}</td>
            <td className="mono muted">{["991234567","991234568","991234569"][i]}</td>
            <td>{d.heims.map(hid => HEIMS.find(h => h.id === hid)?.mark).join(" · ")}</td>
            <td className="num">{[142, 88, 104][i]}</td>
            <td className="mono num" style={{color: i === 0 ? "var(--success)" : "var(--fg)"}}>{["86","122","98"][i]} Min</td>
            <td className="muted" style={{fontSize: 11}}>{["heute · 07:12","vor 2 Tagen","heute · 09:40"][i]}</td>
            <td><span className="badge-pill freigegeben"><Icon name="check" size={10} /> aktiv</span></td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
);

const ApothekenView = () => (
  <>
    <div className="content-head">
      <div><h1>Apotheken</h1><div className="sub">Verbundene Apotheken & API-Gesundheit</div></div>
      <div className="right"><Btn variant="primary" icon="plus">Apotheke anbinden</Btn></div>
    </div>
    <table className="table" style={{margin: "0 24px", width: "calc(100% - 48px)"}}>
      <thead><tr><th style={{paddingLeft: 0}}>Apotheke</th><th>Stadt</th><th>API</th><th>Ø Lieferzeit</th><th>Rezepte (30d)</th><th>Fehlerquote</th><th>Status</th></tr></thead>
      <tbody>
        {PHARMACIES.map((p, i) => (
          <tr key={p.id}>
            <td style={{paddingLeft: 0}}>{p.name}</td>
            <td className="muted">{p.city}</td>
            <td className="mono muted">REST v2.1</td>
            <td className="mono">{["2:08 h","4:12 h","18:30 h"][i]}</td>
            <td className="num">{[284, 118, 42][i]}</td>
            <td className="num mono" style={{color: i === 2 ? "var(--danger)" : "var(--success)"}}>{["0,2%","1,1%","12,4%"][i]}</td>
            <td>{p.open ? <span className="badge-pill freigegeben"><Icon name="check" size={10} /> verbunden</span> : <span className="badge-pill abgelehnt"><Icon name="x" size={10} /> offline</span>}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
);

const NutzerView = () => (
  <>
    <div className="content-head">
      <div><h1>Alle Nutzer</h1><div className="sub">Über alle Mandanten hinweg · 247 aktiv</div></div>
      <div className="right"><Btn icon="filter">Filter</Btn><Btn variant="primary" icon="plus">Einladen</Btn></div>
    </div>
    <Toolbar>
      <div className="search-inp"><Icon name="search" size={12} /><input placeholder="Name, E-Mail, Mandant…" /></div>
      <span className="chip active"><Icon name="check" size={10} /> Rolle: alle</span>
      <span className="chip"><Icon name="plus" size={10} /> 2FA</span>
      <span className="chip"><Icon name="plus" size={10} /> Letzter Login</span>
    </Toolbar>
    <table className="table" style={{margin: "0 24px", width: "calc(100% - 48px)"}}>
      <thead><tr><th style={{paddingLeft: 0}}>Name</th><th>E-Mail</th><th>Rolle</th><th>Mandant</th><th>2FA</th><th>Letzter Login</th><th>Status</th></tr></thead>
      <tbody>
        {[
          ["Maria Lehmann","maria.lehmann@rosenhof.de","Pflegeleitung","Rosenhof","TOTP","heute · 07:55","aktiv"],
          ["Jonas Richter","jonas.richter@rosenhof.de","Pflege","Rosenhof","TOTP","heute · 08:12","aktiv"],
          ["Peter Groß","peter.gross@linde.de","Pflege","Linde","TOTP","heute · 06:40","aktiv"],
          ["Dr. A. Schneider","schneider@praxis-muc.de","Arzt","—","Hardware","heute · 07:12","aktiv"],
          ["Dr. R. Wagner","r.wagner@internisten.de","Arzt","—","TOTP","vor 2 Tagen","aktiv"],
          ["L. Vogt","vogt@physio-mobil.de","Therapeut","Rosenhof","TOTP","heute · 09:01","aktiv"],
          ["Adler-Apotheke (Team)","rezepte@adler-muc.de","Apotheke","—","TOTP","heute · 08:30","aktiv"],
          ["Hans Mayer","hans.mayer@medlink.de","Super-Admin","MedLink GmbH","Hardware","heute · 09:00","aktiv"],
        ].map(([n,e,r,m,t,l,s]) => (
          <tr key={n}>
            <td style={{paddingLeft: 0}}><div className="row" style={{gap: 8}}><Avatar name={n} size={22} />{n}</div></td>
            <td className="mono muted" style={{fontSize: 11}}>{e}</td>
            <td>{r}</td>
            <td className="muted">{m}</td>
            <td className="mono">{t}</td>
            <td className="muted" style={{fontSize: 11}}>{l}</td>
            <td><span className="badge-pill freigegeben"><Icon name="check" size={10} /> {s}</span></td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
);

const SysAuditView = () => (
  <>
    <div className="content-head">
      <div><h1>System-Audit</h1><div className="sub">Plattformweite Ereignisse · lückenlos & manipulationssicher</div></div>
      <div className="right"><Btn icon="filter">Filter</Btn><Btn icon="printer">Export</Btn></div>
    </div>
    <Toolbar>
      <div className="search-inp"><Icon name="search" size={12} /><input placeholder="Aktion, Nutzer, Ziel…" /></div>
      <span className="chip"><Icon name="plus" size={10} /> Heute</span>
      <span className="chip"><Icon name="plus" size={10} /> Mandant</span>
      <span className="chip"><Icon name="plus" size={10} /> Schweregrad</span>
      <div className="spacer" />
      <span className="muted" style={{fontSize: 12}}>847 Einträge · letzte 24h</span>
    </Toolbar>
    <table className="table" style={{margin: "0 24px", width: "calc(100% - 48px)"}}>
      <thead><tr><th style={{paddingLeft: 0, width: 160}}>Zeit</th><th>Schwere</th><th>Nutzer</th><th>Aktion</th><th>Ziel</th><th>Mandant</th><th style={{textAlign: "right"}}>IP</th></tr></thead>
      <tbody>
        {[
          ["heute · 09:14:02","info","Maria Lehmann","Anfrage erstellt","A-2804 · Metformin","Rosenhof","192.0.2.11"],
          ["heute · 09:12:30","warn","Hans Mayer","Mandant aktiviert","Sonnenwiese","—","10.0.0.4"],
          ["heute · 09:08:44","info","Dr. Schneider","Rezept freigegeben","A-2801","Rosenhof","192.0.2.88"],
          ["heute · 08:41:10","warn","Support","2FA zurückgesetzt","Dr. Bauer · Ticket #4402","—","10.0.0.4"],
          ["heute · 08:02:01","info","Adler-Apotheke","Lieferung bestätigt","A-2796","Rosenhof","192.0.2.55"],
          ["heute · 07:55:12","info","Maria Lehmann","Login (TOTP)","—","Rosenhof","192.0.2.11"],
          ["heute · 07:12:44","info","Dr. Schneider","Login (Hardware)","—","—","192.0.2.88"],
          ["gestern · 22:00:03","danger","System","API-Token abgelaufen","Bahnhof-Apotheke","—","—"],
          ["gestern · 16:02:11","info","Dr. Schneider","Kommentar hinzugefügt","V-104","Rosenhof","192.0.2.88"],
        ].map((r, i) => (
          <tr key={i}>
            <td className="mono muted" style={{paddingLeft: 0, fontSize: 11}}>{r[0]}</td>
            <td><span className={`badge-pill ${r[1] === "danger" ? "abgelehnt" : r[1] === "warn" ? "bearbeitung" : ""}`}>{r[1]}</span></td>
            <td><div className="row" style={{gap: 6}}><Avatar name={r[2]} size={18} />{r[2]}</div></td>
            <td>{r[3]}</td>
            <td className="muted">{r[4]}</td>
            <td className="mono">{r[5]}</td>
            <td className="mono muted" style={{textAlign: "right", fontSize: 11}}>{r[6]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
);

const HealthView = () => (
  <>
    <div className="content-head"><div><h1>Systemstatus</h1><div className="sub">SLA 99,5% · Ziel: 99,9%</div></div></div>
    <div className="kpi-grid">
      <Kpi label="Uptime (30d)" value="99,97%" icon="activity" trend="+ 0,04 vs. vormonat" points={[99.9,99.95,99.97,100,99.98,99.97]} />
      <Kpi label="API-Latenz p95" value="142 ms" icon="zap" trend="stabil" points={[130,135,140,138,142,142]} />
      <Kpi label="DB-Verbindungen" value="84 / 200" icon="activity" trend="42% Auslastung" points={[60,70,75,80,82,84]} />
      <Kpi label="Backups" value="OK" icon="shield" trend="letzter: heute · 03:00" points={[1,1,1,1,1,1]} />
    </div>
    <div style={{padding: "16px 24px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16}}>
      <div className="card">
        <div className="card-head">Services</div>
        <div className="card-body col" style={{gap: 8, fontSize: 12}}>
          {[
            ["API-Gateway", "success", "OK"],
            ["PostgreSQL Primary", "success", "Replikation 2 ms"],
            ["PostgreSQL Replica", "success", "Lag 42 ms"],
            ["Redis Cache", "success", "Hit-Rate 94%"],
            ["Object Storage (S3)", "success", "OK"],
            ["KIM-Gateway (Mail)", "warning", "Latenz 1,2 s"],
            ["Apotheke-API · Adler", "success", "OK"],
            ["Apotheke-API · Sonnen", "success", "OK"],
            ["Apotheke-API · Bahnhof", "danger", "Offline · Token abgelaufen"],
          ].map(([n, t, m]) => (
            <div key={n} className="row" style={{justifyContent: "space-between"}}>
              <span className="row" style={{gap: 8}}>
                <span style={{width: 8, height: 8, borderRadius: "50%", background: `var(--${t})`}} />
                {n}
              </span>
              <span style={{fontSize: 11, color: t === "danger" ? "var(--danger)" : t === "warning" ? "var(--warning)" : "var(--fg-muted)"}}>{m}</span>
            </div>
          ))}
        </div>
      </div>
      <div className="card">
        <div className="card-head">Aktuelle Incidents</div>
        <div className="card-body col" style={{gap: 10, fontSize: 12}}>
          <div style={{padding: 10, border: "1px solid var(--danger-border)", background: "var(--danger-tint)", borderRadius: 6}}>
            <div className="row" style={{justifyContent: "space-between"}}>
              <strong style={{color: "var(--danger)"}}>INC-2026-042 · Bahnhof-Apotheke API offline</strong>
              <span className="badge-pill abgelehnt">open</span>
            </div>
            <div className="muted" style={{marginTop: 4}}>Seit gestern 22:00 · 1 Mandant betroffen (Marienblick) · E-Mail-Fallback aktiv</div>
          </div>
          <div style={{padding: 10, border: "1px solid var(--warning-border)", background: "var(--warning-tint)", borderRadius: 6}}>
            <div className="row" style={{justifyContent: "space-between"}}>
              <strong style={{color: "var(--warning)"}}>INC-2026-041 · KIM-Gateway Latenz erhöht</strong>
              <span className="badge-pill bearbeitung">monitoring</span>
            </div>
            <div className="muted" style={{marginTop: 4}}>Seit heute 06:14 · keine Zustellungsausfälle · Ursache wird untersucht</div>
          </div>
          <div style={{padding: 10, border: "1px solid var(--border)", borderRadius: 6, fontSize: 11, color: "var(--fg-muted)"}}>
            Letzter kritischer Incident: vor 47 Tagen (Speicher-Auslastung DB-Replica)
          </div>
        </div>
      </div>
    </div>
  </>
);

const AbrechnungView = () => (
  <>
    <div className="content-head"><div><h1>Abrechnung</h1><div className="sub">April 2026 · Mandantenerlöse</div></div><div className="right"><Btn icon="printer">Rechnungslauf starten</Btn></div></div>
    <div className="kpi-grid">
      <Kpi label="MRR"              value="4 750 €" icon="barChart" trend="+ 490 € vs. März" points={[3100,3400,3800,4100,4260,4750]} />
      <Kpi label="Aktive Abos"      value="4"       icon="users"    trend="1 Trial endet Mai" points={[1,2,2,3,3,4]} />
      <Kpi label="Offene Rechnungen" value="1 180 €" icon="warning" trend="1 überfällig > 14 Tage" points={[0,0,0,380,780,1180]} />
      <Kpi label="Kündigungen (90d)" value="0"      icon="check"   trend="Retention 100%" points={[0,0,0,0,0,0]} />
    </div>
    <table className="table" style={{margin: "16px 24px", width: "calc(100% - 48px)"}}>
      <thead><tr><th style={{paddingLeft: 0}}>Rechnung</th><th>Mandant</th><th>Plan</th><th>Zeitraum</th><th>Betrag</th><th>Status</th><th>Fällig</th></tr></thead>
      <tbody>
        {[
          ["INV-2026-0148","Haus Rosenhof","Enterprise","April 2026","1 840 €","bezahlt","05.04.2026"],
          ["INV-2026-0149","Linde",         "Standard",  "April 2026","1 240 €","bezahlt","08.04.2026"],
          ["INV-2026-0150","Marienblick",   "Standard",  "April 2026","1 180 €","offen",  "15.04.2026"],
          ["INV-2026-0151","Sonnenwiese",   "Starter",   "April 2026",  "490 €","offen",  "20.04.2026"],
        ].map(r => (
          <tr key={r[0]}>
            <td className="mono" style={{paddingLeft: 0}}>{r[0]}</td>
            <td>{r[1]}</td>
            <td>{r[2]}</td>
            <td className="muted">{r[3]}</td>
            <td className="mono num" style={{textAlign: "right", paddingRight: 24}}>{r[4]}</td>
            <td><span className={`badge-pill ${r[5] === "bezahlt" ? "freigegeben" : "bearbeitung"}`}><Icon name={r[5] === "bezahlt" ? "check" : "clock"} size={10} /> {r[5]}</span></td>
            <td className="mono muted">{r[6]}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </>
);

const AdminToggle = ({ on, onChange, label }) => (
  <button
    type="button"
    onClick={() => { onChange(!on); window.dispatchEvent(new CustomEvent("medlink:toast", { detail: `${label}: ${!on ? "aktiviert" : "deaktiviert"}` })); }}
    aria-pressed={on}
    style={{
      width: 34, height: 20, borderRadius: 999, padding: 2,
      background: on ? "var(--accent)" : "var(--border-strong)",
      border: "none", cursor: "pointer", transition: "background 160ms",
    }}
  >
    <span style={{
      display: "block", width: 16, height: 16, borderRadius: "50%",
      background: "#fff", transform: on ? "translateX(14px)" : "translateX(0)",
      transition: "transform 160ms", boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
    }} />
  </button>
);

const ConfigView = () => {
  const [flags, setFlags] = React.useState([
    { id: "therapeut", name: "Therapeuten-Portal", on: true,  beta: true,  note: "Beta · 2 Mandanten" },
    { id: "erezept",   name: "eRezept (TI)",        on: false, beta: true,  note: "Q3/2026 geplant · TI-Anbindung läuft" },
    { id: "mobile",    name: "Mobile App (PWA)",    on: true,  beta: false, note: "Produktiv · iOS + Android" },
    { id: "kim",       name: "KIM-Integration",     on: true,  beta: false, note: "Produktiv · 842 Ärzte" },
    { id: "angeh",     name: "Angehörigen-Portal",  on: false, beta: false, note: "nicht im Scope" },
    { id: "voice",     name: "Sprach-Dokumentation (KI)", on: true, beta: true, note: "Beta · 12 Heime" },
    { id: "analytics", name: "Heim-Analytics & KPIs",     on: true, beta: false, note: "Produktiv" },
    { id: "sso",       name: "SSO (SAML/OIDC) für Mandanten", on: false, beta: false, note: "auf Anfrage · Enterprise" },
  ]);
  const toggle = (id) => setFlags(xs => xs.map(f => {
    if (f.id !== id) return f;
    const next = { ...f, on: !f.on };
    window.dispatchEvent(new CustomEvent("medlink:toast", { detail: `Feature „${f.name}“: ${next.on ? "aktiviert" : "deaktiviert"} · Rollout in ~60 Sek.` }));
    return next;
  }));
  return (
    <>
      <div className="content-head">
        <div><h1>Konfiguration</h1><div className="sub">Plattformweite Einstellungen · betrifft alle Mandanten</div></div>
        <div className="right">
          <Btn icon="file">Changelog</Btn>
          <Btn icon="printer">Audit-Export</Btn>
          <Btn variant="primary" icon="check" onClick={() => window.dispatchEvent(new CustomEvent("medlink:toast", { detail: "Konfiguration gespeichert · 47 Mandanten benachrichtigt" }))}>Änderungen speichern</Btn>
        </div>
      </div>
      <div style={{padding: 24, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16}}>
        <div className="card">
          <div className="card-head">Infrastruktur</div>
          <div className="card-body"><dl className="kv">
            <dt>Region (primär)</dt><dd>Hetzner · Nürnberg (nbg1) · 3 Nodes</dd>
            <dt>Failover</dt><dd>Falkenstein (fsn1) · hot-standby · RTO 4 Min</dd>
            <dt>TLS</dt><dd className="mono">1.3 erzwungen · HSTS preload</dd>
            <dt>At rest</dt><dd className="mono">AES-256-GCM · HSM-Keys</dd>
            <dt>Backup-Rhythmus</dt><dd>täglich · 30 Tage · 2 Geo-Regionen · verschlüsselt</dd>
            <dt>Deployment</dt><dd>Kubernetes 1.29 · GitHub Actions CI/CD · Review Apps</dd>
            <dt>Monitoring</dt><dd>Grafana Cloud (DE) · Sentry-EU · 99,94 % SLA</dd>
            <dt>Kubernetes Pods</dt><dd className="mono">api ×6 · worker ×4 · scheduler ×2 · ingress ×2</dd>
          </dl></div>
        </div>
        <div className="card">
          <div className="card-head">Sicherheit</div>
          <div className="card-body"><dl className="kv">
            <dt>2FA-Pflicht</dt><dd><span className="badge-pill freigegeben"><Icon name="check" size={10} /> global aktiv · TOTP + WebAuthn</span></dd>
            <dt>Session-Timeout</dt><dd className="mono">30 Min (Pflege) · 15 Min (Arzt mobil) · 5 Min (Admin)</dd>
            <dt>IP-Allowlist (Admin)</dt><dd className="mono">3 Einträge · zuletzt 02.04.2026</dd>
            <dt>Penetration-Test</dt><dd>Q1/2026 · bestanden · SySS GmbH · 0 Critical · 2 Low</dd>
            <dt>BSI-Grundschutz</dt><dd>Zertifikat gültig bis 11.2027 · TÜV-IT</dd>
            <dt>DORA-Reporting</dt><dd><span className="badge-pill freigegeben">aktiv</span> · an BaFin (DE)</dd>
            <dt>Incident-Hotline</dt><dd className="mono">+49 911 8300-911 · 24 / 7</dd>
          </dl></div>
        </div>
        <div className="card">
          <div className="card-head">Datenschutz</div>
          <div className="card-body"><dl className="kv">
            <dt>DPO</dt><dd>datenschutz@medlink.de · Fr. Dr. Lange</dd>
            <dt>AVV-Vorlage</dt><dd>v3.2 · Stand 02/2026 · 47 unterzeichnete Instanzen</dd>
            <dt>Löschkonzept</dt><dd>Bewohnerdaten: 10 J. nach Auszug · Logs: 12 Monate · Sprachnotizen: 90 Tage</dd>
            <dt>Unterauftragnehmer</dt><dd>3 (Hetzner, Sentry-EU, Postmark-EU) · alle AVV vorliegend</dd>
            <dt>Drittland-Transfer</dt><dd>keine · alle Dienste in EU/EWR</dd>
            <dt>DSFA</dt><dd>durchgeführt · 08.2025 · 04 offene Maßnahmen (low)</dd>
          </dl></div>
        </div>
        <div className="card">
          <div className="card-head">
            Feature-Flags
            <div className="right"><Btn icon="plus" onClick={() => window.dispatchEvent(new CustomEvent("medlink:toast", { detail: "Feature-Flag-Editor geöffnet" }))}>Neues Flag</Btn></div>
          </div>
          <div className="card-body col" style={{gap: 10, fontSize: 12}}>
            {flags.map(f => (
              <div key={f.id} className="row" style={{justifyContent: "space-between", alignItems: "center"}}>
                <div style={{minWidth: 0}}>
                  <div style={{fontSize: 12.5, fontWeight: 500}}>{f.name}</div>
                  <div className="muted" style={{fontSize: 11}}>{f.note}</div>
                </div>
                <div className="row" style={{gap: 8}}>
                  {f.beta && <span className="badge-pill bearbeitung" style={{fontSize: 10}}>beta</span>}
                  <AdminToggle on={f.on} onChange={() => toggle(f.id)} label={f.name} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

window.AdminPortal = AdminPortal;