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/Calendar/view/BookingCalendarResourceView.tsx
var BookingCalendarResourceView_exports = {};
__export(BookingCalendarResourceView_exports, {
  BookingCalendarResourceView: () => BookingCalendarResourceView
});
module.exports = __toCommonJS(BookingCalendarResourceView_exports);
var import_react = __toESM(require("react"));
var import_bookingCalendarDateUtils = require("../utils/bookingCalendarDateUtils");
var import_bookingCalendarConstants = require("../const/bookingCalendarConstants");
var import_BookingCalendarStyle = require("../utils/BookingCalendarStyle");
var import_bookingCalendarViewShared = require("../bookingCalendarViewShared");
var import_BookingCalendarGroupRowHeader = require("./BookingCalendarGroupRowHeader");
var import_calendarI18n = require("../calendarI18n");
var PREVIEW_CAP = 3;
var BookingCalendarResourceView = import_react.default.memo(BookingCalendarResourceViewInner);
function BookingCalendarResourceViewInner({
  calendarProps,
  isLight,
  anchorDate,
  monthDays,
  slotColWidth,
  bookings,
  visibleCourts,
  visibleCourtRows,
  hourSlots,
  slotStepHours,
  handleGridDropMove,
  openBookingDetail,
  setDraggingItem,
  setCollapsedGroups,
  overflowPopover,
  setOverflowPopover,
  setOverflowListModal,
  overflowPanelRef,
  resourceMonthScrollToTodayToken,
  resourceDayHeaderRemaining,
  toggleResourceCell,
  selectedResourceCells
}) {
  const props = calendarProps;
  const todayKey = (0, import_bookingCalendarDateUtils.fmtDate)(/* @__PURE__ */ new Date());
  const monthKeyPrefix = `${anchorDate.getFullYear()}-${anchorDate.getMonth()}`;
  const bookingsSignature = (0, import_react.useMemo)(() => {
    if (!Array.isArray(bookings) || bookings.length === 0) return "[]";
    return bookings.map(
      (b) => `${(b == null ? void 0 : b.id) ?? ""}|${(b == null ? void 0 : b.courtId) ?? ""}|${(b == null ? void 0 : b.date) ?? ""}|${(b == null ? void 0 : b.kind) ?? ""}|${(b == null ? void 0 : b.startHour) ?? ""}|${(b == null ? void 0 : b.endHour) ?? ""}`
    ).join(";");
  }, [bookings]);
  const bookingsStable = (0, import_react.useMemo)(() => bookings, [bookingsSignature]);
  const scrollRef = (0, import_react.useRef)(null);
  const dragRef = (0, import_react.useRef)({ dragging: false, startX: 0, startY: 0, startLeft: 0, startTop: 0, moved: false });
  const [dragging, setDragging] = (0, import_react.useState)(false);
  const [virt, setVirt] = (0, import_react.useState)({
    i0: 0,
    i1: 0,
    r0: 0,
    r1: 0,
    ready: false
  });
  const rafRef = (0, import_react.useRef)(null);
  const rowPrefixRef = (0, import_react.useRef)([0]);
  const nCols = monthDays.length;
  const updateVirt = (0, import_react.useCallback)(() => {
    const root = scrollRef.current;
    if (!root || nCols <= 0) return;
    const sl = root.scrollLeft;
    const st = root.scrollTop;
    const vw = root.clientWidth;
    const vh = root.clientHeight;
    let i0 = Math.floor((sl - import_bookingCalendarConstants.frozenColWidth) / slotColWidth) - import_bookingCalendarConstants.DAY_VIEW_COL_BUFFER;
    let i1 = Math.ceil((sl + vw - import_bookingCalendarConstants.frozenColWidth) / slotColWidth) - 1 + import_bookingCalendarConstants.DAY_VIEW_COL_BUFFER;
    i0 = Math.max(0, i0);
    i1 = Math.min(nCols - 1, i1);
    if (i0 > i1) {
      i0 = 0;
      i1 = nCols - 1;
    }
    const pfx = rowPrefixRef.current;
    const nr = Math.max(0, pfx.length - 1);
    let r0 = 0;
    let r1 = nr > 0 ? nr - 1 : 0;
    if (nr > 0) {
      const bodyTop = import_bookingCalendarConstants.dayHeaderHeight;
      const vTop = st;
      const vBot = st + vh;
      const buf = import_bookingCalendarConstants.DAY_VIEW_ROW_BUFFER_PX;
      for (let r = 0; r < nr; r += 1) {
        const y1 = bodyTop + (pfx[r + 1] ?? 0);
        if (y1 > vTop - buf) {
          r0 = r;
          break;
        }
      }
      for (let r = nr - 1; r >= 0; r -= 1) {
        const y0 = bodyTop + (pfx[r] ?? 0);
        if (y0 < vBot + buf) {
          r1 = r;
          break;
        }
      }
      if (r0 > r1) {
        r0 = 0;
        r1 = nr - 1;
      }
    }
    setVirt(
      (prev) => prev.ready && prev.i0 === i0 && prev.i1 === i1 && prev.r0 === r0 && prev.r1 === r1 ? prev : { i0, i1, r0, r1, ready: true }
    );
  }, [nCols, slotColWidth]);
  const scheduleVirt = (0, import_react.useCallback)(() => {
    if (rafRef.current != null) return;
    rafRef.current = requestAnimationFrame(() => {
      rafRef.current = null;
      updateVirt();
    });
  }, [updateVirt]);
  (0, import_react.useLayoutEffect)(() => {
    const root = scrollRef.current;
    if (!root) return void 0;
    scheduleVirt();
    const onScroll = () => scheduleVirt();
    root.addEventListener("scroll", onScroll, { passive: true });
    let ro = null;
    if (typeof ResizeObserver !== "undefined") {
      ro = new ResizeObserver(() => scheduleVirt());
      try {
        ro.observe(root);
      } catch {
      }
    }
    return () => {
      root.removeEventListener("scroll", onScroll);
      ro == null ? void 0 : ro.disconnect();
      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
      rafRef.current = null;
    };
  }, [monthKeyPrefix, scheduleVirt, nCols]);
  (0, import_react.useLayoutEffect)(() => {
    if (!resourceMonthScrollToTodayToken) return;
    const root = scrollRef.current;
    if (!root || monthDays.length === 0) return;
    const idx = monthDays.findIndex((d) => (0, import_bookingCalendarDateUtils.fmtDate)(d) === (0, import_bookingCalendarDateUtils.getViewNowReference)().dateKey);
    if (idx < 0) return;
    const targetLeft = import_bookingCalendarConstants.frozenColWidth + idx * slotColWidth - root.clientWidth / 2 + slotColWidth / 2;
    root.scrollLeft = Math.max(0, Math.min(targetLeft, root.scrollWidth - root.clientWidth));
  }, [resourceMonthScrollToTodayToken, monthKeyPrefix, monthDays, slotColWidth]);
  const onMouseDown = (0, import_react.useCallback)((e) => {
    if (e.button !== 0 || !scrollRef.current) return;
    dragRef.current = {
      dragging: true,
      startX: e.clientX,
      startY: e.clientY,
      startLeft: scrollRef.current.scrollLeft,
      startTop: scrollRef.current.scrollTop,
      moved: false
    };
    setDragging(true);
  }, []);
  const onMouseMove = (0, import_react.useCallback)((e) => {
    if (!dragRef.current.dragging || !scrollRef.current) return;
    const dx = e.clientX - dragRef.current.startX;
    const dy = e.clientY - dragRef.current.startY;
    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dragRef.current.moved = true;
    scrollRef.current.scrollLeft = dragRef.current.startLeft - dx;
    scrollRef.current.scrollTop = dragRef.current.startTop - dy;
  }, []);
  const onMouseUp = (0, import_react.useCallback)(() => {
    dragRef.current.dragging = false;
    setDragging(false);
  }, []);
  const visibleColIndices = (0, import_react.useMemo)(() => {
    if (!virt.ready) {
      const out2 = [];
      for (let i = 0; i < nCols; i += 1) out2.push(i);
      return out2;
    }
    const out = [];
    for (let i = virt.i0; i <= virt.i1; i += 1) out.push(i);
    return out;
  }, [virt, nCols]);
  const summaryCache = (0, import_react.useMemo)(() => {
    const m = /* @__PURE__ */ new Map();
    const visibleCourtIds = [];
    for (const r of visibleCourtRows) {
      if ((r == null ? void 0 : r.kind) === "court" && r.id) visibleCourtIds.push(String(r.id));
    }
    const visibleDateKeys = visibleColIndices.map((ci) => monthDays[ci]).filter(Boolean).map((d) => (0, import_bookingCalendarDateUtils.fmtDate)(d));
    for (const cid of visibleCourtIds) {
      for (const dk of visibleDateKeys) {
        m.set(`${cid}	${dk}`, (0, import_bookingCalendarDateUtils.courtDaySummary)(cid, dk, bookingsStable, hourSlots, slotStepHours));
      }
    }
    return m;
  }, [
    visibleCourtRows,
    visibleColIndices,
    monthDays,
    bookingsStable,
    hourSlots,
    slotStepHours
  ]);
  const getSummary = (0, import_react.useCallback)(
    (courtId, dateKey) => summaryCache.get(`${courtId}	${dateKey}`) ?? (0, import_bookingCalendarDateUtils.courtDaySummary)(courtId, dateKey, bookingsStable, hourSlots, slotStepHours),
    [summaryCache, bookingsStable, hourSlots, slotStepHours]
  );
  const rowHeights = (0, import_react.useMemo)(() => {
    return visibleCourtRows.map((row) => {
      if (row.kind === "group") return import_bookingCalendarConstants.groupRowHeight;
      let maxH = import_bookingCalendarConstants.dayRowHeight;
      for (let di = 0; di < monthDays.length; di += 1) {
        const day = monthDays[di];
        if (!day) continue;
        const summary = getSummary(row.id, (0, import_bookingCalendarDateUtils.fmtDate)(day));
        maxH = Math.max(maxH, (0, import_bookingCalendarConstants.estimateResourceViewCourtCellHeightPx)(summary));
      }
      return maxH;
    });
  }, [visibleCourtRows, monthDays, getSummary]);
  const gridTemplateRows = (0, import_react.useMemo)(
    () => visibleCourtRows.map(
      (row, i) => row.kind === "group" ? `${import_bookingCalendarConstants.groupRowHeight}px` : `${rowHeights[i]}px`
    ).join(" "),
    [visibleCourtRows, rowHeights]
  );
  const rowPrefixTop = (0, import_react.useMemo)(() => {
    const arr = new Array(rowHeights.length + 1);
    arr[0] = 0;
    for (let i = 0; i < rowHeights.length; i += 1) {
      arr[i + 1] = arr[i] + (rowHeights[i] ?? 0);
    }
    return arr;
  }, [rowHeights]);
  (0, import_react.useLayoutEffect)(() => {
    rowPrefixRef.current = rowPrefixTop;
    scheduleVirt();
  }, [rowPrefixTop, scheduleVirt]);
  const contentHeight = import_bookingCalendarConstants.dayHeaderHeight + rowPrefixTop[rowPrefixTop.length - 1];
  const selectionSigByCourtId = (0, import_react.useMemo)(() => {
    const grp = /* @__PURE__ */ new Map();
    for (const s of selectedResourceCells) {
      const cid = String(s.courtId);
      let arr = grp.get(cid);
      if (!arr) {
        arr = [];
        grp.set(cid, arr);
      }
      arr.push(s.dateKey);
    }
    const m = /* @__PURE__ */ new Map();
    grp.forEach((arr, cid) => {
      arr.sort();
      m.set(cid, arr.join("|"));
    });
    return m;
  }, [selectedResourceCells]);
  const monthLabel = `${anchorDate.getFullYear()} / ${anchorDate.getMonth() + 1}`;
  return /* @__PURE__ */ import_react.default.createElement("div", { key: `resource-${monthKeyPrefix}`, className: "flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "relative flex min-h-0 flex-1 flex-col" }, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: scrollRef,
      onMouseDown,
      onMouseMove,
      onMouseUp,
      onMouseLeave: onMouseUp,
      style: { overscrollBehavior: "none" },
      className: `pisell-scroll-hidden relative border min-h-0 max-h-none flex-1 overflow-auto touch-pan-x touch-pan-y select-none ${isLight ? "theme-panel theme-border" : "border-zinc-800 bg-[#121217]"} ${dragging ? "cursor-grabbing" : "cursor-grab"}`
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "relative",
        style: {
          minWidth: `${import_bookingCalendarConstants.frozenColWidth + nCols * slotColWidth}px`,
          minHeight: `${contentHeight}px`
        }
      },
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "grid sticky top-0 z-50",
          style: {
            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${nCols}, ${slotColWidth}px)`
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            className: `sticky left-0 top-0 z-[60] flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col justify-center px-2.5 font-semibold border-b shadow-[8px_0_16px_rgba(0,0,0,0.08)] ${isLight ? "surface-brand-side text-slate-900" : "bg-[#241d40] border-zinc-800 text-zinc-100"}`
          },
          /* @__PURE__ */ import_react.default.createElement("span", { className: "text-lg font-bold leading-tight" }, monthLabel)
        ),
        visibleColIndices.map((ci) => {
          const day = monthDays[ci];
          if (!day) return null;
          const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
          const isToday = key === todayKey;
          const remaining = resourceDayHeaderRemaining[key];
          return /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              key: `rh-${key}`,
              className: `relative z-20 border-b border-l px-1 py-2 text-center shadow-[0_8px_16px_rgba(0,0,0,0.06)] ${isLight ? "theme-border theme-text" : "border-zinc-800"} ${isToday ? isLight ? "bg-gradient-to-b from-violet-50 to-white" : "bg-gradient-to-b from-violet-950 to-[#1a1a22]" : isLight ? "theme-panel-soft" : "bg-[#1a1a22]"}`,
              style: { gridColumn: ci + 2 }
            },
            /* @__PURE__ */ import_react.default.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ import_react.default.createElement(
              "span",
              {
                className: "grid h-10 w-10 place-items-center text-3xl font-semibold leading-none",
                "aria-label": isToday ? "Today" : void 0
              },
              day.getDate()
            )),
            remaining && remaining.total > 0 && /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: `mt-1 text-[11px] font-semibold leading-tight ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
                  remaining.ratio,
                  isLight
                )}`
              },
              (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.day.freeRatio", {
                remaining: remaining.remaining,
                total: remaining.total
              })
            )
          );
        })
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "grid relative",
          style: {
            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${nCols}, ${slotColWidth}px)`,
            gridTemplateRows
          }
        },
        visibleCourtRows.map((row, rowIndex) => {
          if (virt.ready && (rowIndex < virt.r0 || rowIndex > virt.r1)) {
            return /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                key: `${row.id}-skip`,
                className: `pointer-events-none border-b ${isLight ? "theme-border" : "border-zinc-800"}`,
                style: { gridColumn: "1 / -1", gridRow: rowIndex + 1 },
                "aria-hidden": true
              }
            );
          }
          return row.kind === "group" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: row.id }, /* @__PURE__ */ import_react.default.createElement(
            import_BookingCalendarGroupRowHeader.BookingCalendarGroupRowHeader,
            {
              isLight,
              view: "resource",
              row: {
                id: row.id,
                label: row.label,
                count: row.count,
                collapsed: row.collapsed
              },
              renderResourceCell: props.renderResourceCell,
              setCollapsedGroups,
              style: { gridRow: rowIndex + 1, gridColumn: 1 }
            }
          ), visibleColIndices.map((ci) => {
            const day = monthDays[ci];
            if (!day) return null;
            const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
            const groupCourts = visibleCourts.filter(
              (c) => c.type === row.label
            );
            const total = groupCourts.length;
            const noRatioCell = total === 0;
            let remaining = 0;
            let ratio = 0;
            if (!noRatioCell) {
              const busy = groupCourts.filter(
                (c) => getSummary(c.id, key).items.length > 0
              ).length;
              remaining = total - busy;
              ratio = remaining / total;
            }
            return /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                key: `${row.id}-${key}`,
                style: { gridRow: rowIndex + 1, gridColumn: ci + 2 },
                className: `flex h-full items-center justify-center border-b border-l px-1.5 py-1 text-center text-sm font-medium ${isLight ? "theme-border" : "border-zinc-800"} ${noRatioCell ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500" : isLight ? "theme-panel-soft" : "bg-[#151a2f] text-zinc-300"}`
              },
              noRatioCell ? /* @__PURE__ */ import_react.default.createElement("div", { className: "text-xs opacity-60" }, "—") : /* @__PURE__ */ import_react.default.createElement(
                "div",
                {
                  className: `text-xs font-semibold leading-none ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
                    ratio,
                    isLight
                  )}`
                },
                (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.day.freeRatio", {
                  remaining,
                  total
                })
              )
            );
          })) : /* @__PURE__ */ import_react.default.createElement(
            ResourceCourtRow,
            {
              key: row.id,
              courtId: String(row.id),
              courtName: row.name,
              courtType: row.type,
              rowIndex,
              visibleColIndices,
              monthDays,
              getSummary,
              toggleResourceCell,
              isLight,
              renderResourceCell: props.renderResourceCell,
              handleGridDropMove,
              selectedSig: selectionSigByCourtId.get(String(row.id)) ?? ""
            }
          );
        }),
        /* @__PURE__ */ import_react.default.createElement(
          BookingOverlay,
          {
            visibleCourtRows,
            visibleColIndices,
            monthDays,
            rowPrefixTop,
            rowHeights,
            slotColWidth,
            virt,
            getSummary,
            isLight,
            renderMonthWeekBooking: props.renderMonthWeekBooking,
            openBookingDetail,
            setDraggingItem,
            handleGridDropMove,
            overflowPopover,
            setOverflowPopover,
            setOverflowListModal,
            overflowPanelRef
          }
        )
      )
    )
  )));
}
var ResourceCourtRow = import_react.default.memo(function ResourceCourtRow2({
  courtId,
  courtName,
  courtType,
  rowIndex,
  visibleColIndices,
  monthDays,
  getSummary,
  toggleResourceCell,
  isLight,
  renderResourceCell,
  handleGridDropMove,
  selectedSig
}) {
  const selectedDateKeys = (0, import_react.useMemo)(
    () => selectedSig ? new Set(selectedSig.split("|")) : null,
    [selectedSig]
  );
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      className: `sticky left-0 z-30 flex h-full min-h-0 w-[132px] min-w-[132px] max-w-[132px] flex-col justify-center border-b px-2.5 py-1.5 shadow-[8px_0_16px_rgba(0,0,0,0.06)] ${isLight ? "surface-brand-side-muted" : "border-zinc-800 bg-[#1a1a22]"}`,
      style: { gridRow: rowIndex + 1, gridColumn: 1 }
    },
    renderResourceCell ? renderResourceCell({
      view: "resource",
      row: { kind: "court", id: courtId, name: courtName, type: courtType },
      isLight
    }) : /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-rb-cal-week-resource-name min-w-0 w-full font-semibold text-[16px] leading-tight" }, courtName)
  ), visibleColIndices.map((ci) => {
    const day = monthDays[ci];
    if (!day) return null;
    const key = (0, import_bookingCalendarDateUtils.fmtDate)(day);
    const summary = getSummary(courtId, key);
    return /* @__PURE__ */ import_react.default.createElement(
      ResourceCourtCell,
      {
        key: `${courtId}-${key}`,
        courtId,
        dateKey: key,
        rowIndex,
        colIndex: ci,
        summary,
        selected: (selectedDateKeys == null ? void 0 : selectedDateKeys.has(key)) ?? false,
        isLight,
        toggleResourceCell,
        handleGridDropMove
      }
    );
  }));
});
var ResourceCourtCell = import_react.default.memo(function ResourceCourtCell2({
  courtId,
  dateKey,
  rowIndex,
  colIndex,
  summary,
  selected,
  isLight,
  toggleResourceCell,
  handleGridDropMove
}) {
  return /* @__PURE__ */ import_react.default.createElement(
    "button",
    {
      type: "button",
      onClick: () => toggleResourceCell(courtId, dateKey),
      onDragOver: (e) => e.preventDefault(),
      onDrop: (e) => {
        e.preventDefault();
        handleGridDropMove(dateKey, courtId);
      },
      style: {
        gridRow: rowIndex + 1,
        gridColumn: colIndex + 2,
        contain: "layout paint style"
      },
      className: `relative flex w-full min-h-0 flex-col justify-start border-b border-l p-1 text-left align-top outline-none ${isLight ? "theme-border" : "border-zinc-700"} ${summary.fullyBooked ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800 text-zinc-500" : summary.hasBlock ? isLight ? "bg-red-50 border-red-200" : "bg-red-950/30 border-red-800/40" : summary.occupiedHours.length > 0 ? isLight ? "bg-violet-50" : "bg-[#1c1630]" : isLight ? "theme-grid-cell" : "bg-zinc-900"} ${selected ? isLight ? "ring-1 ring-inset ring-violet-400/75 bg-violet-400/10" : "ring-1 ring-inset ring-violet-400/70 bg-white/10" : ""}`
    },
    summary.items.length === 0 ? /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: `${import_bookingCalendarConstants.CALENDAR_EMPTY_DASHED_SLOT_CLASSNAME} text-center ${isLight ? "border-[#d8d0eb] text-[#8f86a9]" : "border-zinc-700 text-zinc-500"}`
      },
      selected ? (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.day.selected") : null
    ) : null
  );
});
var OVERLAY_CELL_PAD = 4;
var OVERLAY_ITEM_GAP = 4;
var BookingOverlay = import_react.default.memo(function BookingOverlay2({
  visibleCourtRows,
  visibleColIndices,
  monthDays,
  rowPrefixTop,
  rowHeights,
  slotColWidth,
  virt,
  getSummary,
  isLight,
  renderMonthWeekBooking,
  openBookingDetail,
  setDraggingItem,
  handleGridDropMove,
  overflowPopover,
  setOverflowPopover,
  setOverflowListModal,
  overflowPanelRef
}) {
  const items = (0, import_react.useMemo)(() => {
    const out = [];
    for (let rowIdx = 0; rowIdx < visibleCourtRows.length; rowIdx += 1) {
      if (virt.ready && (rowIdx < virt.r0 || rowIdx > virt.r1)) continue;
      const row = visibleCourtRows[rowIdx];
      if ((row == null ? void 0 : row.kind) !== "court" || !row.id) continue;
      const courtId = String(row.id);
      const cellTop = rowPrefixTop[rowIdx] ?? 0;
      for (const colIdx of visibleColIndices) {
        const day = monthDays[colIdx];
        if (!day) continue;
        const dateKey = (0, import_bookingCalendarDateUtils.fmtDate)(day);
        const summary = getSummary(courtId, dateKey);
        if (summary.items.length === 0) continue;
        const cellLeft = colIdx * slotColWidth + import_bookingCalendarConstants.frozenColWidth;
        const previewItems = summary.items.slice(0, PREVIEW_CAP);
        const moreItems = summary.items.slice(PREVIEW_CAP);
        const moreCount = moreItems.length;
        const showMore = moreCount > 0 && previewItems.length > 0;
        const itemLeft = cellLeft + OVERLAY_CELL_PAD;
        const itemWidth = slotColWidth - OVERLAY_CELL_PAD * 2;
        for (let i = 0; i < previewItems.length; i += 1) {
          const top = cellTop + OVERLAY_CELL_PAD + i * (import_bookingCalendarConstants.RESOURCE_VIEW_BOOKING_CARD_EST_PX + OVERLAY_ITEM_GAP);
          out.push({
            kind: "booking",
            key: `${courtId}	${dateKey}	${previewItems[i].id ?? i}`,
            item: previewItems[i],
            courtId,
            dateKey,
            top,
            left: itemLeft,
            width: itemWidth,
            height: import_bookingCalendarConstants.RESOURCE_VIEW_BOOKING_CARD_EST_PX
          });
        }
        if (showMore) {
          const top = cellTop + OVERLAY_CELL_PAD + previewItems.length * (import_bookingCalendarConstants.RESOURCE_VIEW_BOOKING_CARD_EST_PX + OVERLAY_ITEM_GAP);
          out.push({
            kind: "more",
            key: `${courtId}	${dateKey}	more`,
            courtId,
            dateKey,
            top,
            left: itemLeft,
            width: itemWidth,
            moreItems,
            moreCount,
            allItems: summary.items
          });
        }
      }
    }
    return out;
  }, [
    visibleCourtRows,
    visibleColIndices,
    monthDays,
    rowPrefixTop,
    slotColWidth,
    virt,
    getSummary
  ]);
  const overlayHeight = rowPrefixTop[rowPrefixTop.length - 1] ?? rowHeights.reduce((a, b) => a + b, 0);
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      "aria-hidden": true,
      style: {
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: overlayHeight,
        pointerEvents: "none",
        zIndex: 5
      }
    },
    items.map((it) => {
      if (it.kind === "booking") {
        const layoutClassName = `flex flex-col justify-center rounded-lg px-2.5 py-1.5 text-xs text-left w-full h-full ${(0, import_BookingCalendarStyle.getGridBookingRowStateClasses)(it.item)}`;
        return /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            key: it.key,
            style: {
              position: "absolute",
              top: it.top,
              left: it.left,
              width: it.width,
              height: it.height,
              pointerEvents: "auto"
            },
            onDragOver: (e) => e.preventDefault(),
            onDrop: (e) => {
              e.preventDefault();
              handleGridDropMove(it.dateKey, it.courtId);
            }
          },
          renderMonthWeekBooking ? renderMonthWeekBooking({
            item: it.item,
            dateKey: it.dateKey,
            view: "resource",
            isLight,
            layoutClassName,
            onOpenDetail: openBookingDetail,
            onDragStart: (i) => setDraggingItem(i),
            draggable: false
          }) : /* @__PURE__ */ import_react.default.createElement(
            "button",
            {
              type: "button",
              onClick: (e) => {
                e.stopPropagation();
                openBookingDetail(it.item);
              },
              className: layoutClassName
            },
            /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate" }, it.item.name),
            /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 opacity-80 truncate" }, (0, import_bookingCalendarDateUtils.formatHourLabel)(it.item.startHour), " -", " ", (0, import_bookingCalendarDateUtils.formatHourLabel)(it.item.endHour))
          )
        );
      }
      const isThisPopover = (overflowPopover == null ? void 0 : overflowPopover.courtId) === it.courtId && (overflowPopover == null ? void 0 : overflowPopover.date) === it.dateKey;
      return /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          key: it.key,
          ref: isThisPopover ? overflowPanelRef : null,
          style: {
            position: "absolute",
            top: it.top,
            left: it.left,
            width: it.width,
            minHeight: import_bookingCalendarConstants.RESOURCE_VIEW_MORE_TILE_MIN_PX,
            pointerEvents: "auto"
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "button",
          {
            type: "button",
            onMouseEnter: (e) => {
              e.stopPropagation();
              setOverflowPopover({
                courtId: it.courtId,
                date: it.dateKey,
                items: it.moreItems,
                pinned: false
              });
            },
            onClick: (e) => {
              e.stopPropagation();
              setOverflowPopover(null);
              setOverflowListModal(
                (prev) => prev && prev.scope === it.courtId && prev.date === it.dateKey ? null : {
                  scope: it.courtId,
                  date: it.dateKey,
                  title: (0, import_calendarI18n.tCal)(
                    "pisell2.recordBoard.calendar.overflow.listTitleAllBookings",
                    { date: it.dateKey }
                  ),
                  items: it.allItems.filter(
                    (x) => x.kind === "booking"
                  )
                }
              );
            },
            style: { minHeight: import_bookingCalendarConstants.RESOURCE_VIEW_MORE_TILE_MIN_PX },
            className: "flex w-full items-center justify-center rounded-xl bg-violet-700/90 px-2.5 py-1 text-xs font-semibold text-white"
          },
          "+",
          it.moreCount
        )
      );
    })
  );
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BookingCalendarResourceView
});
