"use client";

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

export default function RegistrationSuccessPage() {
  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 (
    <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]">
        {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>
        )}
      </div>
    </main>
  );
}