import { useState, useEffect, useCallback } 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';

type TrackerType = 'simple' | 'asset';

function TrackerTypeSelector({ onSelect }: { onSelect: (type: TrackerType) => void }) {
    return (
        <div className="space-y-6">
            <p className="text-red-400 font-mono text-sm uppercase tracking-wider">
                [SELECT] What do you want to track?
            </p>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <button
                    onClick={() => onSelect('simple')}
                    className="text-left border-2 border-red-500/50 bg-black p-6 hover:bg-red-950/30 hover:border-red-400 hover:shadow-[0_0_20px_rgba(239,68,68,0.3)] transition-all"
                >
                    <span className="block text-red-400 font-mono text-lg font-bold uppercase tracking-wider mb-3">
                        [01] Simple counter
                    </span>
                    <p className="text-red-400/60 font-mono text-xs">
                        Track anything you accumulate — no price tracking, no asset setup.
                    </p>
                </button>

                <button
                    onClick={() => onSelect('asset')}
                    className="text-left border-2 border-red-500/50 bg-black p-6 hover:bg-red-950/30 hover:border-red-400 hover:shadow-[0_0_20px_rgba(239,68,68,0.3)] transition-all"
                >
                    <span className="block text-red-400 font-mono text-lg font-bold uppercase tracking-wider mb-3">
                        [02] Asset tracker
                    </span>
                    <p className="text-red-400/60 font-mono text-xs">
                        Track holdings with price tracking and P&amp;L.
                    </p>
                </button>
            </div>
        </div>
    );
}

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

const ASSET_STEPS: 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 },
];

const SIMPLE_STEPS: OnboardingStep[] = [
    { id: 'purchases', 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 [trackerType, setTrackerType] = useState<TrackerType | null>(null);
    const [currentStep, setCurrentStep] = useState(0);
    const [steps, setSteps] = useState<OnboardingStep[]>([]);

    const checkOnboardingStatus = useCallback(async (currentSteps: OnboardingStep[]) => {
        try {
            const [purchaseData, milestonesData, assetData, priceData] = await Promise.all([
                fetch('/purchases/summary').then(r => r.json()),
                fetch('/milestones').then(r => r.json()),
                fetch('/assets/current').then(r => r.json()),
                fetch('/pricing/current').then(r => r.json()),
            ]);

            const hasPurchases = purchaseData.total_shares > 0;
            const hasMilestones = milestonesData.length > 0;
            const hasAsset = !!assetData.asset;
            const hasPrice = !!priceData.current_price;

            const freshSteps = currentSteps.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);
        }
    }, [onComplete]);

    useEffect(() => {
        if (trackerType === null) {
            return;
        }

        const initialSteps = trackerType === 'simple' ? SIMPLE_STEPS : ASSET_STEPS;
        setSteps(initialSteps);
        setCurrentStep(0);
        checkOnboardingStatus(initialSteps);
    }, [trackerType, checkOnboardingStatus]);

    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 '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">
                <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">
                            {trackerType === null ? 'Choose how you want to track' : 'Set up your tracker'}
                        </p>
                    </div>

                    {trackerType === null ? (
                        <div className="border border-red-500/30 bg-black/50 p-6">
                            <TrackerTypeSelector onSelect={setTrackerType} />
                        </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 ? '[✓]' : 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>

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