<script lang="ts">
	// @ts-nocheck
	import AppChrome from '$lib/sim/ui/AppChrome.svelte';
	import { appController } from '$lib/app/controller';
	import { appState } from '$lib/app/store';
	import { Button } from '$lib/components/ui/button/index.js';
	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
	import { Input } from '$lib/components/ui/input/index.js';
	import { Label } from '$lib/components/ui/label/index.js';
	import { ToggleGroup, ToggleGroupItem } from '$lib/components/ui/toggle-group/index.js';
</script>

<AppChrome pageKey="onboarding">
	<section id="screen-onboarding" class="flex flex-col items-center justify-center min-h-[70vh] max-w-lg mx-auto">
		<Card class="glass-card w-full rounded-3xl border-white/10 bg-[#16161d]/80 shadow-2xl">
			<CardHeader class="px-6 pt-6 text-center">
				<CardTitle class="text-3xl font-bold tracking-tight text-white">Configure Device</CardTitle>
				<CardDescription class="text-sm text-gray-400">Set up this browser dashboard role</CardDescription>
			</CardHeader>
			<CardContent class="flex flex-col gap-6 px-6">
				<div class="flex flex-col gap-2">
					<Label class="text-xs font-semibold tracking-wider text-gray-400" for="deviceName">DEVICE NAME</Label>
					<Input
						id="deviceName"
						type="text"
						placeholder="e.g. Living Room Cam"
						class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
						value={$appState.onboardingForm.name}
						oninput={(event) => appController.setOnboardingField('name', (event.currentTarget as HTMLInputElement).value)}
					/>
				</div>

				<div class="flex flex-col gap-2">
					<Label class="text-xs font-semibold tracking-wider text-gray-400" for="role">ROLE</Label>
					<ToggleGroup
						id="role"
						type="single"
						value={$appState.onboardingForm.role}
						variant="outline"
						size="lg"
						class="grid w-full grid-cols-2 gap-2 rounded-xl border border-white/5 bg-black/40 p-1.5"
						onValueChange={(value) => value && appController.selectRole(value)}
					>
						<ToggleGroupItem
							id="btn-role-camera"
							value="camera"
							class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
						>
							Camera
						</ToggleGroupItem>
						<ToggleGroupItem
							id="btn-role-client"
							value="client"
							class="h-10 justify-center rounded-lg border-white/0 text-sm font-medium text-gray-400 data-[state=on]:border-blue-500/30 data-[state=on]:bg-blue-600 data-[state=on]:text-white"
						>
							Client
						</ToggleGroupItem>
					</ToggleGroup>
				</div>

				<div class="flex flex-col gap-2">
					<Label class="text-xs font-semibold tracking-wider text-gray-400" for="pushToken">PUSH TOKEN (OPTIONAL)</Label>
					<Input
						id="pushToken"
						type="text"
						placeholder="simulated_token_123"
						class="h-12 rounded-xl border-white/10 bg-black/40 text-white placeholder:text-gray-500"
						value={$appState.onboardingForm.pushToken}
						oninput={(event) => appController.setOnboardingField('pushToken', (event.currentTarget as HTMLInputElement).value)}
					/>
				</div>
			</CardContent>
			<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
				<Button
					id="registerBtn"
					class="btn-premium h-12 w-full rounded-xl text-base text-white"
					onclick={() => appController.registerDevice()}
				>
					Complete Setup
				</Button>
				<Button
					id="loadSavedBtn"
					variant="ghost"
					class="h-12 w-full rounded-xl text-gray-500 hover:bg-white/5 hover:text-white"
					onclick={() => appController.loadSavedDevice()}
				>
					Load previously saved device
				</Button>
			</CardFooter>
		</Card>
	</section>
</AppChrome>
