/* AZIS redesign scaffold — Admin-Bereich (login + dashboard) =========== */

function AdminToggle({ on, onToggle, danger }) {
  return <button className={"switch" + (on ? " on" : "") + (danger ? " danger" : "")} onClick={onToggle} aria-pressed={on} />;
}

function AdminLogin({ onAuth, onCancel }) {
  const [pw, setPw] = useState("");
  const [err, setErr] = useState("");
  const [busy, setBusy] = useState(false);
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    if (!pw.trim()) { setErr("Bitte Passwort eingeben."); return; }
    setErr("");
    setBusy(true);
    try {
      let result;
      if (typeof AZIS !== "undefined" && typeof AZIS.adminLoginWithPassword === "function") {
        result = await AZIS.adminLoginWithPassword(pw);
      } else if (typeof window.loginAsAdmin === "function") {
        result = await window.loginAsAdmin(pw);
      } else {
        result = { ok: false, error: "bridge_missing" };
      }
      if (result?.ok) {
        setPw("");
        onAuth?.();
        return;
      }
      let msg;
      switch (result?.error) {
        case "unauthorized":   msg = "Falsches Passwort."; break;
        case "network":        msg = "Netzwerkfehler."; break;
        case "empty_password": msg = "Passwort fehlt."; break;
        case "rate_limited":   msg = "Zu viele Versuche — kurz warten."; break;
        default: {
          // Fuer config_missing / server / exception koennen wir die echte
          // Worker-Antwort zeigen — sonst weiss man nicht ob's am Hash, am
          // HMAC-Secret oder am Hash-Format liegt.
          const detail = result?.serverError || result?.error || "unbekannt";
          const code = result?.status ? ` (HTTP ${result.status})` : "";
          msg = `Login fehlgeschlagen${code}: ${detail}`;
        }
      }
      setErr(msg);
      // Bei detaillierten Server-Fehlern stehen lassen — Nutzer soll's lesen.
      if (result?.error === "unauthorized" || result?.error === "network" || result?.error === "rate_limited") {
        setTimeout(() => setErr(""), 3000);
      }
    } catch (ex) {
      setErr("Login-Fehler: " + (ex?.message || ex));
    } finally {
      setBusy(false);
    }
  };
  return (
    <div className="alogin">
      <div className="alogin__shield"><Icon name="shield" /></div>
      <div className="alogin__title">Admin-Zugang</div>
      <div className="alogin__sub">Authentifizierung erforderlich</div>
      <form className="alogin__form" onSubmit={submit}>
        <span className="alogin__field-label">Admin-Passwort</span>
        <input className="alogin__input" type="password" value={pw} placeholder="••••••••"
          autoFocus
          disabled={busy}
          onChange={(e) => setPw(e.target.value)}
          style={err ? { borderColor: "var(--danger)" } : null} />
        {err ? <div className="alogin__err" style={{ color: "var(--danger)", fontSize: 12, marginTop: 6 }}>{err}</div> : null}
        <button className="alogin__submit" type="submit" disabled={busy}>
          {busy ? "Prüfe…" : "Authentifizieren"}
        </button>
      </form>
      <button className="alogin__cancel" onClick={onCancel} disabled={busy}>Abbrechen</button>
      <div className="alogin__hint">Backend-Auth via PBKDF2-SHA512 + HMAC-Bearer.</div>
    </div>
  );
}

// Phase 5: Reports/Audit kommen aus AZIS.loadReports / loadAudit als
// State innerhalb von AdminDashboard. Keine Modul-Konstanten mehr.

