/* © 2026 K2B NETWORK SOLUTIONS LLC. All rights reserved.
   Proprietary and confidential. Unauthorized copying, distribution, or use of
   this file, via any medium, is strictly prohibited. Original work product. */
/* eslint-disable */
// K2B DMS — RC36 (security, lane sec36): the owner's SECURITY card (Owner Panel) and the certificate banner every screen shows.
//   OwnSecurity   [data-sec="card"]  green / yellow / red lines: the site certificate (days left, renewal), the nightly backup + the weekly
//                                    restore test, free disk, failed sign-ins in 24 h + the logins waiting now (Unlock — needs a fresh code),
//                                    logins without a sign-in code, how many Admins, the last security check. Never a key, token or code.
//                 [data-sec="events"] the store's security events (sign-ins, account changes, wipes, payroll, alerts) + Export CSV.
//   K2BSecBanner  a thin bar at the bottom of every screen when the certificate runs out within 21 days (red within 7) — any signed-in login.
// The SERVER decides everything (src/routes/security.js: /api/owner/security, /unlock, /events, /banner).

const SEC_COLOR = { green: "#1E7B34", yellow: "#9A6A00", red: "#A02234" };
const SEC_BG = { green: "#EFFAF0", yellow: "#FFF8E5", red: "#FFF0F1" };
const secApi = async (path, method, body) => {
  try { const d = await apiFetch("/owner/security" + path, { method: method || "GET", body, noOwnerOverride: true }); return { ok: true, data: d || {} }; }
  catch (e) { return { ok: false, status: e.status || 0, code: e.body && e.body.code, error: (e.body && e.body.error) || e.message || "Server unreachable" }; }
};
const secWhen = (d) => d ? new Date(d).toLocaleString([], { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" }) : "—";
const SecLine = ({ level, label, children, tag }) => (
  <div data-sec-line={tag} data-sec-level={level || "yellow"} style={{ display: "flex", gap: 10, alignItems: "flex-start", padding: "7px 10px", borderRadius: 6, background: SEC_BG[level] || SEC_BG.yellow, marginBottom: 6, flexWrap: "wrap" }}>
    <span style={{ width: 10, height: 10, borderRadius: 5, marginTop: 4, flex: "0 0 auto", background: SEC_COLOR[level] || SEC_COLOR.yellow }} />
    <b style={{ minWidth: 150, fontSize: 12.5 }}>{label}</b>
    <span style={{ flex: "1 1 220px", fontSize: 12.5, color: "#333", minWidth: 0, overflowWrap: "anywhere" }}>{children}</span>
  </div>
);

const OwnSecurity = ({ fresh }) => {
  const [st, setSt] = React.useState(null);
  const [events, setEvents] = React.useState(null);
  const [showEv, setShowEv] = React.useState(false);
  const load = async () => { const r = await secApi(""); setSt(r.ok ? r.data : { ok: false, error: r.error }); };
  const loadEv = async () => { const r = await secApi("/events?limit=100"); setEvents(r.ok ? (r.data.events || []) : []); };
  React.useEffect(() => { load(); }, []);
  const unlock = async (login) => {
    const r = await secApi("/unlock", "POST", { login });
    window.k2bToast && window.k2bToast(r.ok ? "Login " + login + " can sign in again now." : r.error, r.ok ? "ok" : "warn", 4500);
    load();
  };
  const csv = async () => {
    try {
      const blob = await dmsApiBlob("/owner/security/events?format=csv&limit=5000");   // DMSCore: the same token / store headers as every request
      const a = document.createElement("a"); a.href = URL.createObjectURL(blob); a.download = "security-events.csv"; document.body.appendChild(a); a.click(); setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 500);
    } catch (e) { window.k2bToast && window.k2bToast("The export could not be made: " + e.message, "warn"); }
  };
  const Sect = typeof OwnSection === "function" ? OwnSection : (({ title, children }) => <div><b>{title}</b>{children}</div>);   // OwnerPanel.jsx.txt's card frame
  const TD = typeof OWN_TD === "object" ? OWN_TD : { fontSize: 12.5, padding: "6px 8px", borderBottom: "1px solid #F0F1F4" };
  if (!st) return <Sect tag="security" title="Security"><div style={{ fontSize: 12.5 }}>Loading…</div></Sect>;
  if (st.ok === false) return <Sect tag="security" title="Security"><div style={{ fontSize: 12.5, color: "#A02234" }}>⚠ {st.error}</div></Sect>;
  const c = st.cert || {}, b = st.backup || {}, d = st.disk || {}, s = st.signin || {}, l = st.logins || {}, k = st.checkScript || {}, rn = st.renewal || {};
  const overall = st.level || "yellow";
  return (
    <Sect tag="security" title={"Security — " + (overall === "green" ? "all good" : overall === "yellow" ? "needs a look" : "needs action")}
          sub="Checked by the server. Green = fine, yellow = look soon, red = act now. Nothing here shows a key, a password or a code.">
      <div data-sec="card" data-sec-overall={overall}>
        <SecLine tag="cert" level={c.level} label="Web certificate">
          {c.daysLeft === null || c.daysLeft === undefined ? (c.note || c.error || "Not checked yet (the server checks once a day).") : (c.daysLeft < 0 ? "EXPIRED on " : c.daysLeft + " days left — runs out ") + String(c.validTo || "").slice(0, 10) + (c.issuer ? " (" + c.issuer + ")" : "")}
          {rn.state && rn.state !== "active" ? <span> · automatic renewal: <b>{rn.state}</b></span> : rn.state === "active" ? <span> · renews by itself</span> : null}
        </SecLine>
        <SecLine tag="backup" level={b.level} label="Nightly backup">
          {b.backup ? <>Last copy {secWhen(b.backup.at)} — {b.backup.ok ? "OK" : "FAILED"}{b.backup.ok ? (b.backup.encrypted ? ", encrypted" : ", NOT encrypted (set a backup passphrase)") : ""}</> : "No nightly backup yet."}
          {b.restoreTest ? <> · last restore test {secWhen(b.restoreTest.at)} — {b.restoreTest.ok ? "OK (row counts match)" : "FAILED"}</> : <> · no restore test yet</>}
          {b.note ? <div style={{ color: SEC_COLOR.red }}>{b.note}</div> : null}
        </SecLine>
        <SecLine tag="disk" level={d.level} label="Free disk">{d.freePct !== undefined ? d.freePct + " % free (" + d.freeGb + " GB)" : (d.note || "unknown")}</SecLine>
        <SecLine tag="signin" level={s.level} label="Sign-ins">
          {s.failed24h || 0} wrong password(s) in the last 24 hours{(s.waiting || []).some((x) => x.waiting) ? "" : " · no login is waiting"}
          {(s.waiting || []).filter((x) => x.waiting).map((x) => (
            <div key={x.login} data-sec-waiting={x.login} style={{ display: "flex", gap: 8, alignItems: "center", marginTop: 4, flexWrap: "wrap" }}>
              <span>⏳ <b>{x.login}</b> waits {Math.ceil((x.retryInSec || 0) / 60)} more minute(s)</span>
              {x.userId && <button className="k2b-button small" data-sec-unlock={x.userId} disabled={!fresh} title={fresh ? "" : "Confirm it's you first (a fresh code)"} onClick={() => unlock(x.userId)}>Unlock</button>}
            </div>))}
        </SecLine>
        <SecLine tag="logins" level={l.level} label="Logins">{l.active} active · {l.admins} Admin{l.admins === 1 ? "" : "s"} · {l.withoutCode} without a sign-in code</SecLine>
        <SecLine tag="check" level={k.level} label="Security check">{k.at ? "Last run " + k.at + (k.summary ? " — " + k.summary : "") : (k.note || "Not run yet.")}</SecLine>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 4 }}>
          <button className="k2b-button small" data-sec="reload" onClick={async () => { await secApi("/check", "POST", {}); load(); }}>Check again</button>
          <button className="k2b-button small" data-sec="events-open" onClick={() => { setShowEv(!showEv); if (!events) loadEv(); }}>{showEv ? "Hide" : "Show"} security events</button>
          <button className="k2b-button small" data-sec="events-csv" onClick={csv}>Export CSV</button>
        </div>
        {showEv && <div data-sec="events" style={{ marginTop: 8, maxHeight: 320, overflow: "auto", border: "1px solid #E2E5EA", borderRadius: 6 }}>
          <table style={{ borderCollapse: "collapse", width: "100%" }}><tbody>{(events || []).map((ev) => (
            <tr key={ev.id}><td style={{ ...TD, whiteSpace: "nowrap" }}>{secWhen(ev.at)}</td><td style={TD}>{ev.actor_name || ev.actor_id}</td><td style={TD}>{ev.action}{ev.target_user ? " — " + ev.target_user : (ev.detail && ev.detail.login ? " — " + ev.detail.login : "")}</td></tr>))}
            {events && !events.length && <tr><td style={TD}>No security events yet.</td></tr>}</tbody></table>
        </div>}
      </div>
    </Sect>
  );
};

