import { an as React, cT as f, j as jsxRuntimeExports, cU as c, cV as navigate, cW as t, cX as $, cY as d, cZ as s, c_ as e, n as namedRoutes, d as c$1, c as a, g, cS as ForwardRef, x as l, y as l$1, z as m, A as o, B as i, C as m$1, L as Link, e as gql, s as s$1 } from "./index-Cr4zbAtA.js";
import { M as Metadata } from "./Metadata-aK5zM6ek.js";
import { c as createCell } from "./createCell-D7cbP3PP.js";
import { F as ForwardRef$1 } from "./GlobeAltIcon-6nDidfy4.js";
import { f as formatDistanceToNow } from "./formatDistanceToNow-OiNykSxl.js";
import { p as parseISO } from "./parseISO-Bd-Y3niL.js";
import { F as ForwardRef$2 } from "./ExclamationTriangleIcon-DBJKiWFf.js";
import "./getRoundingMethod-DBxbmHsV.js";
import "./toDate-C1yAaWVq.js";
import "./en-US-femdFzaW.js";
const makeTrackerClassName = s("Tracker");
const TrackerBlock = React.forwardRef((props, ref) => {
  const {
    color,
    tooltip,
    to,
    ...other
  } = props;
  const {
    tooltipProps,
    getReferenceProps
  } = f();
  return (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: c([ref, tooltipProps.refs.setReference]), onClick: () => {
      if (to) {
        navigate(to);
      }
    }, className: t(makeTrackerClassName("trackingBlock"), "h-full w-full rounded-[1px] first:rounded-l-[4px] last:rounded-r-[4px]", $(color ?? "gray", e.background).bgColor), ...other, ...getReferenceProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(d, { text: tooltip, ...tooltipProps }) })
  );
});
TrackerBlock.displayName = "TrackerBlock";
const FlightTracker = React.forwardRef((props, ref) => {
  const {
    data = [],
    className,
    ...other
  } = props;
  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, className: t(makeTrackerClassName("root"), "flex h-10 items-center space-x-0.5", className), ...other, children: data.map((item, idx) => /* @__PURE__ */ jsxRuntimeExports.jsx(TrackerBlock, { color: item.color, tooltip: item.tooltip, to: item.to }, item.key ?? idx)) });
});
FlightTracker.displayName = "Tracker";
const STATUS_COLOR_MAPPINF = {
  OK: "emerald-500",
  ERROR: "red-500",
  WARN: "gray-300"
};
const FlightsStatusCard = ({
  flightsPreview
}) => {
  const {
    status,
    statuses,
    startedAt,
    endedAt,
    hostname,
    caption,
    flights
  } = flightsPreview;
  const data = flights.map((flight) => {
    var _a;
    const status2 = ((_a = flight.metadata) == null ? void 0 : _a["status"]) || "OK";
    const when = formatDistanceToNow(parseISO(flight.performance.startedAt), {
      includeSeconds: true,
      addSuffix: true
    });
    const tooltip = [flight.preview, when, status2].join(" - ");
    return {
      status: status2,
      tooltip,
      to: namedRoutes.flight({
        id: flight.id
      })
    };
  });
  const combinedData = data.map((item) => {
    return {
      ...item,
      color: STATUS_COLOR_MAPPINF[item.status]
    };
  });
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(c$1, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs(a, { alignItems: "center", justifyContent: "start", className: "space-x-2", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(g, { icon: ForwardRef, variant: "solid", tooltip: caption }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong", children: "Flight Status" })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex shrink-0 items-center gap-2 rounded-tremor-full px-3 py-1 text-tremor-default text-tremor-content-emphasis ring-1 ring-inset ring-tremor-ring dark:text-dark-tremor-content-emphasis dark:ring-dark-tremor-ring", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "-ml-0.5 h-2 w-2 rounded-tremor-full bg-emerald-500", "aria-hidden": true }),
        status
      ] })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-8 flex items-center justify-between", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-1.5", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$1, { className: "h-5 w-5 shrink-0 text-emerald-500", "aria-hidden": true }),
        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong", children: hostname })
      ] }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong", children: caption })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(FlightTracker, { data: combinedData, className: "mt-4 w-full lg:flex" }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-3 flex items-center justify-between text-tremor-default text-tremor-content dark:text-dark-tremor-content", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatDistanceToNow(parseISO(startedAt), {
        includeSeconds: true,
        addSuffix: true
      }) }),
      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatDistanceToNow(parseISO(endedAt), {
        includeSeconds: true,
        addSuffix: true
      }) })
    ] }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-6 flex flex-wrap items-center gap-2", children: statuses.map((status2) => {
      return /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-x-2 rounded-tremor-small bg-tremor-background-subtle px-2 py-0.5 text-tremor-default text-tremor-content dark:bg-dark-tremor-background-subtle dark:text-dark-tremor-content-emphasis", children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "h-2 w-2 rounded-tremor-full bg-emerald-500" }),
        status2
      ] }, status2);
    }) })
  ] });
};
const FlightsTable = ({
  flightsPreview
}) => {
  const messages = flightsPreview.flights.map((flight) => {
    var _a, _b, _c;
    const {
      id,
      preview,
      payload,
      metadata,
      performance
    } = flight;
    const rsaTitle = preview.includes("#") ? preview.split("/").at(-1) : "";
    const fetchUrl = ((_a = metadata == null ? void 0 : metadata.request) == null ? void 0 : _a.url) || "";
    const splitUrl = fetchUrl.split("?").slice(1).join("?").split("&");
    const urlLocation = splitUrl[0].replace("__rwjs__pathname=", "");
    const urlSearch = splitUrl.slice(1).join("&").replace(/^__rwjs__search=/, "");
    const rscTitle = urlLocation + urlSearch;
    return {
      type: "RSC_CHUNK",
      tabId: 0,
      data: {
        id,
        title: rsaTitle || rscTitle,
        fetchUrl: ((_b = metadata == null ? void 0 : metadata.request) == null ? void 0 : _b.url) || "",
        fetchHeaders: ((_c = metadata == null ? void 0 : metadata.request) == null ? void 0 : _c.headers) || {},
        fetchStartTime: 0,
        chunkStartTime: parseISO(performance.startedAt).getTime(),
        chunkEndTime: parseISO(performance.endedAt).getTime(),
        chunkDuration: performance.duration,
        chunkValue: Array.from(new TextEncoder().encode(payload)),
        sizeInBytes: performance.sizeInBytes / 1024
      }
    };
  });
  return /* @__PURE__ */ jsxRuntimeExports.jsx(c$1, { className: "mx-auto mt-4 w-full", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(l, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(l$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { children: "Preview" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { className: "text-right", children: "When" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { className: "text-right", children: "Duration (ms)" }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(o, { className: "text-right", children: "Size (kb)" })
    ] }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(i, { children: messages.slice().reverse().map((message, idx) => {
      const data = message == null ? void 0 : message.data;
      if (data === void 0) {
        return;
      }
      return /* @__PURE__ */ jsxRuntimeExports.jsxs(m, { children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: namedRoutes.flight({
          id: data.id
        }), className: "font-semibold text-tremor-content hover:text-tremor-brand dark:text-dark-tremor-content-emphasis dark:hover:text-dark-tremor-brand", children: data.title }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { className: "text-right", children: formatDistanceToNow(data.chunkStartTime, {
          includeSeconds: true,
          addSuffix: true
        }) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { className: "text-right", children: data.chunkDuration.toFixed(3) }),
        /* @__PURE__ */ jsxRuntimeExports.jsx(m$1, { className: "text-right", children: data.sizeInBytes.toFixed(3) })
      ] }, idx);
    }) })
  ] }) });
};
const beforeQuery = (props) => {
  return {
    variables: props,
    pollInterval: 5e3
  };
};
const QUERY = gql`
  query FlightsPreviewQuery {
    flightsPreview {
      id
      status
      statuses
      startedAt
      endedAt
      hostname
      caption
      flights {
        id
        preview
        payload
        createdAt
        metadata
        performance {
          startedAt
          endedAt
          duration
          sizeInBytes
        }
      }
    }
  }
`;
const Loading = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(c$1, { className: "sm:mx-auto sm:max-w-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
  className: "text-center",
  children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef, { className: "mx-auto h-7 w-7 animate-bounce text-tremor-content-subtle dark:text-dark-tremor-content-subtle", "aria-hidden": true }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 animate-pulse text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong", children: "Loading ..." })
  ]
}) }) });
const Empty = () => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(c$1, { className: "sm:mx-auto sm:max-w-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-44 items-center justify-center rounded-tremor-small border border-dashed border-tremor-border p-4 dark:border-dark-tremor-border", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
  className: "text-center",
  children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef, { className: "mx-auto h-7 w-7 text-tremor-content-subtle dark:text-dark-tremor-content-subtle", "aria-hidden": true }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong", children: "No data to show" }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-tremor-default text-tremor-content dark:text-dark-tremor-content", children: "Start sending data by using your RSC application" })
  ]
}) }) }) });
const Failure = ({
  error
}) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex h-screen items-center justify-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(c$1, { className: "sm:mx-auto sm:max-w-lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
  className: "text-center",
  children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(ForwardRef$2, { className: "mx-auto h-7 w-7 animate-pulse text-tremor-content-subtle dark:text-dark-tremor-content-subtle", "aria-hidden": true }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 animate-pulse text-tremor-default font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong", children: error == null ? void 0 : error.message })
  ]
}) }) });
const Success = ({
  flightsPreview
}) => {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
    children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(FlightsStatusCard, { flightsPreview }),
      /* @__PURE__ */ jsxRuntimeExports.jsx(FlightsTable, { flightsPreview })
    ]
  });
};
const FlightsCell = createCell({ beforeQuery, QUERY, Loading, Empty, Failure, Success, displayName: "FlightsCell" });
const RscPayloadsPage = () => {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(Metadata, { title: "RSC Payloads", description: "Track RSC Payload status and view details." }),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mb-4 flex items-center space-x-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Link, { to: namedRoutes.flights(), className: "text-tremor-link hover:text-tremor-brand", children: /* @__PURE__ */ jsxRuntimeExports.jsx(s$1, { children: "RSC Payloads" }) }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(FlightsCell, {})
  ] });
};
export {
  RscPayloadsPage as default
};
