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';

function PriceTrackingStep({ onEnable, onSkip }: { onEnable: () => void; onSkip?: () => void }) {
    const [enabled, setEnabled] = useState(false);

    return (
        <div className="space-y-6">
            <label className="flex items-center gap-3 cursor-pointer group">
                <input
                    type="checkbox"
                    checked={enabled}
                    onChange={e => setEnabled(e.target.checked)}
                    className="w-4 h-4 accent-red-500"
                />
                <span className="text-red-400 font-mono text-sm uppercase tracking-wider group-hover:text-red-300">
                    Enable price tracking (optional)
                </span>
            </label>
            <p className="text-red-400/60 font-mono text-xs">
                Track the current market price of your asset to see portfolio value and P&amp;L. You can enable this later in settings.
            </p>

            {enabled && (
                <div className="border border-red-500/30 p-4">
                    <UpdatePriceForm onSuccess={onEnable} />
                </div>
            )}

            {!enabled && (
                <button
                    onClick={onSkip}
                    className="w-full py-2 font-mono text-xs uppercase tracking-wider border border-red-500/50 text-red-400 hover:bg-red-950/30 hover:text-red-300 transition-colors"
                >
                    Skip and finish
                </button>
            )}
        </div>
    );
}

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 goals',
            completed: false,
            required: true,
        },
        {
            id: 'price',
            title: 'CURRENT PRICE',
            description: 'Set current asset price (optional)',
            completed: false,
            required: false,
        },
    ]);

    // 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;

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

            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);
        }
    };

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

        // Refresh onboarding status — handles setCurrentStep and onComplete
        await checkOnboardingStatus();
    };

    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 (
                    <PriceTrackingStep
                        onEnable={handleStepComplete}
                        onSkip={onComplete}
                    />
                );
            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">
                            Set up your tracker
                        </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>
    );
}