var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/pisellRecordBoard/shellFrame/ResourceWall/ResourceWallControlPanel.tsx
var ResourceWallControlPanel_exports = {};
__export(ResourceWallControlPanel_exports, {
  ResourceWallControlPanel: () => ResourceWallControlPanel
});
module.exports = __toCommonJS(ResourceWallControlPanel_exports);
var import_react = __toESM(require("react"));
var import_react_dom = require("react-dom");
var import_locales = require("../../../../locales");
var import_ResourceWallControlPanelColorTab = require("./ResourceWallControlPanelColorTab");
var import_ResourceWallControlPanelLayoutTab = require("./ResourceWallControlPanelLayoutTab");
var import_venueWallUtils = require("./venueWallUtils");
var buildApplyPayload = (resourceIds, draft, boardingSoonBeforeMin) => ({
  resourceIds: [...resourceIds],
  layoutKey: draft.draftLayoutKey,
  customCols: Math.max(1, Math.min(6, draft.draftCustomCols)),
  customRows: Math.max(1, Math.min(6, draft.draftCustomRows)),
  pageDurationSec: Math.max(3, Math.min(60, Math.round(draft.draftPageSec))),
  occupiedCardColor: draft.draftOcc,
  availableCardColor: draft.draftAvail,
  boardingSoonBeforeMin: Math.max(1, Math.min(60, Math.round(boardingSoonBeforeMin))),
  statusToneOverrides: (0, import_venueWallUtils.diffVenueWallStatusToneOverrides)(draft.draftTones),
  heroMaxWidthRatio: Math.max(0.4, Math.min(0.8, draft.draftHeroRatio))
});
var ResourceWallControlPanel = ({
  open,
  onClose,
  isDark,
  layoutPresets,
  layoutKey,
  customCols,
  customRows,
  pageDurationSec,
  occupiedCardColor,
  availableCardColor,
  boardingSoonBeforeMin,
  statusToneOverrides,
  selectedResourceIds,
  onApply,
  carouselPager,
  heroMaxWidthRatio: heroMaxWidthRatioProp = 0.6
}) => {
  const [adminTab, setAdminTab] = (0, import_react.useState)(
    "resource_layout"
  );
  const [draftLayoutKey, setDraftLayoutKey] = (0, import_react.useState)(layoutKey);
  const [draftCustomCols, setDraftCustomCols] = (0, import_react.useState)(customCols);
  const [draftCustomRows, setDraftCustomRows] = (0, import_react.useState)(customRows);
  const [draftPageSec, setDraftPageSec] = (0, import_react.useState)(pageDurationSec);
  const [draftOcc, setDraftOcc] = (0, import_react.useState)(occupiedCardColor);
  const [draftAvail, setDraftAvail] = (0, import_react.useState)(availableCardColor);
  const [draftHeroRatio, setDraftHeroRatio] = (0, import_react.useState)(heroMaxWidthRatioProp);
  const [draftTones, setDraftTones] = (0, import_react.useState)(() => (0, import_venueWallUtils.getVenueWallStatusToneMap)());
  const draftBootstrapRef = (0, import_react.useRef)({
    layoutKey,
    customCols,
    customRows,
    pageDurationSec,
    occupiedCardColor,
    availableCardColor,
    statusToneOverrides,
    heroMaxWidthRatioProp
  });
  draftBootstrapRef.current = {
    layoutKey,
    customCols,
    customRows,
    pageDurationSec,
    occupiedCardColor,
    availableCardColor,
    statusToneOverrides,
    heroMaxWidthRatioProp
  };
  const hasOpenedRef = (0, import_react.useRef)(false);
  (0, import_react.useEffect)(() => {
    if (!open) {
      hasOpenedRef.current = false;
      return;
    }
    if (hasOpenedRef.current) {
      return;
    }
    hasOpenedRef.current = true;
    const b = draftBootstrapRef.current;
    setDraftLayoutKey(b.layoutKey);
    setDraftCustomCols(b.customCols);
    setDraftCustomRows(b.customRows);
    setDraftPageSec(b.pageDurationSec);
    setDraftOcc(b.occupiedCardColor);
    setDraftAvail(b.availableCardColor);
    setDraftHeroRatio(b.heroMaxWidthRatioProp);
    setDraftTones((0, import_venueWallUtils.getVenueWallStatusToneMap)(b.statusToneOverrides));
    setAdminTab("resource_layout");
  }, [open]);
  const flushApplyAndClose = (0, import_react.useCallback)(() => {
    onApply(
      buildApplyPayload(
        selectedResourceIds,
        {
          draftLayoutKey,
          draftCustomCols,
          draftCustomRows,
          draftPageSec,
          draftOcc,
          draftAvail,
          draftTones,
          draftHeroRatio
        },
        boardingSoonBeforeMin
      )
    );
    onClose();
  }, [
    selectedResourceIds,
    draftLayoutKey,
    draftCustomCols,
    draftCustomRows,
    draftPageSec,
    draftOcc,
    draftAvail,
    draftTones,
    draftHeroRatio,
    boardingSoonBeforeMin,
    onApply,
    onClose
  ]);
  (0, import_react.useEffect)(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") flushApplyAndClose();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, flushApplyAndClose]);
  const shellBg = isDark ? "bg-slate-900 border-slate-800" : "bg-white border-slate-200";
  const divider = isDark ? "border-slate-800" : "border-slate-200";
  const headerText = isDark ? "text-slate-100" : "text-slate-900";
  const mutedText = isDark ? "text-slate-500" : "text-slate-400";
  const adminInputBg = isDark ? "bg-slate-900 border-slate-700 text-slate-100" : "bg-white border-slate-200 text-slate-700";
  const adminSectionBg = isDark ? "bg-slate-950 border-slate-800" : "bg-slate-50 border-slate-200";
  const cur = carouselPager.currentPage + 1;
  const tot = Math.max(1, carouselPager.totalPages);
  if (!open) return null;
  const modal = /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: "fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-[2px] p-4 md:p-8",
      onClick: flushApplyAndClose,
      role: "presentation"
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: `mx-auto max-w-[900px] rounded-[30px] border shadow-[0_30px_80px_rgba(15,23,42,0.16)] overflow-hidden ${shellBg}`,
        onClick: (e) => e.stopPropagation(),
        role: "dialog",
        "aria-modal": "true"
      },
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: `border-b px-5 md:px-6 py-4 flex items-center justify-between gap-4 ${divider}`
        },
        /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: `text-[11px] uppercase tracking-[0.24em] ${mutedText}` }, (0, import_locales.getText)("pisell-resource-wall-control-eyebrow")), /* @__PURE__ */ import_react.default.createElement("div", { className: `mt-1 text-2xl font-semibold tracking-tight ${headerText}` }, (0, import_locales.getText)("pisell-resource-wall-control-subtitle")), /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-3 inline-flex items-center rounded-full border p-1 border-slate-200 bg-white" }, /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            type: "button",
            onClick: () => setAdminTab("resource_layout"),
            className: `rounded-full px-3 py-1.5 text-sm transition ${adminTab === "resource_layout" ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`
          },
          (0, import_locales.getText)("pisell-resource-wall-tab-layout")
        ), /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            type: "button",
            onClick: () => setAdminTab("color"),
            className: `rounded-full px-3 py-1.5 text-sm transition ${adminTab === "color" ? "bg-slate-900 text-white" : "text-slate-600 hover:bg-slate-100"}`
          },
          (0, import_locales.getText)("pisell-resource-wall-tab-colors")
        ))),
        /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            type: "button",
            onClick: flushApplyAndClose,
            className: `rounded-full px-4 py-2 text-sm border ${isDark ? "border-slate-700 text-slate-300 hover:bg-slate-800" : "border-slate-200 text-slate-600 hover:bg-slate-50"}`
          },
          (0, import_locales.getText)("pisell-resource-wall-control-close")
        )
      ),
      /* @__PURE__ */ import_react.default.createElement("div", { className: "p-5 md:p-6 space-y-6 max-h-[78vh] overflow-auto" }, adminTab === "resource_layout" ? /* @__PURE__ */ import_react.default.createElement(
        import_ResourceWallControlPanelLayoutTab.ResourceWallControlPanelLayoutTab,
        {
          adminSectionBg,
          adminInputBg,
          headerText,
          mutedText,
          layoutPresets,
          draftLayoutKey,
          setDraftLayoutKey,
          draftCustomCols,
          setDraftCustomCols,
          draftCustomRows,
          setDraftCustomRows,
          draftPageSec,
          setDraftPageSec,
          draftHeroRatio,
          setDraftHeroRatio,
          carouselCur: cur,
          carouselTot: tot,
          isDark
        }
      ) : /* @__PURE__ */ import_react.default.createElement(
        import_ResourceWallControlPanelColorTab.ResourceWallControlPanelColorTab,
        {
          adminSectionBg,
          adminInputBg,
          headerText,
          mutedText,
          divider,
          draftOcc,
          setDraftOcc,
          draftAvail,
          setDraftAvail,
          draftTones,
          setDraftTones
        }
      ))
    )
  );
  return typeof document !== "undefined" ? (0, import_react_dom.createPortal)(modal, document.body) : null;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  ResourceWallControlPanel
});
