@flowuent-org/diagramming-core 1.2.0 → 1.2.1

package/packages/diagrams/src/lib/components/automation/AutomationSheetsNode.tsx

@@ -1,1118 +1,1112 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import { Handle, Position, useNodeId } from '@xyflow/react';
-import { Box, Typography, Chip, IconButton, Card, CardContent, Button } from '@mui/material';
-import {
-    TableChart as TableChartIcon,
-    AccessTime as AccessTimeIcon,
-    Save as SaveIcon,
-    Send as SendIcon,
-    Settings as SettingsIcon,
-    TableRows as TableRowsIcon,
-    Email as EmailIcon,
-    Description as DescriptionIcon,
-    Drafts as DraftsIcon,
-    Add as AddIcon,
-    CheckCircle as CheckCircleIcon,
-    Settings as ConfigureIcon,
-    Error as ErrorIcon,
-    ArrowForwardIos as ArrowForwardIcon,
-    WhatsApp as WhatsAppIcon,
-    Phone as PhoneIcon,
-    Lightbulb as LightbulbIcon
-} from '@mui/icons-material';
-import { RiCloseLine } from 'react-icons/ri';
-import ReactJson from 'react-json-view';
-import { getIconByName } from '../../utils/iconMapper';
-import { useTranslation } from 'react-i18next';
-import { useDiagram } from '../../contexts/DiagramProvider';
-import { AISuggestion } from './AISuggestionsModal';
-import { AISuggestionsPanel } from './AISuggestionsPanel';
-import { NodeActionButtons } from './NodeActionButtons';
-import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
-
-interface AutomationSheetsNodeProps {
-    data: {
-        label: string;
-        description: string;
-        status: 'Ready' | 'Running' | 'Completed' | 'Error';
-        inputVariable: string;
-        lastRun?: string;
-        iconName?: string;
-        sheetsConfig: {
-            spreadsheetId: string;
-            sheetName: string;
-            range: string;
-            credentials: {
-                type: 'service-account' | 'oauth' | 'api-key';
-                serviceAccountKey?: string;
-                oauthToken?: string;
-                apiKey?: string;
-            };
-        };
-        dataMapping: {
-            headers: Array<{
-                column: string;
-                sourceField: string;
-                dataType: 'string' | 'number' | 'date' | 'boolean';
-            }>;
-            appendMode: boolean;
-            clearSheet: boolean;
-        };
-        exportOptions: {
-            emailRecipients: string[];
-            fileName: string;
-            exportFormat: 'sheets' | 'excel' | 'both';
-            includeHeaders: boolean;
-            sendEmailNotification: boolean;
-            // Optional fields for Gmail output configuration (may live under formData.exportOptions)
-            emailSendEnabled?: boolean;
-            emailSender?: string;
-            emailSubject?: string;
-            emailMessage?: string;
-            // WhatsApp configuration
-            whatsapp?: {
-                enabled: boolean;
-                phoneNumber: string;
-                messageTemplate: string;
-                includeDataMode: 'json' | 'summary' | 'custom';
-                // Twilio configuration
-                twilio?: {
-                    enabled: boolean;
-                    accountSid: string;
-                    authToken: string;
-                    fromNumber: string;
-                    isSandbox: boolean;
-                    templateSid?: string;
-                    templateVariables?: Record<string, string>;
-                };
-            };
-        };
-        formData?: {
-            aiSuggestionsCount?: number; // Number of AI suggestions available
-            [key: string]: any;
-        };
-        // Optional per-output-method statuses supplied by engine
-        outputStatuses?: {
-            googleSheets?: 'not-set' | 'configured' | 'running' | 'connected' | 'failed';
-            gmail?: 'not-set' | 'configured' | 'running' | 'connected' | 'failed';
-            whatsapp?: 'not-set' | 'configured' | 'running' | 'connected' | 'failed';
-        };
-    };
-    selected?: boolean;
-}
-
-export const AutomationSheetsNode: React.FC<AutomationSheetsNodeProps> = ({ data, selected }) => {
-    const { t } = useTranslation();
-    const [isJsonOpen, setIsJsonOpen] = useState(false);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const rootRef = useRef<any>(null);
-    const portalRef = useRef<HTMLDivElement | null>(null);
-    const nodeRef = useRef<HTMLDivElement | null>(null);
-    const nodeId = useNodeId();
-    const setSelectedNode = useDiagram((state) => state.setSelectedNode);
-    const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
-    const onNodesChange = useDiagram((state) => state.onNodesChange);
-    const nodes = useDiagram((state) => state.nodes);
-    const setNodes = useDiagram((state) => state.setNodes);
-
-    // Get the icon component based on the iconName
-    const IconComponent = getIconByName(data.iconName || 'TableChart');
-
-    // Resolve export options from formData or data
-    const exportOptions = (data.formData?.exportOptions || (data as any).exportOptions) || {};
-    const showSheets = Boolean(
-        exportOptions?.exportFormat === 'sheets' || exportOptions?.exportFormat === 'both'
-    );
-    const showGmail = Boolean(
-        exportOptions.emailSendEnabled &&
-        exportOptions.emailSender &&
-        (exportOptions.emailRecipients?.length || 0) > 0 &&
-        exportOptions.emailSubject &&
-        exportOptions.emailMessage
-    );
-    const showSlack = Boolean(
-        exportOptions.slack?.enabled &&
-        exportOptions.slack?.webhookUrl &&
-        exportOptions.slack?.channel
-    );
-    const showWhatsApp = Boolean(
-        exportOptions.whatsapp?.enabled &&
-        exportOptions.whatsapp?.phoneNumber
-    );
-
-    // Determine Google Sheets status from provided data and execution result
-    const determineGoogleSheetsStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
-        // Prefer status provided by engine
-        if (data.outputStatuses?.googleSheets) return data.outputStatuses.googleSheets;
-
-        // Required config check (accepts either spreadsheetId or OAuth clientId that can create one)
-        const cfg = (data.formData?.sheetsConfig || data.sheetsConfig) || {};
-        const creds = cfg.credentials || {};
-        const hasRequired = Boolean((cfg.spreadsheetId || creds.clientId) && cfg.sheetName && creds.type);
-        if (!hasRequired) return 'not-set';
-
-        // Running inferred from node status
-        if (data.status === 'Running') return 'running';
-
-        // Execution result inference
-        const exec = data.formData?.executionResult || (data as any).executionResult;
-        if (exec?.success === true) return 'connected';
-        if (exec?.success === false || data.status === 'Error') return 'failed';
-        return 'configured';
-    };
-
-    // Determine Gmail status
-    const determineGmailStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
-        // Prefer status provided by engine
-        if (data.outputStatuses?.gmail) return data.outputStatuses.gmail;
-
-        const ex = (data.formData?.exportOptions || data.exportOptions) || {};
-        const hasRequired = Boolean(
-            ex.emailSendEnabled && ex.emailSender && (ex.emailRecipients?.length || 0) > 0 && ex.emailSubject && ex.emailMessage
-        );
-        if (!hasRequired) return 'not-set';
-
-        if (data.status === 'Running') return 'running';
-
-        const exec = data.formData?.executionResult || (data as any).executionResult;
-        if (exec?.success === true) return 'connected';
-        if (exec?.success === false || data.status === 'Error') return 'failed';
-        return 'configured';
-    };
-
-    // Determine Slack status
-    const determineSlackStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
-        if ((data as any).outputStatuses?.slack) return (data as any).outputStatuses.slack;
-        const slack = (data.formData?.exportOptions?.slack || (data as any).exportOptions?.slack) || {};
-        if (!slack.enabled || !slack.webhookUrl || !slack.channel) return 'not-set';
-        if (data.status === 'Running') return 'running';
-        const exec = data.formData?.executionResult || (data as any).executionResult;
-        if (exec?.success === true) return 'connected';
-        if (exec?.success === false || data.status === 'Error') return 'failed';
-        return 'configured';
-    };
-
-    // Determine WhatsApp status
-    const determineWhatsAppStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
-        if (data.outputStatuses?.whatsapp) return data.outputStatuses.whatsapp;
-
-        const whatsapp = (data.formData?.exportOptions?.whatsapp || data.exportOptions?.whatsapp) || {};
-
-        // Check if Twilio is configured
-        if (whatsapp.twilio?.enabled) {
-            const twilioConfig = whatsapp.twilio;
-            const hasRequiredTwilio = Boolean(
-                twilioConfig.accountSid &&
-                twilioConfig.authToken &&
-                twilioConfig.fromNumber &&
-                whatsapp.phoneNumber
-            );
-            if (!hasRequiredTwilio) return 'not-set';
-        } else {
-            // Fallback to basic WhatsApp Web check
-            if (!whatsapp.enabled || !whatsapp.phoneNumber) return 'not-set';
-        }
-
-        if (data.status === 'Running') return 'running';
-
-        const exec = data.formData?.executionResult || (data as any).executionResult;
-        if (exec?.success === true) return 'connected';
-        if (exec?.success === false || data.status === 'Error') return 'failed';
-        return 'configured';
-    };
-
-    const getNodeStatus = (): string => {
-        const gs = determineGoogleSheetsStatus();
-        const gm = determineGmailStatus();
-        const sl = determineSlackStatus();
-        const wa = determineWhatsAppStatus();
-        if (gs === 'failed' || gm === 'failed' || sl === 'failed' || wa === 'failed') return 'Failed';
-        if (gs === 'running' || gm === 'running' || sl === 'running' || wa === 'running') return 'Running';
-        if (
-            (gs === 'connected' || gs === 'not-set') &&
-            (gm === 'connected' || gm === 'not-set') &&
-            (sl === 'connected' || sl === 'not-set') &&
-            (wa === 'connected' || wa === 'not-set')
-        ) return 'Success';
-        if (
-            (gs === 'configured' || gs === 'not-set') &&
-            (gm === 'configured' || gm === 'not-set') &&
-            (sl === 'configured' || sl === 'not-set') &&
-            (wa === 'configured' || wa === 'not-set')
-        ) return 'Ready';
-        return 'Mixed Status';
-    };
-
-    // Status badge (shared)
-    const StatusBadge = ({ status }: { status: 'not-set' | 'configured' | 'running' | 'connected' | 'failed' }) => {
-        const cfg = (
-            status === 'not-set' ? { icon: <ErrorIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.notSet'), bg: '#6b7280' } :
-                status === 'configured' ? { icon: <ConfigureIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.configured'), bg: '#3b82f6' } :
-                    status === 'running' ? { icon: <SettingsIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.running'), bg: '#f59e0b' } :
-                        status === 'connected' ? { icon: <CheckCircleIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.connected'), bg: '#10b981' } :
-                            { icon: <ErrorIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.failed'), bg: '#ef4444' }
-        );
-        return (
-            <Chip
-                icon={cfg.icon}
-                label={cfg.label}
-                size="small"
-                sx={{
-                    backgroundColor: cfg.bg,
-                    color: 'white',
-                    fontSize: '11px',
-                    height: '20px',
-                    '& .MuiChip-icon': { fontSize: '12px' },
-                }}
-            />
-        );
-    };
-
-    // WhatsApp message sending function
-    const sendWhatsAppMessage = (phoneNumber: string, data: any) => {
-        const message = `
-Automation Result:
-------------------
-Name: ${data.name || 'Automation Workflow'}
-Score: ${data.score || 'N/A'}
-Status: ${data.status || 'Completed'}
-Timestamp: ${new Date().toLocaleString()}
-Data: ${JSON.stringify(data, null, 2)}
-        `;
-        const encodedMsg = encodeURIComponent(message);
-        const url = `https://wa.me/${phoneNumber}?text=${encodedMsg}`;
-        window.open(url, '_blank');
-    };
-
-    const handleJsonClick = () => {
-        if (nodeId) setSelectedNode(nodeId);
-        if (!enableJson) return;
-        setIsJsonOpen(!isJsonOpen);
-    };
-
-    const handleClose = () => {
-        setIsJsonOpen(false);
-        // Clean up portal
-        if (rootRef.current) {
-            rootRef.current.unmount();
-            rootRef.current = null;
-        }
-        if (portalRef.current) {
-            document.body.removeChild(portalRef.current);
-            portalRef.current = null;
-        }
-    };
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
-                handleClose();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isJsonOpen]);
-
-
-    useEffect(() => {
-        if (isJsonOpen) {
-            const portalRoot = document.createElement('div');
-            document.body.appendChild(portalRoot);
-            portalRef.current = portalRoot;
-
-            const root = createRoot(portalRoot);
-            rootRef.current = root;
-
-            root.render(
-                <Card
-                    id="automation-json-popover"
-                    sx={{
-                        position: 'fixed',
-                        top: 0,
-                        right: 0,
-                        zIndex: 9999,
-                        width: '400px',
-                        height: '100vh',
-                        overflow: 'auto',
-                        bgcolor: '#242424',
-                        color: '#fff',
-                        border: '1px solid #333',
-                        '&::-webkit-scrollbar': {
-                            width: '6px',
-                        },
-                        '&::-webkit-scrollbar-track': {
-                            background: 'transparent',
-                        },
-                        '&::-webkit-scrollbar-thumb': {
-                            background: '#444',
-                            borderRadius: '3px',
-                            '&:hover': {
-                                background: '#666',
-                            },
-                        },
-                    }}
-                >
-                    <CardContent sx={{ bgcolor: '#242424', color: '#fff' }}>
-                        <IconButton
-                            aria-label="close"
-                            onClick={handleClose}
-                            sx={{
-                                color: '#999',
-                                '&:hover': {
-                                    color: '#fff',
-                                    bgcolor: 'rgba(255, 255, 255, 0.1)',
-                                },
-                            }}
-                        >
-                            <RiCloseLine />
-                        </IconButton>
-                        {/* Show execution result prominently if available */}
-                        {data.formData?.executionResult && (
-                            <Box sx={{ mb: 2 }}>
-                                <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
-                                    {t('automation.common.executionResult')}
-                                </Typography>
-                                <Box sx={{
-                                    bgcolor: data.formData.executionResult.success ? '#1e3a8a' : '#dc2626',
-                                    p: 1,
-                                    borderRadius: 1,
-                                    mb: 1
-                                }}>
-                                    <Typography variant="body2" sx={{ color: '#fff' }}>
-                                        {t('automation.common.status')}: {data.formData.executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
-                                    </Typography>
-                                    <Typography variant="body2" sx={{ color: '#fff' }}>
-                                        {t('automation.common.timestamp')}: {new Date(data.formData.executionResult.timestamp).toLocaleString()}
-                                    </Typography>
-                                    {data.formData.executionResult.error && (
-                                        <Typography variant="body2" sx={{ color: '#fff' }}>
-                                            {t('automation.common.error')}: {data.formData.executionResult.error}
-                                        </Typography>
-                                    )}
-                                </Box>
-                                <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
-                                    Sheets Data
-                                </Typography>
-                                <ReactJson
-                                    theme={'monokai'}
-                                    src={data.formData.executionResult.data}
-                                    collapsed={false}
-                                />
-                            </Box>
-                        )}
-
-                        {/* Show full node data */}
-                        <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
-                            Full Node Data
-                        </Typography>
-                        <ReactJson theme={'monokai'} src={data.formData || data} collapsed={false} />
-                    </CardContent>
-                </Card>
-            );
-        } else {
-            // Clean up when closing
-            if (rootRef.current) {
-                rootRef.current.unmount();
-                rootRef.current = null;
-            }
-            if (portalRef.current) {
-                document.body.removeChild(portalRef.current);
-                portalRef.current = null;
-            }
-        }
-    }, [isJsonOpen, data]);
-
-    // Output Method Component for Google Sheets
-    const GoogleSheetsOutputMethod = () => (
-        <Box sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            py: 2,
-            px: 2,
-            borderBottom: '1px solid #334155',
-            '&:hover': {
-                backgroundColor: 'rgba(255, 255, 255, 0.05)',
-            },
-            cursor: 'pointer',
-        }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                {/* Google Sheets Icon */}
-                <Box sx={{
-                    width: '32px',
-                    height: '32px',
-                    backgroundColor: '#10b981',
-                    borderRadius: '6px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                    <TableChartIcon sx={{ color: 'white', fontSize: '18px' }} />
-                </Box>
-
-                <Box>
-                    <Typography variant="body2" sx={{
-                        color: '#ffffff',
-                        fontSize: '14px',
-                        fontWeight: 600,
-                        mb: 0.5
-                    }}>
-                        {t('automation.sheetsNode.googleSheets')}
-                    </Typography>
-                    <Typography variant="body2" sx={{
-                        color: '#94a3b8',
-                        fontSize: '12px',
-                        mb: 0.5
-                    }}>
-                        {t('automation.sheetsNode.readWriteRows')}
-                    </Typography>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                        <DescriptionIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
-                        <Typography variant="body2" sx={{
-                            color: '#94a3b8',
-                            fontSize: '11px'
-                        }}>
-                            {t('automation.sheetsNode.sheet')}: {data.sheetsConfig?.sheetName || data.formData?.sheetsConfig?.sheetName || 'Sheet'}
-                        </Typography>
-                    </Box>
-                </Box>
-            </Box>
-
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                {/* Status Badge */}
-                <StatusBadge status={determineGoogleSheetsStatus()} />
-                <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
-            </Box>
-        </Box>
-    );
-
-    // Output Method Component for Gmail
-    const GmailOutputMethod = () => (
-        <Box sx={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            py: 2,
-            px: 2,
-            borderBottom: '1px solid #334155',
-            '&:hover': {
-                backgroundColor: 'rgba(255, 255, 255, 0.05)',
-            },
-            cursor: 'pointer',
-        }}>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                {/* Gmail Icon */}
-                <Box sx={{
-                    width: '32px',
-                    height: '32px',
-                    backgroundColor: '#dc2626',
-                    borderRadius: '6px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                    <EmailIcon sx={{ color: 'white', fontSize: '18px' }} />
-                </Box>
-
-                <Box>
-                    <Typography variant="body2" sx={{
-                        color: '#ffffff',
-                        fontSize: '14px',
-                        fontWeight: 600,
-                        mb: 0.5
-                    }}>
-                        {t('automation.sheetsNode.gmail')}
-                    </Typography>
-                    <Typography variant="body2" sx={{
-                        color: '#94a3b8',
-                        fontSize: '12px',
-                        mb: 0.5
-                    }}>
-                        {t('automation.sheetsNode.sendEmail')}
-                    </Typography>
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                        <DraftsIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
-                        <Typography variant="body2" sx={{
-                            color: '#94a3b8',
-                            fontSize: '11px'
-                        }}>
-                            {t('automation.sheetsNode.drafts')}: {data.exportOptions?.emailRecipients?.length || 0}
-                        </Typography>
-                    </Box>
-                </Box>
-            </Box>
-
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                {/* Status Badge */}
-                <StatusBadge status={determineGmailStatus()} />
-                <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
-            </Box>
-        </Box>
-    );
-
-    // Output Method Component for Slack
-    const SlackOutputMethod = () => {
-        const slack = (data.formData?.exportOptions?.slack || (data as any).exportOptions?.slack) || {};
-        return (
-            <Box sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                py: 2,
-                px: 2,
-                borderBottom: '1px solid #334155',
-                '&:hover': {
-                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                },
-                cursor: 'pointer',
-            }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                    {/* Slack Icon-like box */}
-                    <Box sx={{
-                        width: '32px',
-                        height: '32px',
-                        backgroundColor: '#4A154B',
-                        borderRadius: '6px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}>
-                        <SendIcon sx={{ color: 'white', fontSize: '18px' }} />
-                    </Box>
-
-                    <Box>
-                        <Typography variant="body2" sx={{
-                            color: '#ffffff',
-                            fontSize: '14px',
-                            fontWeight: 600,
-                            mb: 0.5
-                        }}>
-                            {t('automation.sheetsNode.slack')}
-                        </Typography>
-                        <Typography variant="body2" sx={{
-                            color: '#94a3b8',
-                            fontSize: '12px',
-                            mb: 0.5
-                        }}>
-                            {t('automation.sheetsNode.sendMessage')}
-                        </Typography>
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                            <TableRowsIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
-                            <Typography variant="body2" sx={{
-                                color: '#94a3b8',
-                                fontSize: '11px'
-                            }}>
-                                {t('automation.sheetsNode.channel')}: {slack.channel ? `#${slack.channel}` : t('automation.sheetsNode.notSet')}
-                            </Typography>
-                        </Box>
-                    </Box>
-                </Box>
-
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <StatusBadge status={determineSlackStatus()} />
-                    <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
-                </Box>
-            </Box>
-        );
-    };
-
-    // Output Method Component for WhatsApp
-    const WhatsAppOutputMethod = () => {
-        const whatsapp = (data.formData?.exportOptions?.whatsapp || data.exportOptions?.whatsapp) || {};
-        const isTwilioEnabled = whatsapp.twilio?.enabled;
-
-        return (
-            <Box sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                py: 2,
-                px: 2,
-                borderBottom: '1px solid #334155',
-                '&:hover': {
-                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                },
-                cursor: 'pointer',
-            }}
-                onClick={() => {
-                    if (whatsapp.enabled && whatsapp.phoneNumber && !isTwilioEnabled) {
-                        const executionData = data.formData?.executionResult || {};
-                        sendWhatsAppMessage(whatsapp.phoneNumber, executionData);
-                    }
-                }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-                    {/* WhatsApp Icon */}
-                    <Box sx={{
-                        width: '32px',
-                        height: '32px',
-                        backgroundColor: '#25D366',
-                        borderRadius: '6px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    }}>
-                        <WhatsAppIcon sx={{ color: 'white', fontSize: '18px' }} />
-                    </Box>
-
-                    <Box>
-                        <Typography variant="body2" sx={{
-                            color: '#ffffff',
-                            fontSize: '14px',
-                            fontWeight: 600,
-                            mb: 0.5
-                        }}>
-                            {isTwilioEnabled ? t('automation.sheetsNode.whatsappTwilio') : t('automation.sheetsNode.whatsappWeb')}
-                        </Typography>
-                        <Typography variant="body2" sx={{
-                            color: '#94a3b8',
-                            fontSize: '12px',
-                            mb: 0.5
-                        }}>
-                            {isTwilioEnabled ? t('automation.sheetsNode.apiSend') : t('automation.sheetsNode.sendMessage')}
-                        </Typography>
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                            <PhoneIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
-                            <Typography variant="body2" sx={{
-                                color: '#94a3b8',
-                                fontSize: '11px'
-                            }}>
-                                {t('automation.sheetsNode.phone')}: {whatsapp.phoneNumber || t('automation.sheetsNode.notSet')}
-                            </Typography>
-                        </Box>
-                        {isTwilioEnabled && (
-                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
-                                <Typography variant="body2" sx={{
-                                    color: whatsapp.twilio?.isSandbox ? '#f59e0b' : '#10b981',
-                                    fontSize: '10px',
-                                    fontWeight: 500
-                                }}>
-                                    {whatsapp.twilio?.isSandbox ? t('automation.sheetsNode.sandboxMode') : t('automation.sheetsNode.productionMode')}
-                                </Typography>
-                            </Box>
-                        )}
-                    </Box>
-                </Box>
-
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    <StatusBadge status={determineWhatsAppStatus()} />
-                    <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
-                </Box>
-            </Box>
-        );
-    };
-
-    return (
-        <Box
-            sx={{
-                position: 'relative',
-                width: '380px',
-                overflow: 'visible',
-            }}
-        >
-            <Box
-                ref={nodeRef}
-                sx={{
-                    width: '380px',
-                    minHeight: '280px',
-                    backgroundColor: '#181C25', // Darker background like in image
-                    border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
-                    borderRadius: '12px',
-                    padding: '0',
-                    color: '#ffffff',
-                    position: 'relative',
-                    boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
-                    transition: 'all 0.2s ease',
-                    cursor: 'pointer',
-                    overflow: 'hidden',
-                    ...(data.status === 'Running' && {
-                        animation: 'pulse-glow 2s ease-in-out infinite',
-                        '@keyframes pulse-glow': {
-                            '0%, 100%': {
-                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
-                                borderColor: 'rgba(59, 130, 246, 0.6)',
-                            },
-                            '50%': {
-                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
-                                borderColor: 'rgba(59, 130, 246, 0.9)',
-                            },
-                        },
-                    }),
-                }}
-                onClick={handleJsonClick}
-            >
-            {/* Header */}
-            <Box sx={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                p: 3,
-                borderBottom: '1px solid #334155'
-            }}>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                    <Box
-                        sx={{
-                            width: '32px',
-                            height: '32px',
-                            backgroundColor: '#3b82f6', // Blue color like in image
-                            borderRadius: '6px',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
-                    </Box>
-                    <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
-                        {data.label}
-                    </Typography>
-                </Box>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                    {/* Status Chip */}
-                    <Chip
-                        label={(() => {
-                            // Map node status to standard status values
-                            const nodeStatus = getNodeStatus();
-                            if (nodeStatus === 'Failed' || data.status === 'Error') return 'Error';
-                            if (nodeStatus === 'Running' || data.status === 'Running') return 'Running';
-                            if (nodeStatus === 'Success' || data.status === 'Completed') return 'Completed';
-                            return data.status || 'Ready';
-                        })()}
-                        size="small"
-                        sx={{
-                            backgroundColor: (() => {
-                                const status = data.status || 'Ready';
-                                return status === 'Completed'
-                                    ? 'rgba(37, 99, 235, 0.1)'
-                                    : status === 'Running'
-                                        ? 'rgba(251, 191, 36, 0.1)'
-                                        : status === 'Error'
-                                            ? 'rgba(239, 68, 68, 0.1)'
-                                            : 'rgba(16, 185, 129, 0.1)';
-                            })(),
-                            color: (() => {
-                                const status = data.status || 'Ready';
-                                return status === 'Completed'
-                                    ? '#93C5FD'
-                                    : status === 'Running'
-                                        ? '#FCD34D'
-                                        : status === 'Error'
-                                            ? '#FCA5A5'
-                                            : '#86EFAC';
-                            })(),
-                            fontWeight: 500,
-                            fontSize: '12px',
-                            height: '24px',
-                            borderRadius: '12px',
-                        }}
-                    />
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-                        <AccessTimeIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
-                        <Typography variant="body2" sx={{ color: '#94a3b8', fontSize: '11px' }}>
-                            {t('automation.common.lastRun')}: {data.lastRun || '2m ago'}
-                        </Typography>
-                    </Box>
-                </Box>
-            </Box>
-
-            {/* Output Methods */}
-            <Box>
-                {showSheets && <GoogleSheetsOutputMethod />}
-                {showGmail && <GmailOutputMethod />}
-                {showSlack && <SlackOutputMethod />}
-                {showWhatsApp && <WhatsAppOutputMethod />}
-                {!showGmail && !showSlack && !showWhatsApp && (
-                    <Typography variant="body2" sx={{ color: '#94a3b8', p: 2 }}>
-                        {t('automation.sheetsNode.noOutputMethodsConfigured')}
-                    </Typography>
-                )}
-            </Box>
-
-            {/* Add Configuration Button */}
-            <Box sx={{
-                p: 2,
-                display: 'flex',
-                justifyContent: 'center',
-                borderTop: '1px solid #334155'
-            }}>
-                <Button
-                    startIcon={<AddIcon sx={{ fontSize: '16px' }} />}
-                    sx={{
-                        color: '#94a3b8',
-                        fontSize: '12px',
-                        textTransform: 'none',
-                        '&:hover': {
-                            backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                            color: '#ffffff',
-                        },
-                    }}
-                >
-                    {t('automation.sheetsNode.addConfiguration')}
-                </Button>
-            </Box>
-
-            {/* Connection Handles - Bidirectional (source + target at each position) */}
-            {/* Top - Source */}
-            <Handle
-                type="source"
-                position={Position.Top}
-                id="top-source"
-                className="connection-handle"
-                style={{
-                    background: selected ? '#10B981' : '#1a1a2e',
-                    width: '14px',
-                    height: '14px',
-                    border: '3px solid #10B981',
-                    top: '-8px',
-                    opacity: selected ? 1 : 0,
-                    transition: 'all 0.2s ease-in-out',
-                    cursor: 'crosshair',
-                    zIndex: 10,
-                }}
-            />
-            {/* Top - Target (hidden but functional) */}
-            <Handle
-                type="target"
-                position={Position.Top}
-                id="top-target"
-                style={{
-                    background: 'transparent',
-                    width: '14px',
-                    height: '14px',
-                    border: 'none',
-                    top: '-8px',
-                    opacity: 0,
-                    pointerEvents: selected ? 'all' : 'none',
-                }}
-            />
-            {/* Bottom - Source */}
-            <Handle
-                type="source"
-                position={Position.Bottom}
-                id="bottom-source"
-                className="connection-handle"
-                style={{
-                    background: selected ? '#10B981' : '#1a1a2e',
-                    width: '14px',
-                    height: '14px',
-                    border: '3px solid #10B981',
-                    bottom: '-8px',
-                    opacity: selected ? 1 : 0,
-                    transition: 'all 0.2s ease-in-out',
-                    cursor: 'crosshair',
-                    zIndex: 10,
-                }}
-            />
-            {/* Bottom - Target (hidden but functional) */}
-            <Handle
-                type="target"
-                position={Position.Bottom}
-                id="bottom-target"
-                style={{
-                    background: 'transparent',
-                    width: '14px',
-                    height: '14px',
-                    border: 'none',
-                    bottom: '-8px',
-                    opacity: 0,
-                    pointerEvents: selected ? 'all' : 'none',
-                }}
-            />
-            {/* Left - Source */}
-            <Handle
-                type="source"
-                position={Position.Left}
-                id="left-source"
-                className="connection-handle"
-                style={{
-                    background: selected ? '#10B981' : '#1a1a2e',
-                    width: '14px',
-                    height: '14px',
-                    border: '3px solid #10B981',
-                    left: '-8px',
-                    opacity: selected ? 1 : 0,
-                    transition: 'all 0.2s ease-in-out',
-                    cursor: 'crosshair',
-                    zIndex: 10,
-                }}
-            />
-            {/* Left - Target (hidden but functional) */}
-            <Handle
-                type="target"
-                position={Position.Left}
-                id="left-target"
-                style={{
-                    background: 'transparent',
-                    width: '14px',
-                    height: '14px',
-                    border: 'none',
-                    left: '-8px',
-                    opacity: 0,
-                    pointerEvents: selected ? 'all' : 'none',
-                }}
-            />
-            {/* Right - Source */}
-            <Handle
-                type="source"
-                position={Position.Right}
-                id="right-source"
-                className="connection-handle"
-                style={{
-                    background: selected ? '#10B981' : '#1a1a2e',
-                    width: '14px',
-                    height: '14px',
-                    border: '3px solid #10B981',
-                    right: '-8px',
-                    opacity: selected ? 1 : 0,
-                    transition: 'all 0.2s ease-in-out',
-                    cursor: 'crosshair',
-                    zIndex: 10,
-                }}
-            />
-            {/* Right - Target (hidden but functional) */}
-            <Handle
-                type="target"
-                position={Position.Right}
-                id="right-target"
-                style={{
-                    background: 'transparent',
-                    width: '14px',
-                    height: '14px',
-                    border: 'none',
-                    right: '-8px',
-                    opacity: 0,
-                    pointerEvents: selected ? 'all' : 'none',
-                }}
-            />
-
-            </Box>
-
-            {/* Node Action Buttons - Shows when selected */}
-            <NodeActionButtons
-                selected={selected}
-                onOpenAIAssistant={(buttonElement) => {
-                    if (nodeId) {
-                        showNodeAIAssistantPopup(nodeId, 'Sheets Node', buttonElement);
-                    }
-                }}
-                onDelete={() => {
-                    if (nodeId && onNodesChange) {
-                        onNodesChange([{ id: nodeId, type: 'remove' }]);
-                    }
-                }}
-                onDuplicate={() => {
-                    if (nodeId) {
-                        const currentNode = nodes.find(n => n.id === nodeId);
-                        if (currentNode) {
-                            const newNode = {
-                                ...currentNode,
-                                id: `${currentNode.id}-copy-${Date.now()}`,
-                                position: {
-                                    x: currentNode.position.x + 50,
-                                    y: currentNode.position.y + 50,
-                                },
-                                selected: false,
-                            };
-                            setNodes([...nodes, newNode]);
-                        }
-                    }
-                }}
-            />
-
-            {/* AI Suggestions Button - Positioned below the node box */}
-            {data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && (
-                <Box
-                    sx={{
-                        position: 'absolute',
-                        top: '100%',
-                        left: '50%',
-                        transform: 'translateX(-50%)',
-                        marginTop: '12px',
-                        zIndex: 10,
-                        whiteSpace: 'nowrap',
-                    }}
-                    onClick={(e) => {
-                        e.stopPropagation();
-                        // Toggle AI Suggestions panel
-                        setShowSuggestions(!showSuggestions);
-                    }}
-                >
-                    <Button
-                        variant="contained"
-                        startIcon={<LightbulbIcon sx={{ fontSize: '12px' }} />}
-                        sx={{
-                            backgroundColor: '#2563EB',
-                            color: '#ffffff',
-                            borderRadius: '20px',
-                            textTransform: 'none',
-                            fontSize: '10px',
-                            fontWeight: 400,
-                            padding: '8px 16px',
-                            whiteSpace: 'nowrap',
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
-                            '&:hover': {
-                                backgroundColor: '#2563eb',
-                            },
-                            '& .MuiButton-startIcon': {
-                                marginRight: '8px',
-                            }
-                        }}
-                    >
-                        AI Suggestions
-                        <Box
-                            component="span"
-                            sx={{
-                                marginLeft: '8px',
-                                backgroundColor: '#FFFFFF26',
-                                color: '#ffffff',
-                                fontSize: '10px',
-                                fontWeight: 400,
-                                minWidth: '18px',
-                                height: '18px',
-                                borderRadius: '9px',
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                padding: '0 6px',
-                                border: '1px solid rgba(255, 255, 255, 0.2)',
-                            }}
-                        >
-                            {data.formData.aiSuggestionsCount}
-                        </Box>
-                    </Button>
-                </Box>
-            )}
-
-            {/* AI Suggestions Panel - Rendered on canvas below the button */}
-            {showSuggestions && data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && nodeId && (
-                <AISuggestionsPanel
-                    suggestions={data.formData?.aiSuggestions || [
-                        {
-                            id: '1',
-                            title: 'Add Citation Extraction',
-                            description: 'Automatically extract and format citations from article content.',
-                            tags: ['classification', 'enhancement'],
-                        },
-                        {
-                            id: '2',
-                            title: 'Generate Bullet Summary',
-                            description: 'Create a concise bullet-point summary of the article\'s main points.',
-                            tags: ['classification', 'enhancement'],
-                        },
-                    ]}
-                    parentNodeId={nodeId}
-                    onSuggestionClick={(suggestion) => {
-                        console.log('Suggestion clicked:', suggestion);
-                        // Handle suggestion selection here
-                    }}
-                    onClose={() => setShowSuggestions(false)}
-                />
-            )}
-        </Box>
-    );
-};
-
+import React, { useEffect, useState, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Handle, Position, useNodeId } from '@xyflow/react';
+import { Box, Typography, Chip, IconButton, Card, CardContent, Button } from '@mui/material';
+import {
+    TableChart as TableChartIcon,
+    AccessTime as AccessTimeIcon,
+    Save as SaveIcon,
+    Send as SendIcon,
+    Settings as SettingsIcon,
+    TableRows as TableRowsIcon,
+    Email as EmailIcon,
+    Description as DescriptionIcon,
+    Drafts as DraftsIcon,
+    Add as AddIcon,
+    CheckCircle as CheckCircleIcon,
+    Settings as ConfigureIcon,
+    Error as ErrorIcon,
+    ArrowForwardIos as ArrowForwardIcon,
+    WhatsApp as WhatsAppIcon,
+    Phone as PhoneIcon,
+    Lightbulb as LightbulbIcon
+} from '@mui/icons-material';
+import { RiCloseLine } from 'react-icons/ri';
+import ReactJson from 'react-json-view';
+import { getIconByName } from '../../utils/iconMapper';
+import { useTranslation } from 'react-i18next';
+import { useDiagram } from '../../contexts/DiagramProvider';
+import { AISuggestion } from './AISuggestionsModal';
+import { AISuggestionsPanel } from './AISuggestionsPanel';
+import { NodeActionButtons } from './NodeActionButtons';
+
+interface AutomationSheetsNodeProps {
+    data: {
+        label: string;
+        description: string;
+        status: 'Ready' | 'Running' | 'Completed' | 'Error';
+        inputVariable: string;
+        lastRun?: string;
+        iconName?: string;
+        sheetsConfig: {
+            spreadsheetId: string;
+            sheetName: string;
+            range: string;
+            credentials: {
+                type: 'service-account' | 'oauth' | 'api-key';
+                serviceAccountKey?: string;
+                oauthToken?: string;
+                apiKey?: string;
+            };
+        };
+        dataMapping: {
+            headers: Array<{
+                column: string;
+                sourceField: string;
+                dataType: 'string' | 'number' | 'date' | 'boolean';
+            }>;
+            appendMode: boolean;
+            clearSheet: boolean;
+        };
+        exportOptions: {
+            emailRecipients: string[];
+            fileName: string;
+            exportFormat: 'sheets' | 'excel' | 'both';
+            includeHeaders: boolean;
+            sendEmailNotification: boolean;
+            // Optional fields for Gmail output configuration (may live under formData.exportOptions)
+            emailSendEnabled?: boolean;
+            emailSender?: string;
+            emailSubject?: string;
+            emailMessage?: string;
+            // WhatsApp configuration
+            whatsapp?: {
+                enabled: boolean;
+                phoneNumber: string;
+                messageTemplate: string;
+                includeDataMode: 'json' | 'summary' | 'custom';
+                // Twilio configuration
+                twilio?: {
+                    enabled: boolean;
+                    accountSid: string;
+                    authToken: string;
+                    fromNumber: string;
+                    isSandbox: boolean;
+                    templateSid?: string;
+                    templateVariables?: Record<string, string>;
+                };
+            };
+        };
+        formData?: {
+            aiSuggestionsCount?: number; // Number of AI suggestions available
+            [key: string]: any;
+        };
+        // Optional per-output-method statuses supplied by engine
+        outputStatuses?: {
+            googleSheets?: 'not-set' | 'configured' | 'running' | 'connected' | 'failed';
+            gmail?: 'not-set' | 'configured' | 'running' | 'connected' | 'failed';
+            whatsapp?: 'not-set' | 'configured' | 'running' | 'connected' | 'failed';
+        };
+    };
+    selected?: boolean;
+}
+
+export const AutomationSheetsNode: React.FC<AutomationSheetsNodeProps> = ({ data, selected }) => {
+    const { t } = useTranslation();
+    const [isJsonOpen, setIsJsonOpen] = useState(false);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const rootRef = useRef<any>(null);
+    const portalRef = useRef<HTMLDivElement | null>(null);
+    const nodeRef = useRef<HTMLDivElement | null>(null);
+    const nodeId = useNodeId();
+    const setSelectedNode = useDiagram((state) => state.setSelectedNode);
+    const enableJson = useDiagram((state) => state.enableNodeJsonPopover ?? true);
+    const onNodesChange = useDiagram((state) => state.onNodesChange);
+    const nodes = useDiagram((state) => state.nodes);
+    const setNodes = useDiagram((state) => state.setNodes);
+
+    // Get the icon component based on the iconName
+    const IconComponent = getIconByName(data.iconName || 'TableChart');
+
+    // Resolve export options from formData or data
+    const exportOptions = (data.formData?.exportOptions || (data as any).exportOptions) || {};
+    const showSheets = Boolean(
+        exportOptions?.exportFormat === 'sheets' || exportOptions?.exportFormat === 'both'
+    );
+    const showGmail = Boolean(
+        exportOptions.emailSendEnabled &&
+        exportOptions.emailSender &&
+        (exportOptions.emailRecipients?.length || 0) > 0 &&
+        exportOptions.emailSubject &&
+        exportOptions.emailMessage
+    );
+    const showSlack = Boolean(
+        exportOptions.slack?.enabled &&
+        exportOptions.slack?.webhookUrl &&
+        exportOptions.slack?.channel
+    );
+    const showWhatsApp = Boolean(
+        exportOptions.whatsapp?.enabled &&
+        exportOptions.whatsapp?.phoneNumber
+    );
+
+    // Determine Google Sheets status from provided data and execution result
+    const determineGoogleSheetsStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
+        // Prefer status provided by engine
+        if (data.outputStatuses?.googleSheets) return data.outputStatuses.googleSheets;
+
+        // Required config check (accepts either spreadsheetId or OAuth clientId that can create one)
+        const cfg = (data.formData?.sheetsConfig || data.sheetsConfig) || {};
+        const creds = cfg.credentials || {};
+        const hasRequired = Boolean((cfg.spreadsheetId || creds.clientId) && cfg.sheetName && creds.type);
+        if (!hasRequired) return 'not-set';
+
+        // Running inferred from node status
+        if (data.status === 'Running') return 'running';
+
+        // Execution result inference
+        const exec = data.formData?.executionResult || (data as any).executionResult;
+        if (exec?.success === true) return 'connected';
+        if (exec?.success === false || data.status === 'Error') return 'failed';
+        return 'configured';
+    };
+
+    // Determine Gmail status
+    const determineGmailStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
+        // Prefer status provided by engine
+        if (data.outputStatuses?.gmail) return data.outputStatuses.gmail;
+
+        const ex = (data.formData?.exportOptions || data.exportOptions) || {};
+        const hasRequired = Boolean(
+            ex.emailSendEnabled && ex.emailSender && (ex.emailRecipients?.length || 0) > 0 && ex.emailSubject && ex.emailMessage
+        );
+        if (!hasRequired) return 'not-set';
+
+        if (data.status === 'Running') return 'running';
+
+        const exec = data.formData?.executionResult || (data as any).executionResult;
+        if (exec?.success === true) return 'connected';
+        if (exec?.success === false || data.status === 'Error') return 'failed';
+        return 'configured';
+    };
+
+    // Determine Slack status
+    const determineSlackStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
+        if ((data as any).outputStatuses?.slack) return (data as any).outputStatuses.slack;
+        const slack = (data.formData?.exportOptions?.slack || (data as any).exportOptions?.slack) || {};
+        if (!slack.enabled || !slack.webhookUrl || !slack.channel) return 'not-set';
+        if (data.status === 'Running') return 'running';
+        const exec = data.formData?.executionResult || (data as any).executionResult;
+        if (exec?.success === true) return 'connected';
+        if (exec?.success === false || data.status === 'Error') return 'failed';
+        return 'configured';
+    };
+
+    // Determine WhatsApp status
+    const determineWhatsAppStatus = (): 'not-set' | 'configured' | 'running' | 'connected' | 'failed' => {
+        if (data.outputStatuses?.whatsapp) return data.outputStatuses.whatsapp;
+
+        const whatsapp = (data.formData?.exportOptions?.whatsapp || data.exportOptions?.whatsapp) || {};
+
+        // Check if Twilio is configured
+        if (whatsapp.twilio?.enabled) {
+            const twilioConfig = whatsapp.twilio;
+            const hasRequiredTwilio = Boolean(
+                twilioConfig.accountSid &&
+                twilioConfig.authToken &&
+                twilioConfig.fromNumber &&
+                whatsapp.phoneNumber
+            );
+            if (!hasRequiredTwilio) return 'not-set';
+        } else {
+            // Fallback to basic WhatsApp Web check
+            if (!whatsapp.enabled || !whatsapp.phoneNumber) return 'not-set';
+        }
+
+        if (data.status === 'Running') return 'running';
+
+        const exec = data.formData?.executionResult || (data as any).executionResult;
+        if (exec?.success === true) return 'connected';
+        if (exec?.success === false || data.status === 'Error') return 'failed';
+        return 'configured';
+    };
+
+    const getNodeStatus = (): string => {
+        const gs = determineGoogleSheetsStatus();
+        const gm = determineGmailStatus();
+        const sl = determineSlackStatus();
+        const wa = determineWhatsAppStatus();
+        if (gs === 'failed' || gm === 'failed' || sl === 'failed' || wa === 'failed') return 'Failed';
+        if (gs === 'running' || gm === 'running' || sl === 'running' || wa === 'running') return 'Running';
+        if (
+            (gs === 'connected' || gs === 'not-set') &&
+            (gm === 'connected' || gm === 'not-set') &&
+            (sl === 'connected' || sl === 'not-set') &&
+            (wa === 'connected' || wa === 'not-set')
+        ) return 'Success';
+        if (
+            (gs === 'configured' || gs === 'not-set') &&
+            (gm === 'configured' || gm === 'not-set') &&
+            (sl === 'configured' || sl === 'not-set') &&
+            (wa === 'configured' || wa === 'not-set')
+        ) return 'Ready';
+        return 'Mixed Status';
+    };
+
+    // Status badge (shared)
+    const StatusBadge = ({ status }: { status: 'not-set' | 'configured' | 'running' | 'connected' | 'failed' }) => {
+        const cfg = (
+            status === 'not-set' ? { icon: <ErrorIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.notSet'), bg: '#6b7280' } :
+                status === 'configured' ? { icon: <ConfigureIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.configured'), bg: '#3b82f6' } :
+                    status === 'running' ? { icon: <SettingsIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.running'), bg: '#f59e0b' } :
+                        status === 'connected' ? { icon: <CheckCircleIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.connected'), bg: '#10b981' } :
+                            { icon: <ErrorIcon sx={{ fontSize: '12px' }} />, label: t('automation.sheetsNode.status.failed'), bg: '#ef4444' }
+        );
+        return (
+            <Chip
+                icon={cfg.icon}
+                label={cfg.label}
+                size="small"
+                sx={{
+                    backgroundColor: cfg.bg,
+                    color: 'white',
+                    fontSize: '11px',
+                    height: '20px',
+                    '& .MuiChip-icon': { fontSize: '12px' },
+                }}
+            />
+        );
+    };
+
+    // WhatsApp message sending function
+    const sendWhatsAppMessage = (phoneNumber: string, data: any) => {
+        const message = `
+Automation Result:
+------------------
+Name: ${data.name || 'Automation Workflow'}
+Score: ${data.score || 'N/A'}
+Status: ${data.status || 'Completed'}
+Timestamp: ${new Date().toLocaleString()}
+Data: ${JSON.stringify(data, null, 2)}
+        `;
+        const encodedMsg = encodeURIComponent(message);
+        const url = `https://wa.me/${phoneNumber}?text=${encodedMsg}`;
+        window.open(url, '_blank');
+    };
+
+    const handleJsonClick = () => {
+        if (nodeId) setSelectedNode(nodeId);
+        if (!enableJson) return;
+        setIsJsonOpen(!isJsonOpen);
+    };
+
+    const handleClose = () => {
+        setIsJsonOpen(false);
+        // Clean up portal
+        if (rootRef.current) {
+            rootRef.current.unmount();
+            rootRef.current = null;
+        }
+        if (portalRef.current) {
+            document.body.removeChild(portalRef.current);
+            portalRef.current = null;
+        }
+    };
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (isJsonOpen && !(event.target as Element).closest('#automation-json-popover')) {
+                handleClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isJsonOpen]);
+
+
+    useEffect(() => {
+        if (isJsonOpen) {
+            const portalRoot = document.createElement('div');
+            document.body.appendChild(portalRoot);
+            portalRef.current = portalRoot;
+
+            const root = createRoot(portalRoot);
+            rootRef.current = root;
+
+            root.render(
+                <Card
+                    id="automation-json-popover"
+                    sx={{
+                        position: 'fixed',
+                        top: 0,
+                        right: 0,
+                        zIndex: 9999,
+                        width: '400px',
+                        height: '100vh',
+                        overflow: 'auto',
+                        bgcolor: '#242424',
+                        color: '#fff',
+                        border: '1px solid #333',
+                        '&::-webkit-scrollbar': {
+                            width: '6px',
+                        },
+                        '&::-webkit-scrollbar-track': {
+                            background: 'transparent',
+                        },
+                        '&::-webkit-scrollbar-thumb': {
+                            background: '#444',
+                            borderRadius: '3px',
+                            '&:hover': {
+                                background: '#666',
+                            },
+                        },
+                    }}
+                >
+                    <CardContent sx={{ bgcolor: '#242424', color: '#fff' }}>
+                        <IconButton
+                            aria-label="close"
+                            onClick={handleClose}
+                            sx={{
+                                color: '#999',
+                                '&:hover': {
+                                    color: '#fff',
+                                    bgcolor: 'rgba(255, 255, 255, 0.1)',
+                                },
+                            }}
+                        >
+                            <RiCloseLine />
+                        </IconButton>
+                        {/* Show execution result prominently if available */}
+                        {data.formData?.executionResult && (
+                            <Box sx={{ mb: 2 }}>
+                                <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
+                                    {t('automation.common.executionResult')}
+                                </Typography>
+                                <Box sx={{
+                                    bgcolor: data.formData.executionResult.success ? '#1e3a8a' : '#dc2626',
+                                    p: 1,
+                                    borderRadius: 1,
+                                    mb: 1
+                                }}>
+                                    <Typography variant="body2" sx={{ color: '#fff' }}>
+                                        {t('automation.common.status')}: {data.formData.executionResult.success ? t('automation.common.success') : t('automation.common.failed')}
+                                    </Typography>
+                                    <Typography variant="body2" sx={{ color: '#fff' }}>
+                                        {t('automation.common.timestamp')}: {new Date(data.formData.executionResult.timestamp).toLocaleString()}
+                                    </Typography>
+                                    {data.formData.executionResult.error && (
+                                        <Typography variant="body2" sx={{ color: '#fff' }}>
+                                            {t('automation.common.error')}: {data.formData.executionResult.error}
+                                        </Typography>
+                                    )}
+                                </Box>
+                                <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
+                                    Sheets Data
+                                </Typography>
+                                <ReactJson
+                                    theme={'monokai'}
+                                    src={data.formData.executionResult.data}
+                                    collapsed={false}
+                                />
+                            </Box>
+                        )}
+
+                        {/* Show full node data */}
+                        <Typography variant="h6" sx={{ color: '#fff', mb: 1 }}>
+                            Full Node Data
+                        </Typography>
+                        <ReactJson theme={'monokai'} src={data.formData || data} collapsed={false} />
+                    </CardContent>
+                </Card>
+            );
+        } else {
+            // Clean up when closing
+            if (rootRef.current) {
+                rootRef.current.unmount();
+                rootRef.current = null;
+            }
+            if (portalRef.current) {
+                document.body.removeChild(portalRef.current);
+                portalRef.current = null;
+            }
+        }
+    }, [isJsonOpen, data]);
+
+    // Output Method Component for Google Sheets
+    const GoogleSheetsOutputMethod = () => (
+        <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            py: 2,
+            px: 2,
+            borderBottom: '1px solid #334155',
+            '&:hover': {
+                backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            },
+            cursor: 'pointer',
+        }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                {/* Google Sheets Icon */}
+                <Box sx={{
+                    width: '32px',
+                    height: '32px',
+                    backgroundColor: '#10b981',
+                    borderRadius: '6px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <TableChartIcon sx={{ color: 'white', fontSize: '18px' }} />
+                </Box>
+
+                <Box>
+                    <Typography variant="body2" sx={{
+                        color: '#ffffff',
+                        fontSize: '14px',
+                        fontWeight: 600,
+                        mb: 0.5
+                    }}>
+                        {t('automation.sheetsNode.googleSheets')}
+                    </Typography>
+                    <Typography variant="body2" sx={{
+                        color: '#94a3b8',
+                        fontSize: '12px',
+                        mb: 0.5
+                    }}>
+                        {t('automation.sheetsNode.readWriteRows')}
+                    </Typography>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        <DescriptionIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
+                        <Typography variant="body2" sx={{
+                            color: '#94a3b8',
+                            fontSize: '11px'
+                        }}>
+                            {t('automation.sheetsNode.sheet')}: {data.sheetsConfig?.sheetName || data.formData?.sheetsConfig?.sheetName || 'Sheet'}
+                        </Typography>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                {/* Status Badge */}
+                <StatusBadge status={determineGoogleSheetsStatus()} />
+                <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
+            </Box>
+        </Box>
+    );
+
+    // Output Method Component for Gmail
+    const GmailOutputMethod = () => (
+        <Box sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            py: 2,
+            px: 2,
+            borderBottom: '1px solid #334155',
+            '&:hover': {
+                backgroundColor: 'rgba(255, 255, 255, 0.05)',
+            },
+            cursor: 'pointer',
+        }}>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                {/* Gmail Icon */}
+                <Box sx={{
+                    width: '32px',
+                    height: '32px',
+                    backgroundColor: '#dc2626',
+                    borderRadius: '6px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                    <EmailIcon sx={{ color: 'white', fontSize: '18px' }} />
+                </Box>
+
+                <Box>
+                    <Typography variant="body2" sx={{
+                        color: '#ffffff',
+                        fontSize: '14px',
+                        fontWeight: 600,
+                        mb: 0.5
+                    }}>
+                        {t('automation.sheetsNode.gmail')}
+                    </Typography>
+                    <Typography variant="body2" sx={{
+                        color: '#94a3b8',
+                        fontSize: '12px',
+                        mb: 0.5
+                    }}>
+                        {t('automation.sheetsNode.sendEmail')}
+                    </Typography>
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        <DraftsIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
+                        <Typography variant="body2" sx={{
+                            color: '#94a3b8',
+                            fontSize: '11px'
+                        }}>
+                            {t('automation.sheetsNode.drafts')}: {data.exportOptions?.emailRecipients?.length || 0}
+                        </Typography>
+                    </Box>
+                </Box>
+            </Box>
+
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                {/* Status Badge */}
+                <StatusBadge status={determineGmailStatus()} />
+                <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
+            </Box>
+        </Box>
+    );
+
+    // Output Method Component for Slack
+    const SlackOutputMethod = () => {
+        const slack = (data.formData?.exportOptions?.slack || (data as any).exportOptions?.slack) || {};
+        return (
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                py: 2,
+                px: 2,
+                borderBottom: '1px solid #334155',
+                '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                },
+                cursor: 'pointer',
+            }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                    {/* Slack Icon-like box */}
+                    <Box sx={{
+                        width: '32px',
+                        height: '32px',
+                        backgroundColor: '#4A154B',
+                        borderRadius: '6px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                        <SendIcon sx={{ color: 'white', fontSize: '18px' }} />
+                    </Box>
+
+                    <Box>
+                        <Typography variant="body2" sx={{
+                            color: '#ffffff',
+                            fontSize: '14px',
+                            fontWeight: 600,
+                            mb: 0.5
+                        }}>
+                            {t('automation.sheetsNode.slack')}
+                        </Typography>
+                        <Typography variant="body2" sx={{
+                            color: '#94a3b8',
+                            fontSize: '12px',
+                            mb: 0.5
+                        }}>
+                            {t('automation.sheetsNode.sendMessage')}
+                        </Typography>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                            <TableRowsIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
+                            <Typography variant="body2" sx={{
+                                color: '#94a3b8',
+                                fontSize: '11px'
+                            }}>
+                                {t('automation.sheetsNode.channel')}: {slack.channel ? `#${slack.channel}` : t('automation.sheetsNode.notSet')}
+                            </Typography>
+                        </Box>
+                    </Box>
+                </Box>
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <StatusBadge status={determineSlackStatus()} />
+                    <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
+                </Box>
+            </Box>
+        );
+    };
+
+    // Output Method Component for WhatsApp
+    const WhatsAppOutputMethod = () => {
+        const whatsapp = (data.formData?.exportOptions?.whatsapp || data.exportOptions?.whatsapp) || {};
+        const isTwilioEnabled = whatsapp.twilio?.enabled;
+
+        return (
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                py: 2,
+                px: 2,
+                borderBottom: '1px solid #334155',
+                '&:hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                },
+                cursor: 'pointer',
+            }}
+                onClick={() => {
+                    if (whatsapp.enabled && whatsapp.phoneNumber && !isTwilioEnabled) {
+                        const executionData = data.formData?.executionResult || {};
+                        sendWhatsAppMessage(whatsapp.phoneNumber, executionData);
+                    }
+                }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                    {/* WhatsApp Icon */}
+                    <Box sx={{
+                        width: '32px',
+                        height: '32px',
+                        backgroundColor: '#25D366',
+                        borderRadius: '6px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                    }}>
+                        <WhatsAppIcon sx={{ color: 'white', fontSize: '18px' }} />
+                    </Box>
+
+                    <Box>
+                        <Typography variant="body2" sx={{
+                            color: '#ffffff',
+                            fontSize: '14px',
+                            fontWeight: 600,
+                            mb: 0.5
+                        }}>
+                            {isTwilioEnabled ? t('automation.sheetsNode.whatsappTwilio') : t('automation.sheetsNode.whatsappWeb')}
+                        </Typography>
+                        <Typography variant="body2" sx={{
+                            color: '#94a3b8',
+                            fontSize: '12px',
+                            mb: 0.5
+                        }}>
+                            {isTwilioEnabled ? t('automation.sheetsNode.apiSend') : t('automation.sheetsNode.sendMessage')}
+                        </Typography>
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                            <PhoneIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
+                            <Typography variant="body2" sx={{
+                                color: '#94a3b8',
+                                fontSize: '11px'
+                            }}>
+                                {t('automation.sheetsNode.phone')}: {whatsapp.phoneNumber || t('automation.sheetsNode.notSet')}
+                            </Typography>
+                        </Box>
+                        {isTwilioEnabled && (
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.5 }}>
+                                <Typography variant="body2" sx={{
+                                    color: whatsapp.twilio?.isSandbox ? '#f59e0b' : '#10b981',
+                                    fontSize: '10px',
+                                    fontWeight: 500
+                                }}>
+                                    {whatsapp.twilio?.isSandbox ? t('automation.sheetsNode.sandboxMode') : t('automation.sheetsNode.productionMode')}
+                                </Typography>
+                            </Box>
+                        )}
+                    </Box>
+                </Box>
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <StatusBadge status={determineWhatsAppStatus()} />
+                    <ArrowForwardIcon sx={{ fontSize: '14px', color: '#94a3b8' }} />
+                </Box>
+            </Box>
+        );
+    };
+
+    return (
+        <Box
+            sx={{
+                position: 'relative',
+                width: '380px',
+                overflow: 'visible',
+            }}
+        >
+            <Box
+                ref={nodeRef}
+                sx={{
+                    width: '380px',
+                    minHeight: '280px',
+                    backgroundColor: '#181C25', // Darker background like in image
+                    border: selected ? '2px solid #3b82f6' : '1px solid #1e293b',
+                    borderRadius: '12px',
+                    padding: '0',
+                    color: '#ffffff',
+                    position: 'relative',
+                    boxShadow: selected ? '0 0 0 2px rgba(59, 130, 246, 0.5)' : '0 4px 8px rgba(0, 0, 0, 0.3)',
+                    transition: 'all 0.2s ease',
+                    cursor: 'pointer',
+                    overflow: 'hidden',
+                    ...(data.status === 'Running' && {
+                        animation: 'pulse-glow 2s ease-in-out infinite',
+                        '@keyframes pulse-glow': {
+                            '0%, 100%': {
+                                boxShadow: '0 0 20px rgba(59, 130, 246, 0.4), 0 0 40px rgba(59, 130, 246, 0.2)',
+                                borderColor: 'rgba(59, 130, 246, 0.6)',
+                            },
+                            '50%': {
+                                boxShadow: '0 0 30px rgba(59, 130, 246, 0.6), 0 0 60px rgba(59, 130, 246, 0.3)',
+                                borderColor: 'rgba(59, 130, 246, 0.9)',
+                            },
+                        },
+                    }),
+                }}
+                onClick={handleJsonClick}
+            >
+            {/* Header */}
+            <Box sx={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                p: 3,
+                borderBottom: '1px solid #334155'
+            }}>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+                    <Box
+                        sx={{
+                            width: '32px',
+                            height: '32px',
+                            backgroundColor: '#3b82f6', // Blue color like in image
+                            borderRadius: '6px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }}
+                    >
+                        <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
+                    </Box>
+                    <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
+                        {data.label}
+                    </Typography>
+                </Box>
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {/* Status Chip */}
+                    <Chip
+                        label={(() => {
+                            // Map node status to standard status values
+                            const nodeStatus = getNodeStatus();
+                            if (nodeStatus === 'Failed' || data.status === 'Error') return 'Error';
+                            if (nodeStatus === 'Running' || data.status === 'Running') return 'Running';
+                            if (nodeStatus === 'Success' || data.status === 'Completed') return 'Completed';
+                            return data.status || 'Ready';
+                        })()}
+                        size="small"
+                        sx={{
+                            backgroundColor: (() => {
+                                const status = data.status || 'Ready';
+                                return status === 'Completed'
+                                    ? 'rgba(37, 99, 235, 0.1)'
+                                    : status === 'Running'
+                                        ? 'rgba(251, 191, 36, 0.1)'
+                                        : status === 'Error'
+                                            ? 'rgba(239, 68, 68, 0.1)'
+                                            : 'rgba(16, 185, 129, 0.1)';
+                            })(),
+                            color: (() => {
+                                const status = data.status || 'Ready';
+                                return status === 'Completed'
+                                    ? '#93C5FD'
+                                    : status === 'Running'
+                                        ? '#FCD34D'
+                                        : status === 'Error'
+                                            ? '#FCA5A5'
+                                            : '#86EFAC';
+                            })(),
+                            fontWeight: 500,
+                            fontSize: '12px',
+                            height: '24px',
+                            borderRadius: '12px',
+                        }}
+                    />
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        <AccessTimeIcon sx={{ fontSize: '12px', color: '#94a3b8' }} />
+                        <Typography variant="body2" sx={{ color: '#94a3b8', fontSize: '11px' }}>
+                            {t('automation.common.lastRun')}: {data.lastRun || '2m ago'}
+                        </Typography>
+                    </Box>
+                </Box>
+            </Box>
+
+            {/* Output Methods */}
+            <Box>
+                {showSheets && <GoogleSheetsOutputMethod />}
+                {showGmail && <GmailOutputMethod />}
+                {showSlack && <SlackOutputMethod />}
+                {showWhatsApp && <WhatsAppOutputMethod />}
+                {!showGmail && !showSlack && !showWhatsApp && (
+                    <Typography variant="body2" sx={{ color: '#94a3b8', p: 2 }}>
+                        {t('automation.sheetsNode.noOutputMethodsConfigured')}
+                    </Typography>
+                )}
+            </Box>
+
+            {/* Add Configuration Button */}
+            <Box sx={{
+                p: 2,
+                display: 'flex',
+                justifyContent: 'center',
+                borderTop: '1px solid #334155'
+            }}>
+                <Button
+                    startIcon={<AddIcon sx={{ fontSize: '16px' }} />}
+                    sx={{
+                        color: '#94a3b8',
+                        fontSize: '12px',
+                        textTransform: 'none',
+                        '&:hover': {
+                            backgroundColor: 'rgba(255, 255, 255, 0.05)',
+                            color: '#ffffff',
+                        },
+                    }}
+                >
+                    {t('automation.sheetsNode.addConfiguration')}
+                </Button>
+            </Box>
+
+            {/* Connection Handles - Bidirectional (source + target at each position) */}
+            {/* Top - Source */}
+            <Handle
+                type="source"
+                position={Position.Top}
+                id="top-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    top: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Top - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Top}
+                id="top-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    top: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Bottom - Source */}
+            <Handle
+                type="source"
+                position={Position.Bottom}
+                id="bottom-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    bottom: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Bottom - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Bottom}
+                id="bottom-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    bottom: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Left - Source */}
+            <Handle
+                type="source"
+                position={Position.Left}
+                id="left-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    left: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Left - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Left}
+                id="left-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    left: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+            {/* Right - Source */}
+            <Handle
+                type="source"
+                position={Position.Right}
+                id="right-source"
+                className="connection-handle"
+                style={{
+                    background: selected ? '#10B981' : '#1a1a2e',
+                    width: '14px',
+                    height: '14px',
+                    border: '3px solid #10B981',
+                    right: '-8px',
+                    opacity: selected ? 1 : 0,
+                    transition: 'all 0.2s ease-in-out',
+                    cursor: 'crosshair',
+                    zIndex: 10,
+                }}
+            />
+            {/* Right - Target (hidden but functional) */}
+            <Handle
+                type="target"
+                position={Position.Right}
+                id="right-target"
+                style={{
+                    background: 'transparent',
+                    width: '14px',
+                    height: '14px',
+                    border: 'none',
+                    right: '-8px',
+                    opacity: 0,
+                    pointerEvents: selected ? 'all' : 'none',
+                }}
+            />
+
+            </Box>
+
+            {/* Node Action Buttons - Shows when selected */}
+            <NodeActionButtons
+                selected={selected}
+                onDelete={() => {
+                    if (nodeId && onNodesChange) {
+                        onNodesChange([{ id: nodeId, type: 'remove' }]);
+                    }
+                }}
+                onDuplicate={() => {
+                    if (nodeId) {
+                        const currentNode = nodes.find(n => n.id === nodeId);
+                        if (currentNode) {
+                            const newNode = {
+                                ...currentNode,
+                                id: `${currentNode.id}-copy-${Date.now()}`,
+                                position: {
+                                    x: currentNode.position.x + 50,
+                                    y: currentNode.position.y + 50,
+                                },
+                                selected: false,
+                            };
+                            setNodes([...nodes, newNode]);
+                        }
+                    }
+                }}
+            />
+
+            {/* AI Suggestions Button - Positioned below the node box */}
+            {data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && (
+                <Box
+                    sx={{
+                        position: 'absolute',
+                        top: '100%',
+                        left: '50%',
+                        transform: 'translateX(-50%)',
+                        marginTop: '12px',
+                        zIndex: 10,
+                        whiteSpace: 'nowrap',
+                    }}
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        // Toggle AI Suggestions panel
+                        setShowSuggestions(!showSuggestions);
+                    }}
+                >
+                    <Button
+                        variant="contained"
+                        startIcon={<LightbulbIcon sx={{ fontSize: '12px' }} />}
+                        sx={{
+                            backgroundColor: '#2563EB',
+                            color: '#ffffff',
+                            borderRadius: '20px',
+                            textTransform: 'none',
+                            fontSize: '10px',
+                            fontWeight: 400,
+                            padding: '8px 16px',
+                            whiteSpace: 'nowrap',
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+                            '&:hover': {
+                                backgroundColor: '#2563eb',
+                            },
+                            '& .MuiButton-startIcon': {
+                                marginRight: '8px',
+                            }
+                        }}
+                    >
+                        AI Suggestions
+                        <Box
+                            component="span"
+                            sx={{
+                                marginLeft: '8px',
+                                backgroundColor: '#FFFFFF26',
+                                color: '#ffffff',
+                                fontSize: '10px',
+                                fontWeight: 400,
+                                minWidth: '18px',
+                                height: '18px',
+                                borderRadius: '9px',
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                padding: '0 6px',
+                                border: '1px solid rgba(255, 255, 255, 0.2)',
+                            }}
+                        >
+                            {data.formData.aiSuggestionsCount}
+                        </Box>
+                    </Button>
+                </Box>
+            )}
+
+            {/* AI Suggestions Panel - Rendered on canvas below the button */}
+            {showSuggestions && data.formData?.aiSuggestionsCount !== undefined && data.formData.aiSuggestionsCount > 0 && nodeId && (
+                <AISuggestionsPanel
+                    suggestions={data.formData?.aiSuggestions || [
+                        {
+                            id: '1',
+                            title: 'Add Citation Extraction',
+                            description: 'Automatically extract and format citations from article content.',
+                            tags: ['classification', 'enhancement'],
+                        },
+                        {
+                            id: '2',
+                            title: 'Generate Bullet Summary',
+                            description: 'Create a concise bullet-point summary of the article\'s main points.',
+                            tags: ['classification', 'enhancement'],
+                        },
+                    ]}
+                    parentNodeId={nodeId}
+                    onSuggestionClick={(suggestion) => {
+                        console.log('Suggestion clicked:', suggestion);
+                        // Handle suggestion selection here
+                    }}
+                    onClose={() => setShowSuggestions(false)}
+                />
+            )}
+        </Box>
+    );
+};
+