import LedCounter from '@/components/Display/LedCounter';
import PurchaseModal from '@/components/Display/PurchaseModal';
import StatsPanel from '@/components/Display/StatsPanel';
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;
}

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 [showStats, setShowStats] = useState(false);
    const [showPurchaseModal, setShowPurchaseModal] = useState(false);
    const [loading, setLoading] = useState(true);

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

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

                if (priceResponse.ok) {
                    const price = await priceResponse.json();
                    setPriceData(price);
                }
            } catch (error) {
                console.error('Failed to fetch data:', error);
            } finally {
                setLoading(false);
            }
        };

        fetchData();
    }, []);

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


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

    return (
        <>
            <Head title="VWCE Tracker" />
            
            {/* Main LED Display */}
            <div className="min-h-screen bg-black flex items-center justify-center relative">
                <LedCounter 
                    value={purchaseData.total_shares} 
                    className="max-w-4xl w-full mx-4"
                    currentPrice={priceData.current_price || undefined}
                    onStatsToggle={() => setShowStats(!showStats)}
                    showStats={showStats}
                    onAddPurchase={() => setShowPurchaseModal(true)}
                />
                
                {/* Stats Panel */}
                <StatsPanel
                    stats={statsData}
                    isVisible={showStats}
                />

                {/* Purchase Modal */}
                <PurchaseModal
                    isOpen={showPurchaseModal}
                    onClose={() => setShowPurchaseModal(false)}
                    onSuccess={handlePurchaseSuccess}
                />
            </div>
        </>
    );
}
