/**
 * Onboarding Step Transition Animations
 *
 * IMPORTANT: These values are COPIED VERBATIM from the original step components.
 * DO NOT MODIFY WITHOUT APPROVAL.
 */

// =============================================================================
// ANIMATION CLASSES
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/single-select-step.tsx:75-77
 * Primary fade-in + slide-up animation used by all step headers
 */
export const ANIMATION_CLASSES = {
	/** Fade in with slide from bottom - primary transition */
	fadeInUp:
		"motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4",

	/** Fade in with zoom - used by success step hero */
	fadeInZoom:
		"motion-safe:animate-in motion-safe:fade-in motion-safe:zoom-in-95",

	/** Fade in with slide from top - used by conditional dropdowns */
	fadeInDown:
		"motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-2",
} as const;

// =============================================================================
// DURATION PRESETS
// =============================================================================

/**
 * Animation duration values found in step components
 * COPIED VERBATIM from various step components
 */
export const DURATION = {
	/** Fast animations (conditional dropdowns) - card-grid-step.tsx:197 */
	fast: "200ms",

	/** Quick animations (team invite members) - team-invite-step.tsx:203 */
	quick: "400ms",

	/** Standard animations (most headers and fields) */
	normal: "500ms",

	/** Slow animations (options with more visual weight) - single-select-step.tsx:93 */
	slow: "600ms",
} as const;

// =============================================================================
// STAGGER CONFIGURATION PRESETS
// =============================================================================

/**
 * Stagger patterns found in step components
 * Each preset matches a specific component's animation timing
 */
export const STAGGER_PRESETS = {
	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/single-select-step.tsx:91-99
	 * Used by: single-select, icon-select, product-selection
	 */
	selectOptions: {
		duration: "600ms",
		baseDelay: 100,
		increment: 50,
	},

	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/card-grid-step.tsx:144-152
	 * Used by: card-grid, boolean
	 */
	cardGrid: {
		duration: "600ms",
		baseDelay: 100,
		increment: 75,
	},

	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/text-input-step.tsx:191-198
	 * Used by: text-input, dropdown-select, multi-select, file-upload, summary
	 */
	formFields: {
		duration: "500ms",
		baseDelay: 100,
		increment: 100,
	},

	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/boolean-step.tsx:107-114
	 * Used by: boolean
	 */
	booleanFields: {
		duration: "500ms",
		baseDelay: 100,
		increment: 75,
	},

	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/scale-input-step.tsx:86-92
	 * Used by: scale-input
	 */
	scaleFields: {
		duration: "500ms",
		baseDelay: 200,
		increment: 150,
	},

	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/team-invite-step.tsx:201-208
	 * Used by: team-invite
	 */
	teamMembers: {
		duration: "400ms",
		baseDelay: 0,
		increment: 50,
	},

	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/success-step.tsx:76-86
	 * Used by: success (next steps cards)
	 */
	successCards: {
		duration: "500ms",
		baseDelay: 300,
		increment: 100,
	},

	/**
	 * COPIED VERBATIM FROM: components/onboarding/steps/infrastructure-step.tsx:201-338
	 * Used by: infrastructure (fixed delays, not incremental)
	 */
	infrastructure: {
		duration: "500ms",
		delays: [200, 400, 600, 800, 1000],
	},
} as const;

// =============================================================================
// STYLE GENERATORS
// =============================================================================

/**
 * Generate stagger animation style object
 * COPIED VERBATIM pattern from all step components
 *
 * @param index - The item index in the list
 * @param baseDelay - Base delay before first item (default: 100)
 * @param increment - Delay increment per item (default: 50)
 * @param duration - Animation duration (default: '600ms')
 */
export function getStaggerStyle(
	index: number,
	baseDelay = 100,
	increment = 50,
	duration = "600ms",
): React.CSSProperties {
	return {
		animationDuration: duration,
		animationDelay: `${baseDelay + index * increment}ms`,
		animationFillMode: "backwards",
	};
}

/**
 * Generate header animation style
 * COPIED VERBATIM FROM: components/onboarding/steps/single-select-step.tsx:76
 */
export function getHeaderStyle(duration = "500ms"): React.CSSProperties {
	return {
		animationDuration: duration,
	};
}

/**
 * Generate fixed-delay animation style (for non-staggered sequences)
 * COPIED VERBATIM FROM: components/onboarding/steps/infrastructure-step.tsx:203
 */
export function getFixedDelayStyle(
	delay: number,
	duration = "500ms",
): React.CSSProperties {
	return {
		animationDuration: duration,
		animationDelay: `${delay}ms`,
		animationFillMode: "backwards",
	};
}

// =============================================================================
// SUCCESS STEP SPECIFIC
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/success-step.tsx:55-57
 * Hero icon zoom animation style
 */
export function getSuccessHeroStyle(): React.CSSProperties {
	return {
		animationDuration: "600ms",
	};
}

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/success-step.tsx:69-71
 * "Next steps" label animation style
 */
export function getNextStepsLabelStyle(): React.CSSProperties {
	return {
		animationDuration: "500ms",
		animationDelay: "200ms",
		animationFillMode: "backwards",
	};
}

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/success-step.tsx:120-130
 * Action buttons animation style (after all next steps)
 */
export function getActionsStyle(nextStepsCount: number): React.CSSProperties {
	return {
		animationDuration: "500ms",
		animationDelay: `${300 + nextStepsCount * 100}ms`,
		animationFillMode: "backwards",
	};
}

// =============================================================================
// SCALE INPUT SPECIFIC
// =============================================================================

/**
 * COPIED VERBATIM FROM: components/onboarding/steps/scale-input-step.tsx:220-226
 * Summary card animation style
 */
export function getSummaryCardStyle(fieldsCount: number): React.CSSProperties {
	return {
		animationDuration: "500ms",
		animationDelay: `${200 + fieldsCount * 150}ms`,
		animationFillMode: "backwards",
	};
}

// Type import for React.CSSProperties
import type React from "react";