/* the certificate banner: a thin bar at the bottom of every screen (any signed-in login), hidden for this browser tab with × */
const K2BSecBanner = () => {
  const [b, setB] = React.useState(null);
  const [hidden, setHidden] = React.useState(() => { try { return sessionStorage.getItem("k2b-sec-banner-hidden") || ""; } catch (e) { return ""; } });
  React.useEffect(() => {
    let alive = true;
    const poll = async () => { try { const r = await apiFetch("/owner/security/banner", { noOwnerOverride: true }); if (alive) setB(r && r.banner ? r.banner : null); } catch (e) { /* signed out / older server: no banner */ } };
    const t1 = setTimeout(poll, 8000), t2 = setInterval(poll, 30 * 60 * 1000);
    return () => { alive = false; clearTimeout(t1); clearInterval(t2); };
  }, []);
  if (!b || hidden === b.level + ":" + b.daysLeft) return null;
  return (
    <div data-sec="banner" data-sec-level={b.level} role="status" style={{ position: "fixed", left: 0, right: 0, bottom: 0, zIndex: 8500, background: b.level === "red" ? "#A02234" : "#FFD24A", color: b.level === "red" ? "#FFF" : "#2B2100", fontSize: 12.5, padding: "6px 40px 6px 12px", boxShadow: "0 -1px 4px rgba(0,0,0,.2)", lineHeight: 1.35 }}>
      🔒 {b.text}
      <button aria-label="Hide" onClick={() => { const v = b.level + ":" + b.daysLeft; try { sessionStorage.setItem("k2b-sec-banner-hidden", v); } catch (e) {} setHidden(v); }} style={{ position: "absolute", right: 8, top: 3, background: "transparent", border: 0, color: "inherit", fontSize: 16, cursor: "pointer" }}>×</button>
    </div>
  );
};
(function mountSecBanner() {
  // RC36 merge (rc36m): never on a CUSTOMER's signing page (?rosign= / ?dealsign=, e.g. signed at the counter PC where a staff login is
  // still stored): the staff security banner is not for customers, and its React root interleaved with that page's first render
  if (/[?&](rosign|dealsign)=/.test(location.search || "")) return;
  const go = () => { try { if (document.getElementById("k2b-sec-banner")) return; const el = document.createElement("div"); el.id = "k2b-sec-banner"; document.body.appendChild(el); ReactDOM.createRoot(el).render(<K2BSecBanner />); } catch (e) { /* the banner is a convenience only */ } };
  if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", go); else go();
})();

Object.assign(window, { OwnSecurity, K2BSecBanner });