import Link from 'next/link';
import '@/app/styles/registration-theme.css';

interface PageProps {
  searchParams: Promise<{ callbackUrl?: string }>;
}

/**
 * Verification Success Page
 *
 * Shown after successful email verification.
 * User is already signed in at this point.
 *
 * If callbackUrl is present (user started from checkout flow),
 * shows "Continue to Checkout" and redirects to their original destination.
 * Otherwise shows "Choose Your Plan" and redirects to landing page.
 */
export default async function VerificationSuccessPage({ searchParams }: PageProps) {
  const { callbackUrl } = await searchParams;

  // Determine if user came from checkout flow (callbackUrl contains plan info)
  const hasCheckoutFlow = callbackUrl && callbackUrl.includes('plan=');

  // Only use callbackUrl if user is in checkout flow, otherwise always go to pricing
  // This prevents users who signed up without selecting a plan from bypassing Stripe
  const ctaHref = hasCheckoutFlow ? callbackUrl : '/';
  const ctaText = hasCheckoutFlow ? 'Continue to Checkout' : 'Choose Your Plan';
  const descriptionText = hasCheckoutFlow
    ? 'Your email has been verified successfully. You are now signed in and ready to complete your subscription.'
    : 'Your email has been verified successfully. You are now signed in and ready to choose your subscription plan.';

  return (
    <div
      className="min-h-screen flex items-center justify-center p-4"
      style={{ backgroundColor: '#000' }}
    >
      <div
        className="w-full max-w-md text-center space-y-6 p-10 rounded-3xl"
        style={{ backgroundColor: 'var(--reg-bg-navy)' }}
      >
        {/* Success Icon */}
        <div className="flex justify-center">
          <div
            className="w-20 h-20 rounded-full flex items-center justify-center"
            style={{ backgroundColor: 'rgba(34, 197, 94, 0.1)' }}
          >
            <svg className="w-10 h-10" fill="none" stroke="#22c55e" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
          </div>
        </div>

        <h1 className="text-3xl font-bold" style={{ color: 'var(--reg-text-white)' }}>
          Email Verified!
        </h1>

        <p style={{ color: 'var(--reg-text-muted)' }}>{descriptionText}</p>

        <Link
          href={ctaHref}
          className="inline-block w-full py-4 rounded-xl font-bold uppercase tracking-tight transition-all"
          style={{
            backgroundColor: 'var(--reg-accent-cyan)',
            color: 'var(--reg-bg-navy)',
          }}
        >
          {ctaText}
        </Link>
      </div>
    </div>
  );
}