function _array_like_to_array(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
    return arr2;
}
function _array_with_holes(arr) {
    if (Array.isArray(arr)) return arr;
}
function _iterable_to_array_limit(arr, i) {
    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
    if (_i == null) return;
    var _arr = [];
    var _n = true;
    var _d = false;
    var _s, _e;
    try {
        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
            _arr.push(_s.value);
            if (i && _arr.length === i) break;
        }
    } catch (err) {
        _d = true;
        _e = err;
    } finally{
        try {
            if (!_n && _i["return"] != null) _i["return"]();
        } finally{
            if (_d) throw _e;
        }
    }
    return _arr;
}
function _non_iterable_rest() {
    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _sliced_to_array(arr, i) {
    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
}
function _unsupported_iterable_to_array(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _array_like_to_array(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(n);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
}
import React, { useEffect, useRef, useState } from "react";
import { isTest } from "../Utils/env";
/**
 * BorderBeamAnimation 组件 - 边框光束动画
 *
 * 该组件提供一个沿边框移动的彩色光束动画效果，通常用于输入框获得焦点时的视觉反馈。
 *
 * @component
 * @description 边框光束动画组件，使用 SVG 和 Framer Motion 实现
 * @param {BorderBeamAnimationProps} props - 组件属性
 * @param {boolean} props.isVisible - 是否显示动画
 * @param {number} props.borderRadius - 圆角半径
 * @param {() => void} [props.onAnimationComplete] - 动画完成回调
 * @param {string} [props.gradientId] - 渐变 ID，用于避免多个实例冲突
 * @param {number} [props.offsetX] - 水平偏移量，默认为 6
 * @param {number} [props.offsetY] - 垂直偏移量，默认为 16
 *
 * @example
 * ```tsx
 * <BorderBeamAnimation
 *   isVisible={isFocused}
 *   borderRadius={16}
 *   onAnimationComplete={() => setAnimationComplete(true)}
 * />
 * ```
 *
 * @returns {React.ReactElement | null} 渲染的动画组件或 null
 *
 * @remarks
 * - 使用纯 CSS（stroke-dasharray + stroke-dashoffset + @keyframes）实现路径动画
 * - 通过 SVG2 `pathLength="1"` 让 stroke-dash 系列属性使用 0-1 归一化值，
 *   等价于 framer-motion 的 pathLength / pathOffset 抽象
 * - 包含两条路径：模糊的尾部路径和明亮的核心路径
 * - 动画持续时间分别为 1s（尾）/ 0.8s（核心）
 * - 使用线性渐变实现彩色光束效果
 * - 路径计算在组件内部完成
 * - 使用 ResizeObserver 自动获取容器尺寸
 * - core path 动画结束时通过 onAnimationEnd 触发 onAnimationComplete 回调
 */ /** 唯一注入标记，避免重复插入全局 keyframes */ var BORDER_BEAM_STYLE_ID = 'agentic-ui-border-beam-keyframes';
/**
 * 一次性向 document.head 注入 BorderBeamAnimation 的 keyframes。
 *
 * 设计要点：
 * - 配合 SVG2 `pathLength="1"` 属性，dasharray/dashoffset 使用 0-1 归一化值，
 *   行为完全等价于 framer-motion 的 pathLength / pathOffset 0-1 区间值。
 * - tail（尾路径）：pathLength [0,0.45,0] + pathOffset [0,0.4] + opacity [0,0.4,0]，
 *   通过 stroke-dasharray "L 1" 控制可见长度 L、stroke-dashoffset 控制偏移。
 *   注意：dasharray "0.45 0.55" 表示 stroke 长度 0.45、空隙 0.55；
 *   dashoffset 为负向沿路径推进，因此 offset=0.4 → dashoffset=-0.4。
 * - core（核心路径）：pathLength [0,0.25,0] + pathOffset [0,0.65] + opacity [0,1,0]。
 * - times 控制中间帧位置：tail times=[0,0.5,1]、core times=[0,0.6,1]。
 *
 * SSR 安全（无 document 时跳过）；幂等。
 */ function ensureBorderBeamStyleInjected() {
    if (typeof document === 'undefined') return;
    if (document.getElementById(BORDER_BEAM_STYLE_ID)) return;
    var styleEl = document.createElement('style');
    styleEl.id = BORDER_BEAM_STYLE_ID;
    styleEl.textContent = "\n@keyframes agenticBorderBeamTail {\n  0% {\n    stroke-dasharray: 0 1;\n    stroke-dashoffset: 0;\n    opacity: 0;\n  }\n  50% {\n    stroke-dasharray: 0.45 0.55;\n    stroke-dashoffset: -0.2;\n    opacity: 0.4;\n  }\n  100% {\n    stroke-dasharray: 0 1;\n    stroke-dashoffset: -0.4;\n    opacity: 0;\n  }\n}\n@keyframes agenticBorderBeamCore {\n  0% {\n    stroke-dasharray: 0 1;\n    stroke-dashoffset: 0;\n    opacity: 0;\n  }\n  60% {\n    stroke-dasharray: 0.25 0.75;\n    stroke-dashoffset: -0.39;\n    opacity: 1;\n  }\n  100% {\n    stroke-dasharray: 0 1;\n    stroke-dashoffset: -0.65;\n    opacity: 0;\n  }\n}\n.agentic-border-beam-tail,\n.agentic-border-beam-core {\n  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);\n  animation-fill-mode: both;\n  animation-iteration-count: 1;\n}\n.agentic-border-beam-tail {\n  animation-name: agenticBorderBeamTail;\n  animation-duration: 1s;\n}\n.agentic-border-beam-core {\n  animation-name: agenticBorderBeamCore;\n  animation-duration: 0.8s;\n}\n";
    document.head.appendChild(styleEl);
}
export var BorderBeamAnimation = function BorderBeamAnimation(param) {
    var isVisible = param.isVisible, borderRadius = param.borderRadius, onAnimationComplete = param.onAnimationComplete, gradientIdProp = param.gradientId, _param_offsetX = param.offsetX, offsetX = _param_offsetX === void 0 ? 1 : _param_offsetX, _param_offsetY = param.offsetY, offsetY = _param_offsetY === void 0 ? 1 : _param_offsetY;
    var containerRef = useRef(null);
    var _useState = _sliced_to_array(useState({
        width: 0,
        height: 0
    }), 2), dimensions = _useState[0], setDimensions = _useState[1];
    // 使用 React.useId 生成唯一渐变 ID，避免多实例冲突
    var generatedId = React.useId();
    var gradientId = gradientIdProp !== null && gradientIdProp !== void 0 ? gradientIdProp : "beam-gradient-".concat(generatedId);
    // 使用 ResizeObserver 监听容器尺寸变化
    useEffect(function() {
        var _containerRef_current, _containerRef_current1;
        if (!containerRef.current) return;
        if (isTest()) return;
        var resizeObserver = new ResizeObserver(function(entries) {
            var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
            try {
                for(var _iterator = entries[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
                    var entry = _step.value;
                    setDimensions({
                        width: entry.contentRect.width,
                        height: entry.contentRect.height
                    });
                }
            } catch (err) {
                _didIteratorError = true;
                _iteratorError = err;
            } finally{
                try {
                    if (!_iteratorNormalCompletion && _iterator.return != null) {
                        _iterator.return();
                    }
                } finally{
                    if (_didIteratorError) {
                        throw _iteratorError;
                    }
                }
            }
        });
        resizeObserver.observe(containerRef.current);
        setDimensions({
            width: ((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.clientWidth) || 0,
            height: ((_containerRef_current1 = containerRef.current) === null || _containerRef_current1 === void 0 ? void 0 : _containerRef_current1.clientHeight) || 0
        });
        return function() {
            resizeObserver.disconnect();
        };
    }, []);
    // 首次渲染时注入全局 keyframes（幂等、SSR 安全）
    useEffect(function() {
        ensureBorderBeamStyleInjected();
    }, []);
    var width = dimensions.width, height = dimensions.height;
    // 使用 props 传入的 borderRadius，而非硬编码
    var radius = borderRadius;
    var w = width;
    var h = height;
    // Outer path dimensions
    var outerRadiusX = radius + offsetX;
    var outerRadiusY = radius + offsetY;
    // Ensure we have valid dimensions before generating path
    // Path starts from bottom-right corner to guide attention to top-left
    var pathData = w > 0 && h > 0 ? "\n    M ".concat(w + offsetX - outerRadiusX, " ").concat(h + offsetY, "\n    H ").concat(-offsetX + outerRadiusX, "\n    A ").concat(outerRadiusX, " ").concat(outerRadiusY, " 0 0 1 ").concat(-offsetX, " ").concat(h + offsetY - outerRadiusY, "\n    V ").concat(-offsetY + outerRadiusY, "\n    A ").concat(outerRadiusX, " ").concat(outerRadiusY, " 0 0 1 ").concat(-offsetX + outerRadiusX, " ").concat(-offsetY, "\n    H ").concat(w + offsetX - outerRadiusX, "\n    A ").concat(outerRadiusX, " ").concat(outerRadiusY, " 0 0 1 ").concat(w + offsetX, " ").concat(-offsetY + outerRadiusY, "\n    V ").concat(h + offsetY - outerRadiusY, "\n    A ").concat(outerRadiusX, " ").concat(outerRadiusY, " 0 0 1 ").concat(w + offsetX - outerRadiusX, " ").concat(h + offsetY, "\n    Z\n  ").replace(/\s+/g, ' ').trim() : '';
    return /*#__PURE__*/ React.createElement("div", {
        ref: containerRef,
        style: {
            position: 'absolute',
            inset: 0,
            pointerEvents: 'none',
            zIndex: 99,
            borderRadius: borderRadius,
            overflow: 'hidden'
        }
    }, isVisible && pathData ? /*#__PURE__*/ React.createElement("div", {
        style: {
            position: 'absolute',
            inset: 0,
            pointerEvents: 'none',
            zIndex: 0,
            borderRadius: borderRadius,
            overflow: 'visible'
        }
    }, /*#__PURE__*/ React.createElement("svg", {
        style: {
            width: '100%',
            height: '100%',
            overflow: 'visible'
        },
        viewBox: "".concat(-offsetX, " ").concat(-offsetY, " ").concat(w + offsetX * 2, " ").concat(h + offsetY * 2),
        fill: "none"
    }, /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
        id: gradientId,
        gradientUnits: "userSpaceOnUse",
        x1: "0%",
        y1: "0%",
        x2: "100%",
        y2: "0%"
    }, /*#__PURE__*/ React.createElement("stop", {
        offset: "0%",
        stopColor: "#5760FF",
        stopOpacity: "1"
    }), /*#__PURE__*/ React.createElement("stop", {
        offset: "15%",
        stopColor: "#33CCFF",
        stopOpacity: "1"
    }), /*#__PURE__*/ React.createElement("stop", {
        offset: "30%",
        stopColor: "#33CCFF",
        stopOpacity: "1"
    }), /*#__PURE__*/ React.createElement("stop", {
        offset: "50%",
        stopColor: "#E2CCFF",
        stopOpacity: "1"
    }), /*#__PURE__*/ React.createElement("stop", {
        offset: "65%",
        stopColor: "#33CCFF",
        stopOpacity: "1"
    }), /*#__PURE__*/ React.createElement("stop", {
        offset: "100%",
        stopColor: "#5760FF",
        stopOpacity: "1"
    }))), /*#__PURE__*/ React.createElement("path", {
        className: "agentic-border-beam-tail",
        d: pathData,
        fill: "none",
        stroke: "url(#".concat(gradientId, ")"),
        strokeWidth: "4",
        strokeLinecap: "round",
        filter: "blur(8px)",
        pathLength: 1
    }), /*#__PURE__*/ React.createElement("path", {
        className: "agentic-border-beam-core",
        d: pathData,
        fill: "none",
        stroke: "url(#".concat(gradientId, ")"),
        strokeWidth: "2",
        strokeLinecap: "round",
        filter: "blur(4px)",
        pathLength: 1,
        onAnimationEnd: function onAnimationEnd(e) {
            // 仅响应自身动画结束，避免被子元素冒泡触发
            if (e.target === e.currentTarget) {
                onAnimationComplete === null || onAnimationComplete === void 0 ? void 0 : onAnimationComplete();
            }
        }
    }))) : null);
};
