<div class="ov-page-container ov-mb-xxl">
	@if (isLoading) {
		<!-- Loading State -->
		<div class="loading-state">
			<div class="page-header">
				<div class="title">
					<mat-icon>dashboard</mat-icon>
					<h1>Overview</h1>
				</div>
				<p class="subtitle">Loading your dashboard...</p>
			</div>
		</div>
	} @else if (hasData) {
		<div class="page-header">
			<div class="title">
				<mat-icon>dashboard</mat-icon>
				<h1>Overview</h1>
			</div>
			<p class="subtitle">Monitor your system status and recent activity</p>
		</div>
		<!-- Dashboard State -->
		<div class="dashboard-content">
			<!-- Stats Grid -->
			<div class="stats-grid">
				<mat-card class="stat-card rooms-card">
					<mat-card-content>
						<div class="stat-icon">
							<mat-icon class="ov-room-icon">video_chat</mat-icon>
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ stats.totalRooms }}</div>
							<div class="stat-label">Total Rooms</div>
							<div class="stat-detail">{{ stats.activeRooms }} with active meetings</div>
						</div>
					</mat-card-content>
					<mat-card-actions>
						<button
							mat-button
							(click)="navigateTo('rooms/new')"
							class="primary-button"
							id="create-room-button"
						>
							<mat-icon>add</mat-icon>
							Create Room
						</button>
						<button mat-button (click)="navigateTo('rooms')" id="view-all-rooms-button">
							View all
							<mat-icon class="ov-navigation-icon">arrow_forward</mat-icon>
						</button>
					</mat-card-actions>
				</mat-card>

				<mat-card class="stat-card recordings-card">
					<mat-card-content>
						<div class="stat-icon">
							<mat-icon class="ov-recording-icon">video_library</mat-icon>
						</div>
						<div class="stat-content">
							<div class="stat-number">{{ stats.totalRecordings }}</div>
							<div class="stat-label">Total Recordings</div>
							<div class="stat-detail">{{ stats.completeRecordings }} available for playback</div>
						</div>
					</mat-card-content>
					<mat-card-actions>
						<button mat-button (click)="navigateTo('recordings')" id="view-all-recordings-button">
							<mat-icon class="ov-navigation-icon">arrow_forward</mat-icon>
							View all
						</button>
					</mat-card-actions>
				</mat-card>
			</div>
		</div>
	} @else {
		<!-- First Time User State -->
		<div class="get-started-header">
			<h1>Get started with OpenVidu Meet</h1>
			<p class="subtitle">Your video conference management dashboard.</p>
			<p class="subtitle">Get the most out of your app, start with these quick setup actions.</p>
		</div>
		<div class="welcome-content">
			<div class="welcome-card">
				<div class="welcome-actions">
					<div class="getting-started-grid">
						<mat-card class="feature-card">
							<mat-card-content>
								<mat-icon class="ov-room-icon">video_chat</mat-icon>
								<h3>Create your first room</h3>
								<p>
									Create dedicated spaces for video conferences where participants can connect,
									collaborate, and communicate seamlessly.
								</p>
								<button
									mat-stroked-button
									(click)="navigateTo('rooms/new')"
									id="create-first-room-button"
								>
									<mat-icon class="ov-action-icon">add</mat-icon>
									Create Room
								</button>
							</mat-card-content>
						</mat-card>

						<mat-card class="feature-card">
							<mat-card-content>
								<mat-icon class="material-symbols-outlined"> palette </mat-icon>
								<h3>Customize the appearance</h3>
								<p>
									Personalize the look and feel of your video conference rooms to align with your
									brand and style.
								</p>
								<button
									mat-stroked-button
									(click)="navigateTo('config')"
									id="configure-appearance-button"
								>
									Go to Configuration
								</button>
							</mat-card-content>
						</mat-card>

						<mat-card class="feature-card">
							<mat-card-content>
								<mat-icon class="material-symbols-outlined ov-developer-icon"> code_blocks </mat-icon>

								<h3>Embed OpenVidu Meet</h3>
								<p>
									Embed OpenVidu Meet into your applications using our comprehensive REST API for
									programmatic room creation and management.
								</p>
								<button mat-stroked-button (click)="navigateTo('embedded')" id="go-to-embedded-button">
									Go to Embedded
								</button>
							</mat-card-content>
						</mat-card>
					</div>
				</div>
			</div>
		</div>
	}
</div>
