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/VenueWallCard.tsx
var VenueWallCard_exports = {};
__export(VenueWallCard_exports, {
  VenueWallCard: () => VenueWallCard
});
module.exports = __toCommonJS(VenueWallCard_exports);
var import_react = __toESM(require("react"));
var import_NoteTicker = require("./NoteTicker");
var import_venueWallUtils = require("./venueWallUtils");
function useVenueWallClockNow() {
  const [now, setNow] = (0, import_react.useState)(() => Date.now());
  (0, import_react.useEffect)(() => {
    const id = window.setInterval(() => setNow(Date.now()), 1e3);
    return () => window.clearInterval(id);
  }, []);
  return now;
}
function useDriftMinutesFromEpoch(value, resourceId, now, allowNegative = false) {
  const [epoch, setEpoch] = (0, import_react.useState)(() => ({
    min: value ?? 0,
    at: Date.now()
  }));
  (0, import_react.useEffect)(() => {
    setEpoch({ min: value ?? 0, at: Date.now() });
  }, [resourceId, value]);
  const drifted = epoch.min - Math.floor((now - epoch.at) / 6e4);
  return allowNegative ? drifted : Math.max(0, drifted);
}
function useDriftUpMinutesFromEpoch(value, resourceId, now) {
  const [epoch, setEpoch] = (0, import_react.useState)(() => ({
    min: value ?? 0,
    at: Date.now()
  }));
  (0, import_react.useEffect)(() => {
    setEpoch({ min: value ?? 0, at: Date.now() });
  }, [resourceId, value]);
  return Math.max(0, epoch.min + Math.floor((now - epoch.at) / 6e4));
}
var DEFAULT_OCCUPIED = "#6f4ae6";
var DEFAULT_AVAILABLE = "#10b981";
var VenueWallCard = ({
  card,
  boardingSoonBeforeMin = 10,
  occupiedCardColor = DEFAULT_OCCUPIED,
  availableCardColor = DEFAULT_AVAILABLE,
  heroMaxWidthRatio = 0.6
}) => {
  var _a, _b;
  const cardRef = (0, import_react.useRef)(null);
  const [cardSize, setCardSize] = (0, import_react.useState)({ width: 420, height: 300 });
  (0, import_react.useEffect)(() => {
    if (!cardRef.current) return;
    const node = cardRef.current;
    const updateSize = () => {
      const rect = node.getBoundingClientRect();
      setCardSize({ width: rect.width, height: rect.height });
    };
    updateSize();
    const observer = new ResizeObserver(updateSize);
    observer.observe(node);
    return () => observer.disconnect();
  }, []);
  const wallNow = useVenueWallClockNow();
  const liveRemainingMin = useDriftMinutesFromEpoch(
    card.remainingMin,
    card.resourceId,
    wallNow,
    true
  );
  const liveStartsInMin = useDriftMinutesFromEpoch(
    card.startsInMin,
    card.resourceId,
    wallNow,
    false
  );
  const liveLateMin = useDriftUpMinutesFromEpoch(
    card.lateMin,
    card.resourceId,
    wallNow
  );
  const statusKey = (0, import_venueWallUtils.deriveVenueWallStatus)({
    ...card,
    remainingMin: liveRemainingMin
  });
  const tone = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP[statusKey] ?? import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.inUse;
  const isOccupied = ["inUse", "endingSoon", "expired"].includes(statusKey);
  let heroText = isOccupied ? (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin) : "Available";
  let heroColor = isOccupied ? statusKey === "inUse" ? "#ffffff" : tone.color : import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
  let noteText = isOccupied ? tone.note : import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.note;
  let noteTextColor = isOccupied ? "#ffffff" : "#0f172a";
  let noteBg = isOccupied ? tone.noteBg : (0, import_venueWallUtils.alphaColor)(availableCardColor, 0.2);
  const subColor = isOccupied ? "rgba(255,255,255,0.80)" : "#94a3b8";
  const mainColor = isOccupied ? "#ffffff" : "#0f172a";
  let currentLabel = "Current";
  let currentTime = card.currentTime ?? "";
  let currentName = isOccupied ? card.currentBooking ?? "" : "";
  let currentNameColor = mainColor;
  let nextNameColor = mainColor;
  let progress = isOccupied ? (0, import_venueWallUtils.clamp)(liveRemainingMin / 60 * 100, 0, 100) : 0;
  let progressColor = heroColor;
  let rightTag = tone.label;
  let rightTagColor = isOccupied ? "#ffffff" : tone.color;
  let rightTagBg = isOccupied ? statusKey === "inUse" ? "rgba(255,255,255,0.14)" : tone.color : (0, import_venueWallUtils.alphaColor)(tone.color, 0.12);
  let rightTagBorder = isOccupied ? "rgba(255,255,255,0.18)" : (0, import_venueWallUtils.alphaColor)(tone.color, 0.35);
  const nextItem = (_a = card.nextList) == null ? void 0 : _a[0];
  const nextCountLabel = nextItem ? `1/${((_b = card.nextList) == null ? void 0 : _b.length) ?? 0}` : "";
  if (statusKey === "boardingSoon") {
    heroText = `Starts in ${liveStartsInMin}m`;
    heroColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    noteText = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.note;
    noteTextColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    noteBg = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.18);
    currentLabel = "Next";
    currentName = card.currentBooking ?? "";
    currentNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    nextNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    progress = (0, import_venueWallUtils.clamp)(
      (boardingSoonBeforeMin - liveStartsInMin) / boardingSoonBeforeMin * 100,
      0,
      100
    );
    progressColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    rightTag = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.label;
    rightTagColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color;
    rightTagBg = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.12);
    rightTagBorder = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color, 0.35);
  }
  if (statusKey === "late") {
    heroText = `Late +${liveLateMin}m`;
    heroColor = "rgb(239, 68, 68)";
    noteText = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.late.note;
    noteTextColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
    noteBg = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.noteBg;
    currentLabel = "Next";
    currentName = card.currentBooking ?? "";
    currentNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
    nextNameColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
    progress = 100;
    progressColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
    rightTag = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.late.label;
    rightTagColor = import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color;
    rightTagBg = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.12);
    rightTagBorder = (0, import_venueWallUtils.alphaColor)(import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.available.color, 0.35);
  }
  if (statusKey === "expired") {
    heroText = liveRemainingMin < 0 ? (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin) : liveRemainingMin === 0 ? "0m overtime" : (0, import_venueWallUtils.formatVenueWallCountdown)(liveRemainingMin);
  }
  const surfaceAccentColor = statusKey === "late" ? availableCardColor : statusKey === "boardingSoon" ? import_venueWallUtils.VENUE_WALL_STATUS_COLOR_MAP.boardingSoon.color : availableCardColor;
  const cardBg = isOccupied ? `linear-gradient(180deg, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.96)} 0%, ${(0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.88)} 100%)` : (0, import_venueWallUtils.alphaColor)(
    surfaceAccentColor,
    statusKey === "boardingSoon" || statusKey === "late" ? 0.06 : 0.03
  );
  const cardBorder = isOccupied ? (0, import_venueWallUtils.alphaColor)(occupiedCardColor, 0.5) : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.18);
  const moduleBorder = isOccupied ? "rgba(255,255,255,0.10)" : (0, import_venueWallUtils.alphaColor)(surfaceAccentColor, 0.2);
  const totalUnits = 1.5 + 4 + 2 + 1 + 0.4 * 2 + 0.2 * 3;
  const heightUnit = Math.max(4, cardSize.height / totalUnits);
  const widthScale = (0, import_venueWallUtils.clamp)(cardSize.width / 420, 0.42, 1.6);
  const heightScale = (0, import_venueWallUtils.clamp)(cardSize.height / 300, 0.42, 1.8);
  const fitScale = Math.min(widthScale, heightScale);
  const unit = heightUnit;
  const shellPad = unit * 0.4;
  const sectionGap = unit * 0.2;
  const blockPad = Math.max(unit * 0.2, Math.min(unit * 0.3, 20));
  const cardRadius = (0, import_venueWallUtils.clamp)(unit * 0.62 * fitScale, 4, 28);
  const blockRadius = (0, import_venueWallUtils.clamp)(unit * 0.48 * fitScale, 3, 24);
  const noteRadius = (0, import_venueWallUtils.clamp)(unit * 0.4 * fitScale, 3, 20);
  const tagRadius = (0, import_venueWallUtils.clamp)(unit * 0.34 * fitScale, 3, 999);
  const headerHeight = unit * 1.5;
  const currentHeight = unit * 4;
  const nextHeight = unit * 2;
  const noteHeight = unit * 1;
  const areaSize = (0, import_venueWallUtils.clamp)(headerHeight * 0.18 * fitScale, 9, 18);
  const resourceSize = (0, import_venueWallUtils.clamp)(headerHeight * 0.34 * fitScale, 16, 42);
  const tagSize = (0, import_venueWallUtils.clamp)(headerHeight * 0.12 * fitScale, 10, 14);
  const tagHeight = (0, import_venueWallUtils.clamp)(headerHeight * 0.42, 28, 36);
  const currentMetaSize = (0, import_venueWallUtils.clamp)(currentHeight * 0.09 * fitScale, 9, 16);
  const currentNameSize = (0, import_venueWallUtils.clamp)(currentHeight * 0.15 * fitScale, 12, 30);
  const heroTextMaxWidth = Math.max(
    80,
    (cardSize.width - shellPad * 2 - blockPad * 2) * heroMaxWidthRatio
  );
  const heroMaxByName = currentNameSize * 2.5;
  const heroApproxFactor = Math.max(heroText.length * 0.58, 1);
  const heroFitByWidth = heroTextMaxWidth / heroApproxFactor;
  const heroSize = (0, import_venueWallUtils.clamp)(
    Math.min(heroFitByWidth, heroMaxByName),
    18,
    heroMaxByName
  );
  const nextNameSize = (0, import_venueWallUtils.clamp)(nextHeight * 0.24 * fitScale, 12, 30);
  const nextMetaSize = (0, import_venueWallUtils.clamp)(
    currentMetaSize,
    9,
    Math.max(10, nextNameSize * 0.68)
  );
  const nextBlockPad = Math.max(unit * 0.16, Math.min(unit * 0.24, 16));
  const noteSize = (0, import_venueWallUtils.clamp)(noteHeight * 0.28 * fitScale, 10, 18);
  const tagFont = Math.max(8, tagSize * 0.68);
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      ref: cardRef,
      className: "pisell-resource-wall-card",
      style: {
        position: "relative",
        height: "100%",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        borderRadius: cardRadius,
        background: cardBg,
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: cardBorder,
        boxShadow: "0 18px 48px rgba(15,23,42,0.06)"
      }
    },
    /* @__PURE__ */ import_react.default.createElement(
      "div",
      {
        style: {
          flex: 1,
          display: "grid",
          minHeight: 0,
          padding: shellPad,
          gap: sectionGap,
          gridTemplateRows: `${headerHeight}px ${currentHeight}px ${nextHeight}px ${noteHeight}px`
        }
      },
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          style: {
            display: "grid",
            minHeight: 0,
            gridTemplateRows: "1fr 2fr",
            rowGap: sectionGap
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            style: {
              textTransform: "uppercase",
              letterSpacing: "0.24em",
              fontSize: areaSize,
              color: subColor,
              overflow: "hidden",
              textOverflow: "ellipsis",
              whiteSpace: "nowrap",
              display: "flex",
              alignItems: "center"
            }
          },
          card.area
        ),
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            style: {
              display: "grid",
              alignItems: "center",
              minHeight: 0,
              gridTemplateColumns: "1fr auto",
              columnGap: 8
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                fontWeight: 700,
                overflow: "hidden",
                textOverflow: "ellipsis",
                whiteSpace: "nowrap",
                minWidth: 0,
                fontSize: resourceSize,
                lineHeight: 0.96,
                color: mainColor
              }
            },
            card.resource
          ),
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "center",
                gap: 8,
                flexShrink: 0
              }
            },
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  borderWidth: 1,
                  borderStyle: "solid",
                  fontWeight: 600,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0,
                  fontSize: tagSize,
                  lineHeight: 1,
                  minHeight: tagHeight,
                  borderRadius: tagRadius,
                  padding: `0 ${Math.max(8, tagFont)}px`,
                  color: rightTagColor,
                  borderColor: rightTagBorder,
                  background: rightTagBg
                }
              },
              rightTag
            )
          )
        )
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          style: {
            borderWidth: 1,
            borderStyle: "solid",
            position: "relative",
            minHeight: 0,
            borderRadius: blockRadius,
            borderColor: moduleBorder,
            background: isOccupied ? "rgba(255,255,255,0.10)" : (0, import_venueWallUtils.alphaColor)(
              surfaceAccentColor,
              statusKey === "boardingSoon" ? 0.18 : 0.2
            ),
            padding: blockPad
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            style: {
              height: "100%",
              display: "grid",
              minHeight: 0,
              gridTemplateRows: "1.4fr 2.6fr auto",
              rowGap: sectionGap
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                display: "grid",
                minHeight: 0,
                gridTemplateColumns: "1fr auto",
                columnGap: 8,
                alignItems: "start"
              }
            },
            /* @__PURE__ */ import_react.default.createElement("div", { style: { minWidth: 0 } }, /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  textTransform: "uppercase",
                  letterSpacing: "0.22em",
                  lineHeight: 1,
                  fontSize: currentMetaSize,
                  color: subColor
                }
              },
              currentLabel
            ), /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  lineHeight: 1,
                  marginTop: "0.2em",
                  fontSize: currentMetaSize,
                  color: subColor
                }
              },
              currentTime || " "
            )),
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  fontWeight: 600,
                  textAlign: "right",
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  minWidth: 0,
                  alignSelf: "start",
                  fontSize: currentNameSize,
                  lineHeight: 1.08,
                  color: currentNameColor,
                  maxWidth: cardSize.width * 0.42,
                  paddingTop: "0.04em",
                  paddingBottom: "0.08em"
                }
              },
              currentName
            )
          ),
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "flex-end",
                minHeight: 0,
                overflow: "hidden"
              }
            },
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  fontWeight: 600,
                  letterSpacing: "-0.02em",
                  whiteSpace: "nowrap",
                  fontSize: heroSize,
                  lineHeight: 1.08,
                  color: heroColor,
                  maxWidth: heroTextMaxWidth
                }
              },
              heroText
            )
          ),
          statusKey === "boardingSoon" || isOccupied ? /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                borderRadius: 9999,
                overflow: "hidden",
                height: Math.max(5, unit * 0.08),
                background: isOccupied ? "rgba(255,255,255,0.14)" : "rgba(148,163,184,0.18)"
              }
            },
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  height: "100%",
                  borderRadius: 9999,
                  width: `${progress}%`,
                  background: progressColor
                }
              }
            )
          ) : null
        )
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          style: {
            borderWidth: 1,
            borderStyle: "solid",
            minHeight: 0,
            borderRadius: blockRadius,
            borderColor: moduleBorder,
            background: isOccupied ? "rgba(255,255,255,0.04)" : (0, import_venueWallUtils.alphaColor)(
              surfaceAccentColor,
              statusKey === "boardingSoon" ? 0.1 : 0.08
            ),
            padding: nextBlockPad
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            style: {
              height: "100%",
              minHeight: 0,
              display: "grid",
              gridTemplateRows: "1fr 2fr",
              rowGap: sectionGap
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "flex-start",
                justifyContent: "space-between",
                gap: 8,
                minHeight: 0
              }
            },
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  textTransform: "uppercase",
                  letterSpacing: "0.12em",
                  lineHeight: 1,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  fontSize: nextMetaSize,
                  color: subColor
                }
              },
              (nextItem == null ? void 0 : nextItem.time) ? `Next · ${nextItem.time}` : "Next"
            ),
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  fontWeight: 600,
                  flexShrink: 0,
                  fontSize: nextMetaSize,
                  color: subColor,
                  lineHeight: 1
                }
              },
              nextCountLabel
            )
          ),
          /* @__PURE__ */ import_react.default.createElement(
            "div",
            {
              style: {
                display: "flex",
                alignItems: "flex-start",
                minWidth: 0,
                minHeight: 0
              }
            },
            /* @__PURE__ */ import_react.default.createElement(
              "div",
              {
                style: {
                  fontWeight: 600,
                  overflow: "hidden",
                  textOverflow: "ellipsis",
                  whiteSpace: "nowrap",
                  fontSize: nextNameSize,
                  lineHeight: 1,
                  color: nextNameColor,
                  paddingTop: sectionGap
                }
              },
              (nextItem == null ? void 0 : nextItem.booking) ?? ""
            )
          )
        )
      ),
      /* @__PURE__ */ import_react.default.createElement(
        "div",
        {
          style: {
            display: "flex",
            alignItems: "center",
            gap: 12,
            overflow: "hidden",
            minHeight: 0,
            padding: Math.max(6, blockPad * 0.66),
            borderRadius: noteRadius,
            background: noteBg,
            border: "1px solid transparent"
          }
        },
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            style: {
              width: Math.max(8, unit * 0.12),
              height: Math.max(8, unit * 0.12),
              borderRadius: 999,
              background: heroColor,
              flex: "0 0 auto"
            }
          }
        ),
        /* @__PURE__ */ import_react.default.createElement(
          "div",
          {
            style: {
              fontSize: noteSize,
              color: noteTextColor,
              width: "100%",
              height: "100%",
              display: "flex",
              alignItems: "center"
            }
          },
          /* @__PURE__ */ import_react.default.createElement(
            import_NoteTicker.NoteTicker,
            {
              text: noteText,
              color: noteTextColor,
              duration: 24,
              shouldMarquee: noteText.length > 32
            }
          )
        )
      )
    )
  );
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  VenueWallCard
});
