<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-2 overflow-y-auto">
			{#each checkoutSteps as step, index}
				<button
					class={cn(
						"flex items-center gap-3 rounded-lg border-2 p-3 text-left outline-none transition",
						index <= activeStepIndex
							? "border-brand-200 bg-primary/10 hover:bg-primary/20"
							: "border-transparent bg-gray-100 opacity-50",
						index === activeStepIndex && "border-brand-500",
					)}
					disabled={index > activeStepIndex}
					onclick={() => {
						handleStepClick(index, step.id);
						sheetOpen = false;
					}}
				>
					<div
						class={cn(
							"flex h-8 w-8 shrink-0 items-center justify-center rounded-full",
							index <= activeStepIndex
								? "bg-primary text-white"
								: "bg-gray-200 text-gray-600",
						)}
					>
						{index + 1}
					</div>
					<span class="font-medium">
						{step.label}
					</span>
				</button>
			{/each}
		</div>
	</SheetContent>
</Sheet>

<div class="hidden w-full overflow-x-auto lg:block">
	<div
		class="flex w-full min-w-[30rem] items-center justify-between gap-2 overflow-x-auto py-8"
	>
		{#each checkoutSteps as step, index}
			<div class="flex flex-1 items-center gap-2">
				<div
					class={cn(
						"flex items-center justify-center",
						index <= activeStepIndex
							? "cursor-pointer"
							: "cursor-not-allowed opacity-50",
					)}
					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 transition-colors",
							index <= activeStepIndex
								? "hover:bg-primary-600 border-brand-700 bg-primary text-white/60"
								: "border-gray-400 bg-gray-100 text-gray-700",
							index === activeStepIndex
								? "text-lg font-semibold text-white"
								: "",
						)}
					>
						{index + 1}
					</div>
					<span
						class={cn(
							"ml-2 hidden w-max text-sm md:block",
							index <= activeStepIndex
								? "font-semibold"
								: "text-gray-800",
						)}
					>
						{step.label}
					</span>
				</div>
				{#if index !== checkoutSteps.length - 1}
					<div
						class={cn(
							"h-0.5 w-full min-w-4 flex-1 border-t transition-colors",
							index <= activeStepIndex
								? "border-primary"
								: "border-gray-400",
						)}
					></div>
				{/if}
			</div>
		{/each}
	</div>
</div>
