incr/resources/js/pages/dashboard.tsx

import LedDisplay from '@/components/Display/LedDisplay';
import InlineForm from '@/components/Display/InlineForm';
import ProgressBar from '@/components/Display/ProgressBar';
import StatsBox from '@/components/Display/StatsBox';
import OnboardingFlow from '@/components/Onboarding/OnboardingFlow';
import { Head } from '@inertiajs/react';
import { useEffect, useState } from 'react';

interface PurchaseSummary {
    total_shares: number;
    total_investment: number;
    average_cost_per_share: number;
}

interface CurrentPrice {
    current_price: number | null;
}

interface Milestone {
    target: number;
    description: string;
    created_at: string;
}

export default function Dashboard() {
    const [purchaseData, setPurchaseData] = useState<PurchaseSummary>({
        total_shares: 0,
        total_investment: 0,
        average_cost_per_share: 0,
    });

    const [priceData, setPriceData] = useState<CurrentPrice>({
        current_price: null,
    });

    const [milestones, setMilestones] = useState<Milestone[]>([]);
    const [selectedMilestoneIndex, setSelectedMilestoneIndex] = useState(0);
    const [showProgressBar, setShowProgressBar] = useState(false);
    const [showStatsBox, setShowStatsBox] = useState(false);
    const [activeForm, setActiveForm] = useState<'purchase' | 'milestone' | 'price' | null>(null);
    const [loading, setLoading] = useState(true);
    const [needsOnboarding, setNeedsOnboarding] = useState(false);
    const [currentAsset, setCurrentAsset] = useState<any>(null);

    // Fetch purchase summary, current price, milestones, and check onboarding
    useEffect(() => {
        const fetchData = async () => {
            try {
                const [purchaseResponse, priceResponse, milestonesResponse, assetResponse] = await Promise.all([
                    fetch('/purchases/summary'),
                    fetch('/pricing/current'),
                    fetch('/milestones'),
                    fetch('/assets/current'),
                ]);

                if (purchaseResponse.ok) {
                    const purchases = await purchaseResponse.json();
                    setPurchaseData(purchases);
                }

                if (priceResponse.ok) {
                    const price = await priceResponse.json();
                    setPriceData(price);
                }

                if (milestonesResponse.ok) {
                    const milestonesData = await milestonesResponse.json();
                    setMilestones(milestonesData);
                }

                if (assetResponse.ok) {
                    const assetData = await assetResponse.json();
                    setCurrentAsset(assetData.asset);
                }

                // Check if onboarding is needed after all data is loaded
                await checkOnboardingStatus();
            } catch (error) {
                console.error('Failed to fetch data:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

    // Check if user needs onboarding
    const checkOnboardingStatus = async () => {
        try {
            const [assetResponse, purchaseResponse, milestonesResponse] = await Promise.all([
                fetch('/assets/current'),
                fetch('/purchases/summary'),
                fetch('/milestones'),
            ]);

            const assetData = await assetResponse.json();
            const purchaseData = await purchaseResponse.json();
            const milestonesData = await milestonesResponse.json();

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

            // User needs onboarding if any required step is missing
            const needsOnboarding = !hasAsset || !hasPurchases || !hasMilestones;
            setNeedsOnboarding(needsOnboarding);
        } catch (error) {
            console.error('Failed to check onboarding status:', error);
            // If we can't check, assume onboarding is needed
            setNeedsOnboarding(true);
        }
    };

    // Refresh data after successful purchase
    const handlePurchaseSuccess = async () => {
        try {
            const purchaseResponse = await fetch('/purchases/summary');
            if (purchaseResponse.ok) {
                const purchases = await purchaseResponse.json();
                setPurchaseData(purchases);
            }
        } catch (error) {
            console.error('Failed to refresh purchase data:', error);
        }
    };

    // Refresh milestones after successful creation
    const handleMilestoneSuccess = async () => {
        try {
            const milestonesResponse = await fetch('/milestones');
            if (milestonesResponse.ok) {
                const milestonesData = await milestonesResponse.json();
                setMilestones(milestonesData);
                // Reset to first milestone when milestones change
                setSelectedMilestoneIndex(0);
            }
        } catch (error) {
            console.error('Failed to refresh milestone data:', error);
        }
    };

    // Handle milestone selection
    const handleMilestoneSelect = (index: number) => {
        setSelectedMilestoneIndex(index);
    };

    // Refresh price data after successful update
    const handlePriceSuccess = async () => {
        try {
            const priceResponse = await fetch('/pricing/current');
            if (priceResponse.ok) {
                const price = await priceResponse.json();
                setPriceData(price);
            }
        } catch (error) {
            console.error('Failed to refresh price data:', error);
        }
    };


    // Calculate portfolio stats
    const currentValue = priceData.current_price
        ? purchaseData.total_shares * priceData.current_price
        : undefined;

    const profitLoss = currentValue
        ? currentValue - purchaseData.total_investment
        : undefined;

    const profitLossPercentage = profitLoss && purchaseData.total_investment > 0
        ? (profitLoss / purchaseData.total_investment) * 100
        : undefined;

    const statsData = {
        totalShares: purchaseData.total_shares,
        totalInvestment: purchaseData.total_investment,
        averageCostPerShare: purchaseData.average_cost_per_share,
        currentPrice: priceData.current_price || undefined,
        currentValue,
        profitLoss,
        profitLossPercentage,
    };

    if (loading) {
        return (
            <>
                <Head title="Dashboard" />
                <div className="min-h-screen bg-black flex items-center justify-center">
                    <div className="text-red-500 font-mono text-lg animate-pulse">
                        LOADING...
                    </div>
                </div>
            </>
        );
    }

    // Toggle handlers with cascading behavior
    const handleLedClick = () => {
        const newShowProgressBar = !showProgressBar;
        setShowProgressBar(newShowProgressBar);
        if (!newShowProgressBar) {
            // If hiding progress bar, also hide stats box
            setShowStatsBox(false);
        }
    };

    const handleProgressClick = () => {
        setShowStatsBox(!showStatsBox);
        setActiveForm(null)
    };

    // Handle onboarding completion
    const handleOnboardingComplete = async () => {
        // Refresh all data and check onboarding status
        await checkOnboardingStatus();
        
        // Refresh individual data sets
        const [purchaseResponse, priceResponse, milestonesResponse, assetResponse] = await Promise.all([
            fetch('/purchases/summary'),
            fetch('/pricing/current'),
            fetch('/milestones'),
            fetch('/assets/current'),
        ]);

        if (purchaseResponse.ok) {
            const purchases = await purchaseResponse.json();
            setPurchaseData(purchases);
        }

        if (priceResponse.ok) {
            const price = await priceResponse.json();
            setPriceData(price);
        }

        if (milestonesResponse.ok) {
            const milestonesData = await milestonesResponse.json();
            setMilestones(milestonesData);
        }

        if (assetResponse.ok) {
            const assetData = await assetResponse.json();
            setCurrentAsset(assetData.asset);
        }
    };

    // Show onboarding if needed
    if (needsOnboarding) {
        return (
            <>
                <Head title="Asset Tracker - Setup" />
                <OnboardingFlow onComplete={handleOnboardingComplete} />
            </>
        );
    }

    return (
        <>
            <Head title="VWCE Tracker" />

            {/* Stacked Layout */}
            <div className="min-h-screen bg-black">
                <div className="w-full max-w-4xl mx-auto px-4">
                    {/* Box 1: LED Number Display - Fixed position from top */}
                    <div className="pt-32">
                        <LedDisplay
                            value={purchaseData.total_shares}
                            onClick={handleLedClick}
                        />
                    </div>

                    {/* Box 2: Progress Bar (toggleable) */}
                    <div style={{ display: showProgressBar ? 'block' : 'none' }}>
                        <ProgressBar
                            currentShares={purchaseData.total_shares}
                            milestones={milestones}
                            selectedMilestoneIndex={selectedMilestoneIndex}
                            onClick={handleProgressClick}
                        />
                    </div>

                    {/* Box 3: Stats Box (toggleable) */}
                    <div style={{ display: showStatsBox ? 'block' : 'none' }}>
                        <StatsBox
                            stats={statsData}
                            milestones={milestones}
                            selectedMilestoneIndex={selectedMilestoneIndex}
                            onMilestoneSelect={handleMilestoneSelect}
                            onAddPurchase={() => setActiveForm('purchase')}
                            onAddMilestone={() => setActiveForm('milestone')}
                            onUpdatePrice={() => setActiveForm('price')}
                        />
                    </div>

                    {/* Box 4: Forms (only when active form is set) */}
                    <div style={{ display: activeForm && showProgressBar && showStatsBox ? 'block' : 'none' }}>
                        <InlineForm
                            type={activeForm}
                            onClose={() => setActiveForm(null)}
                            onPurchaseSuccess={handlePurchaseSuccess}
                            onMilestoneSuccess={handleMilestoneSuccess}
                            onPriceSuccess={handlePriceSuccess}
                        />
                    </div>
                </div>
            </div>
        </>
    );
}