import type { ReactNode } from 'react';
import { Navigate, useParams } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const ProtectedRoute = ({ children }: { children: ReactNode }) => {
  const { user, loading, codeVerified, verificationLoading, hasProfile, profileLoading } = useAuth();
  const params = useParams();
  const lang = params.lang === 'en' ? 'en' : 'fr';

  if (loading || verificationLoading || profileLoading) {
    return (
      <section className="auth-page">
        <div className="auth-card">
          <p>{lang === 'fr' ? 'Chargement...' : 'Loading...'}</p>
        </div>
      </section>
    );
  }

  if (!user) {
    return <Navigate to={`/${lang}/login`} replace />;
  }

  if (!codeVerified) {
    return <Navigate to={`/${lang}/verify-auth`} replace />;
  }

  if (!hasProfile) {
    return <Navigate to={`/${lang}/profile-setup`} replace />;
  }

  return <>{children}</>;
};

export default ProtectedRoute;
