import { useEffect } from 'react';
import { useQuizFlow, useQuiz } from '../hooks';
import { router } from '@inertiajs/react';

interface QuizRouteGuardProps {
    children: React.ReactNode;
    requireAuth?: boolean;
    allowedStates?: string[];
}

export function QuizRouteGuard({
    children,
    requireAuth = true,
    allowedStates,
}: QuizRouteGuardProps) {
    const { token, sessionState, session, guest } = useQuiz();
    const { fetchSession } = useQuizFlow();

    useEffect(() => {
        const isVerifyOtpRoute = window.location.pathname === '/verify-otp';

        if (requireAuth && !token) {
            if (isVerifyOtpRoute && guest) {
                return;
            }
            router.visit('/');
            return;
        }

        if (token && !sessionState && !session) {
            fetchSession().catch(() => {
                router.visit('/');
            });
        }

        if (
            token &&
            sessionState &&
            allowedStates &&
            !allowedStates.includes(sessionState)
        ) {
            if (sessionState === 'new' || sessionState === 'in_progress') {
                router.visit('/quiz');
            } else if (sessionState === 'completed') {
                router.visit('/score');
            } else if (sessionState === 'unlocked') {
                router.visit('/offer');
            }
        }
    }, [
        token,
        sessionState,
        session,
        guest,
        requireAuth,
        allowedStates,
        fetchSession,
    ]);

    if (requireAuth && !token) {
        const isVerifyOtpRoute = window.location.pathname === '/verify-otp';
        if (isVerifyOtpRoute && guest) {
            return <>{children}</>;
        }
        return null;
    }

    if (
        allowedStates &&
        sessionState &&
        !allowedStates.includes(sessionState)
    ) {
        return null;
    }

    return <>{children}</>;
}