/* 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(false);
  const submit = (e) => {
    e.preventDefault();
    setErr(true);
    setTimeout(() => setErr(false), 1600);
  };
  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="••••••••"
          onChange={(e) => setPw(e.target.value)}
          style={err ? { borderColor: "var(--danger)", animation: "pulse 0.4s" } : null} />
        <button className="alogin__submit" type="submit">Authentifizieren</button>
      </form>
      <button className="alogin__cancel" onClick={onCancel}>Abbrechen</button>
      <div className="alogin__hint">Admin-Logik wird mit dem bestehenden Backend verbunden.</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.
  useEffect(() => {
    (async () => {
      try {
        if (typeof AZIS.loadReports === "function") setReports(await AZIS.loadReports() || []);
        if (typeof AZIS.loadAudit === "function") setAudit(await AZIS.loadAudit() || []);
        if (typeof AZIS.loadHealth === "function") setHealth(await AZIS.loadHealth());
        if (typeof AZIS.loadLockout === "function") setLockout(await AZIS.loadLockout());
      } catch (e) { console.error("[admin] load failed:", e); }
    })();
  }, []);

  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>
      <div className="admin-head">
        <button className="admin-head__back" onClick={onClose} aria-label="Zurück"><Icon name="arrow" /></button>
        <div style={{ flex: 1 }}>
          <div className="admin-head__title">Admin-Bereich <span className="admin-head__badge">Admin</span></div>
          <div className="admin-head__sub">Änderungen sind sofort für alle Nutzer wirksam.</div>
        </div>
        <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.map((r, i) => (
              <div className="aitem" key={i}>
                <div className="aitem__top"><span className={"aitem__tag " + r.kind}>{r.tag}</span><span className="aitem__time">{r.time}</span></div>
                <div className="aitem__body">{r.body}</div>
                <div className="aitem__meta">{r.meta}</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.map((a, i) => (
            <div className="aaudit" key={i}><span className="aaudit__time">{a.time}</span><span className="aaudit__act">{a.act}</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 on"><span className="adot ok" />OK</span>
          </div>
          <div className="ahealth">
            <div className="ahealth__cell"><div className="ahealth__k">KV-Store</div><div className="ahealth__v"><span className="adot ok" />Erreichbar</div></div>
            <div className="ahealth__cell"><div className="ahealth__k">Aktive Tester</div><div className="ahealth__v">38</div></div>
            <div className="ahealth__cell"><div className="ahealth__k">Aufrufe · 14 T</div><div className="ahealth__v">2.4<small>k</small></div></div>
            <div className="ahealth__cell"><div className="ahealth__k">Reports gesamt</div><div className="ahealth__v">17</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)" }}>1 717 · 09:15</b></span>
            <span className="spacer" />
            <button className="abtn abtn--danger">Alle abmelden</button>
          </div>
        </section>
      </div>
    </React.Fragment>
  );
}

function AdminArea({ open, authed, onClose, onUnlock, onLogout }) {
  return (
    <div className={"admin-overlay" + (open ? " show" : "")} role="dialog" aria-modal="true">
      {authed
        ? <AdminDashboard onClose={onClose} onLogout={onLogout} />
        : <AdminLogin onAuth={onUnlock} onCancel={onClose} />}
    </div>
  );
}

window.AdminArea = AdminArea;