import React from 'react';
import '../game/InventoryModal.css'; // Reusing existing styles for now, or ensure classes are global

interface GameProgressBarProps {
    value: number;
    max: number;
    type?: 'weight' | 'volume' | 'health' | 'enemy_health' | 'stamina' | 'xp' | 'durability'; // types map to colors
    showText?: boolean;
    label?: React.ReactNode;
    unit?: string;
    height?: string;
    align?: 'left' | 'right';
    labelAlignment?: 'left' | 'right';
    customColor?: string;
}

export const GameProgressBar: React.FC<GameProgressBarProps> = ({
    value,
    max,
    type = 'weight',
    showText = false,
    label,
    unit = '',
    height = '8px',
    align = 'left',
    labelAlignment,
    customColor
}) => {
    const percentage = Math.min(100, Math.max(0, (value / (max || 1)) * 100));

    // Map types to CSS classes used in InventoryModal.css or inline styles
    const getFillClass = () => {
        switch (type) {
            case 'weight': return 'metric-fill weight';
            case 'volume': return 'metric-fill volume';
            case 'health': return 'durability-fill high'; // borrowing green
            case 'enemy_health': return 'durability-fill low'; // borrowing red
            case 'stamina': return 'durability-fill medium'; // borrowing yellow
            case 'xp': return 'durability-fill medium'; // XP usually gold/yellow
            case 'durability': return 'metric-fill'; // Use inline gradient
            default: return 'metric-fill';
        }
    };

    // Custom coloring for health/stamina if not using classes matching InventoryModal exactly
    const getGradient = () => {
        if (customColor) return customColor;
        switch (type) {
            // InventoryModal.css defines .weight and .volume gradients
            // We can rely on classes if we import the CSS in parent or here
            case 'health': return 'linear-gradient(90deg, #10b981, #059669)';
            case 'enemy_health': return 'linear-gradient(90deg, #ef4444, #b91c1c)'; // Red
            case 'stamina': return 'linear-gradient(90deg, #eab308, #ca8a04)';
            case 'xp': return 'linear-gradient(90deg, #8b5cf6, #7c3aed)'; // Purple for XP?
            // Green if empty, yellow if half, red if full
            case 'weight':
                if (percentage < 65) return 'linear-gradient(90deg, #10b981, #059669)'; // Green
                if (percentage < 85) return 'linear-gradient(90deg, #eab308, #ca8a04)'; // Yellow
                return 'linear-gradient(90deg, #ef4444, #b91c1c)'; // Red
            case 'volume':
                if (percentage < 65) return 'linear-gradient(90deg, #10b981, #059669)'; // Green
                if (percentage < 85) return 'linear-gradient(90deg, #eab308, #ca8a04)'; // Yellow
                return 'linear-gradient(90deg, #ef4444, #b91c1c)'; // Red
            case 'durability':
                if (percentage < 15) return 'linear-gradient(90deg, #ef4444, #b91c1c)'; // Red
                if (percentage < 50) return 'linear-gradient(90deg, #eab308, #ca8a04)'; // Yellow
                return 'linear-gradient(90deg, #10b981, #059669)'; // Green
            default: return 'linear-gradient(90deg, #10b981, #059669)';
        }
    };

    const displayValue = Number.isInteger(value) ? value : value.toFixed(1);
    const displayMax = Number.isInteger(max) ? max : max.toFixed(1);

    const effectiveLabelAlign = labelAlignment || align;

    return (
        <div className="game-progress-container" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: '2px' }}>
            {showText && (
                <div className="progress-text" style={{ fontSize: '0.8rem', color: '#cbd5e0', display: 'flex', justifyContent: 'space-between', marginBottom: '2px' }}>
                    {effectiveLabelAlign === 'left' ? (
                        <>
                            {label && <span style={{ fontWeight: 500 }}>{label}</span>}
                            <span style={{ fontFamily: 'monospace' }}>{displayValue}/{displayMax}{unit ? ` ${unit}` : ''}</span>
                        </>
                    ) : (
                        <>
                            <span style={{ fontFamily: 'monospace' }}>{displayValue}/{displayMax}{unit ? ` ${unit}` : ''}</span>
                            {label && <span style={{ fontWeight: 500 }}>{label}</span>}
                        </>
                    )}
                </div>
            )}
            <div className="progress-track" style={{
                height,
                backgroundColor: '#2d3748',
                borderRadius: '0px',
                clipPath: 'var(--game-clip-path-sm)',
                overflow: 'hidden',
                display: 'flex',
                justifyContent: align === 'right' ? 'flex-end' : 'flex-start'
            }}>
                <div
                    className={getFillClass()}
                    style={{
                        width: `${percentage}%`,
                        height: '100%',
                        background: getGradient(),
                        transition: 'width 0.3s ease'
                    }}
                />
            </div>
        </div>
    );
};
