import React5, { useState, useRef, useEffect } from 'react';
import { clsx } from 'clsx';
import { createPortal } from 'react-dom';

// src/navigation/Navigation.tsx
var NavigationItemComponent = ({
  item,
  direction,
  isActive,
  onClick
}) => {
  const handleClick = (e) => {
    e.preventDefault();
    onClick(item);
  };
  const getItemClasses = () => {
    const baseClasses = `
      group relative flex items-center gap-3
      transition-all duration-300 ease-in-out
      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
      rounded-lg
    `;
    const directionClasses = direction === "vertical" ? "px-4 py-3 w-full justify-start" : "px-3 py-2 justify-center";
    const stateClasses = isActive ? "bg-blue-500 text-white shadow-lg" : item.isExternal ? "text-gray-700 hover:bg-purple-50 hover:text-purple-600 border border-purple-200" : "text-gray-700 hover:bg-blue-50 hover:text-blue-600";
    return baseClasses + " " + directionClasses + " " + stateClasses;
  };
  return /* @__PURE__ */ React5.createElement(
    "a",
    {
      href: item.href,
      onClick: handleClick,
      target: item.target,
      rel: item.isExternal ? "noopener noreferrer" : void 0,
      className: getItemClasses()
    },
    item.icon && /* @__PURE__ */ React5.createElement("span", { className: "flex-shrink-0" }, item.icon),
    /* @__PURE__ */ React5.createElement("span", { className: clsx("font-medium", direction === "vertical" ? "text-sm" : "text-xs") }, item.label),
    item.isExternal && /* @__PURE__ */ React5.createElement(
      "svg",
      {
        className: "w-3 h-3 opacity-60 group-hover:opacity-100 transition-opacity",
        fill: "none",
        stroke: "currentColor",
        viewBox: "0 0 24 24"
      },
      /* @__PURE__ */ React5.createElement(
        "path",
        {
          strokeLinecap: "round",
          strokeLinejoin: "round",
          strokeWidth: 2,
          d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
        }
      )
    ),
    direction === "vertical" && isActive && /* @__PURE__ */ React5.createElement("div", { className: "absolute left-1 top-1/2 transform -translate-y-1/2 w-1 h-6 bg-white rounded-full" })
  );
};
var NavigationItem_default = NavigationItemComponent;
var Navigation = ({
  config,
  isOpen,
  activeItemId,
  onItemClick,
  className = ""
}) => {
  const { direction, position, items, avatar, logo } = config;
  const getContainerClasses = () => {
    const baseClasses = `
      fixed z-[90]
      bg-white/95 backdrop-blur-lg
      border border-gray-200/50
      shadow-2xl
      transition-all duration-500 ease-in-out
    `;
    if (direction === "vertical") {
      const verticalClasses = "h-screen w-64 flex flex-col";
      const positionClasses = position === "left" ? "left-0 top-0 " + (isOpen ? "translate-x-0" : "-translate-x-full") : "right-0 top-0 " + (isOpen ? "translate-x-0" : "translate-x-full");
      return baseClasses + " " + verticalClasses + " " + positionClasses;
    } else {
      const horizontalClasses = "w-full h-16 flex items-center";
      const positionClasses = position === "top" ? "top-0 left-0 right-0 " + (isOpen ? "translate-y-0" : "-translate-y-full") : "bottom-0 left-0 right-0 " + (isOpen ? "translate-y-0" : "translate-y-full");
      return baseClasses + " " + horizontalClasses + " " + positionClasses;
    }
  };
  const getContentClasses = () => {
    if (direction === "vertical") {
      return "flex flex-col h-full p-4";
    } else {
      return "flex items-center justify-between w-full px-6";
    }
  };
  const getItemsListClasses = () => {
    if (direction === "vertical") {
      return "flex flex-col gap-2 flex-1 overflow-y-auto mt-4";
    } else {
      return "flex items-center gap-4";
    }
  };
  const handleItemClick = (item) => {
    if (item.isExternal) {
      window.open(item.href, item.target || "_blank");
    } else if (item.href.startsWith("#")) {
      const element = document.getElementById(item.id);
      if (element) {
        element.scrollIntoView({ behavior: "smooth" });
      }
    } else {
      window.location.href = item.href;
    }
    onItemClick?.(item);
  };
  if (!isOpen) return null;
  return /* @__PURE__ */ React5.createElement("nav", { className: clsx(getContainerClasses(), className) }, /* @__PURE__ */ React5.createElement("div", { className: getContentClasses() }, logo && /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-center mb-4" }, /* @__PURE__ */ React5.createElement(
    "img",
    {
      src: logo.src,
      alt: logo.alt || "Logo",
      className: "h-8 w-auto"
    }
  )), direction === "vertical" && /* @__PURE__ */ React5.createElement("div", { className: "h-12 flex-shrink-0" }), /* @__PURE__ */ React5.createElement("div", { className: getItemsListClasses() }, items.map((item) => /* @__PURE__ */ React5.createElement(
    NavigationItem_default,
    {
      key: item.id,
      item,
      direction,
      isActive: activeItemId === item.id,
      onClick: handleItemClick
    }
  ))), avatar && direction === "vertical" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-center justify-center mt-auto pt-4" }, /* @__PURE__ */ React5.createElement(
    "img",
    {
      src: avatar.src,
      alt: avatar.alt || "Avatar",
      className: "w-10 h-10 rounded-full border-2 border-gray-200"
    }
  )), avatar && direction === "horizontal" && /* @__PURE__ */ React5.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React5.createElement(
    "img",
    {
      src: avatar.src,
      alt: avatar.alt || "Avatar",
      className: "w-8 h-8 rounded-full border-2 border-gray-200"
    }
  ))));
};
var Navigation_default = Navigation;
var NavigationToggle = ({
  isOpen,
  onClick,
  position
}) => {
  const getPositionClasses = () => {
    switch (position) {
      case "top":
        return "top-4 left-4";
      case "bottom":
        return "bottom-4 left-4";
      case "left":
        return "top-4 left-4";
      case "right":
        return "top-4 right-4";
      default:
        return "top-4 left-4";
    }
  };
  return /* @__PURE__ */ React5.createElement(
    "button",
    {
      onClick,
      className: clsx(
        "fixed",
        getPositionClasses(),
        "z-[100] p-3 rounded-xl bg-white/90 backdrop-blur-md shadow-lg hover:shadow-xl border border-gray-200/50 transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
      ),
      "aria-label": isOpen ? "\u5173\u95ED\u5BFC\u822A\u680F" : "\u6253\u5F00\u5BFC\u822A\u680F"
    },
    /* @__PURE__ */ React5.createElement("div", { className: "w-5 h-5 flex flex-col justify-center items-center" }, /* @__PURE__ */ React5.createElement(
      "span",
      {
        className: clsx(
          "block w-5 h-0.5 bg-gray-600 rounded-full transform transition-all duration-300 ease-in-out",
          isOpen ? "rotate-45 translate-y-0.5" : ""
        )
      }
    ), /* @__PURE__ */ React5.createElement(
      "span",
      {
        className: clsx(
          "block w-5 h-0.5 bg-gray-600 rounded-full transform transition-all duration-300 ease-in-out mt-1",
          isOpen ? "opacity-0 scale-0" : "opacity-100 scale-100"
        )
      }
    ), /* @__PURE__ */ React5.createElement(
      "span",
      {
        className: clsx(
          "block w-5 h-0.5 bg-gray-600 rounded-full transform transition-all duration-300 ease-in-out mt-1",
          isOpen ? "-rotate-45 -translate-y-2.5" : ""
        )
      }
    ))
  );
};
var NavigationToggle_default = NavigationToggle;
var FloatingMenu = ({
  trigger,
  menu,
  initialPosition = { x: 20, y: 20 },
  defaultOpen = false,
  className = "",
  menuClassName = "",
  triggerClassName = "",
  zIndex = 1e3
}) => {
  const [position, setPosition] = useState(initialPosition);
  const [isMenuOpen, setIsMenuOpen] = useState(defaultOpen);
  const [menuDirection, setMenuDirection] = useState("right");
  const [isDragging, setIsDragging] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
  const containerRef = useRef(null);
  const [mounted, setMounted] = useState(false);
  const [hasDragged, setHasDragged] = useState(false);
  const dragTimerRef = useRef(null);
  const mouseDownPosRef = useRef(null);
  useEffect(() => {
    setMounted(true);
    return () => setMounted(false);
  }, []);
  useEffect(() => {
    if (!mounted || !containerRef.current) return;
    const updateMenuDirection = () => {
      const rect = containerRef.current?.getBoundingClientRect();
      if (!rect) return;
      const windowWidth = window.innerWidth;
      const middlePoint = windowWidth / 2;
      setMenuDirection(rect.left < middlePoint ? "right" : "left");
    };
    updateMenuDirection();
    window.addEventListener("resize", updateMenuDirection);
    window.addEventListener("scroll", updateMenuDirection);
    return () => {
      window.removeEventListener("resize", updateMenuDirection);
      window.removeEventListener("scroll", updateMenuDirection);
    };
  }, [mounted]);
  const handleMouseDown = (e) => {
    if (!containerRef.current) return;
    e.stopPropagation();
    mouseDownPosRef.current = { x: e.clientX, y: e.clientY };
    const rect = containerRef.current.getBoundingClientRect();
    setDragOffset({
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
    });
    setHasDragged(false);
    setIsDragging(true);
  };
  useEffect(() => {
    if (!isDragging) return;
    const handleMouseMove = (e) => {
      if (mouseDownPosRef.current) {
        const dx = Math.abs(e.clientX - mouseDownPosRef.current.x);
        const dy = Math.abs(e.clientY - mouseDownPosRef.current.y);
        if (dx > 3 || dy > 3) {
          setHasDragged(true);
        }
      }
      const newX = e.clientX - dragOffset.x;
      const newY = e.clientY - dragOffset.y;
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      setPosition({
        x: Math.min(Math.max(newX, 0), windowWidth - 50),
        y: Math.min(Math.max(newY, 0), windowHeight - 50)
      });
    };
    const handleMouseUp = () => {
      setIsDragging(false);
      mouseDownPosRef.current = null;
      if (dragTimerRef.current) {
        window.clearTimeout(dragTimerRef.current);
      }
      dragTimerRef.current = window.setTimeout(() => {
        setHasDragged(false);
      }, 300);
    };
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isDragging, dragOffset]);
  useEffect(() => {
    return () => {
      if (dragTimerRef.current) {
        window.clearTimeout(dragTimerRef.current);
      }
    };
  }, []);
  const toggleMenu = (e) => {
    e.stopPropagation();
    if (hasDragged) {
      return;
    }
    setIsMenuOpen(!isMenuOpen);
  };
  useEffect(() => {
    if (!isMenuOpen) return;
    const handleClickOutside = (e) => {
      if (containerRef.current && !containerRef.current.contains(e.target)) {
        setIsMenuOpen(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isMenuOpen]);
  useEffect(() => {
    if (!mounted) return;
    const checkBoundaries = () => {
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      setPosition((prev) => {
        const newX = Math.min(Math.max(prev.x, 0), windowWidth - 50);
        const newY = Math.min(Math.max(prev.y, 0), windowHeight - 50);
        if (newX !== prev.x || newY !== prev.y) {
          return { x: newX, y: newY };
        }
        return prev;
      });
    };
    window.addEventListener("resize", checkBoundaries);
    return () => {
      window.removeEventListener("resize", checkBoundaries);
    };
  }, [mounted]);
  if (!mounted) return null;
  return createPortal(
    /* @__PURE__ */ React5.createElement(
      "div",
      {
        ref: containerRef,
        className: clsx("fixed select-none box-border", className),
        style: {
          left: position.x + "px",
          top: position.y + "px",
          zIndex
        }
      },
      /* @__PURE__ */ React5.createElement(
        "div",
        {
          className: clsx(
            "flex items-center justify-center w-12 h-12 md:w-12 md:h-12 bg-white rounded-full shadow-md hover:shadow-lg cursor-grab active:cursor-grabbing transition-all duration-200 hover:scale-105 active:scale-95",
            triggerClassName
          ),
          onMouseDown: handleMouseDown,
          onClick: toggleMenu
        },
        trigger
      ),
      isMenuOpen && /* @__PURE__ */ React5.createElement(
        "div",
        {
          className: clsx(
            "absolute top-0 bg-white rounded-lg shadow-xl p-3 min-w-[200px] md:min-w-[200px] max-w-[300px] z-[1000] transition-all duration-200",
            isMenuOpen ? "opacity-100 scale-100" : "opacity-0 scale-95",
            menuDirection === "left" ? "right-[calc(100%+10px)]" : "left-[calc(100%+10px)]",
            menuClassName
          ),
          onClick: (e) => e.stopPropagation(),
          onMouseDown: (e) => e.stopPropagation(),
          onMouseUp: (e) => e.stopPropagation(),
          onTouchStart: (e) => e.stopPropagation(),
          onTouchMove: (e) => e.stopPropagation(),
          onTouchEnd: (e) => e.stopPropagation(),
          onPointerDown: (e) => e.stopPropagation(),
          onPointerUp: (e) => e.stopPropagation()
        },
        menu
      )
    ),
    document.body
  );
};
var FloatingMenu_default = FloatingMenu;
var FloatingMenuExample = () => {
  const [windowWidth, setWindowWidth] = useState(0);
  useEffect(() => {
    setWindowWidth(window.innerWidth);
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);
  const menuItems = [
    { id: 1, label: "\u9996\u9875", icon: "\u{1F3E0}" },
    { id: 2, label: "\u8BBE\u7F6E", icon: "\u2699\uFE0F" },
    { id: 3, label: "\u6D88\u606F", icon: "\u{1F4E9}" },
    { id: 4, label: "\u5E2E\u52A9", icon: "\u2753" },
    { id: 5, label: "\u9000\u51FA", icon: "\u{1F6AA}" }
  ];
  const handleMenuItemClick = (id) => {
    console.log("\u70B9\u51FB\u4E86\u83DC\u5355\u9879: " + id);
  };
  return /* @__PURE__ */ React5.createElement("div", { className: "w-full h-screen bg-gray-100 relative p-8" }, /* @__PURE__ */ React5.createElement("div", { className: "max-w-2xl mx-auto bg-white rounded-2xl shadow-sm p-8 mt-12" }, /* @__PURE__ */ React5.createElement("h1", { className: "text-3xl font-bold mb-4 text-gray-900" }, "\u60AC\u6D6E\u83DC\u5355\u793A\u4F8B"), /* @__PURE__ */ React5.createElement("p", { className: "text-gray-600 leading-relaxed mb-6" }, "\u8FD9\u662F\u4E00\u4E2A\u53EF\u62D6\u62FD\u7684\u60AC\u6D6E\u83DC\u5355\u7EC4\u4EF6\u793A\u4F8B\u3002\u4F60\u53EF\u4EE5\u5C1D\u8BD5\u62D6\u52A8\u4E0B\u65B9\u7684 ", /* @__PURE__ */ React5.createElement("span", { className: "font-bold text-blue-600" }, "\u84DD\u8272\u6309\u94AE"), " \u5230\u5904\u79FB\u52A8\u3002"), /* @__PURE__ */ React5.createElement("div", { className: "bg-blue-50 border-l-4 border-blue-500 p-4 mb-6" }, /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-blue-700" }, /* @__PURE__ */ React5.createElement("strong", null, "\u667A\u80FD\u5B9A\u4F4D\uFF1A"), " \u83DC\u5355\u4F1A\u6839\u636E\u6309\u94AE\u5728\u5C4F\u5E55\u4E0A\u7684\u4F4D\u7F6E\u81EA\u52A8\u8C03\u6574\u5F39\u51FA\u65B9\u5411\uFF08\u5411\u5DE6\u6216\u5411\u53F3\uFF09\u3002"))), /* @__PURE__ */ React5.createElement(
    FloatingMenu_default,
    {
      trigger: /* @__PURE__ */ React5.createElement("div", { className: "w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-lg cursor-pointer" }, /* @__PURE__ */ React5.createElement("span", { className: "text-xl" }, "\u2795")),
      menu: /* @__PURE__ */ React5.createElement("div", { className: "w-48 bg-white rounded-xl shadow-xl border border-gray-100 overflow-hidden" }, /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-3 border-b border-gray-100" }, /* @__PURE__ */ React5.createElement("h3", { className: "text-sm font-bold text-gray-900" }, "\u5FEB\u6377\u83DC\u5355")), /* @__PURE__ */ React5.createElement("ul", { className: "py-1" }, menuItems.map((item) => /* @__PURE__ */ React5.createElement(
        "li",
        {
          key: item.id,
          className: "flex items-center gap-3 px-4 py-2.5 hover:bg-blue-50 text-gray-700 hover:text-blue-600 cursor-pointer transition-colors text-sm",
          onClick: () => handleMenuItemClick(item.id)
        },
        /* @__PURE__ */ React5.createElement("span", { className: "text-lg" }, item.icon),
        /* @__PURE__ */ React5.createElement("span", { className: "font-medium" }, item.label)
      )))),
      initialPosition: { x: 100, y: 100 }
    }
  ), windowWidth > 0 && /* @__PURE__ */ React5.createElement(
    FloatingMenu_default,
    {
      trigger: /* @__PURE__ */ React5.createElement("div", { className: "w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white shadow-lg cursor-pointer" }, /* @__PURE__ */ React5.createElement("span", { className: "text-xl" }, "\u{1F50D}")),
      menu: /* @__PURE__ */ React5.createElement("div", { className: "w-64 bg-white rounded-xl shadow-xl border border-gray-100 p-4" }, /* @__PURE__ */ React5.createElement("h3", { className: "text-sm font-bold text-gray-900 mb-3" }, "\u5FEB\u901F\u641C\u7D22"), /* @__PURE__ */ React5.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React5.createElement(
        "input",
        {
          type: "text",
          placeholder: "\u8F93\u5165\u5173\u952E\u5B57...",
          className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent outline-none"
        }
      ), /* @__PURE__ */ React5.createElement("button", { className: "w-full bg-purple-600 text-white py-2 rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors" }, "\u641C\u7D22"))),
      initialPosition: { x: windowWidth - 100, y: 100 }
    }
  ));
};
var FloatingMenuExample_default = FloatingMenuExample;

export { FloatingMenuExample_default, FloatingMenu_default, NavigationItem_default, NavigationToggle_default, Navigation_default };
//# sourceMappingURL=chunk-2PS5PIXV.mjs.map
//# sourceMappingURL=chunk-2PS5PIXV.mjs.map