const { useState: useS, useEffect: useE } = React;

/* ============================ shared UI bits ============================ */
const CARD = { background: "#fff", border: "1px solid var(--dv-border)", borderRadius: 14, boxShadow: "var(--dv-shadow-sm)" };
const INPUT = { width: "100%", boxSizing: "border-box", fontFamily: "var(--dv-font-sans)", fontSize: 14, padding: "10px 12px", border: "1px solid var(--dv-border)", borderRadius: 8, color: "var(--dv-fg-strong)", background: "#fff", outline: "none" };

function Btn({ kind = "primary", children, style, ...rest }) {
  const kinds = {
    primary: { background: "var(--dv-green)", color: "#fff", border: "none" },
    ghost: { background: "transparent", color: "var(--dv-slate-600)", border: "1px solid var(--dv-border)" },
    danger: { background: "transparent", color: "var(--dv-danger)", border: "1px solid var(--dv-danger-bg)" },
  };
  return (
    <button {...rest} style={{ fontFamily: "var(--dv-font-sans)", fontWeight: 600, fontSize: 13.5, padding: "9px 16px", borderRadius: 9999, cursor: rest.disabled ? "wait" : "pointer", opacity: rest.disabled ? 0.6 : 1, ...kinds[kind], ...style }}>
      {children}
    </button>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <span style={{ display: "block", fontSize: 12.5, fontWeight: 600, color: "var(--dv-navy)", marginBottom: 6 }}>{label}</span>
      {children}
    </label>
  );
}

function Modal({ title, onClose, children, footer, width = 460 }) {
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(15,23,42,.45)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50, padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ ...CARD, width: "100%", maxWidth: width, padding: 24, boxShadow: "var(--dv-shadow-xl)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
          <h3 style={{ fontSize: 18, fontWeight: 700, color: "var(--dv-navy)", margin: 0 }}>{title}</h3>
          <button onClick={onClose} style={{ background: "transparent", border: "none", cursor: "pointer", color: "var(--dv-slate-400)" }}><i data-lucide="x" style={{ width: 18, height: 18 }}></i></button>
        </div>
        {children}
        {footer && <div style={{ display: "flex", justifyContent: "flex-end", gap: 10, marginTop: 22 }}>{footer}</div>}
      </div>
    </div>
  );
}

function PasswordOnceModal({ title, password, onClose }) {
  const [copied, setCopied] = useS(false);
  const copy = async () => { try { await navigator.clipboard.writeText(password); setCopied(true); } catch (e) {} };
  return (
    <Modal title={title} onClose={onClose} footer={<Btn onClick={onClose}>Verstanden</Btn>}>
      <div style={{ display: "flex", gap: 8, alignItems: "flex-start", background: "var(--dv-warning-bg)", color: "#b45309", fontSize: 13, padding: "10px 12px", borderRadius: 8, marginBottom: 16, lineHeight: 1.45 }}>
        <i data-lucide="alert-triangle" style={{ width: 16, height: 16, flex: "none", marginTop: 1 }}></i>
        Dieses Passwort wird <b>nur einmal</b> angezeigt. Übergeben Sie es sicher an den CISO — er muss es beim ersten Login ändern.
      </div>
      <div style={{ display: "flex", gap: 8 }}>
        <code style={{ flex: 1, fontFamily: "var(--dv-font-mono)", fontSize: 16, background: "var(--dv-slate-50)", border: "1px solid var(--dv-border)", borderRadius: 8, padding: "12px 14px", color: "var(--dv-slate-900)", letterSpacing: ".02em", userSelect: "all" }}>{password}</code>
        <Btn kind="ghost" onClick={copy} style={{ flex: "none" }}>{copied ? "Kopiert ✓" : "Kopieren"}</Btn>
      </div>
    </Modal>
  );
}

function Table({ head, children }) {
  return (
    <div style={{ overflowX: "auto" }}>
      <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 13.5 }}>
        <thead>
          <tr>{head.map((h, i) => <th key={i} style={{ textAlign: "left", fontSize: 10.5, textTransform: "uppercase", letterSpacing: ".05em", color: "var(--dv-fg-subtle)", fontWeight: 700, padding: "0 12px 10px" }}>{h}</th>)}</tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>
  );
}
const TD = { padding: "12px", borderTop: "1px solid var(--dv-slate-100)", color: "var(--dv-slate-700)" };

