<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 { Alert, AlertDescription, AlertTitle } from '$lib/components/ui/alert/index.js';
	import { Badge } from '$lib/components/ui/badge/index.js';
	import { Button } from '$lib/components/ui/button/index.js';
	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
	import { Label } from '$lib/components/ui/label/index.js';
	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/components/ui/select/index.js';

	let cameraVideoElement: HTMLVideoElement | null = null;

	$effect(() => {
		appController.setCameraVideoElement(cameraVideoElement);
	});

	const cameraInputItems = () =>
		$appState.cameraInputDevices.map((cameraInput) => ({
			value: cameraInput.id,
			label: cameraInput.label
		}));

	const selectedCameraInputLabel = () =>
		$appState.cameraInputDevices.find((cameraInput) => cameraInput.id === $appState.selectedCameraInputId)?.label ||
		($appState.cameraInputDevices.length > 0 ? 'Choose camera input' : 'No camera inputs found');

	const motionDetectionProfileItems = [
		{ value: 'low_power', label: 'Low Power' },
		{ value: 'balanced', label: 'Balanced' },
		{ value: 'responsive', label: 'Responsive' }
	];

	const motionDetectionProfileLabel = () =>
		motionDetectionProfileItems.find((item) => item.value === $appState.motionDetection.profile)?.label || 'Balanced';
</script>

