"use client";

import { Loader2, Lock, ShieldCheck } from "lucide-react";

export type PaymentVerifyingVariant = "payment" | "setup" | "checkout";

export interface PaymentVerifyingStateProps {
  variant?: PaymentVerifyingVariant;
  title?: string;
  message?: string;
  hintText?: string;
  secureBadgeText?: string;
  /** card = thank-you / pay panel; inline = compact block; fullscreen = centered on page background */
  layout?: "card" | "inline" | "fullscreen";
  className?: string;
}

const COPY: Record<
  PaymentVerifyingVariant,
  { title: string; message: string; hint: string; secure: string }
> = {
  payment: {
    title: "Verifying your payment",
    message:
      "Please wait while we securely confirm your transaction with our payment provider. This usually takes only a few moments.",
    hint: "Please do not close or refresh this page.",
    secure: "Secure payment verification",
  },
  setup: {
    title: "Verifying your account setup",
    message:
      "Please wait while we securely confirm your card setup with our payment provider.",
    hint: "Please do not close or refresh this page.",
    secure: "Secure verification",
  },
  checkout: {
    title: "Preparing secure checkout",
    message:
      "We are loading your payment session. Your card details will appear in a moment.",
    hint: "Please wait…",
    secure: "Encrypted connection",
  },
};

function ThemedLoader() {
  return (
    <div className="relative w-[72px] h-[72px] mb-6" aria-hidden>
      <div className="absolute inset-0 rounded-full bg-[#0097DC]/10 animate-pulse" />
      <div className="absolute inset-[6px] rounded-full border-[3px] border-[#0097DC]/25" />
      <div className="absolute inset-[6px] rounded-full border-[3px] border-[#0097DC] border-t-transparent animate-spin" />
      <div className="absolute inset-0 flex items-center justify-center">
        <div className="bg-white rounded-full p-2 shadow-sm border border-[#0097DC]/15">
          <Lock className="w-5 h-5 text-[#0097DC]" strokeWidth={2.25} />
        </div>
      </div>
    </div>
  );
}

function VerifyingContent({
  title,
  message,
  hintText,
  secureBadgeText,
}: {
  title: string;
  message: string;
  hintText: string;
  secureBadgeText: string;
}) {
  return (
    <>
      <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[#0097DC]/10 border border-[#0097DC]/20 mb-5">
        <ShieldCheck className="w-4 h-4 text-[#0097DC]" strokeWidth={2.25} />
        <span className="text-[12px] font-semibold uppercase tracking-wider text-[#0097DC] font-signika">
          {secureBadgeText}
        </span>
      </div>

      <ThemedLoader />

      <h2
        id="payment-verifying-title"
        className="text-[24px] md:text-[32px] font-bold text-[#58585A] font-signika mb-3 text-center leading-tight"
      >
        {title}
      </h2>

      <p className="text-[#828282] text-center font-signika text-[16px] md:text-[18px] max-w-[520px] leading-relaxed">
        {message}
      </p>

      <p className="text-[#0097DC]/80 text-center font-signika text-[14px] md:text-[15px] mt-5 font-medium">
        {hintText}
      </p>

      <div className="flex items-center gap-2 mt-6 text-[#828282]" aria-live="polite">
        <Loader2 className="w-4 h-4 animate-spin text-[#0097DC]" />
        <span className="text-[13px] font-signika">Processing…</span>
      </div>
    </>
  );
}

export default function PaymentVerifyingState({
  variant = "payment",
  title,
  message,
  hintText,
  secureBadgeText,
  layout = "card",
  className = "",
}: PaymentVerifyingStateProps) {
  const defaults = COPY[variant];
  const resolvedTitle = title ?? defaults.title;
  const resolvedMessage = message ?? defaults.message;
  const resolvedHint = hintText ?? defaults.hint;
  const resolvedSecure = secureBadgeText ?? defaults.secure;

  const inner = (
    <VerifyingContent
      title={resolvedTitle}
      message={resolvedMessage}
      hintText={resolvedHint}
      secureBadgeText={resolvedSecure}
    />
  );

  if (layout === "inline") {
    return (
      <div
        className={`flex flex-col items-center justify-center py-10 px-6 ${className}`}
        role="status"
        aria-live="polite"
        aria-busy="true"
      >
        {inner}
      </div>
    );
  }

  if (layout === "fullscreen") {
    return (
      <div
        className={`min-h-[50vh] flex flex-col items-center justify-center px-4 ${className}`}
        role="status"
        aria-live="polite"
        aria-busy="true"
      >
        <div className="flex flex-col items-center justify-center bg-white/90 backdrop-blur-sm border-2 border-[#0097DC]/20 rounded-[30px] p-6 md:p-14 max-w-[640px] w-full shadow-[6px_6px_14px_#00000010]">
          {inner}
        </div>
      </div>
    );
  }

  return (
    <div
      className={`flex flex-col items-center justify-center w-full max-w-[1100px] mx-auto box-border bg-white/60 backdrop-blur-sm border-2 border-[#0097DC]/20 rounded-[30px] p-10 md:p-16 shadow-[6px_6px_14px_#00000010] ${className}`}
      role="status"
      aria-live="polite"
      aria-busy="true"
    >
      {inner}
    </div>
  );
}