import { jsxs, jsx } from 'react/jsx-runtime';
import { useTransform, motion } from 'motion/react';
import { eyelidVariants, clickTransition, bodyTransition, blobBodyVariants, blobMouthPaths } from '../InteractiveCharacters.animations.js';

const LEFT_EYE = { cx: 32, cy: -50 };
const RIGHT_EYE = { cx: 68, cy: -50 };
const CLICK_STATES = new Set(['surprised', 'love', 'excited']);
const BlobCharacter = ({ state, eyeOffset, idle, blinkAmount, onClick, }) => {
    const leftPupilX = useTransform(eyeOffset.x, (v) => LEFT_EYE.cx + v);
    const leftPupilY = useTransform(eyeOffset.y, (v) => LEFT_EYE.cy + v);
    const rightPupilX = useTransform(eyeOffset.x, (v) => RIGHT_EYE.cx + v);
    const rightPupilY = useTransform(eyeOffset.y, (v) => RIGHT_EYE.cy + v);
    // Combine idle head movement with cursor tracking for head turning
    const combinedHeadX = useTransform([idle.headX, eyeOffset.x], ([idleX, cursorX]) => idleX + cursorX * 0.5);
    const combinedHeadY = useTransform([idle.headY, eyeOffset.y], ([idleY, cursorY]) => idleY + cursorY * 0.3);
    const combinedHeadRotate = useTransform([idle.headTilt, eyeOffset.x], ([tilt, cursorX]) => tilt + cursorX * 0.5);
    const stateEyelid = eyelidVariants[state].scaleY;
    const eyelidScale = useTransform(blinkAmount, (blink) => Math.max(stateEyelid, blink));
    const isClickReaction = CLICK_STATES.has(state);
    const transition = isClickReaction ? clickTransition : bodyTransition;
    return (jsxs(motion.g, { animate: state, variants: blobBodyVariants, transition: transition, style: {
            originX: '50%',
            originY: '100%',
            x: idle.sway,
            y: idle.bob,
            scale: idle.breath,
        }, onClick: onClick, children: [jsx("path", { d: "M 0 0 Q 0 -95 65 -95 Q 100 -95 100 -50 Q 100 0 100 0 Z", fill: "#F97316" }), jsxs(motion.g, { style: {
                    originX: '50px',
                    originY: '-50px',
                    rotate: combinedHeadRotate,
                    x: combinedHeadX,
                    y: combinedHeadY,
                }, children: [jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-l", children: jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: LEFT_EYE.cx, cy: LEFT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: leftPupilX, cy: leftPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-l)" }), jsx("circle", { cx: LEFT_EYE.cx + 4, cy: LEFT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: LEFT_EYE.cx - 3, cy: LEFT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: LEFT_EYE.cx - 14, y: LEFT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsxs("g", { children: [jsx("clipPath", { id: "blob-eye-r", children: jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16 }) }), jsx("ellipse", { cx: RIGHT_EYE.cx, cy: RIGHT_EYE.cy, rx: 14, ry: 16, fill: "white" }), jsx(motion.circle, { cx: rightPupilX, cy: rightPupilY, r: 8.5, fill: "#1E293B", clipPath: "url(#blob-eye-r)" }), jsx("circle", { cx: RIGHT_EYE.cx + 4, cy: RIGHT_EYE.cy - 5.5, r: 3, fill: "white", opacity: 0.95 }), jsx("circle", { cx: RIGHT_EYE.cx - 3, cy: RIGHT_EYE.cy + 4, r: 1.5, fill: "white", opacity: 0.7 }), jsx(motion.rect, { x: RIGHT_EYE.cx - 14, y: RIGHT_EYE.cy - 16, width: 28, height: 32, fill: "#F97316", rx: 2, style: { scaleY: eyelidScale, originX: '50%', originY: '0%', transformBox: 'fill-box' } })] }), jsx("ellipse", { cx: 18, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx("ellipse", { cx: 82, cy: -28, rx: 8, ry: 5.5, fill: "#FB923C", opacity: state === 'surprised' ? 0.7 : 0.5 }), jsx(motion.path, { d: blobMouthPaths[state], fill: "none", stroke: "#1E293B", strokeWidth: 2.5, strokeLinecap: "round", animate: { d: blobMouthPaths[state] }, transition: transition, transform: "translate(50, -24)" })] })] }));
};

export { BlobCharacter };