/* ============================ Companies ============================ */
function CompaniesSection({ api, companies, reload, onViewCampaigns }) {
  const [modal, setModal] = useS(null); // {editing?}
  const [form, setForm] = useS({ name: "", industry: "" });
  const [busy, setBusy] = useS(false);
  const [servers, setServers] = useS([]);

  const loadServers = () => api.admin.servers.list().then((r) => setServers(r.servers || []));
  useE(() => { loadServers(); }, []);
  const serversOf = (companyId) => servers.filter((s) => s.companyId === companyId);
  const serverName = (s) => s.label || s.baseUrl.replace(/^https?:\/\//, "");

  const open = (c) => { setForm({ name: c ? c.name : "", industry: c ? c.industry || "" : "" }); setModal({ editing: c || null }); };
  const save = async () => {
    setBusy(true);
    const body = { name: form.name.trim(), industry: form.industry.trim() || null };
    const res = modal.editing ? await api.admin.companies.update(modal.editing.id, body) : await api.admin.companies.create(body);
    setBusy(false);
    if (res.ok) { setModal(null); reload(); }
  };
  const del = async (c) => { if (window.confirm(`Firma „${c.name}" und alle zugehörigen Server/Benutzer löschen?`)) { await api.admin.companies.remove(c.id); reload(); loadServers(); } };

  return (
    <Section title="Firmen" hint="Mandanten des Portals." action={<Btn onClick={() => open(null)}><i data-lucide="plus" style={{ width: 15, height: 15, verticalAlign: "-2px" }}></i> Firma</Btn>}>
      <Table head={["Firma", "Branche", "gophish-Server", ""]}>
        {companies.map((c) => {
          const list = serversOf(c.id);
          return (
            <tr key={c.id}>
              <td style={{ ...TD, fontWeight: 600, color: "var(--dv-navy)" }}>{c.name}</td>
              <td style={TD}>{c.industry || "—"}</td>
              <td style={TD}>
                {list.length === 0
                  ? <span style={{ color: "var(--dv-fg-subtle)" }}>kein Server</span>
                  : <span style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                      {list.map((s) => (
                        <span key={s.id} title={s.baseUrl} style={{ fontFamily: "var(--dv-font-mono)", fontSize: 11.5, background: "var(--dv-slate-100)", color: "var(--dv-slate-700)", borderRadius: 6, padding: "3px 8px" }}>{serverName(s)}</span>
                      ))}
                    </span>}
              </td>
              <td style={{ ...TD, textAlign: "right", whiteSpace: "nowrap" }}>
                <Btn onClick={() => onViewCampaigns(c)} style={{ padding: "6px 12px", marginRight: 8 }}><i data-lucide="line-chart" style={{ width: 14, height: 14, verticalAlign: "-2px", marginRight: 4 }}></i>Kampagnenübersicht</Btn>
                <Btn kind="ghost" onClick={() => open(c)} style={{ padding: "6px 12px", marginRight: 8 }}>Bearbeiten</Btn>
                <Btn kind="danger" onClick={() => del(c)} style={{ padding: "6px 12px" }}>Löschen</Btn>
              </td>
            </tr>
          );
        })}
        {companies.length === 0 && <tr><td style={TD} colSpan={4}>Noch keine Firmen angelegt.</td></tr>}
      </Table>

      {modal && (
        <Modal title={modal.editing ? "Firma bearbeiten" : "Neue Firma"} onClose={() => setModal(null)}
          footer={<><Btn kind="ghost" onClick={() => setModal(null)}>Abbrechen</Btn><Btn disabled={busy || !form.name.trim()} onClick={save}>Speichern</Btn></>}>
          <Field label="Name"><input style={INPUT} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></Field>
          <Field label="Branche"><input style={INPUT} value={form.industry} onChange={(e) => setForm({ ...form, industry: e.target.value })} /></Field>
        </Modal>
      )}
    </Section>
  );
}

/* ============================ gophish servers ============================ */
function ServersSection({ api, companies }) {
  const [servers, setServers] = useS([]);
  const [modal, setModal] = useS(null);
  const [form, setForm] = useS({});
  const [busy, setBusy] = useS(false);
  const [test, setTest] = useS(null);

  const load = () => api.admin.servers.list().then((r) => setServers(r.servers || []));
  useE(() => { load(); }, []);

  const companyName = (id) => { const c = companies.find((x) => x.id === id); return c ? c.name : `#${id}`; };
  const open = (s) => {
    setTest(null);
    setForm(s ? { companyId: s.companyId, label: s.label || "", baseUrl: s.baseUrl, apiKey: "", insecureTls: s.insecureTls, excludeCampaignNames: (s.excludeCampaignNames || []).join(", ") }
               : { companyId: companies[0] ? companies[0].id : "", label: "", baseUrl: "https://", apiKey: "", insecureTls: true, excludeCampaignNames: "test" });
    setModal({ editing: s || null });
  };
  const save = async () => {
    setBusy(true);
    const body = { companyId: Number(form.companyId), label: form.label || null, baseUrl: form.baseUrl, insecureTls: !!form.insecureTls, excludeCampaignNames: form.excludeCampaignNames };
    if (form.apiKey) body.apiKey = form.apiKey; // keep existing key if left blank on edit
    const res = modal.editing ? await api.admin.servers.update(modal.editing.id, body) : await api.admin.servers.create(body);
    setBusy(false);
    if (res.ok) { setModal(null); load(); }
    else setTest({ ok: false, error: res.error || "Speichern fehlgeschlagen" });
  };
  const runTest = async () => {
    setTest({ pending: true });
    const res = form.apiKey || !modal.editing
      ? await api.admin.servers.test({ baseUrl: form.baseUrl, apiKey: form.apiKey, insecureTls: !!form.insecureTls, excludeCampaignNames: form.excludeCampaignNames })
      : await api.admin.servers.testSaved(modal.editing.id);
    setTest(res.ok ? { ok: true, count: res.campaignCount } : { ok: false, error: res.error || "nicht erreichbar" });
  };
  const del = async (s) => { if (window.confirm(`Server „${s.label || s.baseUrl}" löschen?`)) { await api.admin.servers.remove(s.id); load(); } };

  return (
    <Section title="gophish-Server" hint="Je Firma ein oder mehrere gophish-Instanzen. API-Keys werden nie im Klartext angezeigt." action={<Btn onClick={() => open(null)}><i data-lucide="plus" style={{ width: 15, height: 15, verticalAlign: "-2px" }}></i> Server</Btn>}>
      <Table head={["Firma", "Label", "URL", "API-Key", "TLS", ""]}>
        {servers.map((s) => (
          <tr key={s.id}>
            <td style={{ ...TD, fontWeight: 600, color: "var(--dv-navy)" }}>{companyName(s.companyId)}</td>
            <td style={TD}>{s.label || "—"}</td>
            <td style={{ ...TD, fontFamily: "var(--dv-font-mono)", fontSize: 12 }}>{s.baseUrl}</td>
            <td style={{ ...TD, fontFamily: "var(--dv-font-mono)", fontSize: 12, color: "var(--dv-fg-subtle)" }}>{s.apiKeyMasked}</td>
            <td style={TD}>{s.insecureTls ? "self-signed" : "streng"}</td>
            <td style={{ ...TD, textAlign: "right", whiteSpace: "nowrap" }}>
              <Btn kind="ghost" onClick={() => api.admin.servers.testSaved(s.id).then((r) => window.alert(r.ok ? `OK — ${r.campaignCount} Kampagne(n) erreichbar` : `Fehler: ${r.error || "nicht erreichbar"}`))} style={{ padding: "6px 12px", marginRight: 8 }}>Test</Btn>
              <Btn kind="ghost" onClick={() => open(s)} style={{ padding: "6px 12px", marginRight: 8 }}>Bearbeiten</Btn>
              <Btn kind="danger" onClick={() => del(s)} style={{ padding: "6px 12px" }}>Löschen</Btn>
            </td>
          </tr>
        ))}
        {servers.length === 0 && <tr><td style={TD} colSpan={6}>Noch keine Server angelegt.</td></tr>}
      </Table>

      {modal && (
        <Modal title={modal.editing ? "Server bearbeiten" : "Neuer gophish-Server"} onClose={() => setModal(null)} width={520}
          footer={<><Btn kind="ghost" onClick={runTest} disabled={test && test.pending}>Verbindung testen</Btn><div style={{ flex: 1 }} /><Btn kind="ghost" onClick={() => setModal(null)}>Abbrechen</Btn><Btn disabled={busy || !form.baseUrl || !form.companyId} onClick={save}>Speichern</Btn></>}>
          <Field label="Firma">
            <select style={INPUT} value={form.companyId} onChange={(e) => setForm({ ...form, companyId: Number(e.target.value) })}>
              {companies.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </Field>
          <Field label="Label"><input style={INPUT} value={form.label} onChange={(e) => setForm({ ...form, label: e.target.value })} placeholder="z. B. Hetzner-1" /></Field>
          <Field label="Basis-URL (Admin-API)"><input style={INPUT} value={form.baseUrl} onChange={(e) => setForm({ ...form, baseUrl: e.target.value })} placeholder="https://host:3333" /></Field>
          <Field label={modal.editing ? "API-Key (leer lassen = unverändert)" : "API-Key"}><input style={{ ...INPUT, fontFamily: "var(--dv-font-mono)" }} value={form.apiKey} onChange={(e) => setForm({ ...form, apiKey: e.target.value })} placeholder={modal.editing ? "••••••" : "gophish admin api key"} /></Field>
          <Field label="Ausgeschlossene Kampagnen (Komma-getrennt)"><input style={INPUT} value={form.excludeCampaignNames} onChange={(e) => setForm({ ...form, excludeCampaignNames: e.target.value })} placeholder="test" /></Field>
          <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, color: "var(--dv-slate-700)", cursor: "pointer" }}>
            <input type="checkbox" checked={!!form.insecureTls} onChange={(e) => setForm({ ...form, insecureTls: e.target.checked })} /> Self-signed TLS akzeptieren
          </label>
          {test && !test.pending && (
            <div style={{ marginTop: 14, fontSize: 13, padding: "9px 12px", borderRadius: 8, background: test.ok ? "var(--dv-success-bg)" : "var(--dv-danger-bg)", color: test.ok ? "#15803d" : "#b91c1c" }}>
              {test.ok ? `Verbindung OK — ${test.count} Kampagne(n) erreichbar.` : `Fehler: ${test.error}`}
            </div>
          )}
        </Modal>
      )}
    </Section>
  );
}

