"use client";

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

function CancelContent() {
  const searchParams = useSearchParams();
  const token = searchParams.get("token");
  const [cancelled, setCancelled] = useState(false);

  useEffect(() => {
    if (token) {
      fetch("/ipv6/api/payments/cancel", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ token }),
      }).finally(() => setCancelled(true));
    } else {
      setCancelled(true);
    }
  }, [token]);

  return (
    <>
      {!cancelled && (
        <p className="mt-6 text-on-surface-variant text-xs opacity-60">
          Đang cập nhật trạng thái...
        </p>
      )}
    </>
  );
}

export default function RegistrationCancelPage() {
  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]">
        <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-yellow-400">
              cancel
            </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 đã bị hủy
          </h1>

          <p className="text-on-surface-variant text-base mb-8">
            Bạn đã hủy quá trình thanh toán. Đăng ký của bạn chưa được xác nhận.
          </p>

          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <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 thanh toán
            </Link>

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

          <Suspense fallback={null}>
            <CancelContent />
          </Suspense>
        </div>
      </div>
    </main>
  );
}