"use client";

import { useEffect } from "react";
import { fetchWrapper } from "@/helpers/fetch-wrapper";
import { CheckCircle } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";

export default function PlacedOrder({ searchParams }) {
	const router = useRouter();

	const sessionId = searchParams.sessionId;
	const userID = searchParams.userID;

	useEffect(() => {
		if (!sessionId || !userID) return;

		async function fetchUserData() {
			try {
				const response = await fetchWrapper.post("/api/users/ordersuccess", {
					sessionId,
					userID,
				});

				setTimeout(() => {
					router.replace(response.page);
				}, 3000);
			} catch (error) {
				console.error("Failed to fetch user data", error);
			}
		}

		fetchUserData();
	}, [sessionId, userID, router]);

	return (
		<section className='min-h-[80vh] flex items-center justify-center bg-gray-50 px-4'>
			<div className='bg-white shadow-md rounded-2xl p-8 text-center max-w-xl w-full'>
				<CheckCircle className='mx-auto text-green-500 mb-6' size={80} />

				<h1 className='text-2xl font-semibold text-gray-800 mb-4'>
					Felicitări! Comanda ta a fost plasată cu succes 🎉
				</h1>
				<p className='text-gray-600 mb-6'>
					Îți mulțumim că ai ales magazinul nostru. Vei primi un email de confirmare în curând.
				</p>

				<p className='text-green-600 font-medium'>
					Între timp, poți urmări comanda din <Link href='/contul-meu'>contul tău</Link>.
				</p>
			</div>
		</section>
	);
}
