"use client";

/* eslint-disable @next/next/no-img-element */
import Image from "next/image";
import Link from "next/link";
import {
	BsArrowRepeat,
	BsBookFill,
	BsCardChecklist,
	BsClipboardFill,
	BsClock,
	BsClockFill,
	BsFacebook,
	BsFillBookFill,
	BsInstagram,
	BsSearch,
	BsShieldFillCheck,
	BsTwitter,
} from "react-icons/bs";
import {BiLogoFacebook} from "react-icons/bi";
import {useEffect, useState} from "react";
import axios from "axios";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

export default function Home() {
	const [isValid, setIsValid] = useState(true);
	const [isLoading, setIsLoading] = useState(false);

	useEffect(() => {
		(async () => {
			const search = new URLSearchParams(window.location.search);
			const id = search.get("id");
			const product = search.get("product");

			if (!id || !product) {
				setIsValid(false);
				setIsLoading(false);
				return;
			}

			const request = await axios.post("/api/success", {id, product});
			if (request.status === 200) {
				setIsValid(true);
				setIsLoading(false);
				return;
			}

			setIsValid(false);
			setIsLoading(false);
		})();
	}, []);

	return (
		<main className="h-screen w-full bg-white text-mti-black flex flex-col">
			<Navbar currentPage="/success" language="en" />

			<section className="w-full h-full relative bg-white py-32 flex flex-col items-center justify-center text-center gap-4">
				{isLoading && (
					<div className="flex items-center justify-center flex-col gap-8">
						<BsArrowRepeat className="text-mti-purple-light animate-spin" size={48} />
						<h2 className="text-xl font-bold">Loading...</h2>
					</div>
				)}
				{!isLoading && (
					<div className="flex items-center justify-center flex-col gap-8">
						<div className="flex flex-col gap-1">
							<h1 className="text-xl font-bold">Congratulations!</h1>
							<span className="text-xl font-bold">You are now a member at EnCoach!</span>
						</div>
						<div className="flex flex-col gap-1">
							<span>
								You should receive an e-mail in your inbox (make sure to check your spam folder) with a code to register to the app
							</span>
							<span>Or, if already registered, more time should have been added to your account</span>
						</div>
						<Link href="https://platform.encoach.com">
							<button className="bg-mti-purple-light hover:bg-mti-purple text-white rounded-xl px-8 py-4 transition ease-in-out duration-300 shadow">
								Get ready to train for your IELTS exam!
							</button>
						</Link>
					</div>
				)}
			</section>

			<Footer language="en" />
		</main>
	);
}
