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

// === MOBILE CARDS VIEW ===
.cards-container {
	@include design-tokens.ov-grid-responsive(280px);
	gap: var(--ov-meet-spacing-md);
	padding: var(--ov-meet-spacing-md) 0;

	@include design-tokens.ov-mobile-down {
		grid-template-columns: 1fr;
		gap: var(--ov-meet-spacing-sm);
		padding: var(--ov-meet-spacing-sm) 0;
	}
}

.recording-card {
	@include design-tokens.ov-card;
	@include design-tokens.ov-theme-transition;
	display: flex;
	flex-direction: column;
	gap: var(--ov-meet-spacing-md);
	position: relative;
	padding: var(--ov-meet-spacing-md) var(--ov-meet-spacing-lg);

	&.selected-card {
		background-color: color-mix(in srgb, var(--ov-meet-color-primary) 8%, var(--ov-meet-card-background));
		border: 1px solid var(--ov-meet-color-primary);
		box-shadow: var(--ov-meet-card-shadow-hover);
	}

	&:hover:not(.selected-card) {
		@include design-tokens.ov-hover-lift(-2px);
	}

	@include design-tokens.ov-mobile-down {
		gap: var(--ov-meet-spacing-sm);
	}
}

.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ov-meet-spacing-md);

	.card-header-left {
		display: flex;
		align-items: flex-start;
		gap: var(--ov-meet-spacing-sm);
		flex: 1;
		min-width: 0;
	}

	.card-checkbox {
		margin: 0;
		align-self: flex-start;
		margin-top: 2px;
	}

	.status-info {
		flex-shrink: 0;
	}
}

.recording-details {
	display: flex;
	flex-direction: column;
	gap: var(--ov-meet-spacing-md);

	@include design-tokens.ov-mobile-down {
		gap: var(--ov-meet-spacing-sm);
	}

	.additional-details {
		margin-top: 5px;
		display: grid;
		grid-template-columns: 1fr 1fr; /* dos columnas iguales */
		gap: 1rem; /* espacio entre columnas y filas */
	}
}

.detail-item {
	display: flex;
	align-items: flex-start;
	gap: var(--ov-meet-spacing-sm);

	.detail-icon {
		@include design-tokens.ov-icon(sm);
		color: var(--ov-meet-text-secondary);
		margin-top: 2px;
		flex-shrink: 0;
	}

	.detail-content {
		flex-direction: column;
		gap: 0.25rem;

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

		.detail-row {
			display: flex;
			gap: 0.5rem;
			align-items: baseline;
		}

		.detail-value {
			font-size: var(--ov-meet-font-size-sm);
			font-weight: var(--ov-meet-font-weight-light);
			color: var(--ov-meet-text-primary);
			line-height: var(--ov-meet-line-height-tight);

			&.no-data {
				@extend .ov-no-data;
			}
		}

		.detail-time {
			font-size: var(--ov-meet-font-size-xs);
			color: var(--ov-meet-text-secondary);
			margin-top: 2px;
		}
	}
}

.action-button {
	&.play-button mat-icon {
		color: var(--ov-meet-color-success);
	}

	&.download-button mat-icon {
		color: var(--ov-meet-color-info);
	}

	&.delete-button mat-icon {
		color: var(--ov-meet-color-error);
	}

	&.more-button mat-icon {
		color: var(--ov-meet-text-secondary);
	}
}

.card-actions {
	@extend .ov-action-buttons;
	justify-content: flex-end;
	padding-top: var(--ov-meet-spacing-sm);
	border-top: 1px solid var(--ov-meet-border-color-light);
	margin-top: var(--ov-meet-spacing-sm);

	.action-button {
		@include design-tokens.ov-icon(lg);

		padding: 0;
		width: 40px;
		height: 40px;

		mat-icon {
			font-size: 24px !important;
			width: 24px !important;
			height: 24px !important;
		}
	}

	@include design-tokens.ov-mobile-down {
		gap: var(--ov-meet-spacing-xs);
	}

	@media (max-width: 480px) {
		.card-actions {
			height: auto;
		}
	}
}

