<script lang="ts">
	import * as Sheet from "@/components/ui/sheet";
	import { Button } from "@/components/ui/button";
	import * as Alert from "@/components/ui/alert";
	import { Badge } from "@/components/ui/badge";
	import { toast } from "svelte-sonner";
	import type { Robot } from "$lib/robot/Robot.svelte";
	import { Separator } from "@/components/ui/separator";

	interface Props {
		open: boolean;
		robot: Robot | null;
	}

	let { open = $bindable(), robot }: Props = $props();

	async function calibrateRobot() {
		if (!robot) return;
		try {
			await robot.calibrateRobot();
		} catch (err) {
			toast.error("Calibration Failed", {
				description: `Failed to calibrate: ${err}`
			});
			console.error(err);
		}
	}

	async function moveToRest() {
		if (!robot) return;
		try {
			await robot.moveToRestPosition();
		} catch (err) {
			toast.error("Movement Failed", {
				description: `Failed to move to rest: ${err}`
			});
			console.error(err);
		}
	}

	function clearCalibration() {
		if (!robot) return;
		robot.clearCalibration();
	}
</script>

<Sheet.Root bind:open>
	<Sheet.Content
		trapFocus={false}
		side="right"
		class="w-80 gap-0 border-l border-slate-600 bg-gradient-to-b from-slate-700 to-slate-800 p-0 text-white sm:w-96"
	>
		<!-- Header -->
		<Sheet.Header class="border-b border-slate-600 bg-slate-700/80 p-6 backdrop-blur-sm">
			<div class="flex items-center justify-between">
				<div class="flex items-center gap-3">
					<span class="icon-[mdi--tune] size-6 text-purple-400"></span>
					<div>
						<Sheet.Title class="text-xl font-semibold text-slate-100">Manual Control</Sheet.Title>
						<p class="mt-1 text-sm text-slate-400">Direct robot joint manipulation</p>
					</div>
				</div>
			</div>
		</Sheet.Header>

		{#if robot}
			<!-- Content -->
			<div
				class="scrollbar-thin scrollbar-track-slate-700 scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4"
			>
				<div class="space-y-6 py-4">
					<!-- Calibration Section (for USB slaves) -->
					{#if robot.connectedSlaves.some((slave) => slave.name.includes("USB"))}
						<div class="space-y-4">
							<div class="mb-3 flex items-center gap-3">
								<span class="icon-[mdi--crosshairs-gps] size-5 text-purple-400"></span>
								<h3 class="text-lg font-medium text-slate-100">USB Robot Calibration</h3>
								{#if robot.isCalibrated}
									<Badge variant="default" class="ml-auto bg-green-600 text-xs">
										<span class="icon-[mdi--check] mr-1 size-3"></span>
										OK
									</Badge>
								{:else}
									<Badge variant="destructive" class="ml-auto text-xs">
										<span class="icon-[mdi--alert] mr-1 size-3"></span>
										Required
									</Badge>
								{/if}
							</div>

							{#if !robot.isCalibrated}
								<div class="space-y-4">
									<div class="space-y-1 text-xs text-purple-300/70">
										<p>1. Position robot to match rest pose</p>
										<p>2. Click Calibrate when ready</p>
									</div>
									<div class="flex gap-2">
										<Button
											variant="outline"
											size="sm"
											onclick={moveToRest}
											class="h-8 flex-1 border-slate-600 text-xs text-slate-200 hover:bg-slate-700"
										>
											<span class="icon-[mdi--human-handsup] mr-1 size-3"></span>
											Rest Pose
										</Button>
										<Button
											variant="default"
											size="sm"
											onclick={calibrateRobot}
											class="h-8 flex-1 bg-green-600 text-xs hover:bg-green-700"
										>
											<span class="icon-[mdi--crosshairs-gps] mr-1 size-3"></span>
											Calibrate
										</Button>
									</div>
								</div>
							{:else}
								<div class="space-y-3">
									<div class="flex items-center gap-2 text-xs text-green-300">
										<span class="icon-[mdi--check-circle] size-3"></span>
										Calibrated at {robot.calibrationState.calibrationTime?.toLocaleTimeString()}
									</div>
									<Button
										variant="outline"
										size="sm"
										onclick={clearCalibration}
										class="h-8 w-full border-slate-600 text-xs text-slate-200 hover:bg-slate-700"
									>
										<span class="icon-[mdi--refresh] mr-1 size-3"></span>
										Clear Calibration
									</Button>
								</div>
							{/if}
						</div>

						<Separator class="bg-slate-600" />
					{/if}

					<!-- Manual Joint Controls -->
					{#if robot.manualControlEnabled}
						<div class="space-y-4">
							<div class="mb-3 flex items-center gap-3">
								<span class="icon-[lucide--rotate-3d] size-5 text-purple-400"></span>
								<h3 class="text-lg font-medium text-slate-100">Joint Controls</h3>
								<Badge variant="default" class="ml-auto bg-purple-600 text-xs">
									{robot.activeJoints.length}
								</Badge>
							</div>

							<p class="text-xs text-slate-400">
								Each joint can be moved independently using sliders. Values show virtual position
								(degrees) and real position in parentheses when available.
							</p>

							{#if robot.activeJoints.length === 0}
								<p class="py-4 text-center text-xs text-slate-500 italic">No active joints</p>
							{:else}
								<div class="space-y-3">
									{#each robot.activeJoints as joint (joint.name)}
										{@const lower =
											joint.urdfJoint.limit?.lower != undefined
												? (joint.urdfJoint.limit.lower * 180) / Math.PI
												: -180}
										{@const upper =
											joint.urdfJoint.limit?.upper != undefined
												? (joint.urdfJoint.limit.upper * 180) / Math.PI
												: 180}
										<div class="space-y-2 rounded-lg border border-slate-600 bg-slate-800/50 p-3">
											<div class="flex items-center justify-between">
												<span class="text-sm font-medium text-slate-200">{joint.name}</span>
												<div class="flex items-center gap-2 text-xs">
													<span class="font-mono text-purple-400"
														>{joint.virtualValue.toFixed(0)}°</span
													>
													{#if joint.realValue !== undefined}
														<span class="font-mono text-green-400"
															>({joint.realValue.toFixed(0)}°)</span
														>
													{/if}
												</div>
											</div>
											<div class="space-y-1">
												<input
													type="range"
													min={lower}
													max={upper}
													step="0.001"
													value={joint.virtualValue}
													oninput={(e) => {
														const val = parseFloat((e.target as HTMLInputElement).value);
														robot.updateJointValue(joint.name, val);
													}}
													class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-600"
												/>
												<div class="flex justify-between text-xs text-slate-500">
													<span>{lower.toFixed(0)}°</span>
													<span>{upper.toFixed(0)}°</span>
												</div>
											</div>
										</div>
									{/each}
								</div>
							{/if}
						</div>
					{:else}
						<div class="space-y-4">
							<div class="mb-3 flex items-center gap-3">
								<span class="icon-[mdi--gamepad-variant] size-5 text-purple-400"></span>
								<h3 class="text-lg font-medium text-slate-100">Master Control Active</h3>
							</div>

							<Alert.Root class="border-purple-500/30 bg-purple-500/10">
								<span class="icon-[mdi--gamepad-variant] size-4"></span>
								<Alert.Title class="text-sm text-purple-200">Master Control Active</Alert.Title>
								<Alert.Description class="text-xs text-purple-300">
									Robot controlled by: <strong>{robot.controlState.masterName}</strong><br />
									Disconnect master to enable manual control.
								</Alert.Description>
							</Alert.Root>
						</div>
					{/if}
				</div>
			</div>
		{/if}
	</Sheet.Content>
</Sheet.Root>

<style>
	/* Slider styling (classic <input type="range">) */
	.slider::-webkit-slider-thumb {
		appearance: none;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #a855f7;
		cursor: pointer;
		border: 2px solid #1e293b;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		transition: all 0.15s ease;
	}

	.slider::-webkit-slider-thumb:hover {
		background: #9333ea;
		transform: scale(1.1);
	}

	.slider::-moz-range-thumb {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #a855f7;
		cursor: pointer;
		border: 2px solid #1e293b;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		transition: all 0.15s ease;
	}

	.slider::-moz-range-track {
		height: 6px;
		background: #374151;
		border-radius: 3px;
		border: none;
	}

	.slider:focus {
		box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.5);
	}
</style>
