"use client";

import PriceDisplay from "@/components/ui/formattedPrice";
import { CheckCircle, ShoppingBag, ArrowRight, Loader2 } from "lucide-react";
import Link from "next/link";
import { useEffect, useState } from "react";

const OrderConfirmationPage = ({ params }: { params: { uuid: string } }) => {

    const { uuid } = params

    const [order, setOrder] = useState<OrdersType>()


    useEffect(() => {
        const fetchOrderDetails = async () => {
            try {
                const response = await fetch(`/api/checkout/order-placed/${uuid}`);
                if (!response.ok) {
                    throw new Error("Failed to fetch order details");
                }
                const data = await response.json();

                setOrder(data)
                
            } catch (error) {
                console.error("Error fetching order details:", error);
            }
        }

        fetchOrderDetails();
    }, [uuid])

    if (!order ) {
        return <Loader2 className="animate-spin h-10 w-10 text-gray-500 mx-auto mt-20" />
    }

    else {
            return (
        <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-4 py-16">
            {/* Confirmation Box */}
            <div className="bg-white rounded-3xl shadow-xl p-10 max-w-2xl w-full text-center space-y-6">
                <div className="flex justify-center">
                    <CheckCircle className="h-16 w-16 text-green-500" />
                </div>

                <h1 className="text-3xl font-extrabold text-gray-800">
                    Order Placed Successfully!
                </h1>

                <p className="text-gray-600 text-lg">
                    Thank you for your purchase. A confirmation email has been sent. Your order is now being processed.
                </p>

                <p className="text-gray-600 text-lg">
                     We&rsquo;ll call you to confirm the order.
                </p>

                {/* Summary */}
                <div className="bg-gray-100 rounded-xl px-6 py-5 text-left">
                    <p className="text-gray-800 text-sm">
                        <span className="font-semibold">Order#:</span> {uuid}
                    </p>
                    <p className="text-gray-800 text-sm">
                        <span className="font-semibold">Order placed on: </span>{order?.created_on ? new Date(order.created_on).toLocaleDateString() : "N/A"}
                    </p>
                    <p className="text-gray-800 text-sm">
                        <span className="font-semibold">Payment:</span> {order?.payment?.payment_method ?? "N/A"}
                    </p>
                    <p className="text-gray-800 text-sm">
                        <span className="font-semibold">Total:</span><PriceDisplay price={order?.payment.amount ?? 0} />
                    </p>
                </div>

                {/* Action Buttons */}
                <div className="flex flex-col sm:flex-row justify-center gap-4 pt-4">
                    <Link
                        href="/orders"
                        className="inline-flex items-center justify-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold px-6 py-3 rounded-full transition"
                    >
                        <ShoppingBag className="w-5 h-5" />
                        View My Orders
                    </Link>
                    <Link
                        href="/"
                        className="inline-flex items-center justify-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-800 text-sm font-semibold px-6 py-3 rounded-full transition"
                    >
                        Continue Shopping
                        <ArrowRight className="w-5 h-5" />
                    </Link>
                </div>
            </div>

            {/* Decorative */}
            <div className="mt-12 text-gray-400 text-sm">
                Need help? <Link href="/contact" className="underline hover:text-indigo-600">Contact Support</Link>
            </div>
        </div>
    )
    }

}

export default OrderConfirmationPage;