incr/resources/js/components/Onboarding/OnboardingFlow.tsx

import { useState, useEffect, useCallback } from 'react';
import AddEntryForm from '@/components/Transactions/AddEntryForm';
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import CreateTrackerStep from '@/components/Onboarding/CreateTrackerStep';

interface OnboardingStep {
    id: string;
    title: string;
    description: string;
    completed: boolean;
    required: boolean;
}

const STEPS: OnboardingStep[] = [
    { id: 'entries', title: 'STARTING AMOUNT', description: 'Enter your starting amount', completed: false, required: true },
    { id: 'milestones', title: 'SET MILESTONES', description: 'Define your goals', completed: false, required: true },
];

interface OnboardingFlowProps {
    onComplete?: () => void;
}

export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
    const [trackerCreated, setTrackerCreated] = useState(false);
    const [currentStep, setCurrentStep] = useState(0);
    const [steps, setSteps] = useState<OnboardingStep[]>([]);

    // On mount: check if a tracker already exists and skip step 1 if so
    useEffect(() => {
        fetch('/tracker')
            .then(r => r.ok ? r.json() : null)
            .then(data => {
                if (data?.tracker) {
                    setTrackerCreated(true);
                }
            })
            .catch(() => {});
    }, []);

    const checkOnboardingStatus = useCallback(async (currentSteps: OnboardingStep[]) => {
        try {
            const [entriesData, milestonesData] = await Promise.all([
                fetch('/entries/summary').then(r => r.json()),
                fetch('/milestones').then(r => r.json()),
            ]);

            const hasEntries = entriesData.total_quantity > 0;
            const hasMilestones = milestonesData.length > 0;

            const freshSteps = currentSteps.map(step => ({
                ...step,
                completed:
                    (step.id === 'entries' && hasEntries) ||
                    (step.id === 'milestones' && hasMilestones),
            }));

            setSteps(freshSteps);

            const firstIncompleteRequired = freshSteps.findIndex(s => s.required && !s.completed);

            if (firstIncompleteRequired !== -1) {
                setCurrentStep(firstIncompleteRequired);
            } else if (onComplete) {
                onComplete();
            }
        } catch (error) {
            console.error('Failed to check onboarding status:', error);
        }
    }, [onComplete]);

    useEffect(() => {
        if (!trackerCreated) return;

        setSteps(STEPS);
        setCurrentStep(0);
        checkOnboardingStatus(STEPS);
    }, [trackerCreated, checkOnboardingStatus]);

    const handleTrackerCreated = () => {
        setTrackerCreated(true);
    };

    const handleStepComplete = async () => {
        const updatedSteps = steps.map((step, index) =>
            index === currentStep ? { ...step, completed: true } : step
        );
        setSteps(updatedSteps);
        await checkOnboardingStatus(updatedSteps);
    };

    const handleStepSelect = (stepIndex: number) => {
        setCurrentStep(stepIndex);
    };

    const renderStepContent = () => {
        const step = steps[currentStep];
        if (!step) return null;

        switch (step.id) {
            case 'entries':
                return <AddEntryForm onSuccess={handleStepComplete} />;
            case 'milestones':
                return <AddMilestoneForm onSuccess={handleStepComplete} />;
            default:
                return null;
        }
    };

    return (
        <div className="min-h-screen bg-black flex items-center justify-center p-4">
            <div className="w-full max-w-4xl">
                <div className="border-2 border-red-500 bg-black shadow-[0_0_20px_rgba(239,68,68,0.3)] p-8">
                    <div className="mb-8">
                        <h1 className="text-red-400 font-mono text-2xl font-bold uppercase tracking-wider mb-2">
                            [SYSTEM] ONBOARDING SEQUENCE
                        </h1>
                        <p className="text-red-400/60 font-mono text-sm">
                            {!trackerCreated ? 'Set up your tracker' : 'Configure your tracker'}
                        </p>
                    </div>

                    {!trackerCreated ? (
                        <div className="border border-red-500/30 bg-black/50 p-6">
                            <CreateTrackerStep onSuccess={handleTrackerCreated} />
                        </div>
                    ) : (
                        <>
                            <div className="mb-8">
                                <div className="flex items-center justify-between mb-4">
                                    {steps.map((step, index) => (
                                        <button
                                            key={step.id}
                                            onClick={() => handleStepSelect(index)}
                                            className={`flex-1 px-4 py-2 font-mono text-xs uppercase tracking-wider border border-red-500/50 transition-all ${
                                                index === currentStep
                                                    ? 'bg-red-500 text-black border-red-500'
                                                    : step.completed
                                                        ? 'bg-red-950/50 text-red-300 border-red-400'
                                                        : 'bg-black text-red-400/60 hover:text-red-400 hover:border-red-400'
                                            } ${index > 0 ? 'ml-2' : ''}`}
                                        >
                                            {step.completed ? '[✓]' : '[REQ]'} {step.title}
                                        </button>
                                    ))}
                                </div>

                                <div className="text-center">
                                    <p className="text-red-400 font-mono text-sm">
                                        {steps[currentStep]?.description}
                                    </p>
                                    <p className="text-red-400/60 font-mono text-xs mt-1">
                                        STEP {currentStep + 1}/{steps.length}
                                    </p>
                                </div>
                            </div>

                            <div className="border border-red-500/30 bg-black/50 p-6">
                                {renderStepContent()}
                            </div>

                            <div className="mt-6 pt-4 border-t border-red-500/30">
                                <div className="flex justify-between items-center">
                                    <p className="text-red-400/60 font-mono text-xs">
                                        [STATUS] {steps.filter(s => s.completed).length}/{steps.length} STEPS COMPLETE
                                    </p>
                                    <p className="text-red-400/60 font-mono text-xs">
                                        {steps.filter(s => !s.completed).length} REQUIRED REMAINING
                                    </p>
                                </div>
                            </div>
                        </>
                    )}
                </div>
            </div>
        </div>
    );
}