<script lang="ts">
	import Icon from "$lib/components/atoms/icon.svelte";
	import { buttonVariants } from "$lib/components/ui/button/button.svelte";
	import { Sheet, SheetContent, SheetTrigger } from "$lib/components/ui/sheet";
	import { CheckoutStep } from "$lib/domains/order/data/entities";
	import { cn } from "$lib/utils";
	import ChevronDownIcon from "~icons/lucide/chevron-down";
	import CloseIcon from "~icons/lucide/x";
	import { checkoutVM } from "./checkout.vm.svelte";

	const checkoutSteps = [
		{ id: CheckoutStep.Initial, label: "Initial Details" },
		{ id: CheckoutStep.Payment, label: "Payment" },
		{ id: CheckoutStep.Verification, label: "Verify" },
		{ id: CheckoutStep.Confirmation, label: "Confirmation" },
	];

	let activeStepIndex = $derived(
		checkoutSteps.findIndex((step) => step.id === checkoutVM.checkoutStep),
	);

	function handleStepClick(clickedIndex: number, stepId: CheckoutStep) {
		if (clickedIndex <= activeStepIndex) {
			checkoutVM.checkoutStep = stepId;
		}
	}

	let sheetOpen = $state(false);
</script>

<Sheet
	bind:open={sheetOpen}
	onOpenChange={(to) => {
		sheetOpen = to;
	}}
>
	<SheetTrigger
		class={cn(
			buttonVariants({
				variant: "secondary",
				size: "lg",
			}),
			"my-8 flex w-full justify-between whitespace-normal break-all text-start lg:hidden",
		)}
		onclick={() => (sheetOpen = true)}
	>
		<div class="flex flex-col gap-1 xs:flex-row xs:items-center">
			<span>
				Step {activeStepIndex + 1}/{checkoutSteps.length}:
			</span>
			<span>
				{checkoutSteps[activeStepIndex].label}
			</span>
		</div>
		<Icon icon={ChevronDownIcon} cls="h-4 w-4" />
	</SheetTrigger>
	<SheetContent side="bottom">
		<button
			onclick={() => (sheetOpen = false)}
			class="absolute right-4 top-4 grid place-items-center rounded-md border border-neutral-400 p-1 text-neutral-500"
		>
			<Icon icon={CloseIcon} cls="h-5 w-auto" />
		</button>
		<div class="mt-8 flex flex-col gap-3 overflow-y-auto">
			{#each checkoutSteps as step, index}
				<button
					class={cn(
						"flex items-center gap-3 rounded-lg border-2 p-4 text-left outline-none transition-all",
						index <= activeStepIndex
							? "border-primary/20 bg-primary/5 hover:bg-primary/10"
							: "border-transparent bg-gray-100 opacity-50",
						index === activeStepIndex && "border-primary bg-primary/10 shadow-sm",
					)}
					disabled={index > activeStepIndex}
					onclick={() => {
						handleStepClick(index, step.id);
						sheetOpen = false;
					}}
				>
					<div
						class={cn(
							"flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-medium transition-all",
							index < activeStepIndex
								? "bg-green-500 text-white"
								: index === activeStepIndex
									? "bg-primary text-white"
									: "bg-gray-200 text-gray-600",
						)}
					>
						{#if index < activeStepIndex}
							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
							</svg>
						{:else}
							{index + 1}
						{/if}
					</div>
					<span class="font-medium text-gray-900">
						{step.label}
					</span>
				</button>
			{/each}
		</div>
	</SheetContent>
</Sheet>

<div class="hidden w-full overflow-x-auto lg:block">
	<div class="flex w-full items-center justify-between gap-2 overflow-x-auto">
		{#each checkoutSteps as step, index}
			<div class="flex flex-1 items-center gap-2">
				<div
					class={cn(
						"flex items-center justify-center transition-all",
						index <= activeStepIndex
							? "cursor-pointer"
							: "cursor-not-allowed opacity-40",
					)}
					onclick={() => handleStepClick(index, step.id)}
					onkeydown={(e) => {
						if (e.key === "Enter" || e.key === " ") {
							handleStepClick(index, step.id);
						}
					}}
					role="button"
					tabindex={index <= activeStepIndex ? 0 : -1}
				>
					<div
						class={cn(
							"flex h-10 min-h-10 w-10 min-w-10 items-center justify-center rounded-full border-2 font-medium transition-all",
							index < activeStepIndex
								? "border-green-500 bg-green-500 text-white"
								: index === activeStepIndex
									? "border-primary bg-primary text-white shadow-md"
									: "border-gray-300 bg-white text-gray-400",
						)}
					>
						{#if index < activeStepIndex}
							<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
							</svg>
						{:else}
							{index + 1}
						{/if}
					</div>
					<span
						class={cn(
							"ml-3 hidden w-max text-sm transition-all md:block",
							index <= activeStepIndex
								? "font-semibold text-gray-900"
								: "text-gray-500",
						)}
					>
						{step.label}
					</span>
				</div>
				{#if index !== checkoutSteps.length - 1}
					<div
						class={cn(
							"h-0.5 w-full min-w-4 flex-1 transition-all",
							index < activeStepIndex
								? "bg-green-500"
								: "bg-gray-300",
						)}
					></div>
				{/if}
			</div>
		{/each}
	</div>
</div>
