'use strict';

const jsxRuntime = require('react/jsx-runtime');
const React = require('react');
const core_esm = require('../../../../../../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.2.0_react@19.2.0__react@19.2.0/node_modules/@dnd-kit/core/dist/core.esm.cjs');
const utils = require('../../../../lib/utils.cjs');
require('../../../../lib/ui-builder/context/dnd-context-colission-utils.cjs');
const dndContexts = require('../../../../lib/ui-builder/context/dnd-contexts.cjs');
require('react-dom');
require('../../../../lib/ui-builder/store/layer-store.cjs');
require('zod');
require('../../../../lib/ui-builder/store/editor-store.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }

const React__default = /*#__PURE__*/_interopDefaultCompat(React);

const BEFORE_CENTER_TRANSFORM = "before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2";
const BEFORE_ROUNDED_DEFAULT = "before:rounded-full";
const BEFORE_ROUNDED_HOVER = "before:rounded-sm";
const BEFORE_TRANSITION = "before:transition-all before:duration-200";
const DROP_INDICATOR_HOVER = "before:bg-blue-500 before:shadow-xl";
const DROP_INDICATOR_DEFAULT = "before:bg-blue-400/50";
const DROP_INDICATOR_INLINE_HOVER = "before:bg-blue-500 before:shadow-lg";
const DROP_INDICATOR_INLINE_DEFAULT = "before:bg-blue-400/40";
const DROP_INDICATOR_DISABLED = "before:bg-gray-400/30";
const DROP_INDICATOR_DISABLED_HOVER = "before:bg-gray-500/40";
function getLayoutType(element) {
  const styles = window.getComputedStyle(element);
  const display = styles.display;
  const flexDirection = styles.flexDirection;
  if (display === "flex" || display === "inline-flex") {
    return flexDirection === "row" || flexDirection === "row-reverse" ? "flex-row" : "flex-col";
  }
  if (display === "grid" || display === "inline-grid") {
    return "grid";
  }
  if (display === "inline" || display === "inline-block") {
    return "inline";
  }
  if (display === "block") {
    const allChildren = Array.from(element.children);
    const nonDropChildren = allChildren.filter(
      (child) => !child.hasAttribute("data-drop-indicator")
    );
    if (nonDropChildren.length > 0) {
      const inlineChildren = nonDropChildren.filter((child) => {
        const childDisplay = window.getComputedStyle(child).display;
        return childDisplay === "inline" || childDisplay === "inline-block";
      });
      if (inlineChildren.length > nonDropChildren.length / 2) {
        return "inline";
      }
    }
  }
  return "block";
}
const DropPlaceholder = ({
  parentId,
  position,
  isActive = false,
  style
}) => {
  const [layoutType, setLayoutType] = React__default.useState("block");
  const [calculatedStyle, setCalculatedStyle] = React__default.useState(null);
  const [element, setElement] = React__default.useState(null);
  const dndContext = dndContexts.useDndContext();
  const isDropValid = dndContext.canDropOnLayer(parentId);
  const {
    isOver,
    setNodeRef
  } = core_esm.useDroppable({
    id: `${parentId}-${position}`,
    data: {
      type: "drop-zone",
      parentId,
      position
    },
    // Disable the droppable when drop is not valid (e.g., childOf constraint violation)
    disabled: !isDropValid
  });
  React__default.useLayoutEffect(() => {
    if (!isActive || !element) return;
    const parentContainer = element.closest(`[data-layer-id="${parentId}"]`);
    if (!parentContainer) return;
    let detectedLayout = getLayoutType(parentContainer);
    if (dndContext?.activeLayerId) {
      const draggedElement = document.querySelector(`[data-layer-id="${dndContext.activeLayerId}"]`);
      if (draggedElement) {
        const draggedTagName = draggedElement.tagName.toLowerCase();
        const draggedDisplay = window.getComputedStyle(draggedElement).display;
        const isInlineElement = draggedDisplay === "inline" || draggedDisplay === "inline-block" || ["span", "a", "strong", "em", "code", "small", "mark", "del", "ins", "sub", "sup"].includes(draggedTagName);
        if (isInlineElement && detectedLayout === "block") {
          detectedLayout = "inline";
        }
      }
    }
    setLayoutType(detectedLayout);
    const nextSibling = element.nextElementSibling;
    let siblingElement = null;
    if (nextSibling) {
      if (nextSibling.hasAttribute("data-layer-id")) {
        siblingElement = nextSibling;
      } else {
        siblingElement = nextSibling.querySelector("[data-layer-id]");
      }
    }
    const parentRect = parentContainer.getBoundingClientRect();
    if (siblingElement) {
      const siblingRect = siblingElement.getBoundingClientRect();
      const positionStyle = {
        position: "absolute",
        pointerEvents: "auto",
        zIndex: 999
      };
      if (detectedLayout === "flex-row") {
        positionStyle.left = siblingRect.left - parentRect.left - 4;
        positionStyle.top = siblingRect.top - parentRect.top;
        positionStyle.width = 8;
        positionStyle.height = siblingRect.height;
      } else if (detectedLayout === "inline") {
        positionStyle.left = siblingRect.left - parentRect.left - 3;
        positionStyle.top = siblingRect.top - parentRect.top;
        positionStyle.width = 6;
        positionStyle.height = siblingRect.height;
      } else if (detectedLayout === "grid") {
        positionStyle.left = siblingRect.left - parentRect.left - 4;
        positionStyle.top = siblingRect.top - parentRect.top - 4;
        positionStyle.width = 8;
        positionStyle.height = 8;
      } else {
        positionStyle.left = siblingRect.left - parentRect.left;
        positionStyle.top = siblingRect.top - parentRect.top - 4;
        positionStyle.width = siblingRect.width;
        positionStyle.height = 8;
      }
      setCalculatedStyle(positionStyle);
    } else {
      const childLayers = parentContainer.querySelectorAll("[data-layer-id]");
      const directChildLayers = Array.from(childLayers).filter((el) => {
        const closestLayerParent = el.parentElement?.closest("[data-layer-id]");
        return closestLayerParent === parentContainer || closestLayerParent === null;
      });
      const lastChild = directChildLayers[directChildLayers.length - 1];
      if (lastChild) {
        const lastChildRect = lastChild.getBoundingClientRect();
        const positionStyle = {
          position: "absolute",
          pointerEvents: "auto",
          zIndex: 999
        };
        if (detectedLayout === "flex-row") {
          positionStyle.left = lastChildRect.right - parentRect.left - 4;
          positionStyle.top = lastChildRect.top - parentRect.top;
          positionStyle.width = 8;
          positionStyle.height = lastChildRect.height;
        } else if (detectedLayout === "inline") {
          positionStyle.left = lastChildRect.right - parentRect.left - 3;
          positionStyle.top = lastChildRect.top - parentRect.top;
          positionStyle.width = 6;
          positionStyle.height = lastChildRect.height;
        } else if (detectedLayout === "grid") {
          positionStyle.left = lastChildRect.right - parentRect.left - 4;
          positionStyle.top = lastChildRect.top - parentRect.top - 4;
          positionStyle.width = 8;
          positionStyle.height = 8;
        } else {
          positionStyle.left = lastChildRect.left - parentRect.left;
          positionStyle.top = lastChildRect.bottom - parentRect.top - 4;
          positionStyle.width = lastChildRect.width;
          positionStyle.height = 8;
        }
        setCalculatedStyle(positionStyle);
      } else {
        setCalculatedStyle({
          position: "absolute",
          pointerEvents: "auto",
          zIndex: 999,
          left: 0,
          top: 0,
          right: 0,
          height: 8
        });
      }
    }
  }, [isActive, element, parentId, position, dndContext?.activeLayerId]);
  const combinedRef = React__default.useCallback((node) => {
    setElement(node);
    setNodeRef(node);
  }, [setNodeRef]);
  if (!isActive) return null;
  const useCalculatedPositioning = calculatedStyle !== null;
  const getIndicatorStyles = (baseHover, baseDefault) => {
    if (!isDropValid) {
      return isOver ? DROP_INDICATOR_DISABLED_HOVER : DROP_INDICATOR_DISABLED;
    }
    return isOver ? baseHover : baseDefault;
  };
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      ref: combinedRef,
      className: utils.cn(
        // Always apply absolute positioning base classes
        "absolute pointer-events-auto z-[999]",
        "before:content-[''] before:absolute",
        BEFORE_TRANSITION,
        "before:pointer-events-none",
        // Disabled state visual cue
        !isDropValid && "opacity-60 cursor-not-allowed",
        // Fallback positioning classes when calculatedStyle is not available
        !useCalculatedPositioning && !style && [
          // Flex-row layout: vertical lines on left edge
          layoutType === "flex-row" && [
            "-left-1 top-0 bottom-0 w-2",
            BEFORE_CENTER_TRANSFORM,
            "before:w-1 before:h-8",
            getIndicatorStyles(
              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-2 before:h-16`,
              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-1 before:h-6`
            )
          ],
          // Inline layout: subtle vertical indicators
          layoutType === "inline" && [
            "-left-1 top-0 bottom-0 w-2",
            BEFORE_CENTER_TRANSFORM,
            "before:w-0.5 before:h-4",
            getIndicatorStyles(
              `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-1 before:h-8`,
              `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:w-0.5 before:h-3`
            )
          ],
          // Vertical layout (flex-col, block): horizontal lines on top edge
          (layoutType === "flex-col" || layoutType === "block") && [
            "left-0 right-0 -top-1 h-2",
            BEFORE_CENTER_TRANSFORM,
            "before:h-1 before:w-8",
            getIndicatorStyles(
              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-2 before:w-16`,
              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-1 before:w-6`
            )
          ],
          // Grid layout: corner indicator
          layoutType === "grid" && [
            "-left-1 -top-1 w-2 h-2",
            BEFORE_CENTER_TRANSFORM,
            "before:h-2 before:w-2",
            getIndicatorStyles(
              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-4 before:w-4`,
              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT} before:h-2 before:w-2`
            )
          ]
        ],
        // When using calculated positioning, only apply visual indicator classes
        useCalculatedPositioning && [
          BEFORE_CENTER_TRANSFORM,
          layoutType === "flex-row" && [
            "before:w-1 before:h-8",
            getIndicatorStyles(
              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:w-2 before:h-16`,
              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
            )
          ],
          layoutType === "inline" && [
            "before:w-0.5 before:h-4",
            getIndicatorStyles(
              `${DROP_INDICATOR_INLINE_HOVER} ${BEFORE_ROUNDED_HOVER}`,
              `${DROP_INDICATOR_INLINE_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
            )
          ],
          (layoutType === "flex-col" || layoutType === "block") && [
            "before:h-1 before:w-8",
            getIndicatorStyles(
              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER} before:h-2 before:w-16`,
              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
            )
          ],
          layoutType === "grid" && [
            "before:h-2 before:w-2",
            getIndicatorStyles(
              `${DROP_INDICATOR_HOVER} ${BEFORE_ROUNDED_HOVER}`,
              `${DROP_INDICATOR_DEFAULT} ${BEFORE_ROUNDED_DEFAULT}`
            )
          ]
        ],
        // Custom style overrides
        style && [
          isDropValid ? ["before:bg-blue-500/60 before:rounded-sm", isOver && "before:bg-blue-600 before:shadow-md"] : ["before:bg-gray-400/30 before:rounded-sm", isOver && "before:bg-gray-500/40"]
        ]
      ),
      style: useCalculatedPositioning ? calculatedStyle : style,
      "data-testid": `drop-placeholder-${parentId}-${position}`,
      "data-drop-indicator": true,
      "data-drop-valid": isDropValid
    }
  );
};

exports.DropPlaceholder = DropPlaceholder;
exports.getLayoutType = getLayoutType;
