import Link from 'next/link';

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

/**
 * OAuth Error Page
 *
 * Displays user-friendly error messages for OAuth authentication failures.
 * Shows generic messages to users while detailed errors are logged server-side.
 *
 * Design System:
 * - Uses registration theme color tokens from app/styles/registration-theme.css
 * - Follows Inter font family from app/layout.tsx
 * - Responsive breakpoints: mobile-first, tablet (md:), desktop (lg:)
 */
export default async function AuthErrorPage({ searchParams }: PageProps) {
  const params = await searchParams;
  const errorCode = params.error || 'Unknown';

  // Map error codes to user-friendly messages
  const errorMessages: Record<string, { title: string; description: string; action: string }> = {
    Configuration: {
      title: 'Authentication Configuration Error',
      description:
        'There was a problem with the authentication setup. This is likely a temporary issue.',
      action: 'Please try again in a few moments. If the problem persists, contact support.',
    },
    SignInError: {
      title: 'Sign-In Failed',
      description: 'We were unable to complete your sign-in request.',
      action: 'Please try signing in again. If you continue to experience issues, contact support.',
    },
    CreateUserError: {
      title: 'Account Creation Failed',
      description: 'We were unable to create your account at this time.',
      action: 'Please try again. If the problem persists, contact support.',
    },
    LinkAccountError: {
      title: 'Account Linking Failed',
      description: 'We were unable to link your OAuth account to your existing account.',
      action: 'Please try signing in again. If you continue to experience issues, contact support.',
    },
    DatabaseError: {
      title: 'Database Error',
      description: 'A temporary database error occurred during sign-in.',
      action: 'Please try again in a few moments. If the problem persists, contact support.',
    },
    OAuthAccountNotLinked: {
      title: 'Account Not Linked',
      description: 'This OAuth account is not linked to any user account.',
      action: 'Please sign in with a different method or contact support for assistance.',
    },
    OAuthCallback: {
      title: 'OAuth Callback Error',
      description: 'There was an error during the OAuth authentication process.',
      action: 'Please try signing in again. Make sure pop-ups are not blocked.',
    },
    AccessDenied: {
      title: 'Access Denied',
      description: 'You denied access to your account information.',
      action: 'To continue, please sign in and allow access to your profile information.',
    },
    Verification: {
      title: 'Verification Error',
      description: 'The verification token is invalid or has expired.',
      action: 'Please request a new verification link.',
    },
    SessionError: {
      title: 'Session Validation Failed',
      description:
        'Your session could not be validated. This may indicate a corrupted session or configuration issue.',
      action:
        'Please sign in again. If the problem persists, try clearing your browser cookies or contact support.',
    },
    Default: {
      title: 'Authentication Error',
      description: 'An unexpected error occurred during authentication.',
      action: 'Please try again. If the problem persists, contact support.',
    },
  };

  const error = errorMessages[errorCode] || errorMessages.Default;

  return (
    <div
      className="min-h-screen flex flex-col items-center justify-center p-4 sm:p-6 md:p-8"
      style={{ backgroundColor: 'var(--reg-bg-navy, #020618)' }}
      role="alert"
      aria-live="assertive"
    >
      <div className="w-full max-w-md space-y-6 md:space-y-8 text-center">
        {/* Error Icon */}
        <div className="flex justify-center">
          <div
            className="w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center"
            style={{ backgroundColor: 'rgba(239, 68, 68, 0.1)' }}
            aria-hidden="true"
          >
            <svg
              className="w-8 h-8 md:w-10 md:h-10"
              fill="none"
              stroke="#EF4444"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <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>

        {/* Error Message */}
        <div className="space-y-3 md:space-y-4">
          <h1
            className="text-2xl md:text-3xl lg:text-4xl font-bold leading-tight"
            style={{ color: 'var(--reg-text-white, #FFFFFF)' }}
          >
            {error.title}
          </h1>
          <p
            className="text-base md:text-lg leading-relaxed"
            style={{ color: 'var(--reg-text-muted, rgba(255, 255, 255, 0.7))' }}
          >
            {error.description}
          </p>
          <p
            className="text-sm md:text-base leading-relaxed"
            style={{ color: 'var(--reg-text-muted, rgba(255, 255, 255, 0.7))' }}
          >
            {error.action}
          </p>
        </div>

        {/* Error Code (for debugging) */}
        <div className="pt-2 md:pt-4">
          <p
            className="text-xs md:text-sm font-mono opacity-75"
            style={{ color: 'var(--reg-text-muted, rgba(255, 255, 255, 0.7))' }}
          >
            Error Code: {errorCode}
          </p>
        </div>

        {/* Action Buttons */}
        <div className="space-y-3 pt-2 md:pt-4">
          <Link
            href="/auth/signin"
            className="block w-full py-3 md:py-3.5 px-4 rounded-lg font-semibold transition-all duration-200 hover:opacity-90 hover:shadow-lg active:scale-[0.98]"
            style={{
              backgroundColor: 'var(--reg-accent-sky, #38BDF8)',
              color: 'var(--reg-bg-navy, #020618)',
            }}
            aria-label="Try signing in again"
          >
            Try Again
          </Link>
          <Link
            href="/"
            className="block w-full py-3 md:py-3.5 px-4 rounded-lg font-semibold transition-all duration-200 hover:bg-white/15 active:scale-[0.98]"
            style={{
              backgroundColor: 'rgba(255, 255, 255, 0.1)',
              color: 'var(--reg-text-white, #FFFFFF)',
            }}
            aria-label="Return to home page"
          >
            Return Home
          </Link>
        </div>

        {/* Support Link */}
        <div className="pt-4 md:pt-6">
          <p
            className="text-sm md:text-base"
            style={{ color: 'var(--reg-text-muted, rgba(255, 255, 255, 0.7))' }}
          >
            Need help?{' '}
            <a
              href="mailto:team-amsoil-dlp@aimclear.com"
              className="underline hover:no-underline transition-all"
              style={{ color: 'var(--reg-accent-sky, #38BDF8)' }}
              aria-label="Contact support via email"
            >
              Contact Support
            </a>
          </p>
        </div>
      </div>
    </div>
  );
}