'use client';

import { useEffect, useState, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { useAuthStore } from '@/stores/auth-store';
import { getStoredRedirectUrl } from '@/features/auth/lib/oauth';

/**
 * EN: OAuth callback content component
 * VI: Component nội dung OAuth callback
 */
function OAuthCallbackContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { oauthLogin } = useAuthStore();
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    /**
     * EN: Handle OAuth callback with token from URL
     * VI: Xử lý OAuth callback với token từ URL
     */
    const handleCallback = async () => {
      try {
        // EN: Get token from URL query parameters
        // VI: Lấy token từ query parameters của URL
        const token = searchParams.get('token');

        if (!token) {
          throw new Error('No token provided / Không có token được cung cấp');
        }

        // EN: Authenticate with OAuth token
        // VI: Xác thực với OAuth token
        await oauthLogin(token);

        // EN: Get stored redirect URL or default to home
        // VI: Lấy redirect URL đã lưu hoặc mặc định về trang chủ
        const redirectUrl = getStoredRedirectUrl() || '/';

        // EN: Redirect to intended destination
        // VI: Chuyển hướng đến đích dự định
        router.push(redirectUrl);
      } catch (err: any) {
        console.error('OAuth callback error:', err);
        setError(err.message || 'Authentication failed / Xác thực thất bại');
        // EN: Redirect to error page after 3 seconds
        // VI: Chuyển hướng đến trang lỗi sau 3 giây
        setTimeout(() => {
          router.push(`/auth/error?message=${encodeURIComponent(err.message || 'Authentication failed')}`);
        }, 3000);
      }
    };

    handleCallback();
  }, [searchParams, router, oauthLogin]);

  // EN: Loading state while processing callback
  // VI: Trạng thái loading trong khi xử lý callback
  if (!error) {
    return (
      <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">Completing authentication... / Đang hoàn tất xác thực...</p>
        </div>
      </div>
    );
  }

  // EN: Error state
  // VI: Trạng thái lỗi
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <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>
        <p className="text-lg text-red-500 mb-2">Error / Lỗi</p>
        <p className="text-gray-600">{error}</p>
        <p className="text-sm text-gray-500 mt-4">
          Redirecting... / Đang chuyển hướng...
        </p>
      </div>
    </div>
  );
}

/**
 * EN: OAuth callback page to handle authentication after OAuth redirect
 * VI: Trang callback OAuth để xử lý xác thực sau khi redirect OAuth
 */
export default function OAuthCallbackPage() {
  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>
      }
    >
      <OAuthCallbackContent />
    </Suspense>
  );
}