<AppChrome pageKey="camera">
	<section id="screen-home-camera" class="mx-auto flex h-full min-h-0 max-w-7xl flex-col gap-4 lg:gap-6">
		<div class="flex flex-col gap-4 lg:gap-6 xl:flex-1 xl:min-h-0">
			<Card class="glass-card relative flex min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 sm:min-h-[260px] xl:flex-[3]">
				<div id="cameraPreview" class="flex-1 bg-black relative flex items-center justify-center {$appState.isMotionActive ? 'bg-red-900/20' : ''}">
					<video
						id="cameraVideo"
						class="absolute inset-0 w-full h-full object-cover {$appState.cameraPreviewReady ? '' : 'hidden'}"
						autoplay
						playsinline
						muted
						bind:this={cameraVideoElement}
					></video>
					<Badge
						variant="destructive"
						class="absolute top-4 left-4 z-20 gap-2 rounded-full border border-white/10 bg-black/50 px-3 py-1.5 text-white backdrop-blur"
					>
						<span class="w-2.5 h-2.5 bg-red-500 rounded-full shadow-[0_0_8px_rgba(239,68,68,0.8)] animate-pulse"></span>
						<span class="text-xs font-medium tracking-wide">REC</span>
					</Badge>
				</div>

				<div
					id="cameraOfflineOverlay"
					class="absolute inset-0 bg-[#0a0a0c]/80 backdrop-blur-sm z-10 flex flex-col items-center justify-center gap-4 {$appState.socketConnected ? 'hidden' : ''}"
				>
					<Alert class="w-full max-w-sm border-white/10 bg-[#141418]/90 text-center shadow-xl">
						<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-16 w-16 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
							<path
								stroke-linecap="round"
								stroke-linejoin="round"
								stroke-width="2"
								d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
							/>
						</svg>
						<AlertTitle class="justify-self-center text-base text-white">Camera Offline</AlertTitle>
						<AlertDescription class="justify-self-center text-sm text-gray-400">
							Reconnect this device to resume live monitoring.
						</AlertDescription>
						<div class="mt-2 flex justify-center">
							<Button
						id="cameraGoOnlineBtn"
						variant="outline"
						class="rounded-xl border-green-500/50 text-green-400 hover:border-green-400 hover:bg-green-500/10"
						onclick={() => appController.goOnline()}
					>
						Go Online
							</Button>
						</div>
					</Alert>
				</div>
			</Card>

			<div class="grid grid-cols-1 gap-4 lg:gap-6 xl:min-h-0 xl:flex-[2] xl:grid-cols-[2fr_1fr]">
				<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
					<CardHeader class="pb-2">
						<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Logs</CardTitle>
					</CardHeader>
					<CardContent class="flex-1 xl:min-h-0">
						<ScrollArea
							id="cameraLogs"
							class="h-[220px] rounded-xl border border-white/5 bg-black/40 p-4 text-xs font-mono text-gray-400 xl:h-full xl:min-h-[220px]"
						>
						{#if $appState.activityLog.length === 0}
							<div class="text-gray-600 italic">Awaiting connection...</div>
						{:else}
							{#each $appState.activityLog as log (log.id)}
								<div>[{new Date(log.createdAt).toLocaleTimeString()}] {log.type}: {log.message}</div>
							{/each}
						{/if}
						</ScrollArea>
					</CardContent>
				</Card>

				<Card class="glass-card min-h-[220px] overflow-hidden rounded-3xl border-white/10 bg-[#16161d]/80 xl:min-h-0">
					<CardHeader class="pb-2">
						<CardTitle class="text-xs font-bold uppercase tracking-wider text-gray-500">Actions / Options</CardTitle>
					</CardHeader>
					<CardContent class="space-y-4 xl:min-h-0 xl:overflow-y-auto">
						<div class="space-y-2">
						<div class="flex items-center justify-between gap-2">
								<Label for="cameraInputSelect" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
								Camera Input
								</Label>
								<Button
								id="refreshCameraInputsBtn"
								variant="ghost"
								size="xs"
								class="rounded-lg text-gray-400 hover:text-white"
								onclick={() => appController.refreshCameraInputs()}
							>
								Refresh
								</Button>
						</div>
							<Select
							type="single"
							value={$appState.selectedCameraInputId}
							items={cameraInputItems()}
							onValueChange={(value) => appController.selectCameraInput(value)}
						>
								<SelectTrigger
									id="cameraInputSelect"
									class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
								>
									{selectedCameraInputLabel()}
								</SelectTrigger>
								<SelectContent>
								{#each $appState.cameraInputDevices as cameraInput (cameraInput.id)}
										<SelectItem value={cameraInput.id} label={cameraInput.label} />
								{/each}
								</SelectContent>
							</Select>
						</div>
						<div class="space-y-3 rounded-2xl border border-white/10 bg-black/30 p-3 sm:p-4 sm:space-y-4">
							<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
								<div class="space-y-1">
									<p class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">Automatic Detection</p>
									<p class="text-sm text-gray-200">
										{$appState.motionDetection.enabled ? 'Armed for automatic motion events.' : 'Paused until manually armed.'}
									</p>
									<p class="text-xs text-gray-500">
										Designed for a plugged-in browser kept in the foreground.
									</p>
								</div>
								<Button
									variant={$appState.motionDetection.enabled ? 'secondary' : 'outline'}
									class="min-w-[112px] self-start rounded-xl sm:self-auto"
									onclick={() => appController.setMotionDetectionEnabled(!$appState.motionDetection.enabled)}
								>
									{$appState.motionDetection.enabled ? 'Pause' : 'Arm'}
								</Button>
							</div>

							<div class="space-y-2">
								<div class="flex items-center justify-between gap-2">
									<Label for="motionDetectionProfile" class="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
										Detection Profile
									</Label>
									<span class="text-[11px] uppercase tracking-wider text-gray-500">{$appState.motionDetection.state}</span>
								</div>
								<Select
									type="single"
									value={$appState.motionDetection.profile}
									items={motionDetectionProfileItems}
									onValueChange={(value) => appController.setMotionDetectionProfile(value)}
								>
									<SelectTrigger
										id="motionDetectionProfile"
										class="h-10 w-full rounded-xl border-white/10 bg-black/40 text-gray-200"
									>
										{motionDetectionProfileLabel()}
									</SelectTrigger>
									<SelectContent>
										{#each motionDetectionProfileItems as item (item.value)}
											<SelectItem value={item.value} label={item.label} />
										{/each}
									</SelectContent>
								</Select>
							</div>

							<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
								<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
									<p class="text-[10px] uppercase tracking-wider text-gray-500">Detector State</p>
									<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.state}</p>
								</div>
								<div class="rounded-xl border border-white/5 bg-white/5 px-3 py-2">
									<p class="text-[10px] uppercase tracking-wider text-gray-500">Motion Score</p>
									<p class="mt-1 text-sm font-medium text-gray-200">{$appState.motionDetection.score.toFixed(3)}</p>
								</div>
							</div>

							<div class="flex items-center justify-between gap-3 rounded-xl border border-white/5 bg-white/5 px-3 py-2">
								<div>
									<p class="text-xs font-medium text-gray-200">Show detector debug info</p>
									<p class="text-[11px] text-gray-500">Useful while tuning thresholds and sample profiles.</p>
								</div>
								<button
									type="button"
									role="switch"
									aria-checked={$appState.motionDetection.debug}
									aria-label="Toggle motion detector debug info"
									title="Toggle motion detector debug info"
									class="inline-flex h-7 w-12 items-center rounded-full border border-white/10 p-1 transition-colors {$appState.motionDetection.debug ? 'bg-blue-500/80' : 'bg-white/10'}"
									onclick={() => appController.setMotionDetectionDebug(!$appState.motionDetection.debug)}
								>
									<span
										class="h-5 w-5 rounded-full bg-white transition-transform {$appState.motionDetection.debug ? 'translate-x-5' : 'translate-x-0'}"
									></span>
								</button>
							</div>
						</div>
						<div class="space-y-3">
						{#if !$appState.isMotionActive}
								<Button
								id="startMotionBtn"
								variant="outline"
								class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:border-red-500/30 hover:bg-red-500/10 hover:text-red-400"
								onclick={() => appController.startMotion()}
							>
									<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
								</svg>
								Simulate Motion Event
								</Button>
						{:else}
								<Button
								id="endMotionBtn"
								variant="outline"
								class="h-14 w-full justify-start rounded-xl border-white/5 bg-white/5 font-medium hover:bg-white/10 disabled:opacity-30"
								onclick={() => appController.endMotion()}
							>
									<svg data-icon="inline-start" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 10a1 1 0 011-1h4a1 1 0 011 1v4a1 1 0 01-1 1h-4a1 1 0 01-1-1v-4z" />
								</svg>
								Stop Recording
								</Button>
						{/if}
						</div>
					</CardContent>
				</Card>
			</div>
		</div>
	</section>
</AppChrome>
