"use client";

import { useSearchParams, useRouter } from "next/navigation";
import Link from "next/link";
import { Suspense } from "react";
import { GlassContainer } from "@/components/ui/GlassContainer";

const errorMessages: Record<string, { title: string; message: string }> = {
  InvalidToken: {
    title: "Invalid Verification Link",
    message: "This verification link is invalid or has already been used.",
  },
  TokenExpired: {
    title: "Verification Link Expired",
    message: "This verification link has expired. Please request a new one.",
  },
  VerificationFailed: {
    title: "Verification Failed",
    message: "An error occurred during verification. Please try again.",
  },
  Default: {
    title: "Authentication Error",
    message: "An error occurred. Please try again or contact support.",
  },
};

function AuthErrorContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const error = searchParams.get("error") || "Default";
  const errorInfo = errorMessages[error] || errorMessages.Default;

  return (
    <>
      <div className="text-center mb-8">
        <h1 className="text-2xl font-bold text-white">{errorInfo.title}</h1>
        <p className="text-gray-400 mt-1">{errorInfo.message}</p>
      </div>

      <GlassContainer intensity="default" className="p-8">
        <div className="space-y-4">
          {error === "TokenExpired" && (
            <button
              onClick={() => router.push("/auth/register")}
              className="w-full py-2.5 px-4 bg-violet-600 hover:bg-violet-500 text-white font-medium rounded-lg transition shadow-lg shadow-violet-600/20"
            >
              Request New Verification Link
            </button>
          )}

          <Link href="/auth/login">
            <button className="w-full py-2.5 px-4 bg-white/5 border border-white/10 hover:bg-white/10 hover:border-white/20 text-white font-medium rounded-lg transition">
              Back to Login
            </button>
          </Link>
        </div>
      </GlassContainer>
    </>
  );
}

export default function AuthErrorPage() {
  return (
    <Suspense
      fallback={
        <div className="text-center text-gray-400">Loading...</div>
      }
    >
      <AuthErrorContent />
    </Suspense>
  );
}
