import { useStore } from '@nanostores/preact';
import { $freeInternalHeap, $totalInternalHeap } from './AppProviderStore';

interface MemoryProgressBarProps {
    showDetails?: boolean;
    className?: string;
}

export default function MemoryProgressBar({ showDetails = true, className = "" }: MemoryProgressBarProps) {
    const freeInternalHeap = useStore($freeInternalHeap);
    const totalInternalHeap = useStore($totalInternalHeap);
    
    // Calculate used and percentage
    const usedInternalHeap = totalInternalHeap - freeInternalHeap;
    const usagePercentage = totalInternalHeap > 0 ? (usedInternalHeap / totalInternalHeap) * 100 : 0;
    const freePercentage = 100 - usagePercentage;

    // Determine color based on usage
    const getProgressColor = (percentage: number) => {
        if (percentage < 50) return 'bg-green-500';
        if (percentage < 75) return 'bg-yellow-500';
        if (percentage < 90) return 'bg-orange-500';
        return 'bg-red-500';
    };

    const getTextColor = (percentage: number) => {
        if (percentage < 50) return 'text-green-600';
        if (percentage < 75) return 'text-yellow-600';
        if (percentage < 90) return 'text-orange-600';
        return 'text-red-600';
    };

    const formatBytes = (bytes: number) => {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
    };

    // Create segments for the memory bar (like Linux htop)
    const totalSegments = 20;
    const usedSegments = Math.round((usagePercentage / 100) * totalSegments);
    
    const getSegmentColor = (segmentIndex: number) => {
        if (segmentIndex >= usedSegments) return 'bg-gray-300'; // Empty
        
        const percentageAtSegment = (segmentIndex / totalSegments) * 100;
        if (percentageAtSegment < 50) return 'bg-green-500';
        if (percentageAtSegment < 75) return 'bg-yellow-500';
        if (percentageAtSegment < 90) return 'bg-orange-500';
        return 'bg-red-500';
    };

    return (
        <div className={`space-y-2 ${className}`}>
            {/* Linux-style Memory Bar with segments */}
            <div className="flex items-center space-x-3">
                <div className="flex-1">
                    <div className="flex items-center justify-between mb-1">
                        <span className="text-sm font-medium text-gray-700">Internal Heap</span>
                        <div className="text-right">
                            <span className={`text-sm font-medium ${getTextColor(usagePercentage)}`}>
                                {usagePercentage.toFixed(1)}%
                            </span>
                            <div className="text-xs text-gray-600">
                                {formatBytes(usedInternalHeap)}/{formatBytes(totalInternalHeap)}
                            </div>
                        </div>
                    </div>
                    {/* Memory segments */}
                    <div className="flex space-x-0.5">
                        {Array.from({ length: totalSegments }, (_, i) => (
                            <div
                                key={i}
                                className={`h-3 flex-1 transition-colors duration-300 ${getSegmentColor(i)}`}
                                style={{ minWidth: '2px' }}
                            ></div>
                        ))}
                    </div>
                </div>
            </div>

            {/* Memory Stats */}
            {showDetails && (
                <div className="grid grid-cols-3 gap-3 text-xs text-gray-600">
                    <div className="flex justify-between">
                        <span>Used:</span>
                        <span className="font-medium">{formatBytes(usedInternalHeap)}</span>
                    </div>
                    <div className="flex justify-between">
                        <span>Free:</span>
                        <span className="font-medium text-green-600">{formatBytes(freeInternalHeap)}</span>
                    </div>
                    <div className="flex justify-between">
                        <span>Total:</span>
                        <span className="font-medium">{formatBytes(totalInternalHeap)}</span>
                    </div>
                </div>
            )}
        </div>
    );
}