// Window Animation Mixins for AI Engine Pro
@use 'common';
// These mixins provide reusable window animations that can be applied to any theme

// Keyframes for trigger icon text "arrival" animations (one-shot)
// Zoom in (mirror window zoom profile — no overshoot)
@keyframes mwaiIconTextZoomIn {
  0%   { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes mwaiIconTextSlideIn {
  0%   { transform: translateY(28px); opacity: 0; }
  70%  { transform: translateY(-3px); opacity: 1; } // slight overshoot for snap
  100% { transform: translateY(0); opacity: 1; }
}

// Slide up (mirror window slide — vertical motion)
@keyframes mwaiIconTextSlideUp {
  0%   { transform: translateY(24px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

// Fade (mirror window fade — separate timing for opacity/transform)
@keyframes mwaiIconTextFadeOpacity {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes mwaiIconTextFadeTransform {
  0%   { transform: translateY(8px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

// Shared helper to apply icon-text animation variant
@mixin icon-text-animations($mode) {
  .mwai-trigger {
    // Neutralize any generic fade utility on the container so our
    // animation variants fully control the presentation.
    .mwai-icon-text-container {
      opacity: 1 !important;
      transition: none !important;
    }
    .mwai-icon-text {
      will-change: transform, opacity;
      transform: none;
    }

    @if $mode == zoom {
      // Align transform-origin to trigger corner for a more physical feel
      &.mwai-bottom-right .mwai-icon-text { transform-origin: right bottom; }
      &.mwai-bottom-left  .mwai-icon-text { transform-origin: left  bottom; }
      &.mwai-top-right    .mwai-icon-text { transform-origin: right top; }
      &.mwai-top-left     .mwai-icon-text { transform-origin: left  top; }
      &.mwai-center-open  .mwai-icon-text { transform-origin: center center; }

      .mwai-icon-text { animation: mwaiIconTextZoomIn 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms 1 both; }
      &:hover .mwai-icon-text { transform: scale(1.02); }
    } @else if $mode == slide {
      .mwai-icon-text { animation: mwaiIconTextSlideUp 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms 1 both; backface-visibility: hidden; }
      &:hover .mwai-icon-text { transform: translateY(-2px); }
    } @else if $mode == fade {
      // Match separate timing like window fade: opacity then transform settle
      .mwai-icon-text { 
        animation: 
          mwaiIconTextFadeOpacity 180ms ease-out 0ms 1 both,
          mwaiIconTextFadeTransform 220ms cubic-bezier(0.2, 0, 0, 1) 0ms 1 both;
      }
      &:hover .mwai-icon-text { transform: scale(1.01); }
    }
  }

  // Respect reduced motion preferences
  @media (prefers-reduced-motion: reduce) {
    .mwai-trigger .mwai-icon-text { animation: none !important; transform: none !important; }
    .mwai-trigger .mwai-icon-text-container { opacity: 1 !important; transition: none !important; }
  }
}

// Zoom Animation (macOS-style)
// Usage: @include window-animation-zoom();
@mixin window-animation-zoom() {
	&.mwai-window {
		// Remove shadow from container to avoid remnants
		filter: none;
		
		// Hide header on mobile from the very start
    @media (max-width: common.$bp-mobile) {
			.mwai-header {
				display: none !important;
			}
		}
		
		// Wrapper around header+body to animate the whole window
		.mwai-window-box {
			display: flex;
			flex-direction: column;
			filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15));
			opacity: 0;
			transform: scale(0.5);
			transform-origin: bottom right; // default for bottom-right
			transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), 
			            transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}
		
		// In fullscreen mode, ensure window-box takes full space
		&.mwai-fullscreen .mwai-window-box {
			width: 100%;
			height: 100%;
		}
		
		// Make body and header visible but keep the window box scaled down initially
		&.mwai-opening {
			.mwai-header { 
				@media (min-width: 761px) {
					display: flex !important;
				}
    @media (max-width: common.$bp-mobile) {
					display: none !important;
				}
			}
			.mwai-body { display: flex !important; }
			.mwai-window-box { 
				opacity: 1;
				transform: scale(0.92);
			}
		}
		
		// Final state when fully opened
		&.mwai-open {
			.mwai-window-box { 
				opacity: 1;
				transform: scale(1);
			}
		}
		
		// Closing animation - scale down and fade out
		&.mwai-closing {
			.mwai-window-box {
				opacity: 0;
				transform: scale(0.85);
				transition: opacity 180ms cubic-bezier(0.4, 0.0, 1, 1), 
				            transform 180ms cubic-bezier(0.4, 0.0, 1, 1);
			}
			
        // Hide trigger during closing to avoid position jumps
        .mwai-trigger { display: none !important; }
		}
		
		// Final state after closing animation completes
		&.mwai-closing.mwai-open .mwai-trigger {
			.mwai-icon-container {
				transform: scale(1);
				opacity: 1;
			}
		}
		
		// Transform origin based on trigger position
		&.mwai-bottom-right .mwai-window-box { transform-origin: calc(100% - 32px) calc(100% - 32px); }
		&.mwai-bottom-left .mwai-window-box { transform-origin: 32px calc(100% - 32px); }
		&.mwai-top-right .mwai-window-box { transform-origin: calc(100% - 32px) 32px; }
		&.mwai-top-left .mwai-window-box { transform-origin: 32px 32px; }
		&.mwai-center-open .mwai-window-box { transform-origin: center center; }
		
		// On mobile, animations should use center origin for fullscreen
    @media (max-width: common.$bp-mobile) {
			&.mwai-open .mwai-window-box {
				transform-origin: center center !important;
			}
			
			// Hide header immediately on mobile, even during animations
			.mwai-header {
				display: none !important;
			}
			
			// Fix trigger positioning on mobile to prevent jumping
			.mwai-trigger {
				position: fixed !important;
				z-index: 9999 !important;
			}
			
			// Position trigger correctly based on icon position
			&.mwai-bottom-right .mwai-trigger {
                bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
				right: 20px !important;
				left: auto !important;
				top: auto !important;
			}
			&.mwai-bottom-left .mwai-trigger {
                bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
				left: 20px !important;
				right: auto !important;
				top: auto !important;
			}
			&.mwai-top-right .mwai-trigger {
				top: 20px !important;
				right: 20px !important;
				left: auto !important;
				bottom: auto !important;
			}
			&.mwai-top-left .mwai-trigger {
				top: 20px !important;
				left: 20px !important;
				right: auto !important;
				bottom: auto !important;
			}
			
			// Hide trigger when window is fully open
			&.mwai-open:not(.mwai-closing) .mwai-trigger {
				display: none !important;
			}
		}
		
		// Animate trigger button
		.mwai-trigger {
			.mwai-icon-container {
				transition: transform 0.2s ease-out, opacity 0.2s ease-out;
				
				.mwai-icon {
					transition: transform 0.2s ease-out;
				}
				
				&:hover {
					.mwai-icon {
						transform: scale(1.1);
					}
				}
				
				&:active {
					.mwai-icon {
						transform: scale(0.9);
					}
				}
			}
		}
		
		// When opening, fade and scale down the trigger smoothly
		&.mwai-opening .mwai-trigger {
			.mwai-icon-container {
				transform: scale(0.8);
				opacity: 0.3;
			}
		}
		
		// When fully open, hide trigger completely
		&.mwai-open:not(.mwai-opening) .mwai-trigger {
			display: none;
		}

		// Center mode: prevent trigger from flashing in center during close
		&.mwai-center-open.mwai-closing {
			.mwai-trigger { display: none !important; }
		}

    // Icon text: gentle breathing scale to match zoom profile (only when closed)
    &:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) {
      @include icon-text-animations(zoom);
    }
	}
}

// Slide Animation (slides up from bottom)
// Usage: @include window-animation-slide();
@mixin window-animation-slide() {
	&.mwai-window {
		filter: none;
		
		// Hide header on mobile from the very start
        @media (max-width: common.$bp-mobile) {
			.mwai-header {
				display: none !important;
			}
		}
		
		.mwai-window-box {
			display: flex;
			flex-direction: column;
			filter: drop-shadow(0 -5px 20px rgba(0, 0, 0, 0.15));
			opacity: 0;
			transform: translateY(100%);
			transition: opacity 250ms ease-out, transform 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
		}
		
		// In fullscreen mode, ensure window-box takes full space
		&.mwai-fullscreen .mwai-window-box {
			width: 100%;
			height: 100%;
		}
		
		&.mwai-opening {
			.mwai-header { 
				@media (min-width: 761px) {
					display: flex !important;
				}
    @media (max-width: common.$bp-mobile) {
					display: none !important;
				}
			}
			.mwai-body { display: flex !important; }
			.mwai-window-box { 
				opacity: 0.5;
				transform: translateY(20px);
			}
		}
		
		&.mwai-open {
			.mwai-window-box { 
				opacity: 1;
				transform: translateY(0);
			}
		}
		
		&.mwai-closing {
			.mwai-window-box {
				opacity: 0;
				transform: translateY(100%);
				transition: opacity 200ms ease-in, transform 200ms ease-in;
			}
		}
		
		// On mobile, hide header immediately for slide animation too
    @media (max-width: common.$bp-mobile) {
			// Hide header immediately on mobile, even during animations
			.mwai-header {
				display: none !important;
			}
		}
		
		// Trigger animations would be similar to zoom
		@include trigger-animations();

    // Icon text: soft vertical bob to echo slide profile (only when closed)
    &:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) {
      @include icon-text-animations(slide);
    }
	}
}

// Fade Animation (simple fade in/out)
// Usage: @include window-animation-fade();
@mixin window-animation-fade() {
	&.mwai-window {
		// Hide header on mobile from the very start
        @media (max-width: common.$bp-mobile) {
			.mwai-header {
				display: none !important;
			}
		}
		
        .mwai-window-box {
            display: flex;
            flex-direction: column;
            filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.15));
            opacity: 0;
            transform: translateY(8px) scale(0.98);
            transform-origin: center bottom;
            will-change: opacity, transform;
            transition:
              opacity 180ms ease-out,
              transform 220ms cubic-bezier(0.2, 0, 0, 1);
        }
		
		// In fullscreen mode, ensure window-box takes full space
		&.mwai-fullscreen .mwai-window-box {
			width: 100%;
			height: 100%;
		}
		
		&.mwai-opening {
			.mwai-header { 
				@media (min-width: 761px) {
					display: flex !important;
				}
    @media (max-width: common.$bp-mobile) {
					display: none !important;
				}
			}
			// Force children to be fully visible immediately; fade the window as a single block
			.mwai-body { display: flex !important; opacity: 1 !important; transition: none !important; }
			.mwai-header { opacity: 1 !important; transition: none !important; }
			.mwai-window-box { 
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}
		
		&.mwai-open {
			// Ensure children don't independently fade; keep them fully visible
			.mwai-header, .mwai-body { opacity: 1 !important; transition: none !important; }
			.mwai-window-box { 
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}
		
        &.mwai-closing {
            .mwai-window-box {
                opacity: 0;
                transform: translateY(8px) scale(0.98);
                transition:
                  opacity 160ms ease-in,
                  transform 180ms cubic-bezier(0.4, 0, 1, 1);
            }
        }

        // Reduced motion
        @media (prefers-reduced-motion: reduce) {
            .mwai-window-box {
                transition: opacity 120ms linear !important;
                transform: none !important;
            }
            &.mwai-opening .mwai-window-box,
            &.mwai-open .mwai-window-box { opacity: 1; }
            &.mwai-closing .mwai-window-box { opacity: 0; }
        }
		
    // On mobile, hide header immediately for fade animation too
    @media (max-width: common.$bp-mobile) {
			// Hide header immediately on mobile, even during animations
			.mwai-header {
				display: none !important;
			}
		}
		
		@include trigger-animations();

    // Icon text: subtle fade/scale pulse to mirror fade profile (only when closed)
    &:not(.mwai-open):not(.mwai-opening):not(.mwai-closing) {
      @include icon-text-animations(fade);
    }
	}
}

// Shared trigger animations
@mixin trigger-animations() {
	.mwai-trigger {
		.mwai-icon-container {
			transition: transform 0.2s ease-out, opacity 0.2s ease-out;
			
			.mwai-icon {
				transition: transform 0.2s ease-out;
			}
			
			&:hover .mwai-icon {
				transform: scale(1.1);
			}
			
			&:active .mwai-icon {
				transform: scale(0.9);
			}
		}
	}
	
	&.mwai-opening .mwai-trigger {
		.mwai-icon-container {
			opacity: 0;
		}
	}
	
	&.mwai-closing {
        .mwai-trigger { display: none !important; }
	}

	// For centered windows, keep the trigger hidden during closing
	// to avoid appearing in the middle due to the centered transform.
	&.mwai-center-open.mwai-closing {
		.mwai-trigger { display: none !important; }
	}

	// While dragging, also hide the trigger during closing to avoid flicker
	&.mwai-window-dragging.mwai-closing {
		.mwai-trigger { display: none !important; }
	}
	
    // (removed smooth return animation to avoid jumpy positions)
	
	&.mwai-open:not(.mwai-opening) .mwai-trigger {
		display: none;
	}
}

// Apply animation based on class
// This allows runtime switching via adding classes like 'mwai-animation-zoom'
@mixin window-animation-conditional() {
	&.mwai-animation-zoom {
		@include window-animation-zoom();
	}
	
	&.mwai-animation-slide {
		@include window-animation-slide();
	}
	
	&.mwai-animation-fade {
		@include window-animation-fade();
	}
	
  	// Default to no animation if no animation class is present
  	&:not(.mwai-animation-zoom):not(.mwai-animation-slide):not(.mwai-animation-fade) {
  		&.mwai-window {
  			.mwai-window-box {
  				display: flex;
  				flex-direction: column;
  				filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
  			}

			// Ensure trigger text has no implicit fade/transition when animation is None
			.mwai-trigger {
				.mwai-icon-text-container { opacity: 1 !important; transition: none !important; }
				.mwai-icon-text { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
			}
  			
  			// In fullscreen mode, ensure window-box takes full space
  			&.mwai-fullscreen .mwai-window-box {
  				width: 100%;
  				height: 100%;
  			}
  		}
  	}
}
