import { NodeViewContent, NodeViewWrapper, NodeViewProps } from '@tiptap/react'
import { Info, CheckCircle, AlertTriangle, XCircle, Lightbulb } from 'lucide-react'
import { cn } from '@/lib/utils'

export const CalloutComponent = (props: NodeViewProps) => {
    const { node, updateAttributes } = props
    const type = node.attrs.type || 'info'

    const styles = {
        info: {
            borderColor: 'border-blue-200 dark:border-blue-500/30',
            bgColor: 'bg-blue-50 dark:bg-blue-500/10',
            textColor: 'text-blue-900 dark:text-blue-100', // Dark text for light mode
            icon: <Info className="w-5 h-5 text-blue-600 dark:text-blue-400" />,
            placeholder: 'Info'
        },
        success: {
            borderColor: 'border-green-200 dark:border-green-500/30',
            bgColor: 'bg-green-50 dark:bg-green-500/10',
            textColor: 'text-green-900 dark:text-green-100',
            icon: <CheckCircle className="w-5 h-5 text-green-600 dark:text-green-400" />,
            placeholder: 'Success'
        },
        warning: {
            borderColor: 'border-orange-200 dark:border-yellow-500/30',
            bgColor: 'bg-orange-50 dark:bg-yellow-500/10',
            textColor: 'text-orange-900 dark:text-yellow-100', // Use orange for better visibility in light mode
            icon: <AlertTriangle className="w-5 h-5 text-orange-600 dark:text-yellow-400" />,
            placeholder: 'Warning'
        },
        error: {
            borderColor: 'border-red-200 dark:border-red-500/30',
            bgColor: 'bg-red-50 dark:bg-red-500/10',
            textColor: 'text-red-900 dark:text-red-100',
            icon: <XCircle className="w-5 h-5 text-red-600 dark:text-red-400" />,
            placeholder: 'Error'
        },
        idea: {
            borderColor: 'border-purple-200 dark:border-purple-500/30',
            bgColor: 'bg-purple-50 dark:bg-purple-500/10',
            textColor: 'text-purple-900 dark:text-purple-100',
            icon: <Lightbulb className="w-5 h-5 text-purple-600 dark:text-purple-400" />,
            placeholder: 'Idea'
        }
    }

    const currentStyle = styles[type as keyof typeof styles] || styles.info

    return (
        <NodeViewWrapper className="my-4">
            <div
                className={cn(
                    "flex gap-3 p-4 rounded-lg border transition-all",
                    currentStyle.borderColor,
                    currentStyle.bgColor
                )}
            >
                <div
                    className="flex-shrink-0 mt-0.5 cursor-pointer select-none"
                    contentEditable={false}
                    title="Click to cycle type"
                    onClick={() => {
                        const types = Object.keys(styles)
                        const currentIndex = types.indexOf(type)
                        const nextType = types[(currentIndex + 1) % types.length]
                        updateAttributes({ type: nextType })
                    }}
                >
                    {currentStyle.icon}
                </div>
                <div className={cn("flex-1 min-w-0 prose-p:my-0 prose-p:leading-normal", currentStyle.textColor)}>
                    <NodeViewContent />
                </div>
            </div>
        </NodeViewWrapper>
    )
}