// === TOOLBAR AND SHARED UTILITIES ===
.recordings-toolbar {
	@extend .ov-data-toolbar;
	margin-bottom: var(--ov-meet-spacing-md);

	// Responsive toolbar adjustments
	@include design-tokens.ov-tablet-down {
		.toolbar-center {
			z-index: 1000;
			position: fixed;

			.batch-actions {
				justify-content: center;

				button {
					padding: 0;
				}
			}
		}
		.toolbar-right {
			order: 1;
			width: 100%;
			justify-content: flex-end;

			.refresh-btn {
				padding: 0;
			}
		}
	}

	@include design-tokens.ov-mobile-down {
		flex-wrap: wrap;
		gap: var(--ov-meet-spacing-sm);

		.toolbar-left {
			order: 2;
			width: 100%;
		}

		.toolbar-right {
			order: 1;
			width: 100%;
			justify-content: flex-end;

			.refresh-btn {
				padding: 0;
			}
		}
	}
}

.search-field {
	@extend .ov-search-field;
}

.batch-actions {
	@extend .ov-batch-actions;
}

// === DESKTOP TABLE VIEW ===
.table-container {
	@extend .ov-table-container;
	margin-top: 0;

	@include design-tokens.ov-tablet-down {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

.recordings-table {
	@extend .ov-data-table;
	min-width: 600px;

	.mat-mdc-header-cell {
		&.room-header {
			min-width: 200px;
		}

		&.select-header {
			width: 48px;
			min-width: 48px;
			max-width: 48px;
		}

		&.actions-header {
			min-width: 140px;
		}
	}

	.mat-mdc-cell {
		&.select-cell {
			width: 48px;
			min-width: 48px;
			max-width: 48px;
		}
	}

	@include design-tokens.ov-tablet-down {
		.mat-column-duration,
		.mat-column-size {
			display: none;
		}
	}

	@media (max-width: 900px) {
		.mat-column-startDate .time {
			display: none;
		}
	}
}

// === SHARED COMPONENTS ===
.room-info {
	@extend .ov-info-display;
	flex: 1;
	min-width: 0;

	.room-name {
		@include design-tokens.ov-text-truncate;
		font-weight: var(--ov-meet-font-weight-medium);
		margin-bottom: 2px;

		.cards-container & {
			font-size: var(--ov-meet-font-size-md);
			line-height: var(--ov-meet-line-height-tight);
		}
	}

	.room-id {
		@include design-tokens.ov-text-truncate;
		font-size: var(--ov-meet-font-size-xs);
		color: var(--ov-meet-text-secondary);

		.cards-container & {
			font-size: var(--ov-meet-font-size-xxs);
			opacity: 0.8;
		}
	}
}

.status-badge {
	@extend .ov-status-badge;
	display: flex;
	align-items: center;
	gap: var(--ov-meet-spacing-xs);
	font-weight: var(--ov-meet-font-weight-medium);
	text-transform: uppercase;
	letter-spacing: 0.5px;

	.status-icon {
		@include design-tokens.ov-icon(sm);
		margin: 0;
	}

	.status-label {
		font-size: var(--ov-meet-font-size-xxs);
		.cards-container & {
			font-size: var(--ov-meet-font-size-xs);
		}
	}

	@include design-tokens.ov-mobile-down {
		padding: var(--ov-meet-spacing-xxs) var(--ov-meet-spacing-xs);
		font-size: var(--ov-meet-font-size-xs);

		.status-icon {
			@include design-tokens.ov-icon(xs);
		}
	}
}

// === UTILITY EXTENSIONS ===
.loading-container {
	@extend .ov-loading-container;
}

.date-info {
	@extend .ov-date-info;
}

.action-buttons {
	@extend .ov-action-buttons;

	@include design-tokens.ov-tablet-down {
		.play-btn,
		.download-btn {
			display: none;
		}
	}
}

.delete-action {
	@extend .ov-delete-action;
}

.no-recordings-state {
	@extend .ov-empty-state;

	.getting-started-actions {
		@include design-tokens.ov-mobile-down {
			flex-direction: column;
			gap: var(--ov-meet-spacing-sm);

			button {
				width: 100%;
				padding: var(--ov-meet-spacing-md);
			}
		}
	}
}

// === ACCESSIBILITY AND ANIMATIONS ===
.mat-mdc-checkbox,
.mat-mdc-icon-button,
.mat-mdc-button {
	@extend .ov-focus-visible;
}

@include design-tokens.ov-mobile-down {
	.mat-mdc-icon-button {
		min-width: 44px;
		min-height: 44px;
	}
}

.recording-card {
	animation: fadeIn 0.3s ease-out;

	&:nth-child(even) {
		animation-delay: 0.1s;
	}

	&:nth-child(odd) {
		animation-delay: 0.05s;
	}
}
