/**
 * Shared styles for test/analysis pages
 *
 * Provides consistent styling for:
 * - MCTSAnalysisView
 * - TrigoTreeTestView
 * - TrigoAgentTestView
 * - OnnxTestView
 * - SocketTestView
 */


// ============================================================================
//   Theme Variables
// ============================================================================

// Light theme colors
$light-bg-primary: #f5f5f5;
$light-bg-secondary: white;
$light-bg-tertiary: #f8f9fa;
$light-text-primary: #333;
$light-text-secondary: #666;
$light-border: #e1e4e8;
$light-shadow: rgba(0, 0, 0, 0.1);

// Dark theme colors
$dark-bg-primary: #1a1a1a;
$dark-bg-secondary: #2a2a2a;
$dark-bg-tertiary: #3a3a3a;
$dark-text-primary: #e0e0e0;
$dark-text-secondary: #a0a0a0;
$dark-border: #404040;
$dark-shadow: rgba(0, 0, 0, 0.3);

// Status colors (shared)
$color-success: #28a745;
$color-warning: #ffc107;
$color-error: #dc3545;
$color-info: #007bff;
$color-primary: #4a90e2;
$color-accent: #e94560;


// ============================================================================
//   Custom Scrollbar Mixin
// ============================================================================

@mixin custom-scrollbar($theme: 'dark') {
	@if $theme == 'dark' {
		&::-webkit-scrollbar {
			width: 8px;
			height: 8px;
		}

		&::-webkit-scrollbar-track {
			background: $dark-bg-primary;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: #4a4a4a;
			border-radius: 4px;

			&:hover {
				background: #5a5a5a;
			}
		}
	} @else {
		&::-webkit-scrollbar {
			width: 8px;
			height: 8px;
		}

		&::-webkit-scrollbar-track {
			background: $light-bg-tertiary;
			border-radius: 4px;
		}

		&::-webkit-scrollbar-thumb {
			background: #c0c0c0;
			border-radius: 4px;

			&:hover {
				background: #a0a0a0;
			}
		}
	}
}


// ============================================================================
//   Base Container Styles
// ============================================================================

@mixin test-page-container($theme: 'light') {
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;

	@if $theme == 'dark' {
		background-color: $dark-bg-primary;
		color: $dark-text-primary;
	} @else {
		background-color: $light-bg-primary;
		color: $light-text-primary;
	}

	@include custom-scrollbar($theme);
}


// ============================================================================
//   Header Styles
// ============================================================================

@mixin test-page-header() {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 2rem;
	text-align: center;

	h1 {
		margin: 0 0 0.5rem 0;
		font-size: 2rem;
		font-weight: 700;
	}

	.subtitle {
		margin: 0;
		opacity: 0.9;
		font-size: 1.1rem;
	}
}


// ============================================================================
//   Section Styles
// ============================================================================

@mixin test-section($theme: 'light') {
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;

	@if $theme == 'dark' {
		background-color: $dark-bg-secondary;
		border: 1px solid $dark-border;
	} @else {
		background-color: $light-bg-secondary;
		border: 1px solid $light-border;
		box-shadow: 0 2px 8px $light-shadow;
	}

	h2, h3 {
		margin-top: 0;
		margin-bottom: 15px;
		font-weight: 600;

		@if $theme == 'dark' {
			color: $color-primary;
		} @else {
			color: $light-text-primary;
		}
	}

	h2 {
		font-size: 20px;
	}

	h3 {
		font-size: 16px;
	}

	p {
		margin: 0 0 1rem 0;

		@if $theme == 'dark' {
			color: $dark-text-secondary;
		} @else {
			color: $light-text-secondary;
		}
	}
}


// ============================================================================
//   Panel Styles (for sidebars/control panels)
// ============================================================================

@mixin control-panel($theme: 'dark') {
	border-radius: 8px;
	padding: 20px;
	overflow-y: auto;
	max-height: calc(100vh - 80px);

	@if $theme == 'dark' {
		background-color: $dark-bg-secondary;
	} @else {
		background-color: $light-bg-secondary;
		border: 1px solid $light-border;
	}

	@include custom-scrollbar($theme);

	h2 {
		margin: 0 0 20px 0;
		font-size: 20px;
		padding-bottom: 10px;

		@if $theme == 'dark' {
			color: $color-accent;
			border-bottom: 1px solid $dark-border;
		} @else {
			color: $light-text-primary;
			border-bottom: 1px solid $light-border;
		}
	}

	h3 {
		margin: 0 0 15px 0;
		font-size: 16px;
		color: $color-primary;
	}
}


// ============================================================================
//   Button Styles
// ============================================================================

@mixin test-button($variant: 'primary') {
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: 8px;
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	@if $variant == 'primary' {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;

		&:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
		}
	} @else if $variant == 'secondary' {
		background: #6c757d;
		color: white;

		&:hover:not(:disabled) {
			background: #5a6268;
		}
	} @else if $variant == 'success' {
		background: $color-success;
		color: white;

		&:hover:not(:disabled) {
			background: darken($color-success, 10%);
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba($color-success, 0.4);
		}
	} @else if $variant == 'test' {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		color: white;

		&:hover:not(:disabled) {
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
		}
	}
}


