@use '../../../../../../../../src/assets/styles/design-tokens';

// Main wizard container - fills viewport height exactly
.wizard-container {
	@include design-tokens.ov-theme-transition;
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
	max-width: var(--ov-meet-container-max-width);
	margin: 0 auto;
	padding: var(--ov-meet-spacing-lg) var(--ov-meet-spacing-xl);
	gap: var(--ov-meet-spacing-lg);
	overflow: hidden; // Prevent page scroll
}

// Header section - fixed at top
.wizard-header {
	flex-shrink: 0;
	text-align: center;
	// padding-bottom: var(--ov-meet-spacing-md);

	.subtitle {
		margin: 0;
		color: var(--ov-meet-text-secondary);
		font-size: var(--ov-meet-font-size-lg);
		line-height: var(--ov-meet-line-height-normal);
	}
}

// Body section - contains sidebar and main content
.wizard-body {
	flex: 1 1 0; // Grow to fill space, shrink if needed, base size 0
	display: flex;
	gap: var(--ov-meet-spacing-xl);
	min-height: 0; // Critical for flexbox overflow
	max-height: calc(100% - 64px - var(--ov-meet-spacing-lg) - var(--ov-meet-spacing-lg) - 27px - var(--ov-meet-spacing-lg) - var(--ov-meet-spacing-lg) - 57px); // Calculate available height
	align-items: stretch;
	// overflow: hidden; // Prevent body overflow
}

// Sidebar for step indicator (large screens)
.wizard-sidebar {
	flex-shrink: 0;
	width: 280px;
	display: flex;
	flex-direction: column;
}

// Main content area
.wizard-content {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 0; // Critical for flexbox overflow
}

// Step content card
.step-content {
	width: 100%;
	max-width: 700px;
	height: -webkit-fill-available;
	height: -moz-available;
	height: fill-available;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	@include design-tokens.ov-section-card;

	// Inner content should be centered vertically when small
	> :first-child {
		width: 100%;
		min-height: min-content;
		height: 100%;
	}
}

// Footer section - fixed at bottom
.wizard-footer {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	// padding-top: var(--ov-meet-spacing-md);

	.basic-nav,
	.wizard-nav {
		width: 100%;
		max-width: 700px;
		display: flex;
		flex-direction: column;
	}

	.basic-nav .wizard-navigation {
		padding: var(--ov-meet-spacing-md) 0 0 0;
	}

	.cancel-button {
		@include design-tokens.ov-button-base;
		border-radius: var(--ov-meet-radius-sm);
		min-width: 120px;
		color: var(--ov-meet-text-secondary);
		border-color: var(--ov-meet-border-color-strong);
		&:hover {
			background-color: var(--ov-meet-surface-hover);
		}
	}
}

.toggle-label {
	font-size: var(--ov-meet-font-size-md);
	font-weight: var(--ov-meet-font-weight-medium);
	color: var(--ov-meet-text-primary);
}

.debug-section {
	margin-top: var(--ov-meet-spacing-md);

	summary {
		cursor: pointer;
		font-size: var(--ov-meet-font-size-sm);
		font-weight: var(--ov-meet-font-weight-medium);
		color: var(--ov-meet-text-secondary);
		margin-bottom: var(--ov-meet-spacing-sm);

		&:hover {
			color: var(--ov-meet-text-primary);
		}
	}

	&[open] summary {
		color: var(--ov-meet-color-primary);
	}
}

// Slide toggle customization
.ov-slide-toggle-success {
	.mat-mdc-slide-toggle {
		--mat-slide-toggle-selected-track-color: var(--ov-meet-color-success);
		--mat-slide-toggle-selected-handle-color: var(--ov-meet-color-success);
		--mat-slide-toggle-selected-hover-handle-color: var(--ov-meet-color-success);
		--mat-slide-toggle-selected-focus-handle-color: var(--ov-meet-color-success);
		--mat-slide-toggle-selected-pressed-handle-color: var(--ov-meet-color-success);
	}
}

// Room Creation Loading State
.room-creation-loading {
	@include design-tokens.ov-flex-center;
	flex-direction: column;
	height: 100%;
	min-height: 400px;
	text-align: center;
	padding: var(--ov-meet-spacing-xl);

	.loading-content {
		@include design-tokens.ov-flex-center;
		flex-direction: column;
		gap: var(--ov-meet-spacing-xl);
		width: 100%;

		.loading-header {
			margin-bottom: var(--ov-meet-spacing-lg);

			.loading-title {
				@include design-tokens.ov-flex-center;
				gap: var(--ov-meet-spacing-md);
				margin-bottom: var(--ov-meet-spacing-md);

				.loading-icon {
					@include design-tokens.ov-icon(xl);
					animation: pulse 2s ease-in-out infinite;
				}

				h2 {
					margin: 0;
					font-size: var(--ov-meet-font-size-xl);
					font-weight: var(--ov-meet-font-weight-medium);
					color: var(--ov-meet-text-primary);
				}
			}

			.loading-subtitle {
				font-size: var(--ov-meet-font-size-md);
				color: var(--ov-meet-text-secondary);
				margin: 0;
				animation: fadeIn 1s ease-out 0.5s both;
			}
		}

		.loading-spinner-container {
			mat-spinner {
				margin: 0 auto;

				::ng-deep {
					.mdc-circular-progress__determinate-circle,
					.mdc-circular-progress__indeterminate-circle-graphic {
						stroke: var(--ov-meet-color-primary);
					}
				}
			}
		}
	}
}

// Responsive design
// Large desktop: sidebar on left (>=1200px)
@media (min-width: 1200px) {
	.wizard-body {
		flex-direction: row;
	}

	.wizard-sidebar {
		display: flex;
	}
}

// Medium screens: move step indicator to top (768px - 1199px)
@media (max-width: 1199px) and (min-width: 769px) {
	.wizard-body {
		flex-direction: column;
		gap: var(--ov-meet-spacing-md);
	}

	.wizard-sidebar {
		width: 100%;
		max-width: 100%;
		flex-shrink: 0;
	}

	.step-content {
		max-width: 800px;
	}
}

// Tablet and below: compact vertical step indicator (<=768px)
@include design-tokens.ov-tablet-down {
	.wizard-container {
		padding: var(--ov-meet-spacing-md);
		gap: var(--ov-meet-spacing-md);
		height: 100vh;
		max-height: 100vh;
		overflow: hidden;
	}

	.wizard-header {
		padding-bottom: var(--ov-meet-spacing-sm);

		.subtitle {
			font-size: var(--ov-meet-font-size-md);
		}
	}

	.wizard-body {
		flex-direction: column;
		gap: var(--ov-meet-spacing-md);
	}

	.wizard-sidebar {
		width: 100%;
		flex-shrink: 0;
	}

	.wizard-footer {
		padding-top: var(--ov-meet-spacing-sm);

		.basic-nav,
		.wizard-nav {
			max-width: 100%;
		}
	}

	.room-creation-loading {
		padding: var(--ov-meet-spacing-lg);

		.loading-content {
			.loading-header {
				.loading-title {
					h2 {
						font-size: var(--ov-meet-font-size-lg);
					}
				}
			}
		}
	}
}

// Mobile: further optimizations
@include design-tokens.ov-mobile-down {
	.wizard-container {
		padding: var(--ov-meet-spacing-sm);
		height: 100vh;
		max-height: 100vh;
		overflow: hidden;
	}

	.wizard-header {
		.subtitle {
			font-size: var(--ov-meet-font-size-sm);
		}
	}

	.room-creation-loading {
		padding: var(--ov-meet-spacing-md);
	}
}
