<script lang="ts">
	import ButtonLoadableText from "$lib/components/atoms/button-loadable-text.svelte";
	import Icon from "$lib/components/atoms/icon.svelte";
	import Title from "$lib/components/atoms/title.svelte";
	import Button from "$lib/components/ui/button/button.svelte";
	import { ckFlowVM } from "$lib/domains/ckflow/view/ckflow.vm.svelte";
	import { customerInfoVM } from "$lib/domains/customerinfo/view/customerinfo.vm.svelte";
	import { CheckoutStep } from "$lib/domains/order/data/entities";
	import { onMount } from "svelte";
	import { toast } from "svelte-sonner";
	import RightArrowIcon from "~icons/solar/arrow-right-broken";
	import { checkoutVM } from "../checkout.vm.svelte";
	import BillingDetailsForm from "./billing-details-form.svelte";
	import { billingDetailsVM } from "./billing.details.vm.svelte";
	import OrderSummary from "./order-summary.svelte";
	import PaymentForm from "./payment-form.svelte";
	import { paymentInfoVM } from "./payment.info.vm.svelte";

	async function goBack() {
		if ((await ckFlowVM.onBackToPIIBtnClick()) !== true) {
			return;
		}
		checkoutVM.checkoutStep = CheckoutStep.Initial;
	}

	async function handleSubmit() {
		const validatedData = await paymentInfoVM.validateAndSubmit();
		if (!validatedData) {
			return;
		}
		const validBillingInfo = billingDetailsVM.validatePII(
			billingDetailsVM.billingDetails,
		);
		if (!validBillingInfo) {
			return;
		}
		checkoutVM.continutingToNextStep = true;
		const out = await ckFlowVM.executePaymentStep();
		if (out !== true) {
			return;
		}
		setTimeout(() => {
			checkoutVM.continutingToNextStep = false;
			checkoutVM.checkoutStep = CheckoutStep.Verification;
		}, 1000);
	}

	$effect(() => {
		if (!ckFlowVM.flowId || !ckFlowVM.setupDone) return;
		if (!paymentInfoVM.cardDetails) return;

		paymentInfoVM.cardDetails.cardNumber;
		paymentInfoVM.cardDetails.cardholderName;
		paymentInfoVM.cardDetails.cvv;
		paymentInfoVM.cardDetails.expiry;

		// Always sync payment info regardless of validation status
		ckFlowVM.debouncePaymentInfoSync();
	});

	onMount(() => {
		window.scrollTo(0, 0);

		billingDetailsVM.validatePII(billingDetailsVM.billingDetails);
		if (billingDetailsVM.isPIIValid()) {
			console.log("Billing details are valid, not setting from initials");
			return;
		}
		if (!customerInfoVM.customerInfo) return;
		billingDetailsVM.setPII(customerInfoVM.customerInfo);
		billingDetailsVM.validatePII(billingDetailsVM.billingDetails);
		toast("Used billing details from initial info");
	});
</script>

<div class="flex flex-col gap-8">
	<div class="flex w-full flex-col gap-6">
		<Title size="h4" weight="medium">Order Summary</Title>
		<OrderSummary />
	</div>

	<div class="flex w-full flex-col gap-6 border-t border-gray-200 pt-8">
		<Title size="h4" weight="medium">Billing Details</Title>
		<BillingDetailsForm info={billingDetailsVM.billingDetails} />
	</div>

	<div class="flex w-full flex-col gap-6 border-t border-gray-200 pt-8">
		<Title size="h4" weight="medium">Payment Details</Title>
		<PaymentForm />
	</div>

	<div class="flex flex-col items-center justify-between gap-4 border-t border-gray-200 pt-6 md:flex-row">
		<Button variant="secondary" onclick={goBack} class="w-full md:w-max">
			<Icon icon={RightArrowIcon} cls="w-auto h-6 rotate-180" />
			Back
		</Button>

		<Button
			variant="default"
			onclick={handleSubmit}
			class="w-full md:w-max"
			disabled={checkoutVM.continutingToNextStep}
		>
			<ButtonLoadableText
				text="Confirm & Pay"
				loadingText="Processing info..."
				loading={checkoutVM.continutingToNextStep}
			/>
			<Icon icon={RightArrowIcon} cls="w-auto h-6" />
		</Button>
	</div>
</div>
