import classNames from "clsx";
import React, { useEffect } from "react";
/** 默认 hidden/visible 关键帧值，与历史 framer-motion 默认行为保持一致 */ var DEFAULT_HIDDEN_ROTATE_X = -90;
var DEFAULT_HIDDEN_OPACITY = 0;
var DEFAULT_VISIBLE_ROTATE_X = 0;
var DEFAULT_VISIBLE_OPACITY = 1;
/** 全局 keyframes 唯一注入标记 */ var FLIP_TEXT_STYLE_ID = 'agentic-ui-flip-text-keyframes';
/**
 * 一次性向 document.head 注入 FlipText 所需的 keyframes 与基础样式。
 *
 * 替代 framer-motion 的 motion.span + variants/transition 组合：
 * - `agenticFlipTextIn` 关键帧通过 CSS 自定义属性引用每个字符的 from/to 值，
 *   等价于 framer-motion 的 `variants.hidden` / `variants.visible`。
 * - 字符 stagger 通过每个 span 的 inline `animation-delay` 实现。
 *
 * 注入幂等，避免重复插入；SSR 安全（无 window 时跳过）。
 */ function ensureFlipTextStyleInjected() {
    if (typeof document === 'undefined') return;
    if (document.getElementById(FLIP_TEXT_STYLE_ID)) return;
    var styleEl = document.createElement('style');
    styleEl.id = FLIP_TEXT_STYLE_ID;
    styleEl.textContent = "\n@keyframes agenticFlipTextIn {\n  from {\n    transform: rotateX(var(--flip-from-rotate-x, ".concat(DEFAULT_HIDDEN_ROTATE_X, "deg));\n    opacity: var(--flip-from-opacity, ").concat(DEFAULT_HIDDEN_OPACITY, ");\n  }\n  to {\n    transform: rotateX(var(--flip-to-rotate-x, ").concat(DEFAULT_VISIBLE_ROTATE_X, "deg));\n    opacity: var(--flip-to-opacity, ").concat(DEFAULT_VISIBLE_OPACITY, ");\n  }\n}\n.agentic-flip-text-char {\n  display: inline-block;\n  transform-origin: center;\n  animation-name: agenticFlipTextIn;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  animation-fill-mode: both;\n}\n");
    document.head.appendChild(styleEl);
}
/**
 * FlipText 组件 - 翻转文字动画组件
 *
 * 该组件为每个字符提供翻转动画效果，使用framer-motion实现流畅的动画。
 * 支持自定义动画参数、延迟时间、样式等配置。
 *
 * @component
 * @description 翻转文字动画组件，为文字提供字符级翻转动画
 * @param {FlipTextProps} props - 组件属性
 * @param {string} props.word - 要显示的文字
 * @param {number} [props.duration=0.5] - 每个字符的翻转动画持续时间
 * @param {number} [props.delayMultiple=0.08] - 字符间动画延迟倍数
 * @param {Variants} [props.framerProps] - framer-motion动画属性
 * @param {Object} [props.framerProps.hidden] - 隐藏状态动画
 * @param {number} [props.framerProps.hidden.rotateX=-90] - 初始X轴旋转角度
 * @param {number} [props.framerProps.hidden.opacity=0] - 初始透明度
 * @param {Object} [props.framerProps.visible] - 可见状态动画
 * @param {number} [props.framerProps.visible.rotateX=0] - 最终X轴旋转角度
 * @param {number} [props.framerProps.visible.opacity=1] - 最终透明度
 * @param {string} [props.className] - 额外的CSS类名
 *
 * @example
 * ```tsx
 * <FlipText
 *   word="Hello World"
 *   duration={0.6}
 *   delayMultiple={0.1}
 *   className="text-xl font-bold"
 * />
 * ```
 *
 * @returns {React.ReactElement} 渲染的翻转文字动画组件
 *
 * @remarks
 * - 为每个字符提供独立的翻转动画
 * - 支持自定义动画参数
 * - 提供字符间延迟效果
 * - 使用framer-motion实现流畅动画
 * - 支持自定义样式
 * - 在测试环境下简化显示
 * - 提供阴影效果
 * - 响应式布局
 */ export function FlipText(param) {
    var word = param.word, _param_duration = param.duration, duration = _param_duration === void 0 ? 0.5 : _param_duration, _param_delayMultiple = param.delayMultiple, delayMultiple = _param_delayMultiple === void 0 ? 0.08 : _param_delayMultiple, framerProps = param.framerProps, className = param.className;
    var _ref, _ref1, _ref2, _ref3;
    var _framerProps_hidden, _framerProps_hidden1, _framerProps_visible, _framerProps_visible1;
    // 首次渲染时注入全局 keyframes（幂等）。
    // 注意：必须在任何 early return 之前调用，确保 hooks 调用顺序稳定。
    useEffect(function() {
        ensureFlipTextStyleInjected();
    }, []);
    // 测试环境直接渲染纯文本，避免动画对快照/断言的干扰
    if (process.env.NODE_ENV === 'test') {
        return /*#__PURE__*/ React.createElement("div", {
            className: "flex justify-center"
        }, word);
    }
    // 将自定义 framerProps 解析为 CSS 自定义属性，注入到每个字符的 inline style；
    // keyframes 中通过 `var(--flip-from-rotate-x, default)` 引用，等价于
    // framer-motion 的 `variants.hidden` / `variants.visible` 行为。
    var fromRotateX = (_ref = framerProps === null || framerProps === void 0 ? void 0 : (_framerProps_hidden = framerProps.hidden) === null || _framerProps_hidden === void 0 ? void 0 : _framerProps_hidden.rotateX) !== null && _ref !== void 0 ? _ref : DEFAULT_HIDDEN_ROTATE_X;
    var fromOpacity = (_ref1 = framerProps === null || framerProps === void 0 ? void 0 : (_framerProps_hidden1 = framerProps.hidden) === null || _framerProps_hidden1 === void 0 ? void 0 : _framerProps_hidden1.opacity) !== null && _ref1 !== void 0 ? _ref1 : DEFAULT_HIDDEN_OPACITY;
    var toRotateX = (_ref2 = framerProps === null || framerProps === void 0 ? void 0 : (_framerProps_visible = framerProps.visible) === null || _framerProps_visible === void 0 ? void 0 : _framerProps_visible.rotateX) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_VISIBLE_ROTATE_X;
    var toOpacity = (_ref3 = framerProps === null || framerProps === void 0 ? void 0 : (_framerProps_visible1 = framerProps.visible) === null || _framerProps_visible1 === void 0 ? void 0 : _framerProps_visible1.opacity) !== null && _ref3 !== void 0 ? _ref3 : DEFAULT_VISIBLE_OPACITY;
    return /*#__PURE__*/ React.createElement("div", {
        className: "flex justify-center"
    }, word.split('').map(function(char, i) {
        return /*#__PURE__*/ React.createElement("span", {
            key: i + '_' + char,
            className: classNames('agentic-flip-text-char', 'origin-center drop-shadow-sm', className),
            style: {
                animationDuration: "".concat(duration, "s"),
                animationDelay: "".concat(i * delayMultiple, "s"),
                '--flip-from-rotate-x': "".concat(fromRotateX, "deg"),
                '--flip-from-opacity': fromOpacity,
                '--flip-to-rotate-x': "".concat(toRotateX, "deg"),
                '--flip-to-opacity': toOpacity
            }
        }, char);
    }));
}