/* ============================ CISO users ============================ */
function UsersSection({ api, companies }) {
  const [users, setUsers] = useS([]);
  const [modal, setModal] = useS(null);
  const [form, setForm] = useS({});
  const [busy, setBusy] = useS(false);
  const [pwModal, setPwModal] = useS(null);

  const load = () => api.admin.users.list().then((r) => setUsers((r.users || []).filter((u) => u.role === "ciso")));
  useE(() => { load(); }, []);

  const companyName = (id) => { const c = companies.find((x) => x.id === id); return c ? c.name : "—"; };
  const open = (u) => {
    setForm(u ? { firstName: u.firstName, lastName: u.lastName, companyId: u.companyId }
              : { email: "", firstName: "", lastName: "", companyId: companies[0] ? companies[0].id : "" });
    setModal({ editing: u || null });
  };
  const save = async () => {
    setBusy(true);
    if (modal.editing) {
      const res = await api.admin.users.update(modal.editing.id, { firstName: form.firstName, lastName: form.lastName, companyId: Number(form.companyId) });
      setBusy(false);
      if (res.ok) { setModal(null); load(); }
    } else {
      const res = await api.admin.users.create({ email: form.email.trim(), firstName: form.firstName, lastName: form.lastName, companyId: Number(form.companyId) });
      setBusy(false);
      if (res.ok) { setModal(null); load(); setPwModal({ title: `Zugang für ${res.user.email}`, password: res.generatedPassword }); }
      else window.alert(res.error === "email_exists" ? "Diese E-Mail existiert bereits." : "Anlegen fehlgeschlagen: " + (res.error || ""));
    }
  };
  const reset = async (u) => { if (window.confirm(`Neues Initial-Passwort für ${u.email} erzeugen?`)) { const res = await api.admin.users.resetPassword(u.id); if (res.generatedPassword) setPwModal({ title: `Neues Passwort für ${u.email}`, password: res.generatedPassword }); load(); } };
  const del = async (u) => { if (window.confirm(`CISO ${u.email} löschen?`)) { await api.admin.users.remove(u.id); load(); } };

  return (
    <Section title="CISO-Benutzer" hint="Zugänge für die Sicherheitsverantwortlichen der Kunden. Initial-Passwort wird einmalig angezeigt." action={<Btn onClick={() => open(null)} disabled={companies.length === 0}><i data-lucide="plus" style={{ width: 15, height: 15, verticalAlign: "-2px" }}></i> CISO</Btn>}>
      <Table head={["Name", "E-Mail", "Firma", "Status", ""]}>
        {users.map((u) => (
          <tr key={u.id}>
            <td style={{ ...TD, fontWeight: 600, color: "var(--dv-navy)" }}>{u.firstName} {u.lastName}</td>
            <td style={{ ...TD, fontFamily: "var(--dv-font-mono)", fontSize: 12 }}>{u.email}</td>
            <td style={TD}>{u.companyName || companyName(u.companyId)}</td>
            <td style={TD}>{u.mustChangePassword ? <span style={{ fontSize: 11, fontWeight: 700, color: "#b45309", background: "var(--dv-warning-bg)", padding: "3px 8px", borderRadius: 9999 }}>Passwort ausstehend</span> : <span style={{ fontSize: 11, fontWeight: 700, color: "#15803d", background: "var(--dv-success-bg)", padding: "3px 8px", borderRadius: 9999 }}>aktiv</span>}</td>
            <td style={{ ...TD, textAlign: "right", whiteSpace: "nowrap" }}>
              <Btn kind="ghost" onClick={() => reset(u)} style={{ padding: "6px 12px", marginRight: 8 }}>Passwort</Btn>
              <Btn kind="ghost" onClick={() => open(u)} style={{ padding: "6px 12px", marginRight: 8 }}>Bearbeiten</Btn>
              <Btn kind="danger" onClick={() => del(u)} style={{ padding: "6px 12px" }}>Löschen</Btn>
            </td>
          </tr>
        ))}
        {users.length === 0 && <tr><td style={TD} colSpan={5}>Noch keine CISO-Benutzer angelegt.</td></tr>}
      </Table>

      {modal && (
        <Modal title={modal.editing ? "CISO bearbeiten" : "Neuen CISO anlegen"} onClose={() => setModal(null)}
          footer={<><Btn kind="ghost" onClick={() => setModal(null)}>Abbrechen</Btn><Btn disabled={busy || (!modal.editing && !form.email) || !form.firstName || !form.lastName} onClick={save}>{modal.editing ? "Speichern" : "Anlegen"}</Btn></>}>
          {!modal.editing && <Field label="E-Mail"><input style={{ ...INPUT, fontFamily: "var(--dv-font-mono)" }} value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="ciso@firma.de" /></Field>}
          <div style={{ display: "flex", gap: 12 }}>
            <div style={{ flex: 1 }}><Field label="Vorname"><input style={INPUT} value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })} /></Field></div>
            <div style={{ flex: 1 }}><Field label="Nachname"><input style={INPUT} value={form.lastName} onChange={(e) => setForm({ ...form, lastName: e.target.value })} /></Field></div>
          </div>
          <Field label="Firma">
            <select style={INPUT} value={form.companyId} onChange={(e) => setForm({ ...form, companyId: Number(e.target.value) })}>
              {companies.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
          </Field>
          <p style={{ fontSize: 12, color: "var(--dv-fg-subtle)", margin: "0 0 4px", lineHeight: 1.5 }}>
            Der CISO sieht die Kampagnen aller gophish-Server seiner Firma.
          </p>
        </Modal>
      )}
      {pwModal && <PasswordOnceModal title={pwModal.title} password={pwModal.password} onClose={() => setPwModal(null)} />}
    </Section>
  );
}

