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

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

const errorMessages: Record<string, { title: string; description: string }> = {
  missing_token: {
    title: 'Missing Verification Link',
    description:
      'The verification link appears to be incomplete. Please click the link in your email again.',
  },
  invalid_token: {
    title: 'Invalid Verification Link',
    description:
      'This verification link is not valid. It may have already been used or the link is incorrect.',
  },
  token_expired: {
    title: 'Link Expired',
    description: 'This verification link has expired. Please request a new verification email.',
  },
  configuration: {
    title: 'Configuration Error',
    description: 'A server configuration error occurred. Please try again later.',
  },
  unknown: {
    title: 'Verification Failed',
    description: 'An unexpected error occurred during verification. Please try again.',
  },
};

/**
 * Verification Error Page
 *
 * Shown when email verification fails.
 * Displays appropriate error message based on error code.
 */
export default async function VerificationErrorPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const errorCode = params.error || 'unknown';
  const error = errorMessages[errorCode] || errorMessages.unknown;

  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)' }}
      >
        {/* Error Icon */}
        <div className="flex justify-center">
          <div
            className="w-20 h-20 rounded-full flex items-center justify-center"
            style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)' }}
          >
            <svg className="w-10 h-10" fill="none" stroke="#ef4444" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
          </div>
        </div>

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

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

        <div className="space-y-3 pt-4">
          <Link
            href="/auth/signin"
            className="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)',
            }}
          >
            Try Again
          </Link>

          <Link
            href="/"
            className="block w-full py-4 rounded-xl font-bold uppercase tracking-tight transition-all"
            style={{
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              color: 'var(--reg-text-white)',
            }}
          >
            Return Home
          </Link>
        </div>
      </div>
    </div>
  );
}