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

import { useState, useEffect } from 'react';
import AssetSetupForm from '@/components/Assets/AssetSetupForm';
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';

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

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

export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
    const [currentStep, setCurrentStep] = useState(0);
    const [steps, setSteps] = useState<OnboardingStep[]>([
        {
            id: 'asset',
            title: 'SET ASSET',
            description: 'Choose the asset you want to track',
            completed: false,
            required: true,
        },
        {
            id: 'purchases',
            title: 'ADD PURCHASES',
            description: 'Enter your current holdings',
            completed: false,
            required: true,
        },
        {
            id: 'milestones',
            title: 'SET MILESTONES',
            description: 'Define your investment goals',
            completed: false,
            required: true,
        },
        {
            id: 'price',
            title: 'CURRENT PRICE',
            description: 'Set current asset price',
            completed: false,
            required: true,
        },
    ]);

    // Check onboarding status on mount
    useEffect(() => {
        checkOnboardingStatus();
    }, []);

    const checkOnboardingStatus = async () => {
        try {
            // Check asset
            const assetResponse = await fetch('/assets/current');
            const assetData = await assetResponse.json();
            const hasAsset = !!assetData.asset;

            // Check purchases
            const purchaseResponse = await fetch('/purchases/summary');
            const purchaseData = await purchaseResponse.json();
            const hasPurchases = purchaseData.total_shares > 0;

            // Check milestones
            const milestonesResponse = await fetch('/milestones');
            const milestonesData = await milestonesResponse.json();
            const hasMilestones = milestonesData.length > 0;

            // Check current price
            const priceResponse = await fetch('/pricing/current');
            const priceData = await priceResponse.json();
            const hasPrice = !!priceData.current_price;

            setSteps(prev => prev.map(step => ({
                ...step,
                completed: 
                    (step.id === 'asset' && hasAsset) ||
                    (step.id === 'purchases' && hasPurchases) ||
                    (step.id === 'milestones' && hasMilestones) ||
                    (step.id === 'price' && hasPrice)
            })));

            // Find first incomplete required step
            const firstIncompleteStep = steps.findIndex(step => 
                step.required && !step.completed
            );
            
            if (firstIncompleteStep !== -1) {
                setCurrentStep(firstIncompleteStep);
            } else {
                // All required steps complete, check if we should call onComplete
                const allRequiredComplete = steps.filter(s => s.required).every(s => s.completed);
                if (allRequiredComplete && onComplete) {
                    onComplete();
                }
            }
        } catch (error) {
            console.error('Failed to check onboarding status:', error);
        }
    };

    const handleStepComplete = async () => {
        // Mark current step as completed
        setSteps(prev => prev.map((step, index) => 
            index === currentStep ? { ...step, completed: true } : step
        ));

        // Refresh onboarding status
        await checkOnboardingStatus();

        // Move to next incomplete step or complete onboarding
        const nextIncompleteStep = steps.findIndex((step, index) => 
            index > currentStep && step.required && !step.completed
        );

        if (nextIncompleteStep !== -1) {
            setCurrentStep(nextIncompleteStep);
        } else {
            // All required steps complete
            const allRequiredComplete = steps.filter(s => s.required).every(s => s.completed);
            if (allRequiredComplete && onComplete) {
                onComplete();
            }
        }
    };

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

    const renderStepContent = () => {
        const step = steps[currentStep];
        
        switch (step.id) {
            case 'asset':
                return (
                    <AssetSetupForm 
                        onSuccess={handleStepComplete}
                    />
                );
            case 'purchases':
                return (
                    <AddPurchaseForm 
                        onSuccess={handleStepComplete}
                    />
                );
            case 'milestones':
                return (
                    <AddMilestoneForm 
                        onSuccess={handleStepComplete}
                    />
                );
            case 'price':
                return (
                    <UpdatePriceForm 
                        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">
                {/* Terminal-style border with red glow */}
                <div className="border-2 border-red-500 bg-black shadow-[0_0_20px_rgba(239,68,68,0.3)] p-8">
                    {/* Header */}
                    <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">
                            Initialize your asset tracking system
                        </p>
                    </div>

                    {/* Progress indicator */}
                    <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 ? '[✓]' : step.required ? '[REQ]' : '[OPT]'} {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>

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

                    {/* Status footer */}
                    <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.required && !s.completed).length} REQUIRED REMAINING
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}