'use client';

import { Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Button } from '@/features/shared/components/ui/button';
import { handleOAuthError } from '@/features/auth/lib/oauth';

/**
 * EN: OAuth error content component
 * VI: Component nội dung lỗi OAuth
 */
function OAuthErrorContent() {
  const router = useRouter();
  const searchParams = useSearchParams();

  // EN: Get error message from URL
  // VI: Lấy thông báo lỗi từ URL
  const errorMessage = searchParams.get('message') || 'Unknown error / Lỗi không xác định';
  const decodedError = handleOAuthError(errorMessage);

  /**
   * EN: Handle retry by redirecting to login page
   * VI: Xử lý thử lại bằng cách chuyển hướng đến trang đăng nhập
   */
  const handleRetry = () => {
    router.push('/login');
  };

  /**
   * EN: Handle go home redirect
   * VI: Xử lý chuyển hướng về trang chủ
   */
  const handleGoHome = () => {
    router.push('/');
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
      <div className="max-w-md w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 text-center">
        {/* EN: Error icon / VI: Icon lỗi */}
        <div className="text-red-500 mb-4">
          <svg
            className="w-16 h-16 mx-auto"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
        </div>

        {/* EN: Error title / VI: Tiêu đề lỗi */}
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          Authentication Error / Lỗi Xác Thực
        </h1>

        {/* EN: Error message / VI: Thông báo lỗi */}
        <p className="text-gray-600 dark:text-gray-300 mb-6">
          {decodedError}
        </p>

        {/* EN: Action buttons / VI: Các nút hành động */}
        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <Button
            onClick={handleRetry}
            variant="primary"
            className="w-full sm:w-auto"
          >
            Try Again / Thử Lại
          </Button>
          <Button
            onClick={handleGoHome}
            variant="secondary"
            className="w-full sm:w-auto"
          >
            Go Home / Về Trang Chủ
          </Button>
        </div>
      </div>
    </div>
  );
}

/**
 * EN: OAuth error page to display authentication errors
 * VI: Trang lỗi OAuth để hiển thị lỗi xác thực
 */
export default function OAuthErrorPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center">
          <div className="text-center">
            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
            <p className="text-lg">Loading... / Đang tải...</p>
          </div>
        </div>
      }
    >
      <OAuthErrorContent />
    </Suspense>
  );
}
