import { cn } from '@/lib/utils';
import { Plus } from 'lucide-react';
import { useState } from 'react';

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

interface StatsBoxProps {
    stats: {
        totalShares: number;
        totalInvestment: number;
        averageCostPerShare: number;
        currentPrice?: number;
        currentValue?: number;
        profitLoss?: number;
        profitLossPercentage?: number;
    };
    milestones?: Milestone[];
    className?: string;
    onAddPurchase?: () => void;
    onAddMilestone?: () => void;
    onUpdatePrice?: () => void;
}

export default function StatsBox({ 
    stats, 
    milestones = [],
    className,
    onAddPurchase,
    onAddMilestone,
    onUpdatePrice
}: StatsBoxProps) {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const formatCurrency = (amount: number) => {
        return new Intl.NumberFormat('de-DE', {
            style: 'currency',
            currency: 'EUR',
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
        }).format(amount);
    };

    const formatCurrencyDetailed = (amount: number) => {
        return new Intl.NumberFormat('de-DE', {
            style: 'currency',
            currency: 'EUR',
            minimumFractionDigits: 4,
        }).format(amount);
    };

    return (
        <div 
            className={cn(
                "bg-black p-8",
                "transition-all duration-300",
                className
            )}
        >
            <div className="w-full border-4 border-red-500 p-2 bg-black space-y-4">
                {/* STATS Title and Current Price */}
                <div className="flex justify-between items-center mb-6 relative">
                    <h2 className="text-red-500 text-lg font-mono font-bold tracking-wider">
                        STATS
                    </h2>
                    <div className="flex items-center space-x-4 relative">
                        {stats.currentPrice && (
                            <div className="text-red-500 text-sm font-mono tracking-wider">
                                VWCE: {formatCurrencyDetailed(stats.currentPrice)}
                            </div>
                        )}
                        
                        {/* Action Dropdown */}
                        <div className="relative">
                            <button
                                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                                className="flex items-center justify-center px-2 py-1 rounded bg-red-600/20 border border-red-500/50 text-red-400 hover:bg-red-600/40 hover:text-red-300 transition-colors text-sm"
                                aria-label="Add actions"
                            >
                                <Plus className="w-4 h-4" />
                            </button>
                            
                            {/* Dropdown Menu */}
                            {isDropdownOpen && (
                                <div className="absolute top-full right-0 mt-2 bg-black border-2 border-red-500/50 rounded shadow-lg min-w-40 z-10">
                                    {onAddPurchase && (
                                        <button
                                            onClick={() => {
                                                onAddPurchase();
                                                setIsDropdownOpen(false);
                                            }}
                                            className="w-full text-left px-4 py-2 text-red-400 hover:bg-red-600/20 hover:text-red-300 transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
                                        >
                                            ADD PURCHASE
                                        </button>
                                    )}
                                    {onAddMilestone && (
                                        <button
                                            onClick={() => {
                                                onAddMilestone();
                                                setIsDropdownOpen(false);
                                            }}
                                            className="w-full text-left px-4 py-2 text-blue-400 hover:bg-blue-600/20 hover:text-blue-300 transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
                                        >
                                            ADD MILESTONE
                                        </button>
                                    )}
                                    {onUpdatePrice && (
                                        <button
                                            onClick={() => {
                                                onUpdatePrice();
                                                setIsDropdownOpen(false);
                                            }}
                                            className="w-full text-left px-4 py-2 text-green-400 hover:bg-green-600/20 hover:text-green-300 transition-colors text-sm font-mono border-b border-red-500/20 last:border-b-0"
                                        >
                                            UPDATE PRICE
                                        </button>
                                    )}
                                </div>
                            )}
                        </div>
                    </div>
                </div>

            {/* Milestone Table */}
            <div className="border-t border-red-500/30 pt-4">
                <div className="text-red-400/70 text-xs mb-3">MILESTONES</div>
                <div className="overflow-x-auto">
                    <table className="w-full text-sm font-mono">
                        <thead>
                            <tr className="border-b border-red-500/20">
                                <th className="text-left text-red-400/60 text-xs py-2">DESCRIPTION</th>
                                <th className="text-right text-red-400/60 text-xs py-2">SHARES</th>
                                <th className="text-right text-red-400/60 text-xs py-2">SWR 3%</th>
                                <th className="text-right text-red-400/60 text-xs py-2">SWR 4%</th>
                            </tr>
                        </thead>
                        <tbody>
                            {/* Create combined array with current position and milestones, sorted by target */}
                            {[
                                ...milestones.map(m => ({ ...m, isCurrent: false })),
                                { 
                                    target: stats.totalShares, 
                                    description: 'CURRENT', 
                                    created_at: '', 
                                    isCurrent: true 
                                }
                            ]
                            .sort((a, b) => a.target - b.target)
                            .map((item, index) => {
                                const swr3 = stats.currentPrice ? item.target * stats.currentPrice * 0.03 : 0;
                                const swr4 = stats.currentPrice ? item.target * stats.currentPrice * 0.04 : 0;
                                
                                return (
                                    <tr 
                                        key={index} 
                                        className={cn(
                                            "border-b border-red-500/10",
                                            item.isCurrent 
                                                ? "bg-red-500/10 text-red-300" 
                                                : stats.totalShares >= item.target 
                                                    ? "text-green-400/80" 
                                                    : "text-red-400/70"
                                        )}
                                    >
                                        <td className="py-2 pr-4">
                                            {item.isCurrent ? (
                                                <span className="font-bold">{item.description}</span>
                                            ) : (
                                                item.description
                                            )}
                                        </td>
                                        <td className="text-right py-2 pr-4">
                                            {Math.floor(item.target).toLocaleString()}
                                        </td>
                                        <td className="text-right py-2 pr-4">
                                            {stats.currentPrice ? formatCurrency(swr3) : 'N/A'}
                                        </td>
                                        <td className="text-right py-2">
                                            {stats.currentPrice ? formatCurrency(swr4) : 'N/A'}
                                        </td>
                                    </tr>
                                );
                            })}
                        </tbody>
                    </table>
                </div>
            </div>
            </div>
        </div>
    );
}