import { j as jsxRuntimeExports } from "../../../../../_virtual/jsx-runtime.js";
import { tx as D, css as E } from "../../../../style-system/dist/twind.js";
import { useMemo, useCallback } from "react";
import { BsStars } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/bs/index.js";
import { IoIosHelpCircleOutline } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/io/index.js";
import { LuPlus, LuUndo, LuRedo } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/lu/index.js";
import { RxDesktop, RxMobile, RxZoomOut, RxZoomIn, RxExternalLink, RxRocket } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/rx/index.js";
import { VscCopy, VscSettings } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/vsc/index.js";
import "../../../../../node_modules/.pnpm/@formkit_auto-animate@0.8.2/node_modules/@formkit/auto-animate/index.js";
import "../../../../../node_modules/.pnpm/react-hot-toast@2.5.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-hot-toast/dist/index.js";
import { IoChatboxEllipsesOutline } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/io5/index.js";
import { RiArrowDownSLine } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/ri/index.js";
import { useEditorHelpers, usePreviewMode, useLogoLink, useDebugMode, usePanel, useModal, useZoom, useChatVisible } from "../../../../../use-editor.js";
import dark from "../../../../../creatives/upstart-dark.svg.js";
import logo from "../../../../../creatives/upstart.svg.js";
import { PiPalette } from "../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.1.1/node_modules/react-icons/pi/index.js";
import { useUserConfig } from "../hooks/use-user-config.js";
import { useDraft, usePageVersion, useSitemap, useSite, usePage, useDraftUndoManager, useGenerationState } from "../../../../../use-page-data.js";
import { Tooltip as e } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/tooltip.js";
import { Root as p, Trigger as s, Content as C } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/hover-card.js";
import { Root as I, Trigger as h, Content as g, Label as y, CheckboxItem as T, Item as v } from "../../../../../node_modules/.pnpm/@radix-ui_themes@3.2.1_@types_react-dom@19.1.9_@types_react@19.1.13__@types_react@19.1._832fa1fef691e6e9510ada03948dc85c/node_modules/@radix-ui/themes/dist/esm/components/dropdown-menu.js";
function NavBar() {
  const editorHelpers = useEditorHelpers();
  const previewMode = usePreviewMode();
  const logoLink = useLogoLink();
  useDraft();
  const pageVersion = usePageVersion();
  const pages = useSitemap();
  const site = useSite();
  const page = usePage();
  const debug = useDebugMode();
  const { panel } = usePanel();
  useModal();
  const { canZoomIn, canZoomOut, zoomIn, zoomOut, zoom, resetZoom } = useZoom();
  const userConfig = useUserConfig();
  const chatVisible = useChatVisible();
  const { undo, redo, futureStates, pastStates } = useDraftUndoManager();
  const canRedo = useMemo(() => futureStates.length > 0, [futureStates]);
  const canUndo = useMemo(() => pastStates.length > 0, [pastStates]);
  const currentPageLabel = page.label ?? "Untitled Page";
  const generationState = useGenerationState();
  const publish = useCallback(
    (wholeSite = false) => {
      if (wholeSite) {
        editorHelpers.onPublish({ mode: "publish-site", siteId: site.id });
      } else {
        editorHelpers.onPublish({
          mode: "publish-page",
          pageId: page.id,
          siteId: site.id,
          pageVersionId: pageVersion ?? "latest"
        });
      }
    },
    [site.id, page.id, pageVersion, editorHelpers.onPublish]
  );
  const switchPreviewMode = useCallback(
    (e2) => {
      e2.stopPropagation();
      editorHelpers.setPreviewMode(previewMode === "mobile" ? "desktop" : "mobile");
      editorHelpers.hidePanel("library");
    },
    [previewMode, editorHelpers.setPreviewMode, editorHelpers.hidePanel]
  );
  const baseCls = D(`transition-opacity duration-300 px-2 min-w-[2.5rem]`);
  const commonCls = `${baseCls}
    hover:bg-upstart-100 dark:hover:bg-white/10
    disabled:text-gray-300
  `;
  const activeCls = `bg-upstart-100 dark:bg-upstart-700/80`;
  const rocketBtn = D(
    `transition-opacity duration-300 !rounded-full !p-px
    bg-gradient-to-tr from-orange-400 to-yellow-300 border-l border-l-orange-300
  hover:opacity-80`
  );
  const btnWithArrow = "cursor-default !aspect-auto";
  const btnClass = `flex items-center justify-center my-1 py-1 gap-x-0.5 px-1.5 group relative
  focus-visible:outline-none disabled:hover:cursor-default rounded-md
  disabled:hover:bg-transparent text-sm
  `;
  const squareBtn = "aspect-square";
  const arrowClass = "h-4 w-4 opacity-60 -ml-0.5";
  const separator = D("h-[70%] w-px bg-black/10 mx-1");
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "nav",
    {
      role: "navigation",
      className: D(
        `z-[9999] h-full gap-1 px-4 flex text-xl w-full items-center transition-opacity duration-300
        text-black/70 dark:text-dark-200 bg-white`,
        E({
          gridArea: "navbar"
        })
      ),
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "button",
          {
            type: "button",
            onClick: () => {
              window.location.href = logoLink;
            },
            className: D("flex-shrink-0"),
            children: /* @__PURE__ */ jsxRuntimeExports.jsxs("picture", { className: D("h-8 w-auto"), children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx("source", { srcSet: dark, className: D("h-8 w-auto"), media: "(prefers-color-scheme: dark)" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: logo, className: D("h-8 w-auto"), alt: "Upstart" })
            ] })
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("flex items-center gap-1 flex-1", generationState.isSetup && !debug && "hidden"), children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            TopbarMenu,
            {
              id: "switch-page-menu-btn",
              items: [
                { label: "New page", onClick: () => editorHelpers.onShowPopup?.("add-page") },
                { label: "Duplicate page", onClick: () => editorHelpers.onShowPopup?.("duplicate-page") },
                { type: "separator" },
                ...pages.length > 1 ? [{ type: "label", label: "Switch to page" }] : [],
                ...pages.length > 1 ? pages.map((p2) => ({
                  label: p2.label,
                  type: "checkbox",
                  checked: page.id === p2.id || page.attributes.path === p2.attributes.path,
                  onClick: () => {
                    const currentURL = new URL(window.location.href);
                    currentURL.searchParams.set("p", p2.id);
                    currentURL.searchParams.set("r", `${Date.now()}`);
                    window.location.href = currentURL.href;
                  }
                })) : []
              ],
              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                "button",
                {
                  type: "button",
                  className: D(btnClass, commonCls, btnWithArrow, "!px-1.5 ml-4 cursor-pointer !py-2"),
                  children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx(VscCopy, { className: D("h-5 w-auto") }),
                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("flex flex-col gap-1 ml-1.5 mr-2 justify-start items-start"), children: [
                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: D("text-xs inline-block font-thiner"), children: "Page" }),
                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: D("text-sm inline-block -mt-[7px] font-medium max-w-[10dvw] truncate"), children: currentPageLabel })
                    ] }),
                    /* @__PURE__ */ jsxRuntimeExports.jsx(RiArrowDownSLine, { className: D(arrowClass) })
                  ]
                }
              )
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("max-lg:hidden flex-1") }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Toggle chat", side: "bottom", align: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              onClick: () => editorHelpers.toggleChat(),
              type: "button",
              className: D(btnClass, squareBtn, commonCls, chatVisible && activeCls),
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoChatboxEllipsesOutline, { className: D("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            e,
            {
              content: previewMode === "desktop" ? "Add bricks" : "Switch to desktop view to add bricks",
              side: "bottom",
              align: "center",
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                "button",
                {
                  onClick: () => editorHelpers.togglePanel("library"),
                  type: "button",
                  disabled: previewMode === "mobile",
                  className: D(
                    btnClass,
                    squareBtn,
                    commonCls,
                    panel === "library" && previewMode === "desktop" && activeCls
                  ),
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(LuPlus, { className: D("h-5 w-auto") })
                }
              )
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: separator }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Color theme & fonts", side: "bottom", align: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              onClick: () => editorHelpers.togglePanel("theme"),
              type: "button",
              className: D(btnClass, squareBtn, commonCls, panel === "theme" && activeCls),
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(PiPalette, { className: D("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Page / Site settings", side: "bottom", align: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              onClick: () => editorHelpers.togglePanel("settings"),
              type: "button",
              className: D(btnClass, squareBtn, commonCls, panel === "settings" && activeCls),
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(VscSettings, { className: D("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: separator }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Undo", side: "bottom", align: "center", "aria-disabled": !canUndo, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              disabled: !canUndo,
              onClick: () => undo(),
              type: "button",
              className: D(btnClass, commonCls, squareBtn, "ml-auto"),
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(LuUndo, { className: D("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Redo", side: "bottom", align: "center", "aria-disabled": !canRedo, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              disabled: !canRedo,
              onClick: () => redo(),
              type: "button",
              className: D(btnClass, squareBtn, commonCls),
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(LuRedo, { className: D("h-5 w-auto") })
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: separator }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            e,
            {
              content: `Switch to ${previewMode === "desktop" ? "mobile" : "desktop"} view`,
              side: "bottom",
              align: "center",
              children: /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { type: "button", className: D(btnClass, squareBtn, commonCls), onClick: switchPreviewMode, children: [
                previewMode === "desktop" && /* @__PURE__ */ jsxRuntimeExports.jsx(RxDesktop, { className: D("h-5 w-auto") }),
                previewMode === "mobile" && /* @__PURE__ */ jsxRuntimeExports.jsx(RxMobile, { className: D("h-5 w-auto") })
              ] })
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              onClick: zoomOut,
              disabled: !canZoomOut,
              type: "button",
              className: D(btnClass, squareBtn, commonCls),
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(RxZoomOut, { className: D("h-5 w-auto") })
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              onClick: zoomIn,
              disabled: !canZoomIn,
              type: "button",
              className: D(btnClass, squareBtn, commonCls),
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(RxZoomIn, { className: D("h-5 w-auto") })
            }
          ),
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Click to reset zoom", side: "bottom", align: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
            "button",
            {
              type: "button",
              onClick: resetZoom,
              className: D(
                "text-gray-500 dark:text-dark-200 text-[.85rem] text-right cursor-pointer hover:text-upstart-800 min-w-[40px]"
              ),
              children: [
                (zoom * 100).toFixed(0),
                "%"
              ]
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: separator }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(e, { content: "Open preview", side: "bottom", align: "center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
            "button",
            {
              type: "button",
              className: D(btnClass, squareBtn, commonCls),
              onClick: () => {
                window.open(`/sites/${site.id}/pages/${page.id}/preview`, "upstart_preview");
              },
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(RxExternalLink, { className: "h-5 w-auto" })
            }
          ) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: separator }),
          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("flex flex-col gap-1.5 leading-none text-sm items-start px-1.5"), children: [
            /* @__PURE__ */ jsxRuntimeExports.jsxs(
              "span",
              {
                className: D(
                  "inline-flex items-center gap-1 text-nowrap",
                  userConfig.credits === 0 && "text-red-800 font-semibold"
                ),
                children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx(BsStars, { className: D("opacity-60 w-4 h-4") }),
                  " ",
                  userConfig.credits.toLocaleString(),
                  " credits"
                ]
              }
            ),
            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: D("inline-flex gap-1 items-center"), children: [
              /* @__PURE__ */ jsxRuntimeExports.jsxs(p, { children: [
                /* @__PURE__ */ jsxRuntimeExports.jsx(s, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                  "button",
                  {
                    type: "button",
                    className: D(
                      "hover:underline cursor-help tracking-tight underline-offset-2 text-[88%] text-upstart-700 hover:text-upstart-700 text-nowrap"
                    ),
                    children: "What's this?"
                  }
                ) }),
                /* @__PURE__ */ jsxRuntimeExports.jsx(C, { maxWidth: "380px", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-sm flex flex-col gap-2 justify-start items-start", children: [
                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { children: "Credits are spent when you generate content with AI." }),
                  /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { className: "list-disc list-inside", children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "pl-1", children: "On the free plan, usage is limited by day & month" }),
                    /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "pl-1", children: "On paid plans, usage is only limited by month" })
                  ] }),
                  /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
                    "If you ever run out of credits, you can either",
                    " ",
                    /* @__PURE__ */ jsxRuntimeExports.jsx(
                      "button",
                      {
                        type: "button",
                        className: D("text-upstart-700 cursor-pointer font-medium hover:underline"),
                        onClick: () => {
                          alert("TODO upgrade");
                        },
                        children: "upgrade your plan"
                      }
                    ),
                    " ",
                    "or",
                    " ",
                    /* @__PURE__ */ jsxRuntimeExports.jsx(
                      "button",
                      {
                        type: "button",
                        className: D(
                          "text-nowrap text-upstart-700 cursor-pointer font-medium hover:underline"
                        ),
                        onClick: () => {
                          editorHelpers.onShowPopup?.("purchase-credits");
                        },
                        children: "buy more"
                      }
                    ),
                    " ",
                    "credits ."
                  ] })
                ] }) })
              ] }),
              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "•" }),
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                "button",
                {
                  type: "button",
                  className: D(
                    "text-nowrap hover:underline tracking-tight underline-offset-2 text-[88%] text-upstart-700 hover:text-orange-800"
                  ),
                  onClick: () => {
                    editorHelpers.onShowPopup?.("purchase-credits");
                  },
                  children: "Buy more"
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: separator }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: D(btnClass, commonCls, squareBtn), children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoIosHelpCircleOutline, { className: "h-5 w-auto" }) }),
          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: D("flex-1", "border-x border-l-upstart-400 border-r-upstart-700") }),
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            TopbarMenu,
            {
              id: "publish-menu-btn",
              items: [
                { label: "Publish this page", onClick: () => publish() },
                { label: "Publish all pages", onClick: () => publish(true) },
                { type: "separator" },
                { label: "Schedule publication", onClick: () => editorHelpers.onShowPopup?.("schedule-publish") }
              ],
              children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { type: "button", className: D(btnClass, rocketBtn, btnWithArrow), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
                "div",
                {
                  style: {
                    textShadow: "1px 1px 0px rgba(255, 255, 255, 0.3)"
                  },
                  className: D(
                    "font-semibold inline-flex gap-1.5 bg-orange-100 py-2 px-3 rounded-full text-nowrap items-center cursor-pointer",
                    E({ fontSize: ".94rem" })
                  ),
                  children: [
                    /* @__PURE__ */ jsxRuntimeExports.jsx(RxRocket, { className: D("h-4 w-auto stroke-orange-600") }),
                    "Publish",
                    /* @__PURE__ */ jsxRuntimeExports.jsx(RiArrowDownSLine, { className: D(arrowClass, "!text-orange-700") })
                  ]
                }
              ) })
            }
          )
        ] })
      ]
    }
  );
}
function TopbarMenu(props) {
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(I, { children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(h, { className: "focus:outline-none", id: props.id, children: props.children }),
    /* @__PURE__ */ jsxRuntimeExports.jsx(g, { side: "bottom", children: props.items.map(
      (item, index) => item.type === "separator" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "my-1.5 h-px bg-black/10" }, index) : item.type === "label" ? /* @__PURE__ */ jsxRuntimeExports.jsx(y, { children: item.label }, item.label) : item.type === "checkbox" ? /* @__PURE__ */ jsxRuntimeExports.jsx(T, { checked: item.checked, onClick: item.onClick, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
        "div",
        {
          className: "group flex justify-start items-center text-nowrap rounded-[inherit]\n                py-1.5 w-fulldark:text-white/90 text-left data-[focus]:bg-upstart-600 data-[focus]:text-white ",
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pr-3", children: item.label }),
            item.shortcut && /* @__PURE__ */ jsxRuntimeExports.jsx(
              "kbd",
              {
                className: "ml-auto font-sans text-right text-[smaller] text-black/50 dark:text-dark-300\n                    group-hover:text-white/90\n                      group-data-[focus]:text-white/70 group-data-[active]:text-white/70",
                children: item.shortcut
              }
            )
          ]
        }
      ) }, item.label) : /* @__PURE__ */ jsxRuntimeExports.jsx(v, { onClick: item.onClick, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
        "div",
        {
          className: "group flex justify-start items-center text-nowrap rounded-[inherit]\n                py-1.5 w-fulldark:text-white/90 text-left data-[focus]:bg-upstart-600 data-[focus]:text-white ",
          children: [
            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "pr-3", children: item.label }),
            item.shortcut && /* @__PURE__ */ jsxRuntimeExports.jsx(
              "kbd",
              {
                className: "ml-auto font-sans text-right text-[smaller] text-black/50 dark:text-dark-300\n                    group-hover:text-white/90\n                      group-data-[focus]:text-white/70 group-data-[active]:text-white/70",
                children: item.shortcut
              }
            )
          ]
        }
      ) }, item.label)
    ) })
  ] });
}
export {
  NavBar as default
};
//# sourceMappingURL=NavBar.js.map
