import { Suspense } from "react";
import { ShieldCheck, Loader2 } from "lucide-react";
import { PaymentVerification } from "@/app/(dashboard)/dashboard/student/history/student-payments/make-payments/components/payment-verification";
import { TransRefForm } from "./components/TransRefForm";
import { verifySession } from "@/lib/server.utils";
import { loginSessionKey } from "@/lib/definitions";

interface PaymentVerifyPageProps {
    searchParams: Promise<{ transRef?: string }>;
}

export const dynamic = 'force-dynamic';

export default async function PaymentVerifyPage({
    searchParams,
}: PaymentVerifyPageProps) {
    const session = await verifySession(loginSessionKey);
    const params = await searchParams;
    const transRef = params?.transRef;

    const hasTransRef = Boolean(transRef);

    if (!session.access_token) {
        return (
            <div className="mt-20 min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-100 flex items-center justify-center">
                <div className="max-w-lg mx-auto px-4 py-10">
                    <p className="text-center text-sm text-slate-500">
                        You must be logged in to verify a payment. Please{" "}
                        <a
                            href="/auth/signin?callbackUrl=/admission/payments/verify"
                            className="text-blue-500 hover:underline"
                        >
                            log in
                        </a>{" "}
                        and try again.
                    </p>
                </div>
            </div>
        );
    }

    return (
        <div className="mt-20 min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-100 flex items-center justify-center">
            <div className="max-w-lg mx-auto px-4 py-10">
                {/* Header */}
                <div className="flex items-center gap-3 mb-8">
                    <div className="h-10 w-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-md shadow-blue-200">
                        <ShieldCheck className="h-5 w-5 text-white" />
                    </div>
                    <div>
                        <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
                            Payment Verification
                        </h1>
                        <p className="text-sm text-slate-500">
                            {hasTransRef
                                ? "Confirming your transaction"
                                : "Enter your transaction reference to verify"}
                        </p>
                    </div>
                </div>

                {/* Verification card */}
                <div className="bg-white rounded-2xl shadow-sm shadow-slate-200/80 border border-slate-100 overflow-hidden">
                    {hasTransRef ? (
                        <Suspense
                            fallback={
                                <div className="flex flex-col items-center justify-center py-16 gap-4">
                                    <Loader2 className="h-8 w-8 text-blue-500 animate-spin" />
                                    <p className="text-sm text-slate-500">Initialising…</p>
                                </div>
                            }
                        >
                            <PaymentVerification transRef={transRef!} />
                        </Suspense>
                    ) : (
                        <TransRefForm />
                    )}
                </div>

                {/* Footer */}
                <p className="text-center text-xs text-slate-400 mt-6">
                    Having issues? Contact{" "}
                    <a
                        href="mailto:finance@university.edu.ng"
                        className="text-blue-500 hover:underline"
                    >
                        support@qverselearning.org
                    </a>{" "}
                    with your transaction reference.
                </p>
            </div>
        </div>
    );
}