const params = defineParams({
  color: { type: 'color', default: '#000000', label: 'Stickman Color' },
  bg: { type: 'color', default: '#ffffff', label: 'Background Color' },
  thickness: { type: 'range', default: 10, min: 4, max: 20, step: 1, label: 'Line Thickness' },
  bubbleText: { type: 'string', default: 'Many years ago...', label: 'Text Bubble' },
  showBubble: { type: 'boolean', default: false, label: 'Show Bubble' },
});

function render(ctx) {
  const frame = ctx.relativeFrame;
  const fps = ctx.fps;
  
  // Timing variables fitted to 2.5s duration
  const shrugTransitionStart = fps * 1.0;
  const shrugTransitionEnd = fps * 2.0;

  // Head Y and Torso
  const headY = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [150, 175],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const shoulderY = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [240, 220],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const idleWiggle = frame > shrugTransitionEnd 
    ? Math.sin((frame - shrugTransitionEnd) * 0.15) * 3 
    : 0;

  const currentHeadY = headY + idleWiggle * 0.5;
  const currentShoulderY = shoulderY + idleWiggle;

  const leftShoulderX = 350;
  const rightShoulderX = 450;
  
  const wowHandsProgress = Remotion.interpolate(
    frame,
    [0, fps * 0.4, fps * 0.8, fps * 1.2],
    [0, 1, 1, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const shrugHandsProgress = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [0, 1],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const leftElbowX = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [310, 280],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );
  const leftElbowY = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [320, 260],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const rightElbowX = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [490, 520],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );
  const rightElbowY = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [320, 260],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const leftHandX_Normal = Remotion.interpolate(wowHandsProgress, [0, 1], [300, 310]);
  const leftHandY_Normal = Remotion.interpolate(wowHandsProgress, [0, 1], [390, 180]);
  const leftHandX_Shrug = 230;
  const leftHandY_Shrug = 190;

  const currentLeftHandX = Remotion.interpolate(shrugHandsProgress, [0, 1], [leftHandX_Normal, leftHandX_Shrug]) + idleWiggle * 0.2;
  const currentLeftHandY = Remotion.interpolate(shrugHandsProgress, [0, 1], [leftHandY_Normal, leftHandY_Shrug]) + idleWiggle * 1.2;

  const rightHandX_Normal = Remotion.interpolate(wowHandsProgress, [0, 1], [500, 490]);
  const rightHandY_Normal = Remotion.interpolate(wowHandsProgress, [0, 1], [390, 180]);
  const rightHandX_Shrug = 570;
  const rightHandY_Shrug = 190;

  const currentRightHandX = Remotion.interpolate(shrugHandsProgress, [0, 1], [rightHandX_Normal, rightHandX_Shrug]) - idleWiggle * 0.2;
  const currentRightHandY = Remotion.interpolate(shrugHandsProgress, [0, 1], [rightHandY_Normal, rightHandY_Shrug]) + idleWiggle * 1.2;

  const headTilt = Remotion.interpolate(
    frame,
    [shrugTransitionStart, shrugTransitionEnd],
    [0, 8],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const mWowRadius = Remotion.interpolate(
    frame,
    [0, fps * 0.3, fps * 0.8, fps * 1.1],
    [3, 10, 10, 3],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const isShrugging = frame >= shrugTransitionStart;

  const eyebrowYOffset = Remotion.interpolate(
    frame,
    [0, fps * 0.3, shrugTransitionStart, shrugTransitionEnd],
    [-2, -7, -2, -8],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  const isBlinking = (frame > fps * 1.8 && frame < fps * 1.95);
  const eyeHeight = isBlinking ? 1 : 8;

  const bubbleScale = Remotion.interpolate(
    frame,
    [0, 10, fps * 2.2, fps * 2.5],
    [0, 1, 1, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp', easing: Remotion.Easing.out(Remotion.Easing.back) }
  );

  return (
    <div style={{
      width: '100%',
      height: '100%',
      backgroundColor: params.bg,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontFamily: 'Inter, system-ui, sans-serif'
    }}>
      <div style={{ width: '100%', height: '100%', position: 'relative' }}>
        <svg viewBox="0 0 800 600" style={{ width: '100%', height: '100%' }}>
          <g>
            {/* Torso */}
            <line 
              x1="400" 
              y1="400" 
              x2="400" 
              y2={currentShoulderY} 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />

            {/* Shoulders */}
            <line 
              x1={leftShoulderX} 
              y1={currentShoulderY} 
              x2={rightShoulderX} 
              y2={currentShoulderY} 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />

            {/* Left Arm */}
            <line 
              x1={leftShoulderX} 
              y1={currentShoulderY} 
              x2={leftElbowX} 
              y2={leftElbowY} 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />
            <line 
              x1={leftElbowX} 
              y1={leftElbowY} 
              x2={currentLeftHandX} 
              y2={currentLeftHandY} 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />

            {/* Right Arm */}
            <line 
              x1={rightShoulderX} 
              y1={currentShoulderY} 
              x2={rightElbowX} 
              y2={rightElbowY} 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />
            <line 
              x1={rightElbowX} 
              y1={rightElbowY} 
              x2={currentRightHandX} 
              y2={currentRightHandY} 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />

            {/* Legs */}
            <line 
              x1="400" 
              y1="400" 
              x2="330" 
              y2="520" 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />
            <line 
              x1="400" 
              y1="400" 
              x2="470" 
              y2="520" 
              stroke={params.color} 
              strokeWidth={params.thickness} 
              strokeLinecap="round" 
            />

            {/* Animated Head */}
            <g transform={`translate(400, ${currentHeadY}) rotate(${headTilt}) translate(-400, -${currentHeadY})`}>
              <circle 
                cx="400" 
                cy={currentHeadY} 
                r="45" 
                fill="none" 
                stroke={params.color} 
                strokeWidth={params.thickness} 
              />

              {/* Eyes */}
              <rect x="382" y={currentHeadY - 14} width="5" height={eyeHeight} fill={params.color} rx="2.5" />
              <rect x="413" y={currentHeadY - 14} width="5" height={eyeHeight} fill={params.color} rx="2.5" />

              {/* Eyebrows */}
              <line 
                x1="378" y1={currentHeadY - 22 + eyebrowYOffset} 
                x2="390" y2={currentHeadY - 24 + eyebrowYOffset} 
                stroke={params.color} strokeWidth="4" strokeLinecap="round" 
              />
              <line 
                x1="410" y1={currentHeadY - 24 + eyebrowYOffset} 
                x2="422" y2={currentHeadY - 22 + eyebrowYOffset} 
                stroke={params.color} strokeWidth="4" strokeLinecap="round" 
              />

              {/* Mouth */}
              {isShrugging ? (
                <path 
                  d={`M 390 ${currentHeadY + 16} Q 400 ${currentHeadY + 21} 410 ${currentHeadY + 17}`} 
                  fill="none" 
                  stroke={params.color} 
                  strokeWidth="4" 
                  strokeLinecap="round" 
                />
              ) : (
                <circle 
                  cx="400" 
                  cy={currentHeadY + 16} 
                  r={mWowRadius} 
                  fill="none" 
                  stroke={params.color} 
                  strokeWidth="4" 
                />
              )}
            </g>
          </g>

          {/* Speech Bubble */}
          {params.showBubble && (
            <g transform={`scale(${bubbleScale})`} style={{ transformOrigin: '530px 100px' }}>
              <path 
                d="M 450 40 L 610 40 Q 640 40 640 70 L 640 110 Q 640 140 610 140 L 540 140 L 510 175 L 515 140 L 450 140 Q 420 140 420 110 L 420 70 Q 420 40 450 40 Z" 
                fill="#f8fafc" 
                stroke={params.color}
                strokeWidth="4"
              />
              <text 
                x="530" 
                y="95" 
                fill="#0f172a" 
                fontSize="24" 
                fontWeight="bold" 
                textAnchor="middle"
              >
                {params.bubbleText}
              </text>
            </g>
          )}
        </svg>
      </div>
    </div>
  );
}