import { useRef } from 'react';
import {
    TourCompletionDialog,
    TourWelcomeDialog,
} from '@/components/application-tour/tour-dialogs';
import { TourReplayButton } from '@/components/application-tour/tour-replay-button';
import { TourSpotlightOverlay } from '@/components/application-tour/tour-spotlight-overlay';
import { TourStepPopover } from '@/components/application-tour/tour-step-popover';
import { useApplicationTour } from '@/hooks/use-application-tour';
import { useTourTargetRect } from '@/hooks/use-tour-target-rect';

export function ApplicationTour() {
    const startingTourRef = useRef(false);
    const {
        auth,
        currentStep,
        goBack,
        goNext,
        isLastStep,
        isPreparingStep,
        isTourActive,
        phase,
        replayButtonRef,
        setPhase,
        showSkippedBadge,
        skipTour,
        startTour,
        stepIndex,
        steps,
    } = useApplicationTour();

    const targetRect = useTourTargetRect(
        currentStep?.selector ?? null,
        isTourActive && !isPreparingStep,
    );

    if (!auth.user) {
        return null;
    }

    return (
        <>
            <TourReplayButton
                buttonRef={replayButtonRef}
                hidden={isTourActive || phase === 'welcome'}
                onClick={() => void startTour()}
                showPulse={showSkippedBadge}
            />

            <TourWelcomeDialog
                open={phase === 'welcome'}
                onOpenChange={(open) => {
                    if (!open && !startingTourRef.current) {
                        skipTour();
                    }

                    if (!open) {
                        startingTourRef.current = false;
                    }
                }}
                onStart={() => {
                    startingTourRef.current = true;
                    void startTour();
                }}
                onSkip={skipTour}
            />

            <TourCompletionDialog
                open={phase === 'completion'}
                onClose={() => setPhase('idle')}
            />

            {isTourActive && currentStep && (
                <>
                    <TourSpotlightOverlay rect={targetRect} />
                    <TourStepPopover
                        currentStep={currentStep}
                        isLastStep={isLastStep}
                        isPreparingStep={isPreparingStep}
                        onBack={goBack}
                        onNext={goNext}
                        onSkip={skipTour}
                        rect={targetRect}
                        stepIndex={stepIndex}
                        totalSteps={steps.length}
                    />
                </>
            )}
        </>
    );
}