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/BookingCalendarDayView.tsx
var BookingCalendarDayView_exports = {};
__export(BookingCalendarDayView_exports, {
  BookingCalendarDayView: () => BookingCalendarDayView
});
module.exports = __toCommonJS(BookingCalendarDayView_exports);
var import_react = __toESM(require("react"));
var import_icons = require("@ant-design/icons");
var import_pisellDateTimeDisplay = require("../../../../pisellDateTimeDisplay");
var import_bookingCalendarDateUtils = require("../utils/bookingCalendarDateUtils");
var import_bookingCalendarConstants = require("../const/bookingCalendarConstants");
var import_bookingCalendarViewShared = require("../bookingCalendarViewShared");
var import_calendarI18n = require("../calendarI18n");
var import_bookingCalendarDayViewContext = require("./bookingCalendarDayViewContext");
var import_BookingCalendarGroupRowHeader = require("./BookingCalendarGroupRowHeader");
function BookingCalendarDayView(dayProps) {
  var _a, _b, _c;
  const props = dayProps.calendarProps;
  const {
    isLight,
    view,
    anchorDate,
    dayKey,
    hourSlots,
    resolvedSlotMinutes,
    slotColWidth,
    firstTimelineHour,
    endTimelineExclusive,
    isBusinessHour,
    dayHourRemaining,
    timelinePxPerHour,
    dayContentHeight,
    dayRowHeights,
    visibleCourtRows,
    overlayBookings,
    dayOverlayOverflowPluses,
    setCollapsedGroups,
    visibleCourts,
    bookings,
    slotStepHours,
    isFreeSelected,
    isBlockSelected,
    toggleSlot,
    handleDropMove,
    hiddenDayOverlayIdSet,
    courtDayDisplayLaneCount,
    openBookingDetail,
    setDraggingItem,
    setNavDirection,
    commitAnchor,
    setFocusedCourtId,
    setOverflowListModal,
    selectedFreeSlots,
    selectedBlockSlots,
    focusedCourtId,
    dayTimelineScrollToNowToken
  } = dayProps;
  const dayScrollRef = (0, import_react.useRef)(null);
  const dayBodyGridRef = (0, import_react.useRef)(null);
  const dayVirtRafRef = (0, import_react.useRef)(null);
  const dayDragRef = (0, import_react.useRef)({
    dragging: false,
    startX: 0,
    startY: 0,
    startLeft: 0,
    startTop: 0,
    moved: false
  });
  const [dayVirt, setDayVirt] = (0, import_react.useState)({
    i0: 0,
    i1: 0,
    r0: 0,
    r1: 0,
    ready: false
  });
  const [dayDragging, setDayDragging] = (0, import_react.useState)(false);
  const dayRowPrefixTop = (0, import_react.useMemo)(() => {
    const p = [0];
    for (let i = 0; i < dayRowHeights.length; i++) {
      p.push(p[i] + (dayRowHeights[i] ?? import_bookingCalendarConstants.dayRowHeight));
    }
    return p;
  }, [dayRowHeights]);
  const updateDayViewport = (0, import_react.useCallback)(() => {
    const root = dayScrollRef.current;
    const body = dayBodyGridRef.current;
    if (!root || !body) return;
    if (props.renderTimelineHeader) {
      setDayVirt({
        i0: 0,
        i1: Math.max(0, hourSlots.length - 1),
        r0: 0,
        r1: Math.max(0, visibleCourtRows.length - 1),
        ready: false
      });
      return;
    }
    const n = hourSlots.length;
    const nr = visibleCourtRows.length;
    if (n <= 0 || nr <= 0) return;
    const W = slotColWidth;
    const FC = import_bookingCalendarConstants.frozenColWidth;
    const sl = root.scrollLeft;
    const st = root.scrollTop;
    const vw = root.clientWidth;
    const vh = root.clientHeight;
    const bodyTop = body.offsetTop;
    let i0 = Math.floor((sl - FC) / W) - import_bookingCalendarConstants.DAY_VIEW_COL_BUFFER;
    let i1 = Math.ceil((sl + vw - FC) / W) - 1 + import_bookingCalendarConstants.DAY_VIEW_COL_BUFFER;
    i0 = Math.max(0, i0);
    i1 = Math.min(n - 1, i1);
    if (i0 > i1) {
      i0 = 0;
      i1 = n - 1;
    }
    const vTop = st;
    const vBot = st + vh;
    const buf = import_bookingCalendarConstants.DAY_VIEW_ROW_BUFFER_PX;
    let r0 = 0;
    let r1 = nr - 1;
    const pfx = dayRowPrefixTop;
    for (let r = 0; r < nr; r++) {
      const y0 = bodyTop + (pfx[r] ?? 0);
      const y1 = bodyTop + (pfx[r + 1] ?? 0);
      if (y1 > vTop - buf) {
        r0 = r;
        break;
      }
    }
    for (let r = nr - 1; r >= 0; r--) {
      const y0 = bodyTop + (pfx[r] ?? 0);
      if (y0 < vBot + buf) {
        r1 = r;
        break;
      }
    }
    if (r0 > r1) {
      r0 = 0;
      r1 = nr - 1;
    }
    setDayVirt((prev) => {
      if (prev.ready && prev.i0 === i0 && prev.i1 === i1 && prev.r0 === r0 && prev.r1 === r1) {
        return prev;
      }
      return { i0, i1, r0, r1, ready: true };
    });
  }, [
    props.renderTimelineHeader,
    hourSlots.length,
    visibleCourtRows.length,
    slotColWidth,
    import_bookingCalendarConstants.frozenColWidth,
    dayRowPrefixTop
  ]);
  const scheduleDayViewportUpdate = (0, import_react.useCallback)(() => {
    if (dayVirtRafRef.current != null) return;
    dayVirtRafRef.current = requestAnimationFrame(() => {
      dayVirtRafRef.current = null;
      updateDayViewport();
    });
  }, [updateDayViewport]);
  (0, import_react.useLayoutEffect)(() => {
    const root = dayScrollRef.current;
    if (!root) return void 0;
    scheduleDayViewportUpdate();
    const onScroll = () => scheduleDayViewportUpdate();
    root.addEventListener("scroll", onScroll, { passive: true });
    let ro;
    if (typeof ResizeObserver !== "undefined") {
      ro = new ResizeObserver(() => scheduleDayViewportUpdate());
      try {
        ro.observe(root);
      } catch {
      }
    }
    return () => {
      root.removeEventListener("scroll", onScroll);
      if (ro) ro.disconnect();
      if (dayVirtRafRef.current != null) {
        cancelAnimationFrame(dayVirtRafRef.current);
        dayVirtRafRef.current = null;
      }
    };
  }, [
    dayKey,
    scheduleDayViewportUpdate,
    hourSlots.length,
    visibleCourtRows.length
  ]);
  (0, import_react.useLayoutEffect)(() => {
    if (dayKey !== (0, import_bookingCalendarDateUtils.getViewNowReference)().dateKey) return;
    let cancelled = false;
    const apply = (attempt) => {
      if (cancelled) return;
      const root = dayScrollRef.current;
      if (!root) return;
      if (root.scrollWidth < 8 && attempt < 30) {
        requestAnimationFrame(() => apply(attempt + 1));
        return;
      }
      const now = (0, import_bookingCalendarDateUtils.getViewNowReference)();
      const lo = firstTimelineHour;
      const hi = endTimelineExclusive;
      let hf = now.hourFloat;
      if (hf < lo) hf = lo;
      if (hf >= hi) hf = Math.max(lo, hi - 1e-3);
      const leftPx = import_bookingCalendarConstants.frozenColWidth + (hf - lo) * timelinePxPerHour;
      const vw = root.clientWidth;
      const maxSl = Math.max(0, root.scrollWidth - vw);
      let target = leftPx - vw / 2;
      if (target < 0) target = 0;
      if (target > maxSl) target = maxSl;
      root.scrollLeft = target;
      scheduleDayViewportUpdate();
    };
    apply(0);
    return () => {
      cancelled = true;
    };
  }, [dayTimelineScrollToNowToken, dayKey]);
  (0, import_react.useEffect)(() => {
    if (!focusedCourtId || !dayScrollRef.current) return;
    const timer = setTimeout(() => {
      const root = dayScrollRef.current;
      if (!root) return;
      const el = root.querySelector(
        `[data-court-row="${focusedCourtId}"]`
      );
      if (!el) return;
      const rootRect = root.getBoundingClientRect();
      const rowRect = el.getBoundingClientRect();
      const targetTop = rootRect.top + import_bookingCalendarConstants.dayHeaderHeight;
      const desiredTop = root.scrollTop + (rowRect.top - targetTop);
      const maxTop = Math.max(0, root.scrollHeight - root.clientHeight);
      const nextTop = Math.min(maxTop, Math.max(0, desiredTop));
      root.scrollTo({ top: nextTop, behavior: "smooth" });
      setFocusedCourtId(null);
    }, 180);
    return () => clearTimeout(timer);
  }, [focusedCourtId, anchorDate, dayKey]);
  const handleDayMouseMove = (0, import_react.useCallback)(
    (e) => {
      if (!dayDragRef.current.dragging || !dayScrollRef.current) return;
      const dx = e.clientX - dayDragRef.current.startX;
      const dy = e.clientY - dayDragRef.current.startY;
      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) dayDragRef.current.moved = true;
      dayScrollRef.current.scrollLeft = dayDragRef.current.startLeft - dx;
      dayScrollRef.current.scrollTop = dayDragRef.current.startTop - dy;
      scheduleDayViewportUpdate();
    },
    [scheduleDayViewportUpdate]
  );
  const handleDayMouseUp = (0, import_react.useCallback)(() => {
    dayDragRef.current.dragging = false;
    setDayDragging(false);
  }, []);
  const handleDayMouseDown = (0, import_react.useCallback)((e) => {
    if (!dayScrollRef.current) return;
    const interactive = e.target.closest(
      "button, input, select, textarea, a, label"
    );
    if (interactive) return;
    const dragHost = e.target.closest("[draggable]");
    if (dragHost instanceof HTMLElement && dragHost.draggable) return;
    const el = dayScrollRef.current;
    dayDragRef.current = {
      dragging: true,
      startX: e.clientX,
      startY: e.clientY,
      startLeft: el.scrollLeft,
      startTop: el.scrollTop,
      moved: false
    };
    setDayDragging(true);
    e.preventDefault();
  }, []);
  (0, import_react.useEffect)(() => {
    window.addEventListener("mousemove", handleDayMouseMove);
    window.addEventListener("mouseup", handleDayMouseUp);
    return () => {
      window.removeEventListener("mousemove", handleDayMouseMove);
      window.removeEventListener("mouseup", handleDayMouseUp);
    };
  }, [anchorDate, visibleCourts.length, handleDayMouseMove, handleDayMouseUp]);
  const daySlotVirtEnabled = !props.renderTimelineHeader && dayVirt.ready;
  const dayVirtI0 = daySlotVirtEnabled ? dayVirt.i0 : 0;
  const dayVirtI1 = daySlotVirtEnabled ? dayVirt.i1 : Math.max(0, hourSlots.length - 1);
  const dayVirtR0 = daySlotVirtEnabled ? dayVirt.r0 : 0;
  const dayVirtR1 = daySlotVirtEnabled ? dayVirt.r1 : Math.max(0, visibleCourtRows.length - 1);
  const dayVisibleSlotIndices = (0, import_react.useMemo)(() => {
    const out = [];
    for (let hi = dayVirtI0; hi <= dayVirtI1; hi++) out.push(hi);
    return out;
  }, [dayVirtI0, dayVirtI1]);
  const courtRowIndexById = (0, import_react.useMemo)(() => {
    const m = /* @__PURE__ */ new Map();
    visibleCourtRows.forEach((row, idx) => {
      if (row.kind === "court") m.set(row.id, idx);
    });
    return m;
  }, [visibleCourtRows]);
  const visibleDayOverlayBookings = (0, import_react.useMemo)(() => {
    if (!daySlotVirtEnabled) return overlayBookings;
    const t0 = hourSlots[dayVirtI0];
    const t1 = hourSlots[dayVirtI1] + slotStepHours;
    return overlayBookings.filter((b) => {
      if (b.rowIndex < dayVirtR0 || b.rowIndex > dayVirtR1) return false;
      const bs = b.start;
      const be = b.start + b.span;
      return be > t0 - 1e-6 && bs < t1 + 1e-6;
    });
  }, [
    daySlotVirtEnabled,
    overlayBookings,
    hourSlots,
    dayVirtI0,
    dayVirtI1,
    dayVirtR0,
    dayVirtR1,
    slotStepHours
  ]);
  const visibleDayOverflowPluses = (0, import_react.useMemo)(() => {
    if (!daySlotVirtEnabled) return dayOverlayOverflowPluses;
    const t0 = hourSlots[dayVirtI0];
    const t1 = hourSlots[dayVirtI1] + slotStepHours;
    return dayOverlayOverflowPluses.filter((pill) => {
      const ri = courtRowIndexById.get(pill.courtId);
      if (ri == null || ri < dayVirtR0 || ri > dayVirtR1) return false;
      const ps = pill.start;
      const pe = pill.start + pill.span;
      return pe > t0 - 1e-6 && ps < t1 + 1e-6;
    });
  }, [
    daySlotVirtEnabled,
    dayOverlayOverflowPluses,
    hourSlots,
    dayVirtI0,
    dayVirtI1,
    dayVirtR0,
    dayVirtR1,
    slotStepHours,
    courtRowIndexById
  ]);
  const dayChromeValue = (0, import_react.useMemo)(
    () => ({ calendarProps: props, isLight }),
    [props, isLight]
  );
  return /* @__PURE__ */ import_react.default.createElement(import_bookingCalendarDayViewContext.BookingCalendarDayChromeProvider, { value: dayChromeValue }, /* @__PURE__ */ import_react.default.createElement("div", { key: `day-${dayKey}`, 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: dayScrollRef,
      onMouseDown: handleDayMouseDown,
      onMouseMove: handleDayMouseMove,
      onMouseUp: handleDayMouseUp,
      onMouseLeave: handleDayMouseUp,
      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]"} ${dayDragging ? "cursor-grabbing" : "cursor-grab"}`
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        className: "relative",
        style: {
          minWidth: `${import_bookingCalendarConstants.frozenColWidth + hourSlots.length * slotColWidth}px`,
          minHeight: `${dayContentHeight}px`
        }
      },
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "grid sticky top-0 z-50",
          style: {
            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${hourSlots.length}, ${slotColWidth}px)`,
            ...((_a = props.timelineHeaderGroups) == null ? void 0 : _a.length) && !props.renderTimelineHeader ? { gridTemplateRows: "auto auto" } : {}
          }
        },
        /* @__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] items-center justify-start 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"}`,
            style: ((_b = props.timelineHeaderGroups) == null ? void 0 : _b.length) && !props.renderTimelineHeader ? { gridRow: "1 / span 2" } : void 0
          },
          /* @__PURE__ */ import_react.default.createElement(
            import_pisellDateTimeDisplay.PisellDateTimeDisplay,
            {
              value: anchorDate,
              disableAutoRefresh: true,
              layout: "vertical",
              textAlign: "left",
              fields: {
                showTime: false,
                showWeekday: false,
                fieldOrder: ["date"]
              },
              dateFormat: {
                showYear: true,
                showChineseUnit: true
              },
              style: { color: "inherit" },
              dateStyle: {
                color: "inherit",
                fontWeight: 600,
                fontSize: 14
              }
            }
          )
        ),
        props.renderTimelineHeader ? /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "contents" } }, props.renderTimelineHeader({
          anchorDate,
          hourSlots,
          slotStepMinutes: resolvedSlotMinutes,
          slotColWidthPx: slotColWidth,
          isLight,
          firstTimelineHour,
          endTimelineExclusive,
          isBusinessHour,
          formatHourLabel: import_bookingCalendarDateUtils.formatHourLabel,
          getSlotStartHour: (i) => hourSlots[i],
          slotCount: hourSlots.length,
          dayHourRemaining
        })) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, (_c = props.timelineHeaderGroups) == null ? void 0 : _c.map((g, gi) => {
          if (daySlotVirtEnabled && (g.endSlotIndex < dayVirtI0 || g.startSlotIndex > dayVirtI1)) {
            return null;
          }
          const span = g.endSlotIndex - g.startSlotIndex + 1;
          return /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              key: `cal-hdr-g-${gi}`,
              className: `border-b border-l px-1.5 py-1 text-center text-xs font-semibold ${isLight ? "theme-border theme-panel-soft theme-text-soft" : "border-zinc-800 bg-[#1e1a32] text-zinc-200"}`,
              style: {
                gridColumn: `${2 + g.startSlotIndex} / span ${span}`,
                gridRow: 1
              }
            },
            g.label
          );
        }), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
          var _a2;
          const hour = hourSlots[hi];
          return /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              key: `hdr-${hi}-${hour}`,
              className: `border-b border-l px-1.5 py-2 text-center text-sm font-medium ${isLight ? "theme-border" : "border-zinc-800"} ${isBusinessHour(hour) ? isLight ? "theme-panel-soft theme-text-soft" : "bg-[#1a1a22] text-zinc-300" : isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500"}`,
              style: ((_a2 = props.timelineHeaderGroups) == null ? void 0 : _a2.length) ? { gridRow: 2, gridColumn: hi + 2 } : { gridColumn: hi + 2 }
            },
            /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center justify-center gap-1" }, /* @__PURE__ */ import_react.default.createElement(import_icons.ClockCircleOutlined, { style: { fontSize: 14 } }), " ", (0, import_bookingCalendarDateUtils.formatHourLabel)(hour)),
            isBusinessHour(hour) && dayHourRemaining[hour] && /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                className: `mt-1 text-[11px] font-semibold ${(0, import_bookingCalendarViewShared.getRemainingToneClass)(
                  dayHourRemaining[hour].ratio,
                  isLight
                )}`
              },
              (0, import_calendarI18n.tCal)("pisell2.recordBoard.calendar.day.freeRatio", {
                remaining: dayHourRemaining[hour].remaining,
                total: dayHourRemaining[hour].total
              })
            )
          );
        }))
      ),
      dayKey === (0, import_bookingCalendarDateUtils.getViewNowReference)().dateKey && /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          className: "pointer-events-none absolute inset-y-0 z-20",
          style: {
            left: `${import_bookingCalendarConstants.frozenColWidth + ((0, import_bookingCalendarDateUtils.getViewNowReference)().hourFloat - firstTimelineHour) * timelinePxPerHour}px`
          }
        },
        /* @__PURE__ */ import_react.default.createElement("div", { className: "relative h-full" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "absolute inset-y-0 w-[2px] bg-emerald-400/95 shadow-[0_0_10px_rgba(16,185,129,0.65)]" }), /* @__PURE__ */ import_react.default.createElement("div", { className: "sticky top-2 z-30 -translate-x-1/2 rounded-full bg-emerald-500 px-2 py-0.5 text-[10px] font-semibold text-white shadow-lg w-fit" }, (0, import_bookingCalendarDateUtils.currentTimeLabel)()))
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          ref: dayBodyGridRef,
          className: "grid relative",
          style: {
            gridTemplateColumns: `${import_bookingCalendarConstants.frozenColWidth}px repeat(${hourSlots.length}, ${slotColWidth}px)`,
            gridTemplateRows: dayRowHeights.map((h) => `${h}px`).join(" ")
          }
        },
        visibleCourtRows.map(
          (row, rowIndex) => daySlotVirtEnabled && (rowIndex < dayVirtR0 || rowIndex > dayVirtR1) ? /* @__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
            }
          ) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: row.id }, row.kind === "group" ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
            import_BookingCalendarGroupRowHeader.BookingCalendarGroupRowHeader,
            {
              isLight,
              view: "day",
              row: {
                id: row.id,
                label: row.label,
                count: row.count,
                collapsed: row.collapsed
              },
              renderResourceCell: props.renderResourceCell,
              setCollapsedGroups,
              style: daySlotVirtEnabled ? {
                gridRow: rowIndex + 1,
                gridColumn: 1
              } : void 0
            }
          ), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
            const hour = hourSlots[hi];
            const groupCourts = visibleCourts.filter(
              (court) => court.type === row.label
            );
            const remaining = groupCourts.filter(
              (court) => !(0, import_bookingCalendarDateUtils.dayOccupancy)(
                court.id,
                dayKey,
                bookings,
                hourSlots,
                slotStepHours
              )[hour]
            ).length;
            const ratio = groupCourts.length > 0 ? remaining / groupCourts.length : 0;
            const outsideBusiness = !isBusinessHour(hour);
            return /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                key: `${row.id}-${hour}-${hi}`,
                className: `flex h-full min-h-0 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"} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500" : isLight ? "theme-panel-soft" : "bg-[#151a2f] text-zinc-300"}`,
                style: daySlotVirtEnabled ? {
                  gridRow: rowIndex + 1,
                  gridColumn: hi + 2
                } : void 0
              },
              outsideBusiness ? /* @__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: groupCourts.length
                })
              )
            );
          })) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              "data-court-row": row.id,
              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 ? focusedCourtId === row.id ? "surface-brand-side ring-2 ring-[var(--brand-light)]/70" : "surface-brand-side-muted" : focusedCourtId === row.id ? "ring-2 ring-violet-400/70 bg-violet-900/20 border-zinc-800" : "bg-[#1a1a22] border-zinc-800"}`,
              style: daySlotVirtEnabled ? {
                gridRow: rowIndex + 1,
                gridColumn: 1
              } : void 0
            },
            props.renderResourceCell ? props.renderResourceCell({
              view: "day",
              row: {
                kind: "court",
                id: row.id,
                name: row.name,
                type: row.type
              },
              isLight
            }) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: "font-semibold text-base leading-tight truncate" }, row.name))
          ), (daySlotVirtEnabled ? dayVisibleSlotIndices : hourSlots.map((_, hi) => hi)).map((hi) => {
            const hour = hourSlots[hi];
            const item = (0, import_bookingCalendarDateUtils.dayOccupancy)(
              row.id,
              dayKey,
              bookings,
              hourSlots,
              slotStepHours
            )[hour];
            const isBlock = (item == null ? void 0 : item.kind) === "block";
            const isOccupied = !!item;
            const freeSelected = isFreeSelected(row.id, hour);
            const blockSelected = isBlockSelected(row.id, hour);
            const outsideBusiness = !isBusinessHour(hour);
            return /* @__PURE__ */ import_react.default.createElement(
              "button",
              {
                key: `${row.id}-${hour}-${hi}`,
                style: daySlotVirtEnabled ? {
                  gridRow: rowIndex + 1,
                  gridColumn: hi + 2
                } : void 0,
                onClick: () => !outsideBusiness && toggleSlot(row.id, hour),
                onDragOver: (e) => {
                  if (!outsideBusiness) e.preventDefault();
                },
                onDrop: (e) => {
                  if (!outsideBusiness) {
                    e.preventDefault();
                    handleDropMove(row.id, dayKey, hour);
                  }
                },
                className: `relative flex h-full min-h-0 flex-col p-1 text-left transition outline-none ${isOccupied && !outsideBusiness ? "border-l-transparent border-b-transparent" : `border-b border-l ${isLight ? "theme-border" : "border-zinc-700"}`} ${outsideBusiness ? isLight ? "bg-slate-100 theme-text-faint" : "bg-zinc-800/80 text-zinc-500 border-zinc-700" : isBlock ? blockSelected ? `bg-red-500/25 ring-1 ring-inset ring-red-400/75 border-b border-l ${isLight ? "theme-border" : "border-zinc-700"}` : isLight ? "bg-red-50 border-red-200" : "bg-red-900/50 border-red-700/50" : isOccupied ? "bg-transparent" : freeSelected ? isLight ? "bg-violet-50 ring-1 ring-inset ring-violet-400/75 border-b border-l theme-border" : "bg-white/10 ring-1 ring-inset ring-violet-400/70 border-b border-l border-zinc-700" : isLight ? "theme-grid-cell" : "bg-zinc-900 border-zinc-700"}`
              },
              outsideBusiness ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex h-full items-center justify-center rounded-xl border border-dashed border-zinc-700 text-xs text-zinc-500" }, (0, import_calendarI18n.tCal)(
                "pisell2.recordBoard.calendar.day.outsideHours"
              )) : (item == null ? void 0 : item.kind) === "block" ? /* @__PURE__ */ import_react.default.createElement("div", { className: "flex h-full w-full flex-col justify-center rounded-xl px-2.5 text-sm font-medium" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "truncate" }, blockSelected ? (0, import_calendarI18n.tCal)(
                "pisell2.recordBoard.calendar.day.selectedBlock"
              ) : item.name), item.note && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-xs text-zinc-300/90 truncate" }, item.note), (0, import_bookingCalendarViewShared.getBlockMetaLine)(item) && /* @__PURE__ */ import_react.default.createElement("div", { className: "mt-1 text-[10px] text-zinc-400 truncate" }, (0, import_bookingCalendarViewShared.getBlockMetaLine)(item))) : !item ? /* @__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"}`
                },
                freeSelected ? (0, import_calendarI18n.tCal)(
                  "pisell2.recordBoard.calendar.day.selected"
                ) : null
              ) : null
            );
          })))
        ),
        visibleDayOverlayBookings.map((booking) => {
          if (hiddenDayOverlayIdSet.has(
            (0, import_bookingCalendarDateUtils.dayOverlayHiddenKey)(booking.item, dayKey, booking.courtId)
          )) {
            return null;
          }
          const left = import_bookingCalendarConstants.frozenColWidth + (booking.start - firstTimelineHour) * timelinePxPerHour;
          const width = booking.span * timelinePxPerHour;
          const rowH = booking.rowHeight ?? import_bookingCalendarConstants.dayRowHeight;
          const totalInner = Math.max(
            40,
            rowH - import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP - import_bookingCalendarConstants.DAY_OVERLAY_INNER_BOTTOM
          );
          const laneCount = Math.max(
            1,
            courtDayDisplayLaneCount[booking.courtId] ?? 1
          );
          const lane = Number.isFinite(booking.lane) && booking.lane >= 0 ? booking.lane : 0;
          const laneGeom = (0, import_bookingCalendarDateUtils.dayOverlayLaneMetrics)(
            totalInner,
            laneCount,
            import_bookingCalendarConstants.DAY_OVERLAY_LANE_GAP
          );
          const styleTop = booking.rowTop + import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP + laneGeom.topFor(lane);
          const styleHeight = laneGeom.heightFor(lane);
          return /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              key: `${booking.item.id}-${dayKey}`,
              className: "absolute z-[25] isolate",
              style: {
                left,
                top: styleTop,
                width,
                height: styleHeight
              }
            },
            props.renderBooking ? props.renderBooking({
              booking,
              dayKey,
              calendarView: view,
              isLight,
              overlayWidthPx: width,
              onOpenDetail: openBookingDetail,
              onDragStart: setDraggingItem,
              onJumpNext: () => {
                const nextDay = (0, import_bookingCalendarDateUtils.parseDate)(dayKey);
                nextDay.setDate(nextDay.getDate() + 1);
                setNavDirection(1);
                commitAnchor(nextDay);
                setFocusedCourtId(booking.courtId);
              }
            }) : /* @__PURE__ */ import_react.default.createElement(
              import_bookingCalendarViewShared.BookingCard,
              {
                booking,
                dayKey,
                overlayWidthPx: width,
                onOpenDetail: openBookingDetail,
                onDragStart: setDraggingItem,
                onJumpNext: () => {
                  const nextDay = (0, import_bookingCalendarDateUtils.parseDate)(dayKey);
                  nextDay.setDate(nextDay.getDate() + 1);
                  setNavDirection(1);
                  commitAnchor(nextDay);
                  setFocusedCourtId(booking.courtId);
                }
              }
            )
          );
        }),
        visibleDayOverflowPluses.map((pill) => {
          const left = import_bookingCalendarConstants.frozenColWidth + (pill.start - firstTimelineHour) * timelinePxPerHour;
          const width = pill.span * timelinePxPerHour;
          const rowH = pill.rowHeight ?? import_bookingCalendarConstants.dayRowHeight;
          const totalInner = Math.max(
            40,
            rowH - import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP - import_bookingCalendarConstants.DAY_OVERLAY_INNER_BOTTOM
          );
          const laneCount = Math.max(
            1,
            courtDayDisplayLaneCount[pill.courtId] ?? 1
          );
          const laneGeom = (0, import_bookingCalendarDateUtils.dayOverlayLaneMetrics)(
            totalInner,
            laneCount,
            import_bookingCalendarConstants.DAY_OVERLAY_LANE_GAP
          );
          const lane = import_bookingCalendarConstants.DAY_OVERLAY_VISIBLE_BOOKING_CAP;
          const styleTop = pill.rowTop + import_bookingCalendarConstants.DAY_OVERLAY_INNER_TOP + laneGeom.topFor(lane);
          const styleHeight = laneGeom.heightFor(lane);
          return /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              key: pill.key,
              className: "absolute z-[26] isolate",
              style: {
                left,
                top: styleTop,
                width,
                height: styleHeight
              }
            },
            /* @__PURE__ */ import_react.default.createElement(
              "button",
              {
                type: "button",
                onClick: (e) => {
                  e.stopPropagation();
                  setOverflowListModal({
                    scope: `day-lane-overflow-${pill.key}`,
                    date: dayKey,
                    title: (0, import_calendarI18n.tCal)(
                      "pisell2.recordBoard.calendar.overflow.moreCount",
                      { count: pill.plusCount }
                    ),
                    items: pill.overflowItems
                  });
                },
                className: `flex h-full w-full items-center justify-center rounded-xl px-1.5 text-sm font-semibold text-white shadow-sm ${isLight ? "bg-zinc-500/90" : "bg-zinc-600/90"}`
              },
              "+",
              pill.plusCount
            )
          );
        })
      )
    )
  ))));
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  BookingCalendarDayView
});
