/**
 * Color Picker with Visual Preview indicator
 * Shows what element the color affects
 */

import { t } from '@/lib/i18n'

export type PreviewType = 
    | 'primary_color' 
    | 'secondary_color'
    | 'header_background'
    | 'header_text_color'
    | 'user_message_bg'
    | 'user_message_text'
    | 'bot_message_bg'
    | 'bot_message_text'
    | 'input_bg'
    | 'input_text'
    | 'input_border'
    | 'button_bg'
    | 'button_text'
    | 'button_hover_bg'
    | 'link_color'
    | 'background_color'

interface ColorPickerWithPreviewProps {
    label: string
    value: string
    onChange: (color: string) => void
    previewType: PreviewType
    disabled?: boolean
    primaryColor?: string
    secondaryColor?: string
}

// Visual preview component for each color type
function ColorPreviewIndicator({ 
    type, 
    color,
    primaryColor = '#3BC2D0',
    secondaryColor = '#E32774',
}: { 
    type: PreviewType
    color: string
    primaryColor?: string
    secondaryColor?: string
}) {
    const baseClasses = "flex-shrink-0 rounded overflow-hidden shadow-sm border border-gray-200"
    
    switch (type) {
        case 'primary_color':
            // Robot avatar circle with gradient
            return (
                <div 
                    className={`${baseClasses} w-10 h-10 rounded-full flex items-center justify-center`}
                    style={{ 
                        background: `linear-gradient(135deg, ${color} 0%, ${secondaryColor} 100%)`,
                    }}
                >
                    <span className="text-white text-sm">🤖</span>
                </div>
            )
            
        case 'secondary_color':
            // Gradient bubble
            return (
                <div 
                    className={`${baseClasses} w-10 h-10 rounded-full`}
                    style={{ 
                        background: `linear-gradient(135deg, ${primaryColor} 0%, ${color} 100%)`,
                    }}
                />
            )
            
        case 'header_background':
            // Mini header bar
            return (
                <div 
                    className={`${baseClasses} w-16 h-8 rounded-t-lg flex items-center gap-1 px-1.5`}
                    style={{ backgroundColor: color }}
                >
                    <div className="w-4 h-4 rounded-full bg-white/30 flex items-center justify-center">
                        <span className="text-[8px]">🤖</span>
                    </div>
                    <div className="flex-1">
                        <div className="h-1.5 bg-white/60 rounded w-full mb-0.5"></div>
                        <div className="h-1 bg-white/40 rounded w-3/4"></div>
                    </div>
                </div>
            )
            
        case 'header_text_color':
            // Mini header with text indicator
            return (
                <div 
                    className={`${baseClasses} w-16 h-8 rounded-t-lg flex items-center gap-1 px-1.5`}
                    style={{ backgroundColor: primaryColor }}
                >
                    <div className="flex-1">
                        <div className="h-1.5 rounded w-full mb-0.5" style={{ backgroundColor: color }}></div>
                        <div className="h-1 rounded w-3/4" style={{ backgroundColor: color, opacity: 0.7 }}></div>
                    </div>
                </div>
            )
            
        case 'user_message_bg':
            // User message bubble
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-end justify-end p-1`}>
                    <div 
                        className="px-2 py-1 rounded-xl rounded-tr-none text-[6px] text-white"
                        style={{ backgroundColor: color }}
                    >
                        {t('Message')}
                    </div>
                </div>
            )
            
        case 'user_message_text':
            // User message with text color
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-end justify-end p-1`}>
                    <div 
                        className="px-2 py-1 rounded-xl rounded-tr-none text-[6px]"
                        style={{ backgroundColor: primaryColor, color: color }}
                    >
                        {t('Message')}
                    </div>
                </div>
            )
            
        case 'bot_message_bg':
            // Bot message bubble
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-start p-1`}>
                    <div 
                        className="px-2 py-1 rounded-xl rounded-tl-none text-[6px] text-gray-700"
                        style={{ backgroundColor: color }}
                    >
                        {t('Reply')}
                    </div>
                </div>
            )
            
        case 'bot_message_text':
            // Bot message with text color
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-start p-1`}>
                    <div 
                        className="px-2 py-1 rounded-xl rounded-tl-none text-[6px] bg-gray-200"
                        style={{ color: color }}
                    >
                        {t('Reply')}
                    </div>
                </div>
            )
            
        case 'input_bg':
            // Input field
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-center p-1`}>
                    <div 
                        className="flex-1 h-5 rounded border border-gray-300 text-[6px] text-gray-400 flex items-center px-1"
                        style={{ backgroundColor: color }}
                    >
                        {t('Type...')}
                    </div>
                </div>
            )
            
        case 'input_text':
            // Input with text color
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-center p-1`}>
                    <div 
                        className="flex-1 h-5 rounded border border-gray-300 text-[6px] flex items-center px-1 bg-white"
                        style={{ color: color }}
                    >
                        {t('Text')}
                    </div>
                </div>
            )
            
        case 'input_border':
            // Input with border color
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-center p-1`}>
                    <div 
                        className="flex-1 h-5 rounded text-[6px] text-gray-400 flex items-center px-1 bg-white"
                        style={{ border: `2px solid ${color}` }}
                    >
                        {t('Type...')}
                    </div>
                </div>
            )
            
        case 'button_bg':
        case 'button_hover_bg':
            // Send button
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-center justify-end p-1`}>
                    <div 
                        className="px-2 py-1 rounded text-[6px] text-white"
                        style={{ backgroundColor: color }}
                    >
                        {t('Send')}
                    </div>
                </div>
            )
            
        case 'button_text':
            // Button with text color
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-center justify-end p-1`}>
                    <div 
                        className="px-2 py-1 rounded text-[6px]"
                        style={{ backgroundColor: primaryColor, color: color }}
                    >
                        {t('Send')}
                    </div>
                </div>
            )
            
        case 'link_color':
            // Link text
            return (
                <div className={`${baseClasses} w-16 h-8 bg-gray-100 flex items-center justify-center p-1`}>
                    <span 
                        className="text-[8px] underline"
                        style={{ color: color }}
                    >
                        {t('Example link')}
                    </span>
                </div>
            )
            
        case 'background_color':
            // Full window background
            return (
                <div 
                    className={`${baseClasses} w-16 h-8 rounded-lg`}
                    style={{ backgroundColor: color }}
                >
                    <div className="h-2 bg-gray-400/30 rounded-t-lg"></div>
                    <div className="p-1">
                        <div className="h-1 bg-gray-400/20 rounded w-2/3 mb-1"></div>
                        <div className="h-1 bg-gray-400/20 rounded w-1/2"></div>
                    </div>
                </div>
            )
            
        default:
            return (
                <div 
                    className={`${baseClasses} w-10 h-10 rounded`}
                    style={{ backgroundColor: color }}
                />
            )
    }
}

export function ColorPickerWithPreview({ 
    label, 
    value, 
    onChange, 
    previewType,
    disabled = false,
    primaryColor = '#3BC2D0',
    secondaryColor = '#E32774',
}: ColorPickerWithPreviewProps) {
    return (
        <div className={`space-y-2 ${disabled ? 'opacity-60' : ''}`}>
            <label className="block text-sm font-medium text-gray-700">
                {label}
            </label>
            <div className="flex items-center gap-3">
                {/* Visual Preview */}
                <ColorPreviewIndicator 
                    type={previewType} 
                    color={value}
                    primaryColor={primaryColor}
                    secondaryColor={secondaryColor}
                />
                
                {/* Color Picker */}
                <div className="flex-1 flex items-center gap-2">
                    <input
                        type="color"
                        value={value}
                        onChange={(e) => !disabled && onChange(e.target.value)}
                        disabled={disabled}
                        className="w-10 h-10 rounded-lg cursor-pointer border border-gray-200 disabled:cursor-not-allowed"
                    />
                    <input
                        type="text"
                        value={value}
                        onChange={(e) => !disabled && onChange(e.target.value)}
                        disabled={disabled}
                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg font-mono text-sm disabled:bg-gray-100 disabled:cursor-not-allowed"
                        dir="ltr"
                    />
                </div>
            </div>
        </div>
    )
}

// Minimal version for use inside LinkedAppearanceField (no label, just picker with preview)
interface ColorPickerMinimalProps {
    value: string
    onChange: (color: string) => void
    previewType: PreviewType
    disabled?: boolean
    primaryColor?: string
    secondaryColor?: string
}

export function ColorPickerMinimal({ 
    value, 
    onChange, 
    previewType,
    disabled = false,
    primaryColor = '#3BC2D0',
    secondaryColor = '#E32774',
}: ColorPickerMinimalProps) {
    return (
        <div className={`flex items-center gap-3 ${disabled ? 'opacity-60' : ''}`}>
            {/* Visual Preview */}
            <ColorPreviewIndicator 
                type={previewType} 
                color={value}
                primaryColor={primaryColor}
                secondaryColor={secondaryColor}
            />
            
            {/* Color Picker */}
            <div className="flex-1 flex items-center gap-2">
                <input
                    type="color"
                    value={value}
                    onChange={(e) => !disabled && onChange(e.target.value)}
                    disabled={disabled}
                    className="w-10 h-10 rounded-lg cursor-pointer border border-gray-200 disabled:cursor-not-allowed"
                />
                <input
                    type="text"
                    value={value}
                    onChange={(e) => !disabled && onChange(e.target.value)}
                    disabled={disabled}
                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg font-mono text-sm disabled:bg-gray-100 disabled:cursor-not-allowed"
                    dir="ltr"
                />
            </div>
        </div>
    )
}