// ============================================================================
//   Status Display
// ============================================================================

@mixin status-display($theme: 'light') {
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1rem;

	@if $theme == 'dark' {
		background-color: $dark-bg-primary;
	} @else {
		background-color: $light-bg-tertiary;
	}

	.status-item {
		display: flex;
		justify-content: space-between;
		padding: 0.5rem 0;

		@if $theme == 'dark' {
			border-bottom: 1px solid $dark-border;
		} @else {
			border-bottom: 1px solid #e9ecef;
		}

		&:last-child {
			border-bottom: none;
		}

		.status-label {
			font-weight: 600;

			@if $theme == 'dark' {
				color: $dark-text-secondary;
			} @else {
				color: $light-text-secondary;
			}
		}

		.status-value {
			@if $theme == 'dark' {
				color: $dark-text-primary;
			} @else {
				color: $light-text-primary;
			}
		}

		&.ready .status-value {
			color: $color-success;
			font-weight: 600;
		}

		&.loading .status-value {
			color: $color-warning;
			font-weight: 600;
		}

		&.error .status-value {
			color: $color-error;
			font-weight: 600;
		}
	}
}


// ============================================================================
//   Error/Success Messages
// ============================================================================

@mixin error-message() {
	background: #fff3cd;
	border: 1px solid #ffeaa7;
	border-radius: 6px;
	padding: 0.75rem;
	color: #856404;
	margin-top: 1rem;
}

@mixin success-message() {
	background: #d4edda;
	border: 1px solid #c3e6cb;
	border-radius: 6px;
	padding: 0.75rem;
	color: #155724;
	font-weight: 600;
	margin-top: 1rem;
}


// ============================================================================
//   Table Styles
// ============================================================================

@mixin data-table($theme: 'light') {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;

	thead {
		position: sticky;
		top: 0;
		z-index: 1;

		@if $theme == 'dark' {
			background-color: $dark-bg-secondary;
		} @else {
			background-color: $light-bg-tertiary;
		}

		th {
			padding: 8px 6px;
			text-align: left;
			font-weight: 600;

			@if $theme == 'dark' {
				color: $color-primary;
				border-bottom: 1px solid $dark-border;
			} @else {
				color: $light-text-secondary;
				border-bottom: 2px solid #dee2e6;
			}
		}
	}

	tbody {
		tr {
			cursor: pointer;
			transition: background-color 0.2s;

			@if $theme == 'dark' {
				&:hover {
					background-color: $dark-bg-tertiary;
				}

				&.selected {
					background-color: #4a3030;

					td {
						color: $color-accent;
						font-weight: 500;
					}
				}
			} @else {
				&:hover {
					background-color: $light-bg-tertiary;
				}

				&.selected {
					background-color: #e7f5ff;

					td {
						color: $color-info;
						font-weight: 500;
					}
				}
			}
		}

		td {
			padding: 8px 6px;

			@if $theme == 'dark' {
				color: #c0c0c0;
				border-bottom: 1px solid #303030;
			} @else {
				color: $light-text-primary;
				border-bottom: 1px solid #dee2e6;
			}
		}
	}
}


// ============================================================================
//   Input Styles
// ============================================================================

@mixin input-field($theme: 'light') {
	width: 100%;
	padding: 0.75rem;
	border-radius: 8px;
	font-size: 1rem;
	transition: border-color 0.3s ease;

	@if $theme == 'dark' {
		background-color: $dark-bg-primary;
		border: 2px solid $dark-border;
		color: $dark-text-primary;

		&:focus {
			outline: none;
			border-color: $color-primary;
		}

		&:disabled {
			background-color: $dark-bg-tertiary;
			cursor: not-allowed;
		}
	} @else {
		background-color: white;
		border: 2px solid #e9ecef;
		color: $light-text-primary;

		&:focus {
			outline: none;
			border-color: #667eea;
		}

		&:disabled {
			background-color: $light-bg-tertiary;
			cursor: not-allowed;
		}
	}
}


// ============================================================================
//   Code/Debug Display
// ============================================================================

@mixin code-display($theme: 'light') {
	border-radius: 8px;
	padding: 1rem;
	font-family: "Courier New", monospace;
	font-size: 0.9rem;
	overflow-x: auto;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;

	@if $theme == 'dark' {
		background-color: $dark-bg-primary;
		color: $dark-text-primary;
		border: 1px solid $dark-border;
	} @else {
		background-color: white;
		color: $light-text-primary;
		border: 1px solid $light-border;
	}
}


// ============================================================================
//   Utility Classes
// ============================================================================

.no-data-message {
	text-align: center;
	padding: 2rem;
	font-size: 14px;
	font-style: italic;
}

.panel-section {
	margin-bottom: 30px;

	&:last-child {
		margin-bottom: 0;
	}
}

.button-group {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.info-text {
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 15px 0;
}