"use client";

import { useMemo } from "react";
import Link from "next/link";
import { useSearchParams } from "next/navigation";
import { PageBand, SiteShell } from "@/components/SiteShell";
import DonationStatusClient from "./[orderId]/DonationStatusClient";

export function DonateStatusPageClient() {
  const searchParams = useSearchParams();
  const orderId = searchParams.get("orderId");
  const params = useMemo(() => Promise.resolve({ orderId: orderId || "" }), [orderId]);

  if (!orderId) {
    return (
      <SiteShell>
        <PageBand className="flex min-h-[60vh] flex-col items-center justify-center text-center">
          <div className="flex max-w-md flex-col items-center gap-5 rounded-[12px] border border-[var(--color-hairline)] bg-white p-8 shadow-[var(--shadow-l1)]">
            <div className="grid h-20 w-20 place-items-center rounded-full bg-[var(--color-canvas-night)] text-4xl text-[var(--color-on-dark)]">
              !
            </div>
            <div>
              <h2 className="text-3xl text-[var(--color-ink)]" style={{ fontWeight: 500 }}>Payment Not Found</h2>
              <p className="mt-2 text-[var(--color-ink-mute)]">We couldn't find an order ID for this donation.</p>
            </div>
            <Link href="/donate" className="btn mt-2 w-full">
              Try Again
            </Link>
          </div>
        </PageBand>
      </SiteShell>
    );
  }

  return <DonationStatusClient params={params} />;
}