function AdminDashboard({ onClose, onLogout }) {
  const [maint, setMaint] = useState(false);
  const [maintMsg, setMaintMsg] = useState("");
  const [maintEta, setMaintEta] = useState("");
  const [banner, setBanner] = useState("");
  const [bannerSaved, setBannerSaved] = useState(false);
  const [reports, setReports] = useState([]);
  const [audit, setAudit] = useState([]);
  const [health, setHealth] = useState(null);
  const [lockout, setLockout] = useState(null);
  const [busy, setBusy] = useState(null);

  // Phase 5: bei Mount alle echten Daten aus der Bridge laden — inkl.
  // Maintenance/Banner-Inhalte und initial maint-Toggle aus health.
  useEffect(() => {
    (async () => {
      try {
        if (typeof AZIS.loadReports === "function") setReports(await AZIS.loadReports() || []);
        if (typeof AZIS.loadAudit === "function") setAudit(await AZIS.loadAudit() || []);
        if (typeof AZIS.loadLockout === "function") setLockout(await AZIS.loadLockout());
        if (typeof AZIS.loadHealth === "function") {
          const h = await AZIS.loadHealth();
          setHealth(h);
          if (h?.state?.maintenance_active) setMaint(true);
        }
        if (typeof AZIS.loadMaintMsg === "function") setMaintMsg(await AZIS.loadMaintMsg() || "");
        if (typeof AZIS.loadMaintEta === "function") setMaintEta(await AZIS.loadMaintEta() || "");
        if (typeof AZIS.loadBanner === "function") setBanner(await AZIS.loadBanner() || "");
      } catch (e) { console.error("[admin] load failed:", e); }
    })();
  }, []);

  const onForceLockout = async () => {
    if (busy) return;
    setBusy("forceLock");
    try {
      if (typeof AZIS.forceLockout === "function") {
        const next = await AZIS.forceLockout();
        if (next) setLockout(next);
      }
    } catch (e) { alert("Force-Lockout fehlgeschlagen: " + (e?.message || e)); }
    finally { setBusy(null); }
  };
  const onClearLockout = async () => {
    if (busy) return;
    setBusy("clearLock");
    try {
      if (typeof AZIS.clearLockout === "function") {
        const next = await AZIS.clearLockout();
        if (next) setLockout(next);
      }
    } catch (e) { alert("Floor-Loeschen fehlgeschlagen: " + (e?.message || e)); }
    finally { setBusy(null); }
  };

  const fmtTs = (ts) => {
    if (!ts) return "—";
    const d = new Date(typeof ts === "number" && ts < 1e12 ? ts * 1000 : ts);
    if (Number.isNaN(d.getTime())) return "—";
    return d.toLocaleString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
  };

  const onDeleteReport = async (id) => {
    if (!id || busy) return;
    if (!confirm("Diesen Report wirklich loeschen?")) return;
    setBusy("delReport-" + id);
    try {
      if (typeof AZIS.deleteReport === "function") {
        await AZIS.deleteReport(id);
      }
      // Nach Loeschen Liste neu laden — bleibt simpel + konsistent.
      if (typeof AZIS.loadReports === "function") setReports(await AZIS.loadReports() || []);
    } catch (e) {
      alert("Loeschen fehlgeschlagen: " + (e?.message || e));
    } finally {
      setBusy(null);
    }
  };

  const kvOk = !!health?.kv_bound;
  const reportsTotal = health?.kv_counts?.reports;
  const bootsToday = health?.stats?.today?.boot;
  const boots14d = health?.stats?.totals_14d?.boot;
  const floorMin = lockout?.minIat || 0;
  const floorLabel = floorMin
    ? new Date(floorMin * 1000).toLocaleString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" })
    : "0 (aus)";

  const toggleMaint = async () => {
    if (busy === "maint") return;
    setBusy("maint");
    try {
      if (typeof AZIS.setMaintenance === "function") await AZIS.setMaintenance(!maint);
      setMaint(!maint);
    } catch (e) { alert("Wartungsmodus toggle fehlgeschlagen: " + (e?.message || e)); }
    finally { setBusy(null); }
  };
  const saveMaintMsg = async () => {
    if (busy) return; setBusy("maintMsg");
    try { if (typeof AZIS.saveMaintenanceMsg === "function") await AZIS.saveMaintenanceMsg(maintMsg); }
    catch (e) { alert("Speichern fehlgeschlagen: " + (e?.message || e)); }
    finally { setBusy(null); }
  };
  const saveMaintEta = async () => {
    if (busy) return; setBusy("maintEta");
    try { if (typeof AZIS.saveMaintenanceEta === "function") await AZIS.saveMaintenanceEta(maintEta); }
    catch (e) { alert("Speichern fehlgeschlagen: " + (e?.message || e)); }
    finally { setBusy(null); }
  };
  const saveBanner = async () => {
    if (busy) return; setBusy("banner");
    try {
      if (typeof AZIS.saveBanner === "function") await AZIS.saveBanner(banner);
      setBannerSaved(true);
      setTimeout(() => setBannerSaved(false), 1600);
    } catch (e) { alert("Banner-Save fehlgeschlagen: " + (e?.message || e)); }
    finally { setBusy(null); }
  };

  return (
    <React.Fragment>
      {/* Slim-Bar: nur noch Abmelden-Button rechts, kein Banner mehr — Navigation
          laeuft ohnehin ueber die untere Tab-Bar. */}
      <div className="admin-head admin-head--slim">
        <span style={{ flex: 1 }} />
        <button className="admin-logout" onClick={onLogout}>Abmelden</button>
      </div>

      <div className="admin-scroll">
        {/* Wartungs-Screen */}
        <section className="card atile stagger" style={{ animationDelay: "30ms" }}>
          <div className="atile__head">
            <div>
              <div className="atile__title"><Icon name="wrench" />Wartungs-Screen</div>
              <div className="atile__sub">Was Tester sehen, wenn der Wartungsmodus aktiv ist.</div>
            </div>
            <span className={"atile__pill " + (maint ? "off" : "on")}>{maint ? "Wartung" : "Live"}</span>
          </div>
          <div className="atoggle">
            <div className="atoggle__text"><strong>Wartungsmodus aktivieren</strong><small>Tester sehen den Wartungs-Screen, du als Admin nicht.</small></div>
            <AdminToggle on={maint} onToggle={toggleMaint} danger />
          </div>
          <div className="adivide" />
          <div className="afield-label">Custom-Wartungs-Message</div>
          <textarea className="ainput" rows="2" value={maintMsg} onChange={(e) => setMaintMsg(e.target.value)} />
          <div className="arow-actions"><span className="spacer" /><button className="abtn abtn--soft" onClick={() => setMaintMsg("")}>Leeren</button><button className="abtn abtn--accent" onClick={saveMaintMsg} disabled={busy === "maintMsg"}>Speichern</button></div>
          <div className="adivide" />
          <div className="afield-label">ETA · Voraussichtliche Wiederfreigabe</div>
          <input className="ainput" value={maintEta} onChange={(e) => setMaintEta(e.target.value)} placeholder="z. B. heute 14:30 oder 24.12.2026" />
          <div className="arow-actions"><span className="spacer" /><button className="abtn abtn--soft" onClick={() => setMaintEta("")}>Leeren</button><button className="abtn abtn--accent" onClick={saveMaintEta} disabled={busy === "maintEta"}>Speichern</button></div>
        </section>

        {/* Push-Banner */}
        <section className="card atile stagger" style={{ animationDelay: "70ms" }}>
          <div className="atile__head">
            <div><div className="atile__title"><Icon name="megaphone" />Push-Banner</div>
              <div className="atile__sub">Kurzer Banner-Text über der App. Pro Wortlaut einmal wegklickbar.</div></div>
          </div>
          <div className="afield-label">Banner-Text</div>
          <input className="ainput" value={banner} onChange={(e) => setBanner(e.target.value)} />
          <div className="arow-actions">
            <span className={"asaved" + (bannerSaved ? " show" : "")}>✓ Live gesetzt</span>
            <span className="spacer" />
            <button className="abtn abtn--soft" onClick={() => setBanner("")}>Leeren</button>
            <button className="abtn abtn--accent" onClick={saveBanner}>Senden</button>
          </div>
        </section>

        {/* Bug-Reports */}
        <section className="card atile stagger" style={{ animationDelay: "150ms" }}>
          <div className="atile__head">
            <div><div className="atile__title"><Icon name="bug" />Bug-Reports</div>
              <div className="atile__sub">Eingegangene Reports & Feedback. 90 Tage Aufbewahrung.</div></div>
            <span className="atile__pill">{reports.length} offen</span>
          </div>
          <div className="alist">
            {reports.length === 0
              ? <div style={{ padding: "12px 6px", color: "var(--muted)", fontSize: 12 }}>Keine Reports.</div>
              : reports.map((r, i) => (
                <div className="aitem" key={r.id || i}>
                  <div className="aitem__top">
                    <span className="aitem__tag bug">Bug-Report</span>
                    <span className="aitem__time">{fmtTs(r.ts)}</span>
                  </div>
                  <div className="aitem__body" style={{ whiteSpace: "pre-wrap" }}>{r.description || "(leer)"}</div>
                  <div className="aitem__meta">
                    BETA-{r.version || "?"}
                    {r.diagnostics ? " · mit Diagnose" : ""}
                  </div>
                  {r.diagnostics ? (
                    <details style={{ marginTop: 6 }}>
                      <summary style={{ cursor: "pointer", fontSize: 11, color: "var(--muted)" }}>Diagnose anzeigen</summary>
                      <pre style={{ marginTop: 6, padding: 8, background: "var(--surface-2,#0a1015)", borderRadius: 6, fontSize: 10, lineHeight: 1.4, whiteSpace: "pre-wrap", maxHeight: 200, overflow: "auto" }}>{r.diagnostics}</pre>
                    </details>
                  ) : null}
                  <div className="arow-actions" style={{ marginTop: 6 }}>
                    <span className="spacer" />
                    <button
                      className="abtn abtn--soft"
                      disabled={busy === "delReport-" + r.id}
                      onClick={() => onDeleteReport(r.id)}
                    >Löschen</button>
                  </div>
                </div>
              ))}
          </div>
        </section>

        {/* Audit-Log */}
        <section className="card atile stagger" style={{ animationDelay: "190ms" }}>
          <div className="atile__head">
            <div><div className="atile__title"><Icon name="list" />Audit-Log</div>
              <div className="atile__sub">Letzte Admin-Aktionen · TTL 90 Tage.</div></div>
          </div>
          <div>
            {audit.length === 0
              ? <div style={{ padding: "8px 6px", color: "var(--muted)", fontSize: 12 }}>Keine Eintraege.</div>
              : audit.map((a, i) => (
                <div className="aaudit" key={a.id || i}>
                  <span className="aaudit__time">{fmtTs(a.ts)}</span>
                  <span className="aaudit__act">
                    {a.action || "?"}
                    {a.detail ? <span style={{ color: "var(--muted)", marginLeft: 6 }}>· {a.detail}</span> : null}
                  </span>
                </div>
              ))}
          </div>
        </section>

        {/* Server-Health */}
        <section className="card atile stagger" style={{ animationDelay: "230ms" }}>
          <div className="atile__head">
            <div><div className="atile__title"><Icon name="server" />Server-Health & Analytics</div>
              <div className="atile__sub">KV-Status, Counts und 14-Tage-Stats.</div></div>
            <span className={"atile__pill " + (health ? (kvOk ? "on" : "off") : "")}>
              <span className={"adot " + (health ? (kvOk ? "ok" : "err") : "")} />
              {health ? (kvOk ? "OK" : "KV offline") : "…"}
            </span>
          </div>
          <div className="ahealth">
            <div className="ahealth__cell">
              <div className="ahealth__k">KV-Store</div>
              <div className="ahealth__v">
                <span className={"adot " + (kvOk ? "ok" : "err")} />
                {kvOk ? "Erreichbar" : "Offline"}
              </div>
            </div>
            <div className="ahealth__cell">
              <div className="ahealth__k">Boots · heute</div>
              <div className="ahealth__v">{bootsToday ?? "—"}</div>
            </div>
            <div className="ahealth__cell">
              <div className="ahealth__k">Boots · 14 T</div>
              <div className="ahealth__v">{boots14d ?? "—"}</div>
            </div>
            <div className="ahealth__cell">
              <div className="ahealth__k">Reports gesamt</div>
              <div className="ahealth__v">{reportsTotal ?? "—"}</div>
            </div>
          </div>
        </section>

        {/* Force-Lockout */}
        <section className="card atile stagger" style={{ animationDelay: "270ms" }}>
          <div className="atile__head">
            <div><div className="atile__title"><Icon name="lockOpen" />Force-Lockout</div>
              <div className="atile__sub">Alle anderen Admin-Sessions sofort invalidieren. Deine bleibt aktiv.</div></div>
          </div>
          <div className="arow-actions">
            <span style={{ fontFamily: "var(--font-num)", fontSize: 11, color: "var(--muted)" }}>
              Floor (min_iat): <b style={{ color: "var(--text)" }}>{floorLabel}</b>
            </span>
            <span className="spacer" />
            <button
              className="abtn abtn--soft"
              onClick={onClearLockout}
              disabled={!floorMin || busy === "clearLock"}
            >Floor entfernen</button>
            <button
              className="abtn abtn--danger"
              onClick={onForceLockout}
              disabled={busy === "forceLock"}
            >Alle abmelden</button>
          </div>
        </section>
      </div>
    </React.Fragment>
  );
}

window.AdminLogin = AdminLogin;
window.AdminDashboard = AdminDashboard;