import { motion } from 'framer-motion'
import { 
    FileText, 
    MessageCircle, 
    Phone, 
    Calendar, 
    Ticket, 
    Image, 
    Youtube,
    Box,
    type LucideIcon 
} from 'lucide-react'
import { t } from '@/lib/i18n'

interface WidgetOption {
    type: string
    id: number
    label: string
    icon?: string
}

interface WidgetPickerProps {
    options: WidgetOption[]
    onSelect: (option: WidgetOption) => void
    isRTL?: boolean
}

const ICON_MAP: Record<string, LucideIcon> = {
    FileText,
    MessageCircle,
    Phone,
    Calendar,
    Ticket,
    Image,
    Youtube,
    Box,
}

// Color configs with inline styles (Tailwind can't handle dynamic classes)
const TYPE_STYLES: Record<string, { bg: string; hover: string }> = {
    form: { bg: 'linear-gradient(135deg, #3b82f6, #2563eb)', hover: 'linear-gradient(135deg, #2563eb, #1d4ed8)' },
    whatsapp: { bg: 'linear-gradient(135deg, #25D366, #128C7E)', hover: 'linear-gradient(135deg, #128C7E, #075E54)' },
    calendar_call: { bg: 'linear-gradient(135deg, #a855f7, #9333ea)', hover: 'linear-gradient(135deg, #9333ea, #7e22ce)' }, // backward compat
    calendar_meeting: { bg: 'linear-gradient(135deg, #a855f7, #9333ea)', hover: 'linear-gradient(135deg, #9333ea, #7e22ce)' },
    coupon: { bg: 'linear-gradient(135deg, #eab308, #ca8a04)', hover: 'linear-gradient(135deg, #ca8a04, #a16207)' },
    gallery: { bg: 'linear-gradient(135deg, #ec4899, #db2777)', hover: 'linear-gradient(135deg, #db2777, #be185d)' },
    youtube: { bg: 'linear-gradient(135deg, #ef4444, #dc2626)', hover: 'linear-gradient(135deg, #dc2626, #b91c1c)' },
}

function getTypeLabels(): Record<string, string> {
    return {
        form: t('Leave details'),
        whatsapp: t('Send WhatsApp'),
        calendar_call: t('Book appointment'),
        calendar_meeting: t('Book appointment'),
        coupon: t('Get coupon'),
        gallery: t('View gallery'),
        youtube: t('Watch video'),
    }
}

export function WidgetPicker({ options, onSelect, isRTL = true }: WidgetPickerProps) {
    if (!options || options.length === 0) {
        return null
    }

    return (
        <motion.div
            className="flex flex-wrap gap-3 p-3"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            dir={isRTL ? 'rtl' : 'ltr'}
        >
            {options.map((option, index) => {
                const IconComponent = ICON_MAP[option.icon || 'Box'] || Box
                const styles = TYPE_STYLES[option.type] || { bg: 'linear-gradient(135deg, #6b7280, #4b5563)', hover: 'linear-gradient(135deg, #4b5563, #374151)' }
                const typeLabels = getTypeLabels()
                const displayLabel = typeLabels[option.type] || option.label

                return (
                    <motion.button
                        key={`${option.type}-${option.id}`}
                        onClick={() => onSelect(option)}
                        className="flex items-center gap-2 px-5 py-3 text-white font-medium text-sm rounded-full shadow-lg cursor-pointer"
                        style={{ background: styles.bg }}
                        initial={{ opacity: 0, scale: 0.8 }}
                        animate={{ opacity: 1, scale: 1 }}
                        transition={{ delay: index * 0.1 }}
                        whileHover={{ 
                            scale: 1.05, 
                            y: -2,
                            boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.2)'
                        }}
                        whileTap={{ scale: 0.95 }}
                        onMouseEnter={(e) => e.currentTarget.style.background = styles.hover}
                        onMouseLeave={(e) => e.currentTarget.style.background = styles.bg}
                    >
                        <IconComponent className="w-5 h-5" />
                        <span>{displayLabel}</span>
                    </motion.button>
                )
            })}
        </motion.div>
    )
}

export default WidgetPicker

