import { r as reactExports, j as jsxRuntimeExports, bv as b, w as h } from "./index-Cr4zbAtA.js";
import { M as Metadata } from "./Metadata-aK5zM6ek.js";
function TrashIcon({
  title,
  titleId,
  ...props
}, svgRef) {
  return /* @__PURE__ */ reactExports.createElement("svg", Object.assign({
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    "aria-hidden": "true",
    "data-slot": "icon",
    ref: svgRef,
    "aria-labelledby": titleId
  }, props), title ? /* @__PURE__ */ reactExports.createElement("title", {
    id: titleId
  }, title) : null, /* @__PURE__ */ reactExports.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
  }));
}
const ForwardRef = reactExports.forwardRef(TrashIcon);
const RscCachePage = () => {
  const webSocket = reactExports.useRef(null);
  const [rscCache, setRscCache] = reactExports.useState({});
  const [fullPageCacheEnabled, setFullPageCacheEnabled] = reactExports.useState(true);
  const [lastUpdatedKey, setLastUpdatedKey] = reactExports.useState("");
  reactExports.useEffect(() => {
    const socket = new WebSocket("ws://127.0.0.1:18998");
    socket.addEventListener("open", () => {
      socket.send("Connection established");
      setTimeout(() => {
        socket.send(JSON.stringify({
          id: "rsc-cache-read"
        }));
      }, 200);
    });
    socket.addEventListener("message", (event) => {
      const message = event.data.toString();
      console.log("Message from server", message);
      if (message.startsWith("{")) {
        const data = JSON.parse(event.data);
        console.log("Message data", data);
        if (data.id === "rsc-cache-set") {
          setRscCache(data.payload.fullCache);
          setLastUpdatedKey(data.payload.updatedKey);
        }
        if (data.id === "rsc-cache-update") {
          setRscCache(data.payload.fullCache);
        }
      }
    });
    webSocket.current = socket;
    return () => {
      var _a;
      return (_a = webSocket.current) == null ? void 0 : _a.close();
    };
  }, []);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Metadata, { title: "Rsc Cache Introspection", description: "View and manage the Rsc Cache." }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("h1", { className: "mb-4 flex text-2xl text-tremor-content-strong dark:text-dark-tremor-content-strong", children: "Full-page Cache Entries" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-row", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(b, { checked: fullPageCacheEnabled, onChange: (value) => {
          const ws = webSocket.current;
          if (value) {
            ws == null ? void 0 : ws.send(JSON.stringify({
              id: "rsc-cache-enable"
            }));
          } else {
            ws == null ? void 0 : ws.send(JSON.stringify({
              id: "rsc-cache-disable"
            }));
            ws == null ? void 0 : ws.send(JSON.stringify({
              id: "rsc-cache-clear"
            }));
          }
          setFullPageCacheEnabled(value);
        }, className: "leading-3" }),
        fullPageCacheEnabled ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "ml-4 text-tremor-content dark:text-dark-tremor-content", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Full-Page Caching Enabled" }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs italic", children: "Disabling clears the cache" })
        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-4 flex flex-col justify-center text-tremor-content dark:text-dark-tremor-content", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Full-Page Caching Disabled" }) })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(h, { variant: "secondary", icon: ForwardRef, onClick: () => {
        var _a;
        (_a = webSocket.current) == null ? void 0 : _a.send(JSON.stringify({
          id: "rsc-cache-clear"
        }));
      }, children: "Clear Cache" })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("dl", { className: "pt-4 text-xs text-tremor-content dark:text-dark-tremor-content", children: Object.entries(rscCache).map(([key, value]) => {
      const splitKey = key.split("&");
      const keyLocation = splitKey[0].replace("__rwjs__pathname=", "");
      const keySearch = splitKey.slice(1).join("&").replace(/^__rwjs__search=/, "");
      const isLastUpdated = key === lastUpdatedKey;
      return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pb-1", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("dt", { className: "font-bold" + (isLastUpdated ? " italic" : ""), children: [
          keyLocation + keySearch,
          ":",
          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "ml-2 inline-block text-red-700", onClick: () => {
            var _a;
            (_a = webSocket.current) == null ? void 0 : _a.send(JSON.stringify({
              id: "rsc-cache-delete",
              key
            }));
          }, children: "Delete" })
        ] }),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("dd", { className: "pl-4 font-mono", children: [
          JSON.stringify(value).slice(0, 150),
          "…"
        ] })
      ] }, key + isLastUpdated.toString());
    }) })
  ] });
};
export {
  RscCachePage as default
};
