ipv6-sims/app/(site)/registration/success/page.tsx

"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";

function SuccessContent() {
  const searchParams = useSearchParams();
  const token = searchParams.get("token");
  const payerId = searchParams.get("PayerID");

  const [state, setState] = useState<"loading" | "success" | "error">("loading");
  const [registrationId, setRegistrationId] = useState<string | null>(null);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  useEffect(() => {
    if (!token || !payerId) {
      setState("error");
      setErrorMessage("Thiếu thông tin thanh toán.");
      return;
    }

    fetch("/ipv6/api/payments/capture", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ token, PayerID: payerId }),
    })
      .then(async (res) => {
        if (!res.ok) {
          const err = await res.json().catch(() => ({}));
          throw new Error(err?.error ?? "Capture thất bại.");
        }
        return res.json();
      })
      .then((data) => {
        setRegistrationId(data.registrationId);
        setState("success");
      })
      .catch((err) => {
        setErrorMessage(err.message);
        setState("error");
      });
  }, [token, payerId]);

  return (
    <>
      {state === "loading" && (
        <div className="glass-panel rounded-xl p-[48px] text-center">
          <div className="flex justify-center mb-6">
            <span className="material-symbols-outlined text-[48px] text-primary animate-spin">
              progress_activity
            </span>
          </div>
          <p className="text-on-surface-variant text-lg">
            Đang xử lý thanh toán của bạn...
          </p>
        </div>
      )}

      {state === "success" && (
        <div className="glass-panel rounded-xl p-[48px] text-center relative overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />

          <div className="flex justify-center mb-6">
            <span className="material-symbols-outlined text-[64px] text-green-400">
              check_circle
            </span>
          </div>

          <h1 className="font-[var(--font-display-lg)] text-[clamp(1.5rem,3vw,2rem)] text-on-surface mb-3 leading-[1.2]">
            Thanh toán thành công!
          </h1>

          <p className="text-on-surface-variant text-base mb-8">
            Cảm ơn bạn đã đăng ký tham dự IPv6 Summit.
          </p>

          <div className="bg-[var(--color-surface-container-high)] rounded-lg p-6 mb-8 text-left space-y-3">
            {registrationId && (
              <div className="flex items-center justify-between">
                <span className="text-on-surface-variant text-sm">Mã đăng ký</span>
                <span className="text-primary font-mono font-medium">
                  #{registrationId}
                </span>
              </div>
            )}
            <div className="flex items-center justify-between">
              <span className="text-on-surface-variant text-sm">Số tiền đã thanh toán</span>
              <span className="text-on-surface font-medium">$120 USD</span>
            </div>
          </div>

          <p className="text-on-surface-variant text-sm">
            Chúng tôi sẽ liên hệ với bạn qua email để xác nhận.
          </p>

          <div className="mt-8">
            <Link
              href="/"
              className="inline-flex items-center gap-2 text-primary hover:text-on-surface transition-colors text-sm"
            >
              <span className="material-symbols-outlined text-[18px]">home</span>
              Về trang chủ
            </Link>
          </div>
        </div>
      )}

      {state === "error" && (
        <div className="glass-panel rounded-xl p-[48px] text-center relative overflow-hidden">
          <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />

          <div className="flex justify-center mb-6">
            <span className="material-symbols-outlined text-[64px] text-red-400">
              error
            </span>
          </div>

          <h1 className="font-[var(--font-display-lg)] text-[clamp(1.5rem,3vw,2rem)] text-on-surface mb-3 leading-[1.2]">
            Có lỗi xảy ra
          </h1>

          {errorMessage && (
            <p className="text-on-surface-variant text-base mb-8">
              {errorMessage}
            </p>
          )}

          <Link
            href="/registration"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-lg gold-gradient-bg text-on-primary font-medium transition-opacity hover:opacity-90"
          >
            <span className="material-symbols-outlined text-[18px]">refresh</span>
            Thử lại đăng ký
          </Link>
        </div>
      )}
    </>
  );
}

export default function RegistrationSuccessPage() {
  return (
    <main className="min-h-screen bg-[var(--color-background)] flex items-center justify-center px-[var(--spacing-gutter)] py-[80px]">
      <div className="w-full max-w-[560px]">
        <Suspense
          fallback={
            <div className="glass-panel rounded-xl p-[48px] text-center">
              <div className="flex justify-center mb-6">
                <span className="material-symbols-outlined text-[48px] text-primary animate-spin">
                  progress_activity
                </span>
              </div>
              <p className="text-on-surface-variant text-lg">
                Đang tải...
              </p>
            </div>
          }
        >
          <SuccessContent />
        </Suspense>
      </div>
    </main>
  );
}