<!-- Loading State -->
@if (isLoading) {
	<div class="ov-page-container">
		<div class="loading-container fade-in">
			<mat-spinner diameter="48"></mat-spinner>
			<p class="loading-text">Loading recording...</p>
		</div>
	</div>
}

<!-- Error State -->
@else if (hasError) {
	<div class="ov-page-container">
		<div class="error-container fade-in">
			<div class="error-content">
				<mat-icon class="error-icon">error_outline</mat-icon>
				<h2 class="error-title">Recording Not Found</h2>
				<p class="error-message">The recording you're looking for doesn't exist or is no longer available.</p>
				<div class="error-actions">
					<button mat-raised-button color="primary" (click)="retryLoad()">
						<mat-icon>refresh</mat-icon>
						<span>Try Again</span>
					</button>
				</div>
			</div>
		</div>
	</div>
}

<!-- Recording Content -->
@else if (recording) {
	@if (viewportService.isMobileView()) {
		<!-- Mobile Experience -->
		<div class="mobile-container">
			<!-- Fixed Header Toolbar -->
			<div class="mobile-header-toolbar">
				<div class="toolbar-content">
					<!-- Left: Back button -->
					<button mat-icon-button class="back-button" (click)="goBack()">
						<mat-icon>arrow_back</mat-icon>
					</button>

					<!-- Center: Recording info -->
					<div class="recording-info">
						<h1 class="recording-title">{{ recording.roomName }}</h1>
						<div class="recording-metadata">
							<span class="recording-date">
								<mat-icon>schedule</mat-icon>
								{{ recording.startDate | date: 'MMM d, y' }}
							</span>
							@if (recording.duration) {
								<span class="recording-duration">
									<mat-icon>timer</mat-icon>
									{{ formatDuration(recording.duration) }}
								</span>
							}
						</div>
					</div>

					<!-- Right: Actions -->
					@if (recordingUrl) {
						<div class="header-actions">
							<button
								mat-icon-button
								(click)="downloadRecording()"
								matTooltip="Download"
								class="action-button download-button"
							>
								<mat-icon>download</mat-icon>
							</button>

							<button
								mat-icon-button
								color="accent"
								(click)="openShareDialog()"
								matTooltip="Share"
								class="action-button share-button"
							>
								<mat-icon>share</mat-icon>
							</button>
						</div>
					}
				</div>

				<!-- Status indicator for non-complete recordings -->
				@if (recording.status !== 'complete') {
					<div class="status-bar">
						<mat-icon class="status-icon">{{ getStatusIcon() }}</mat-icon>
						<span class="status-text">{{ getStatusMessage() }}</span>
					</div>
				}
			</div>

			<!-- Video Player Component -->
			<ov-recording-video-player
				[recordingUrl]="recordingUrl"
				[recordingStatus]="recording.status"
				[showDownload]="false"
				[showShare]="false"
				(videoError)="onVideoError()"
				(retry)="retryLoad()"
			/>
		</div>
	} @else {
		<!-- Desktop/Tablet Experience -->
		<div class="ov-page-container">
			<div class="recording-page-content fade-in">
				<!-- Header Section -->
				<div class="recording-header">
					<div class="header-content">
						<div class="header-info">
							<div class="recording-info">
								<h1 class="recording-title">{{ recording.roomName }}</h1>
								<div class="recording-metadata">
									<span class="recording-date">
										<mat-icon class="ov-action-icon">schedule</mat-icon>
										{{ recording.startDate | date: 'MMM d, y - h:mm a' }}
									</span>
									@if (recording.duration) {
										<span class="recording-duration">
											<mat-icon class="ov-action-icon">timer</mat-icon>
											{{ formatDuration(recording.duration) }}
										</span>
									}
								</div>
								<div class="recording-status">
									<mat-icon [class]="'status-icon ' + recording.status">{{
										getStatusIcon()
									}}</mat-icon>
									<span class="status-text">{{ getStatusMessage() }}</span>
								</div>
							</div>
							<!-- Actions Section -->
							@if (recordingUrl) {
								<div class="actions-section">
									<div class="primary-actions">
										<button
											mat-button
											(click)="downloadRecording()"
											matTooltip="Download recording"
											class="action-btn primary-button"
										>
											<mat-icon>download</mat-icon>
											<span>Download</span>
										</button>

										<button
											mat-raised-button
											color="accent"
											(click)="openShareDialog()"
											matTooltip="Share recording"
											class="action-btn"
										>
											<mat-icon>share</mat-icon>
											<span>Share</span>
										</button>
									</div>
								</div>
							}
						</div>
					</div>
				</div>

				<!-- Video Player Component -->
				<ov-recording-video-player
					[recordingUrl]="recordingUrl"
					[recordingStatus]="recording.status"
					[showDownload]="false"
					[showShare]="false"
					(videoError)="onVideoError()"
					(retry)="retryLoad()"
				/>
			</div>
		</div>
	}
}
