import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import MessageBox from "@Front/Components/Elements/MessageBox";
import SubscriptionClientInfos from "../Components/SubscriptionClientInfos";
import Button from "@Front/Components/DesignSystem/Button";
import { useCallback, useEffect, useState } from "react";
import { Subscription } from "le-coffre-resources/dist/Admin";
import JwtService from "@Front/Services/JwtService/JwtService";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
import SubscribeCheckoutTicket, { EPaymentFrequency } from "../Components/SubscribeCheckoutTicket";
import { EForfeitType } from "../SubscriptionFacturation";
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";

export default function SubscriptionError() {
	const [subscription, setSubscription] = useState<Subscription | null>(null);
	const [customer, setCustomer] = useState<any | null>(null);

	const loadSubscription = useCallback(async () => {
		const jwt = JwtService.getInstance().decodeJwt();
		const subscription = await Subscriptions.getInstance().get({ where: { office: { uid: jwt?.office_Id } } });
		if (!subscription[0]) return;
		setSubscription(subscription[0]);
		const customer = await Stripe.getInstance().getCustomerBySubscriptionId(subscription[0].stripe_subscription_id!);
		setCustomer(customer);
	}, []);

	const getFrequency = useCallback(() => {
		if (!subscription) return;
		const start = new Date(subscription.start_date);
		const end = new Date(subscription.end_date);

		const diffTime = Math.abs(end.getTime() - start.getTime());
		const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
		return diffDays >= 365 ? EPaymentFrequency.yearly : EPaymentFrequency.monthly;
	}, [subscription]);

	useEffect(() => {
		loadSubscription();
	}, [loadSubscription]);

	return (
		<DefaultTemplate title="Erreur à la souscription">
			{subscription && customer && (
				<div className={classes["root"]}>
					<div className={classes["left"]}>
						<div className={classes["title"]}>
							<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
								Paiement échoué
							</Typography>
						</div>
						<div className={classes["alert"]}>
							<MessageBox type={"error"}>
								Votre transaction n'a pas pu être complétée.
								<br />
								<br />
								Malheureusement, nous n'avons pas pu traiter votre paiement et votre abonnement n'a pas été activé. Veuillez
								vérifier vos informations de paiement et essayer à nouveau.
							</MessageBox>
						</div>
						<div className={classes["separator"]} />
						<div className={classes["client-infos"]}>
							<SubscriptionClientInfos customer={customer} />
						</div>
						<div className={classes["separator"]} />
						<Button>Réessayer le paiement</Button>
					</div>
					<div className={classes["right"]}>
						<SubscribeCheckoutTicket
							forfeitType={subscription.type === "STANDARD" ? EForfeitType.standard : EForfeitType.unlimited}
							numberOfCollaborators={subscription.nb_seats ?? 0}
							disableInputs
							defaultFrequency={getFrequency()}
						/>
					</div>
				</div>
			)}
		</DefaultTemplate>
	);
}