/* ============================ shell ============================ */
function Section({ title, hint, action, children }) {
  return (
    <div style={{ ...CARD, padding: 22 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
        <div>
          <h2 style={{ fontSize: 18, fontWeight: 700, color: "var(--dv-navy)", margin: 0 }}>{title}</h2>
          {hint && <p style={{ fontSize: 12.5, color: "var(--dv-fg-subtle)", margin: "4px 0 0" }}>{hint}</p>}
        </div>
        {action}
      </div>
      {children}
    </div>
  );
}

function AdminApp({ api, user, onLogout, onProfile }) {
  const [tab, setTab] = useS("companies");
  const [companies, setCompanies] = useS([]);
  const [preview, setPreview] = useS(null); // { company, loading, campaigns, degraded }
  const reloadCompanies = () => api.admin.companies.list().then((r) => setCompanies(r.companies || []));
  useE(() => { reloadCompanies(); }, []);
  useE(() => { if (window.lucide) window.lucide.createIcons(); });

  const viewCampaigns = async (company) => {
    setPreview({ company, loading: true });
    const res = await api.admin.companyCampaigns.list(company.id);
    setPreview({ company, loading: false, campaigns: res.campaigns || [], degraded: res.degraded });
  };

  // Campaign preview = the exact CISO dashboard for a company, with a back button.
  if (preview) {
    if (preview.loading) {
      return <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", background: "var(--dv-slate-50)" }}>
        <div style={{ width: 26, height: 26, border: "3px solid var(--dv-slate-200)", borderTopColor: "var(--dv-green)", borderRadius: "50%", animation: "dv-spin .7s linear infinite" }} />
      </div>;
    }
    const c = preview.company;
    const client = { name: c.name, industry: c.industry, ciso: c.name, cisoRole: "Admin-Vorschau", email: user.email };
    return <Portal client={client} campaigns={preview.campaigns} degraded={preview.degraded}
      loadCampaign={(serverId, id) => api.admin.companyCampaigns.get(c.id, serverId, id)}
      adminBack={() => setPreview(null)} />;
  }

  const tabs = [
    { id: "companies", label: "Firmen", icon: "building-2" },
    { id: "servers", label: "gophish-Server", icon: "server" },
    { id: "users", label: "CISO-Benutzer", icon: "users" },
  ];

  return (
    <div style={{ minHeight: "100vh", background: "var(--dv-slate-50)" }}>
      <header style={{ background: "var(--dv-navy)", color: "#fff", position: "sticky", top: 0, zIndex: 20 }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 24px", height: 62, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <img src="./assets/logo-datavise-white.svg" alt="Datavise" style={{ height: 26 }} />
            <span style={{ width: 1, height: 20, background: "rgba(255,255,255,.22)" }}></span>
            <span style={{ fontSize: 14.5, fontWeight: 700 }}>Awareness Portal · Admin</span>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <span style={{ fontSize: 12.5, color: "var(--dv-slate-400)", fontFamily: "var(--dv-font-mono)" }}>{user.email}</span>
            <Btn kind="ghost" onClick={onProfile} style={{ color: "#fff", borderColor: "rgba(255,255,255,.25)", background: "transparent", padding: "7px 14px" }}><i data-lucide="user" style={{ width: 14, height: 14, verticalAlign: "-2px", marginRight: 5 }}></i>Profil</Btn>
            <Btn kind="ghost" onClick={onLogout} style={{ color: "#fff", borderColor: "rgba(255,255,255,.25)", background: "transparent", padding: "7px 14px" }}>Abmelden</Btn>
          </div>
        </div>
      </header>

      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "24px" }}>
        <div style={{ display: "flex", gap: 8, marginBottom: 20 }}>
          {tabs.map((t) => {
            const on = t.id === tab;
            return (
              <button key={t.id} onClick={() => setTab(t.id)} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--dv-font-sans)", fontWeight: 600, fontSize: 14, padding: "10px 18px", borderRadius: 10, cursor: "pointer", border: on ? "1px solid var(--dv-navy)" : "1px solid var(--dv-border)", background: on ? "#fff" : "transparent", color: on ? "var(--dv-navy)" : "var(--dv-slate-600)", boxShadow: on ? "var(--dv-shadow-sm)" : "none" }}>
                <i data-lucide={t.icon} style={{ width: 16, height: 16 }}></i>{t.label}
              </button>
            );
          })}
        </div>

        {tab === "companies" && <CompaniesSection api={api} companies={companies} reload={reloadCompanies} onViewCampaigns={viewCampaigns} />}
        {tab === "servers" && <ServersSection api={api} companies={companies} />}
        {tab === "users" && <UsersSection api={api} companies={companies} />}
      </div>
    </div>
  );
}

window.AdminApp = AdminApp;