<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';
	import { Settings } from '@lucide/svelte';

	let showAdvancedSettings = false;
</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 variant="glass" class="w-full rounded-3xl">
			<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-3">
					<div class="flex items-center justify-between">
						<div class="space-y-1">
							<Label class="text-xs font-semibold tracking-wider text-gray-400">ADVANCED SETTINGS</Label>
							<p class="text-xs text-gray-500">Optional device settings and push configuration.</p>
						</div>
						<Button
							id="toggleAdvancedSettingsBtn"
							type="button"
							variant="ghost"
							class="h-10 w-10 rounded-full border border-white/10 bg-black/30 p-0 text-gray-300 hover:bg-white/5 hover:text-white"
							aria-label={showAdvancedSettings ? 'Hide advanced settings' : 'Show advanced settings'}
							aria-expanded={showAdvancedSettings}
							onclick={() => (showAdvancedSettings = !showAdvancedSettings)}
						>
							<Settings class="h-5 w-5" />
						</Button>
					</div>

					{#if showAdvancedSettings}
						<div class="rounded-2xl border border-white/8 bg-black/30 p-4">
							<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>
						</div>
					{/if}
				</div>
			</CardContent>
			<CardFooter class="flex flex-col items-stretch gap-3 border-0 bg-transparent px-6 pb-6 pt-2">
				<Button
					id="registerBtn"
					variant="premium"
					class="h-12 w-full rounded-xl text-base"
					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>
