import { cn } from '@/lib/utils';
import { Plus, ChevronRight } from 'lucide-react';
import { useState } from 'react';
import ComponentTitle from '@/components/ui/ComponentTitle';
import type { Milestone } from '@/types/domain';

interface StatsBoxProps {
    stats: {
        totalShares: number;
    };
    unit?: string;
    milestones?: Milestone[];
    selectedMilestoneIndex?: number;
    onMilestoneSelect?: (index: number) => void;
    className?: string;
    onAddPurchase?: () => void;
    onAddMilestone?: () => void;
}

export default function StatsBox({
    stats,
    unit = 'units',
    milestones = [],
    selectedMilestoneIndex = 0,
    onMilestoneSelect,
    className,
    onAddPurchase,
    onAddMilestone,
}: StatsBoxProps) {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);

    const handleCycleMilestone = () => {
        if (milestones.length === 0 || !onMilestoneSelect) return;
        const nextIndex = (selectedMilestoneIndex + 1) % milestones.length;
        onMilestoneSelect(nextIndex);
    };

    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 glow-red">
                <div className="flex justify-between items-center mb-6 relative">
                    <ComponentTitle>Stats</ComponentTitle>

                    <div className="flex items-center space-x-2 relative">
                        {/* Action Dropdown */}
                        <div className="relative">
                            <button
                                onClick={() => setIsDropdownOpen(!isDropdownOpen)}
                                className="flex items-center justify-center px-2 py-1 rounded border border-red-500/50 text-red-500 hover:bg-red-800/40 hover:text-red-300 transition-colors text-sm"
                                aria-label="Add actions"
                            >
                                <Plus className="w-4 h-4" />
                            </button>

                            {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 ENTRY
                                        </button>
                                    )}
                                    {onAddMilestone && (
                                        <button
                                            onClick={() => {
                                                onAddMilestone();
                                                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 MILESTONE
                                        </button>
                                    )}
                                </div>
                            )}
                        </div>

                        {/* Milestone Cycle Button */}
                        {milestones.length > 1 && (
                            <button
                                onClick={handleCycleMilestone}
                                className="flex items-center justify-center px-2 py-1 rounded border border-red-500/50 text-red-500 hover:bg-red-800/40 hover:text-red-300 transition-colors text-sm"
                                aria-label="Cycle milestone"
                            >
                                <ChevronRight className="w-4 h-4" />
                            </button>
                        )}
                    </div>
                </div>

                {/* Milestone Table */}
                <div className="pt-4">
                    <div className="text-red-500 underline font-bold mb-3 font-mono">MILESTONES</div>
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm font-mono">
                            <thead>
                                <tr>
                                    <th className="text-left text-red-500 text-xs py-2">DESCRIPTION</th>
                                    <th className="text-right text-red-500 text-xs py-2">{unit.toUpperCase()}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr className="text-red-500 font-bold">
                                    <td className="py-1 pr-4">CURRENT</td>
                                    <td className="text-right py-1">
                                        {Math.floor(stats.totalShares).toLocaleString()}
                                    </td>
                                </tr>

                                {milestones.map((milestone, index) => (
                                    <tr
                                        key={index}
                                        className={cn(
                                            index === selectedMilestoneIndex
                                                ? "bg-red-500 text-black"
                                                : "text-red-500 font-bold"
                                        )}
                                    >
                                        <td className="py-1 pr-4">{milestone.description}</td>
                                        <td className="text-right py-1">
                                            {Math.floor(milestone.target).toLocaleString()}
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    );
}