import React from 'react';

// ULTRA-CRITICAL ANIMATION KILLER
// This mock covers all possible Framer Motion V12 entry points
// and forces absolute determinism on both HTML and SVG elements.

const createMotionComponent = (Tag: string) => {
    const Component = React.forwardRef(({
        children, style, animate, initial, whileHover, whileTap,
        transition, layout, layoutId,
        variants, ...props
    }: any, ref) => {

        // 1. Resolve State
        // If animate is a string (variant), we try to find it in variants, 
        // but since we want to be deterministic, we just ignore variants for now 
        // to avoid complex logic. We assume the component state is driven by props.

        // 2. Resolve Attributes (for SVG)
        // Framer motion allows animating SVG attributes like 'r', 'cx' directly.
        // We must spread 'animate' into the props to snap them.
        const resolvedProps = { ...props };
        if (typeof animate === 'object' && !Array.isArray(animate)) {
            Object.assign(resolvedProps, animate);
        } else if (Array.isArray(animate)) {
            // Handle keyframes by taking the first one
            Object.assign(resolvedProps, animate[0]);
        }

        // 3. Resolve Style
        const combinedStyle = {
            ...style,
            ...(typeof initial === 'object' && !Array.isArray(initial) ? initial : {}),
            ...(typeof animate === 'object' && !Array.isArray(animate) ? animate : {})
        };

        // Final cleaning of motion-specific props that shouldn't leak to DOM
        const {
            viewport, transition: _t, onAnimationStart, onAnimationComplete,
            onUpdate, onPan, onPanStart, onPanEnd, onPanSessionStart,
            onTap, onTapStart, onTapCancel, onHoverStart, onHoverEnd,
            ...domProps
        } = resolvedProps;

        return (
            <Tag
                ref={ref}
                {...domProps}
                style={combinedStyle}
                data-framer-captured="true"
            >
                {children}
            </Tag>
        );
    });
    Component.displayName = `motion.${Tag}`;
    return Component;
};

export const motion: any = {
    div: createMotionComponent('div'),
    button: createMotionComponent('button'),
    h1: createMotionComponent('h1'),
    h2: createMotionComponent('h2'),
    h3: createMotionComponent('h3'),
    h4: createMotionComponent('h4'),
    p: createMotionComponent('p'),
    span: createMotionComponent('span'),
    section: createMotionComponent('section'),
    nav: createMotionComponent('nav'),
    svg: createMotionComponent('svg'),
    path: createMotionComponent('path'),
    circle: createMotionComponent('circle'),
    rect: createMotionComponent('rect'),
    line: createMotionComponent('line'),
    polyline: createMotionComponent('polyline'),
    polygon: createMotionComponent('polygon'),
    ellipse: createMotionComponent('ellipse'),
    g: createMotionComponent('g'),
    a: createMotionComponent('a'),
    li: createMotionComponent('li'),
    ul: createMotionComponent('ul'),
};

export const m = motion;
export const AnimatePresence = ({ children }: any) => <>{children}</>;
export const MotionConfig = ({ children }: any) => <>{children}</>;
export const LayoutGroup = ({ children }: any) => <>{children}</>;
export const LazyMotion = ({ children }: any) => <>{children}</>;

export const useAnimation = () => ({
    start: () => Promise.resolve(),
    set: () => { },
    stop: () => { },
    mount: () => { },
});

export const useInView = () => true;
export const useScroll = () => ({
    scrollYProgress: { get: () => 0, onChange: () => () => { }, getVelocity: () => 0 },
    scrollY: { get: () => 0, onChange: () => () => { }, getVelocity: () => 0 }
});

export const useTransform = (value: any, from: any[], to: any[]) => to[0];
export const useSpring = (value: any) => value;
export const useCycle = (...args: any[]) => [args[0], () => { }];
export const useIsPresent = () => true;
export const useReducedMotion = () => true;
export const useAnimationControls = useAnimation;
export const usePresence = () => [true, null];

export const isValidMotionProp = () => true;

export default motion;