/**
 * Size Slider Component
 * Allows selecting sizes within a defined range with visual feedback
 */

interface SizeSliderProps {
    label: string
    value: string
    onChange: (value: string) => void
    min: number
    max: number
    step?: number
    unit?: string
    disabled?: boolean
    showPreview?: boolean
    previewType?: 'width' | 'height' | 'radius' | 'size'
}

export function SizeSlider({
    label,
    value,
    onChange,
    min,
    max,
    step = 1,
    unit = 'px',
    disabled = false,
    showPreview = true,
    previewType = 'size',
}: SizeSliderProps) {
    // Parse numeric value from string (e.g., "380px" -> 380)
    const numericValue = parseInt(value) || min
    
    // Ensure value is within bounds
    const clampedValue = Math.min(Math.max(numericValue, min), max)
    
    const handleChange = (newValue: number) => {
        onChange(`${newValue}${unit}`)
    }
    
    // Calculate percentage for visual feedback
    const percentage = ((clampedValue - min) / (max - min)) * 100
    
    // Preview visualization based on type
    const renderPreview = () => {
        if (!showPreview) return null
        
        const previewSize = Math.max(20, Math.min(50, (percentage / 100) * 40 + 20))
        
        switch (previewType) {
            case 'width':
                return (
                    <div className="w-16 h-8 bg-gray-100 rounded border border-gray-200 flex items-center justify-center overflow-hidden">
                        <div 
                            className="h-6 bg-primary-200 rounded transition-all duration-150"
                            style={{ width: `${percentage}%`, minWidth: '10%' }}
                        />
                    </div>
                )
            case 'height':
                return (
                    <div className="w-8 h-12 bg-gray-100 rounded border border-gray-200 flex items-end justify-center overflow-hidden">
                        <div 
                            className="w-6 bg-primary-200 rounded-t transition-all duration-150"
                            style={{ height: `${percentage}%`, minHeight: '10%' }}
                        />
                    </div>
                )
            case 'radius':
                return (
                    <div 
                        className="w-12 h-12 bg-primary-200 border border-gray-200 transition-all duration-150"
                        style={{ borderRadius: `${clampedValue}${unit}` }}
                    />
                )
            case 'size':
            default:
                return (
                    <div 
                        className="bg-primary-200 rounded-full border border-gray-200 transition-all duration-150"
                        style={{ width: previewSize, height: previewSize }}
                    />
                )
        }
    }
    
    return (
        <div className={`space-y-2 ${disabled ? 'opacity-60' : ''}`}>
            <div className="flex items-center justify-between">
                <label className="text-sm font-medium text-gray-700">
                    {label}
                </label>
                <span className="text-sm font-mono text-gray-500">
                    {clampedValue}{unit}
                </span>
            </div>
            
            <div className="flex items-center gap-4">
                {/* Preview */}
                <div className="flex-shrink-0 flex items-center justify-center w-16">
                    {renderPreview()}
                </div>
                
                {/* Slider */}
                <div className="flex-1 space-y-1">
                    <input
                        type="range"
                        min={min}
                        max={max}
                        step={step}
                        value={clampedValue}
                        onChange={(e) => !disabled && handleChange(parseInt(e.target.value))}
                        disabled={disabled}
                        className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer disabled:cursor-not-allowed
                            [&::-webkit-slider-thumb]:appearance-none
                            [&::-webkit-slider-thumb]:w-5
                            [&::-webkit-slider-thumb]:h-5
                            [&::-webkit-slider-thumb]:rounded-full
                            [&::-webkit-slider-thumb]:bg-primary-600
                            [&::-webkit-slider-thumb]:cursor-pointer
                            [&::-webkit-slider-thumb]:shadow-md
                            [&::-webkit-slider-thumb]:transition-transform
                            [&::-webkit-slider-thumb]:hover:scale-110
                            [&::-moz-range-thumb]:w-5
                            [&::-moz-range-thumb]:h-5
                            [&::-moz-range-thumb]:rounded-full
                            [&::-moz-range-thumb]:bg-primary-600
                            [&::-moz-range-thumb]:cursor-pointer
                            [&::-moz-range-thumb]:border-none
                            [&::-moz-range-thumb]:shadow-md"
                        style={{
                            background: `linear-gradient(to left, #e5e7eb ${100 - percentage}%, #3BC2D0 ${100 - percentage}%)`
                        }}
                    />
                    
                    {/* Min/Max labels */}
                    <div className="flex justify-between text-xs text-gray-400">
                        <span>{min}{unit}</span>
                        <span>{max}{unit}</span>
                    </div>
                </div>
            </div>
        </div>
    )
}

// Preset configurations for common size fields
export const SIZE_PRESETS = {
    window_width: { min: 280, max: 500, step: 10, unit: 'px', previewType: 'width' as const },
    window_height: { min: 400, max: 800, step: 10, unit: 'px', previewType: 'height' as const },
    window_border_radius: { min: 0, max: 32, step: 2, unit: 'px', previewType: 'radius' as const },
    bubble_size: { min: 40, max: 80, step: 4, unit: 'px', previewType: 'size' as const },
    font_size_base: { min: 12, max: 18, step: 1, unit: 'px', previewType: 'size' as const },
    font_size_header: { min: 14, max: 24, step: 1, unit: 'px', previewType: 'size' as const },
}

