import { useState, useCallback, useRef, useEffect, useMemo } from 'react';
import ReactFlow, {
  MiniMap,
  Controls,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
  Panel,
  useReactFlow,
  ReactFlowProvider,
  Handle,
  Position,
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath
} from 'reactflow';
import 'reactflow/dist/style.css';

// Import React Flow components

// Add custom CSS for React Flow
const generateCustomStyles = () => {
  return `
    .react-flow__node {
      z-index: 1;
      margin: 20px; /* Add margin to all nodes */
    }
    
    /* Ensure tables don't overlap */
    .react-flow__node.table-node {
      margin: 30px;
      min-height: 120px;
    }
    
    .schema-background-node {
      z-index: -1;
      pointer-events: all;
      border-radius: 25px;
      cursor: grab;
      user-select: none;
      transition: all 0.2s ease;
      padding: 30px; /* Add padding inside schema */
    }
    
    .schema-background-node:hover {
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
    }
    
    .schema-background-node:active {
      cursor: grabbing;
    }
    
    .schema-background-node.dragging {
      opacity: 0.8;
    }
    
    .schema-label {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px 15px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: bold;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 10px;
      z-index: 10;
    }
    
    /* Ensure proper spacing between nodes */
    .react-flow__node-table {
      margin-bottom: 30px !important;
      margin-right: 30px !important;
    }
    
    /* Styling for draggable new tables */
    .draggable-new-table {
      cursor: grab !important;
      transition: all 0.2s ease !important;
      z-index: 10 !important;
    }
    
    .draggable-new-table:hover {
      transform: scale(1.02) !important;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
    }
    
    .draggable-new-table:active {
      cursor: grabbing !important;
    }
    
    /* Process node styling */
    .react-flow__node-process {
      z-index: 5 !important;
      background: white !important;
      border-radius: 8px !important;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Edge styling for left-to-right data flow */
    .react-flow__edge {
      z-index: 4 !important;
    }
    
    .react-flow__edge-path {
      stroke-width: 1.5 !important;
    }
    
    /* Encourage horizontal edges for left-to-right flow */
    .react-flow__edge-path {
      --react-flow-bezier-edge-control-point-distance: 60 !important;
    }
    
    /* Edge label styling */
    .react-flow__edge-textbg {
      background-color: white !important;
      padding: 2px !important;
      border-radius: 4px !important;
    }
    
    .react-flow__edge-text {
      font-size: 8px !important;
    }
  `;
};

// Import icons from react-icons
import { FaTable, FaArrowRight, FaExchangeAlt, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine, FaEdit, FaTrash, FaChevronDown } from 'react-icons/fa';
import { BiSolidData, BiTransfer } from 'react-icons/bi';
import { AiFillFolder } from 'react-icons/ai';
import { TbTransform } from 'react-icons/tb';
import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, CustomProcessIcon, CustomSchemaIcon } from './CustomIcons';

// Import Material-UI components for breadcrumb
import { Breadcrumbs, Link, Typography, Menu, MenuItem, ListItemIcon, ListItemText } from '@mui/material';

// Import API data
import mockApiData, { useApiData, createSchema, deleteSchema, updateSchema, createTable, updateTable, deleteTable, createColumn, updateColumn, deleteColumn, fetchColumns } from './mockData';

// Import components
import ProcessForm from './ProcessForm';
import TableCreationPopup from './TableCreationPopup';
import ColumnManagementPopup from './ColumnManagementPopup';
import TableUpdatePopup from './TableUpdatePopup';

// Schema Background Node
const SchemaBackgroundNode = ({ data }) => {
  // Different background colors for each schema
  const bgColor = data.slug === 'edw_schema' 
    ? 'rgba(24, 144, 255, 0.1)' // Light blue for Schema_1
    : 'rgba(82, 196, 26, 0.1)';  // Light green for Schema_2
  
  // Border color based on schema
  const borderColor = data.slug === 'edw_schema' 
    ? '#1890ff' // Blue for Schema_1
    : '#52c41a';  // Green for Schema_2
    
  // State for delete confirmation
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [deleteError, setDeleteError] = useState(null);
  
  // State for schema update popup
  const [showUpdatePopup, setShowUpdatePopup] = useState(false);
  const [updatedSchemaName, setUpdatedSchemaName] = useState(data.name || '');
  const [updatedSchemaDescription, setUpdatedSchemaDescription] = useState(data.description || '');
  const [isUpdatingSchema, setIsUpdatingSchema] = useState(false);
  const [schemaUpdateError, setSchemaUpdateError] = useState(null);
  
  // Function to handle schema deletion
  const handleDeleteSchema = async (e) => {
    e.stopPropagation(); // Prevent event bubbling
    
    if (!data.database || !data.slug) {
      setDeleteError('Missing database or schema information');
      return;
    }
    
    setIsDeleting(true);
    setDeleteError(null);
    
    try {
      console.log(`Deleting schema "${data.name}" (${data.slug}) from database ${data.database}`);
      
      // Call the deleteSchema function
      await deleteSchema(data.database, data.slug);
      
      console.log('Schema deleted successfully');
      
      // Close the confirmation dialog
      setShowDeleteConfirm(false);
      
      // Refresh the data to update the UI
      // This assumes window.refreshCanvasData is set in the parent component
      if (typeof window.refreshCanvasData === 'function') {
        window.refreshCanvasData();
      } else {
        // If the refresh function is not available, reload the page
        window.location.reload();
      }
    } catch (error) {
      console.error('Error deleting schema:', error);
      setDeleteError(error.message || 'Failed to delete schema');
    } finally {
      setIsDeleting(false);
    }
  };
  
  // Function to handle schema update
  const handleUpdateSchema = async (e) => {
    e.stopPropagation(); // Prevent event bubbling
    
    if (!data || !data.database || !data.slug) {
      setSchemaUpdateError('Missing database or schema information');
      return;
    }
    
    if (!updatedSchemaName.trim()) {
      setSchemaUpdateError('Schema name is required');
      return;
    }
    
    setIsUpdatingSchema(true);
    setSchemaUpdateError(null);
    
    // Store the original values for potential rollback
    const originalName = data.name;
    const originalDescription = data.description;
    
    try {
      console.log(`Updating schema "${data.name}" (${data.slug}) in database ${data.database}`);
      
      // Close the update popup immediately for better UX
      setShowUpdatePopup(false);
      
      // Call the updateSchema function
      const updatedSchema = await updateSchema(
        data.database, 
        data.slug, 
        updatedSchemaName.trim(), 
        updatedSchemaDescription.trim()
      );
      
      console.log('Schema updated successfully:', updatedSchema);
      
      // Update the node data directly to reflect changes immediately
      // This provides immediate visual feedback after the API call
      if (data) {
        data.name = updatedSchemaName.trim();
        data.description = updatedSchemaDescription.trim();
      }
      
      // Notify any listeners about the schema update
      if (typeof window.onSchemaUpdated === 'function') {
        try {
          window.onSchemaUpdated(updatedSchema);
        } catch (callbackError) {
          console.error('Error in onSchemaUpdated callback:', callbackError);
        }
      }
      
      // Refresh the data to update the UI
      if (typeof window.refreshCanvasData === 'function') {
        console.log('Calling window.refreshCanvasData to update the UI');
        
        try {
          // Call refreshCanvasData directly - no need for setTimeout
          window.refreshCanvasData();
        } catch (refreshError) {
          console.error('Error calling refreshCanvasData:', refreshError);
        }
      }
    } catch (error) {
      console.error('Error updating schema:', error);
      setSchemaUpdateError(error.message || 'Failed to update schema');
      
      // Re-open the popup to show the error
      setShowUpdatePopup(true);
      
      // Revert the data changes if there was an error
      if (data) {
        data.name = originalName;
        data.description = originalDescription;
      }
    } finally {
      setIsUpdatingSchema(false);
    }
  };
  
  return (
    <div
      className="schema-background-node"
      style={{
        width: '100%',
        height: '100%',
        background: bgColor,
        border: `3px dashed ${data.color || borderColor}`,
        boxShadow: `0 0 20px rgba(0, 0, 0, 0.05)`,
        borderRadius: '25px', // Slightly larger border radius
        position: 'relative' // Added for absolute positioning of delete button
      }}
    >
      <div className="schema-label" style={{ 
        color: data.color || borderColor,
        fontSize: '14px', // Slightly larger font
        padding: '8px 12px', // More padding
        background: 'rgba(255, 255, 255, 0.9)', // More opaque background
        boxShadow: '0 3px 6px rgba(0, 0, 0, 0.1)', // Stronger shadow
        display: 'flex',
        alignItems: 'center',
        gap: '8px',
        justifyContent: 'space-between', // Added to position buttons
        width: 'auto', // Allow width to adjust to content
        minWidth: '200px' // Ensure minimum width
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <CustomSchemaIcon width="24" height="22" />
          {data.name}
        </div>
        
        <div style={{ display: 'flex', gap: '8px' }}>
          {/* Add Table button */}
          <button
            onClick={(e) => {
              e.stopPropagation();
              
              console.log('Add Table button clicked');
              console.log('Schema data:', data);
              
              // Create schema info object
              const schemaInfo = {
                sch: data.slug,
                con: data.database
              };
              
              // Try multiple methods to show the table creation popup
              console.log('Trying to show table creation popup...');
              
              // Method 1: Use the window.showTableCreationPopup function
              if (typeof window.showTableCreationPopup === 'function') {
                console.log('Method 1: Using window.showTableCreationPopup');
                window.showTableCreationPopup(schemaInfo);
                return;
              }
              
              // Method 2: Use the API object
              if (window.dataflowCanvasApi && typeof window.dataflowCanvasApi.showTableCreationPopup === 'function') {
                console.log('Method 2: Using window.dataflowCanvasApi.showTableCreationPopup');
                window.dataflowCanvasApi.showTableCreationPopup(schemaInfo);
                return;
              }
              
              // Method 3: Use the state setters directly from the API object
              if (window.dataflowCanvasApi && 
                  typeof window.dataflowCanvasApi.setSelectedSchemaForTable === 'function' && 
                  typeof window.dataflowCanvasApi.setShowTablePopup === 'function') {
                console.log('Method 3: Using state setters from API object');
                window.dataflowCanvasApi.setSelectedSchemaForTable(schemaInfo);
                window.dataflowCanvasApi.setShowTablePopup(true);
                return;
              }
              
              // If all methods fail, show an error
              console.error('All methods to show table creation popup failed');
              alert('Unable to create a new table at this time. Please try again later.');
            }}
            style={{
              background: 'none',
              border: 'none',
              color: '#52c41a',
              cursor: 'pointer',
              fontSize: '14px',
              padding: '4px 8px',
              borderRadius: '4px',
              display: 'flex',
              alignItems: 'center',
              gap: '4px',
              transition: 'all 0.2s ease'
            }}
            title="Add a new table to this schema"
          >
            <FaTable size={14} />
            Add Table
          </button>
          
          {/* Update button */}
          <button
            onClick={(e) => {
              e.stopPropagation();
              
              // Set the form values from the current data
              if (data) {
                setUpdatedSchemaName(data.name || '');
                setUpdatedSchemaDescription(data.description || '');
              }
              
              setShowUpdatePopup(true);
            }}
            style={{
              background: 'none',
              border: 'none',
              color: '#1890ff',
              cursor: 'pointer',
              fontSize: '14px',
              padding: '4px 8px',
              borderRadius: '4px',
              display: 'flex',
              alignItems: 'center',
              gap: '4px',
              transition: 'all 0.2s ease'
            }}
            title="Update this schema"
          >
            <span style={{ fontSize: '16px' }}>✎</span>
            Update
          </button>
          
          {/* Delete button */}
          <button
            onClick={(e) => {
              e.stopPropagation();
              setShowDeleteConfirm(true);
            }}
            style={{
              background: 'none',
              border: 'none',
              color: '#ff4d4f',
              cursor: 'pointer',
              fontSize: '14px',
              padding: '4px 8px',
              borderRadius: '4px',
              display: 'flex',
              alignItems: 'center',
              gap: '4px',
              transition: 'all 0.2s ease'
            }}
            title="Delete this schema"
          >
            <span style={{ fontSize: '16px' }}>×</span>
            Delete
          </button>
        </div>
      </div>
      
      {/* Schema Update Popup */}
      {showUpdatePopup && (
        <div
          style={{
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            zIndex: 1000,
            background: '#ffffff',
            border: '2px solid #1890ff',
            borderRadius: '8px',
            padding: '20px',
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
            width: '400px',
            maxWidth: '90vw'
          }}
          onClick={(e) => e.stopPropagation()}
        >
          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            marginBottom: '15px',
            borderBottom: '1px solid #1890ff',
            paddingBottom: '10px'
          }}>
            <div>
              <h3 style={{ margin: 0, color: '#1890ff', display: 'flex', alignItems: 'center', gap: '8px' }}>
                <CustomSchemaIcon width="24" height="24" />
                Update Schema
              </h3>
              <p style={{ margin: '5px 0 0 0', fontSize: '12px', color: '#666' }}>
                Database: <strong>{data.database || 'Unknown'}</strong>
              </p>
            </div>
            <button 
              onClick={() => setShowUpdatePopup(false)}
              style={{
                background: 'none',
                border: 'none',
                fontSize: '18px',
                cursor: 'pointer',
                color: '#999'
              }}
            >
              ×
            </button>
          </div>
          
          {schemaUpdateError && (
            <div style={{
              padding: '10px',
              marginBottom: '15px',
              background: '#fff2f0',
              border: '1px solid #ffccc7',
              borderRadius: '4px',
              color: '#ff4d4f'
            }}>
              {schemaUpdateError}
            </div>
          )}
          
          <div style={{ marginBottom: '15px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Schema Name *
            </label>
            <input
              type="text"
              value={updatedSchemaName}
              onChange={(e) => setUpdatedSchemaName(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px'
              }}
              placeholder="Enter schema name"
              disabled={isUpdatingSchema}
            />
          </div>
          
          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Description
            </label>
            <textarea
              value={updatedSchemaDescription}
              onChange={(e) => setUpdatedSchemaDescription(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                minHeight: '80px',
                resize: 'vertical'
              }}
              placeholder="Enter schema description (optional)"
              disabled={isUpdatingSchema}
            />
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
            <button
              onClick={() => setShowUpdatePopup(false)}
              style={{
                padding: '8px 16px',
                background: '#f0f0f0',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '14px'
              }}
              disabled={isUpdatingSchema}
            >
              Cancel
            </button>
            <button
              onClick={handleUpdateSchema}
              style={{
                padding: '8px 16px',
                background: '#1890ff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '14px',
                display: 'flex',
                alignItems: 'center',
                gap: '5px'
              }}
              disabled={isUpdatingSchema}
            >
              {isUpdatingSchema ? 'Updating...' : 'Update Schema'}
            </button>
          </div>
        </div>
      )}
      
      {/* Delete confirmation dialog */}
      {showDeleteConfirm && (
        <div
          style={{
            position: 'absolute',
            top: '60px',
            left: '20px',
            background: 'white',
            padding: '15px',
            borderRadius: '8px',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
            zIndex: 100,
            width: '280px',
            border: '1px solid #ff4d4f'
          }}
          onClick={(e) => e.stopPropagation()}
        >
          <h4 style={{ margin: '0 0 10px 0', color: '#ff4d4f' }}>Delete Schema?</h4>
          
          <p style={{ margin: '0 0 15px 0', fontSize: '14px' }}>
            Are you sure you want to delete the schema "{data.name}"? This action cannot be undone.
          </p>
          
          {deleteError && (
            <div style={{
              padding: '8px',
              marginBottom: '10px',
              background: '#fff2f0',
              border: '1px solid #ffccc7',
              borderRadius: '4px',
              color: '#ff4d4f',
              fontSize: '12px'
            }}>
              {deleteError}
            </div>
          )}
          
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
            <button
              onClick={(e) => {
                e.stopPropagation();
                setShowDeleteConfirm(false);
              }}
              style={{
                padding: '5px 10px',
                background: '#f0f0f0',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '12px'
              }}
              disabled={isDeleting}
            >
              Cancel
            </button>
            <button
              onClick={handleDeleteSchema}
              style={{
                padding: '5px 10px',
                background: '#ff4d4f',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '12px'
              }}
              disabled={isDeleting}
            >
              {isDeleting ? 'Deleting...' : 'Delete'}
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

// Custom edge with animated arrow
const CustomEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style = {}, data, markerEnd }) => {
  // For left-to-right data flow, use a gentler curve
  const curvature = 0.2; // Reduced curvature for straighter, more horizontal flow
  
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
    curvature
  });

  // Check if the process is active
  const isActive = data?.isActive !== false; // Default to active if not specified
  
  // Determine if this is a source or target edge
  const isSourceEdge = data?.edgeType === 'source';
  
  // Get the process name and mappings
  const processName = data?.processName || 'Process';
  const mappings = data?.mappings || [];
  
  // Adjust label style based on active status
  const labelBgColor = isActive ? 'white' : '#f5f5f5';
  const labelOpacity = isActive ? 1 : 0.8;
  
  return (
    <>
      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
      <EdgeLabelRenderer>
        <div
          style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            fontSize: 10, // Reduced font size
            pointerEvents: 'all',
            backgroundColor: 'rgba(255, 255, 255, 0.9)', // Added semi-transparent background
            padding: '3px 6px',
            borderRadius: '6px',
            color: isActive ? '#333' : '#666',
            fontWeight: isActive ? 500 : 400,
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)', // Added subtle shadow
            border: `1px solid ${style.stroke || '#ccc'}`,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            gap: '2px',
            maxWidth: '150px', // Reduced max width
            opacity: labelOpacity,
            zIndex: 4 // Lower z-index to prevent overlapping with nodes
          }}
          className="nodrag nopan"
        >
          {/* Process name in small text */}
          <div style={{ 
            fontSize: '8px', 
            color: '#666', 
            fontStyle: 'italic',
            marginBottom: '2px',
            textAlign: 'center'
          }}>
            {processName}
            {!isActive && (
              <span style={{ 
                fontSize: '7px', 
                background: '#f0f0f0', 
                padding: '0px 3px', 
                borderRadius: '3px',
                color: '#999',
                marginLeft: '2px',
                animation: "none !important"
              }}>
                inactive
              </span>
            )}
          </div>
          
          {/* Column mappings - show fewer columns to save space */}
          <div style={{ 
            display: 'flex', 
            flexWrap: 'wrap', 
            justifyContent: 'center',
            gap: '2px'
          }}>
            {mappings.length > 0 ? (
              // Only show up to 3 mappings to save space
              mappings.slice(0, 3).map((column, index) => (
                <span 
                  key={index} 
                  style={{ 
                    background: isSourceEdge 
                      ? 'rgba(82, 196, 26, 0.1)' 
                      : 'rgba(24, 144, 255, 0.1)', 
                    color: isActive 
                      ? (isSourceEdge ? '#52c41a' : '#1890ff') 
                      : '#aaaaaa',
                    padding: '1px 3px', 
                    borderRadius: '3px',
                    fontSize: '8px', // Reduced font size
                    border: `1px solid ${isActive 
                      ? (isSourceEdge ? 'rgba(82, 196, 26, 0.3)' : 'rgba(24, 144, 255, 0.3)') 
                      : 'rgba(170, 170, 170, 0.3)'}`
                  }}
                >
                  {column}
                </span>
              ))
            ) : (
              <span style={{ color: '#999', fontSize: '8px' }}>No mappings</span>
            )}
            {mappings.length > 3 && (
              <span style={{ 
                color: '#999', 
                fontSize: '8px',
                fontStyle: 'italic'
              }}>
                +{mappings.length - 3} more
              </span>
            )}
          </div>
        </div>
      </EdgeLabelRenderer>
    </>
  );
};

// Process Node (represents ETL or data transformation)
const ProcessNode = ({ data, id }) => {
  // Function to handle process edit
  const handleProcessEdit = () => {
    // Find the process in the data
    // We'll use the data that's passed to the component directly
    if (data && data.fullProcessData) {
      // We'll use window.processEditCallback which will be set in the main component
      if (window.processEditCallback) {
        window.processEditCallback(data.fullProcessData);
      }
    }
  };
  // Determine status color
  const statusColor = data.status === 'active' ? '#52c41a' : '#ff4d4f';
  const isActive = data.status === 'active';
  
  // Define colors
  const primaryColor = isActive ? '#fa8c16' : '#aaaaaa';
  const secondaryColor = isActive ? '#ff4d4f' : '#cccccc';
  
  // Determine which icon to use based on process type or other properties
  const getProcessIcon = () => {
    // You can customize this logic based on your data model
    const processType = data.processType || 'default';
    const iconSize = 40; // Reduced icon size to prevent overlapping
    const iconColor = isActive ? primaryColor : '#cccccc';
    
    switch(processType.toLowerCase()) {
      case 'transform':
        return <TbTransform size={iconSize} color={iconColor} />;
      case 'filter':
        return <FaFilter size={iconSize} color={iconColor} />;
      case 'aggregate':
        return <FaCalculator size={iconSize} color={iconColor} />;
      case 'sync':
        return <FaSync size={iconSize} color={iconColor} />;
      case 'code':
        return <FaCode size={iconSize} color={iconColor} />;
      case 'analytics':
        return <FaChartLine size={iconSize} color={iconColor} />;
      case 'transfer':
        return <BiTransfer size={iconSize} color={iconColor} />;
      case 'exchange':
        return <FaExchangeAlt size={iconSize} color={iconColor} />;
      default:
        return <CustomProcessIcon width={iconSize} height={iconSize} />;
    }
  };
  
  return (
    <div className="process-node" style={{ 
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      background: 'white', // Add background to prevent transparency issues
      padding: '10px',
      borderRadius: '8px',
      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
      border: `1px solid ${isActive ? primaryColor : '#dddddd'}`,
      width: '80px', // Fixed width to ensure consistent sizing
      height: '80px', // Fixed height to ensure consistent sizing
      zIndex: 5 // Ensure it's above the background but below other elements
    }}>
      {/* Connection handles */}
      <Handle 
        type="target" 
        position={Position.Left} 
        id="left" 
        style={{ 
          background: primaryColor, 
          width: '10px', 
          height: '10px',
          left: '-5px',
          zIndex: 10
        }} 
        isConnectable={true}
      />
      <Handle 
        type="source" 
        position={Position.Right} 
        id="right" 
        style={{ 
          background: primaryColor, 
          width: '10px', 
          height: '10px',
          right: '-5px',
          zIndex: 10
        }} 
        isConnectable={true}
      />
      
      {/* Process Icon with integrated content */}
      <div 
        onClick={handleProcessEdit}
        style={{ 
          position: 'relative',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          filter: isActive 
            ? 'drop-shadow(0 0 8px rgba(250, 140, 22, 0.3))' 
            : 'drop-shadow(0 0 5px rgba(170, 170, 170, 0.2))',
          cursor: 'pointer',
          zIndex: 100
        }}
      >
        {getProcessIcon()}
        
        {/* Status indicator (small dot) */}
        <div style={{ 
          position: 'absolute',
          top: '-5px',
          right: '-5px',
          width: '10px',
          height: '10px',
          background: statusColor,
          borderRadius: '50%',
          border: '2px solid white'
        }} />
      </div>
      
      {/* Process Label (below icon) */}
      <div style={{ 
        fontWeight: 'bold',
        fontSize: '11px',
        color: '#333',
        textAlign: 'center',
        maxWidth: '70px',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
        marginTop: '5px',
        background: 'rgba(255, 255, 255, 0.9)',
        padding: '2px 4px',
        borderRadius: '8px'
      }}>
        {data.label}
      </div>
    </div>
  );
};

// Table Node
const TableNode = ({ data, id }) => {
  // Debug the data object to ensure all required fields are present
  console.log(`TableNode ${id} data:`, {
    slug: data.slug,
    schema: data.schema,
    database: data.database,
    label: data.label,
    type: data.type
  });
  
  // Set up drag functionality for new tables
  const onDragStart = (event) => {
    // Only allow dragging for tables that are not in a schema yet
    if (!event.target.closest('.draggable-new-table')) {
      return;
    }
    
    event.dataTransfer.setData('application/reactflow', id);
    event.dataTransfer.effectAllowed = 'move';
  };
  
  // Function to handle add column button click
  const handleAddColumn = (e) => {
    e.stopPropagation(); // Prevent event bubbling
    
    // Access the global function to show column popup
    if (typeof window.showColumnPopup === 'function') {
      window.showColumnPopup({
        tbl: data.slug,
        sch: data.schema,
        con: data.database
      });
    } else {
      console.error('showColumnPopup function not available');
    }
  };
  
  // Function to handle table update button click
  const handleUpdateTable = (e) => {
    e.stopPropagation(); // Prevent event bubbling
    
    // Access the global function to show table update popup
    if (typeof window.showTableUpdatePopup === 'function') {
      window.showTableUpdatePopup({
        tbl: data.slug,
        sch: data.schema,
        con: data.database,
        name: data.label,
        table_type: data.type,
        external_name: data.external_name || data.label // Use external_name if available, otherwise use label
      });
    } else {
      console.error('showTableUpdatePopup function not available');
    }
  };
  
  // Function to handle table delete button click
  const handleDeleteTable = (e) => {
    e.stopPropagation(); // Prevent event bubbling
    
    // Confirm deletion with a warning about dependent objects
    if (window.confirm(`Are you sure you want to delete the table "${data.label}"?\n\nThis action cannot be undone.`)) {
      // Access the global function to delete table
      if (typeof window.deleteTable === 'function') {
        // Log the data being sent to ensure all fields are present
        console.log('Sending table data for deletion:', {
          tbl: data.slug,
          sch: data.schema,
          con: data.database,
          label: data.label,
          type: data.type
        });
        
        // Get the current database slug from the global variable
        const currentDbSlug = window.getCurrentDbSlug ? window.getCurrentDbSlug() : null;
        console.log(`Current database slug from global: ${currentDbSlug}`);
        
        // Show a loading message
        const loadingMessage = document.createElement('div');
        loadingMessage.style.position = 'fixed';
        loadingMessage.style.top = '50%';
        loadingMessage.style.left = '50%';
        loadingMessage.style.transform = 'translate(-50%, -50%)';
        loadingMessage.style.padding = '20px';
        loadingMessage.style.background = 'rgba(0, 0, 0, 0.8)';
        loadingMessage.style.color = 'white';
        loadingMessage.style.borderRadius = '8px';
        loadingMessage.style.zIndex = '9999';
        loadingMessage.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
        loadingMessage.textContent = `Deleting table "${data.label}"...`;
        document.body.appendChild(loadingMessage);
        
        // Delete the table
        window.deleteTable({
          tbl: data.slug,
          sch: data.schema,
          // Use the database from data if available, otherwise use the current database slug
          con: data.database || currentDbSlug
        }).finally(() => {
          // Remove the loading message when done
          document.body.removeChild(loadingMessage);
        });
      } else {
        console.error('deleteTable function not available');
      }
    }
  };
  // Determine table type
  const isStage = data.type === 'stage';
  const isFact = data.type === 'fact';
  const isDim = data.type === 'dimension';
  
  // Different colors for different table types
  let tableColor, tableLabel, tableIcon;
  
  if (isStage) {
    tableColor = '#fa8c16'; // Orange for STAGE tables
    tableLabel = 'STAGE';
    tableIcon = <CustomDatabaseIcon width="16" height="16" style={{ marginRight: '8px' }} />;
  } else if (isFact) {
    tableColor = '#1890ff'; // Blue for FACT tables
    tableLabel = 'FACT';
    tableIcon = <CustomDocumentIcon width="16" height="16" style={{ marginRight: '8px' }} />;
  } else {
    tableColor = '#52c41a'; // Green for DIM tables
    tableLabel = 'DIM';
    tableIcon = <CustomDimensionIcon width="16" height="16" style={{ marginRight: '8px' }} />;
  }
  
  const background = '#ffffff';
  
  return (
    <div 
      className="table-node" 
      draggable={true}
      onDragStart={onDragStart}
      style={{ 
        padding: '15px', // Increased padding
        borderRadius: '8px', // Increased border radius for better visual separation
        background: background, 
        border: `2px solid ${tableColor}`,
        width: '200px', // Slightly reduced width to allow more space between tables
        position: 'relative',
        boxShadow: `0 4px 12px rgba(0, 0, 0, 0.1)`, // Improved shadow for better depth
        color: '#333333',
        margin: '15px', // Added margin to prevent overlapping
        minHeight: '120px', // Minimum height to ensure consistent sizing
        cursor: 'grab', // Indicate draggability
      }}>
      {/* Connection handles */}
      <Handle 
        type="source" 
        position={Position.Right} 
        id="right" 
        style={{ 
          background: tableColor, 
          width: '12px', 
          height: '12px',
          right: '-6px',
          border: '2px solid white',
          zIndex: 10
        }} 
        isConnectable={true}
      />
      <Handle 
        type="target" 
        position={Position.Left} 
        id="left" 
        style={{ 
          background: tableColor, 
          width: '12px', 
          height: '12px',
          left: '-6px',
          border: '2px solid white',
          zIndex: 10
        }} 
        isConnectable={true}
      />
      
      <div style={{ 
        fontWeight: 'bold', 
        marginBottom: '10px', // Increased margin for better spacing
        display: 'flex', 
        alignItems: 'center',
        justifyContent: 'space-between' // Better alignment of elements
      }}>
        <div style={{ display: 'flex', alignItems: 'center', flex: 1, overflow: 'hidden' }}>
          {/* Different icons for different table types */}
          {tableIcon}
          <span style={{ 
            maxWidth: '110px', 
            overflow: 'hidden', 
            textOverflow: 'ellipsis', 
            whiteSpace: 'nowrap',
            fontSize: '13px' // Slightly larger font
          }}>
            {data.label}
          </span>
        </div>
        <span style={{ 
          fontSize: '10px', 
          background: tableColor, 
          color: 'white', 
          padding: '2px 6px', // Increased padding
          borderRadius: '4px', // Increased border radius
          marginLeft: '5px',
          fontWeight: 'bold'
        }}>
          {tableLabel}
        </span>
      </div>
      
      {/* Table Action Buttons */}
      <div style={{ 
        display: 'flex', 
        justifyContent: 'flex-end', 
        gap: '5px',
        marginBottom: '8px'
      }}>
        <button
          onClick={handleUpdateTable}
          title="Edit Table"
          style={{
            background: '#1890ff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            padding: '3px 8px',
            fontSize: '10px',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '3px'
          }}
        >
          <FaEdit size={10} /> Edit
        </button>
        <button
          onClick={handleDeleteTable}
          title="Delete Table"
          style={{
            background: '#ff4d4f',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            padding: '3px 8px',
            fontSize: '10px',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '3px'
          }}
        >
          <FaTrash size={10} /> Delete
        </button>
      </div>
      
      {/* Always show the columns section, even if empty */}
      <div style={{ 
        fontSize: '0.75em', 
        color: '#555',
        background: isStage 
          ? 'rgba(250, 140, 22, 0.1)' // Light orange for STAGE tables
          : isFact 
            ? 'rgba(24, 144, 255, 0.1)' // Light blue for FACT tables
            : 'rgba(82, 196, 26, 0.1)', // Light green for DIM tables
        padding: '8px', // Increased padding
        borderRadius: '6px', // Increased border radius
        marginTop: '8px', // Increased margin
        border: `1px solid ${isStage 
          ? 'rgba(250, 140, 22, 0.2)' 
          : isFact 
            ? 'rgba(24, 144, 255, 0.2)' 
            : 'rgba(82, 196, 26, 0.2)'}`
      }}>
        <div style={{ 
          marginBottom: '5px', 
          color: '#333', 
          fontWeight: 'bold',
          fontSize: '11px', // Slightly larger font
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}>
          <span>Columns:</span>
          <button
            onClick={handleAddColumn}
            style={{
              background: tableColor,
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              width: 'auto',
              height: '20px',
              fontSize: '11px',
              lineHeight: '14px',
              padding: '0 8px',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginLeft: "4px"
            }}
            title="Manage columns for this table"
          >
            Manage Columns
          </button>
        </div>
        
        {/* Display columns if they exist */}
        {data.columns && data.columns.length > 0 ? (
          <div style={{ 
            display: 'flex', 
            flexWrap: 'wrap', 
            gap: '4px' // Increased gap
          }}>
            {data.columns.slice(0, 5).map((col, index) => (
              <span key={index} style={{ 
                background: 'rgba(0, 0, 0, 0.05)', 
                padding: '2px 6px', // Increased padding
                borderRadius: '3px', // Increased border radius
                fontSize: '10px',
                color: '#333',
                border: '1px solid rgba(0, 0, 0, 0.08)' // Added subtle border
              }}>
                {col}
              </span>
            ))}
            {data.columns.length > 5 && (
              <span style={{ 
                padding: '2px 6px', // Increased padding
                fontSize: '10px',
                color: '#666',
                fontStyle: 'italic'
              }}>
                +{data.columns.length - 5} more
              </span>
            )}
          </div>
        ) : (
          <div style={{ 
            padding: '4px 0', 
            fontSize: '10px',
            color: '#666',
            fontStyle: 'italic',
            textAlign: 'center'
          }}>
            No columns defined. Click "Manage Columns" to add.
          </div>
        )}
      </div>
    </div>
  );
};

// Create a global reference to store component functions
window.dataflowCanvasApi = window.dataflowCanvasApi || {};

const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
  // React Flow refs and state
  const reactFlowWrapper = useRef(null);
  // const popupRef = useRef(null);
  const [reactFlowInstance, setReactFlowInstance] = useState(null);
  const { fitView, setViewport, getViewport } = useReactFlow();
  
  // Get data from API - force refresh when dbSlug changes
  const { data: apiData, loading, error, refreshData } = useApiData(true, dbSlug);
  
  // All state declarations must be at the top level
  // State for infinite canvas
  const [scale, setScale] = useState(1);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  // State for selected database
  const [selectedDatabase, setSelectedDatabase] = useState(null);
  
  // State for connection mode
  const [isConnectionMode, setIsConnectionMode] = useState(false);
  const [connectionSource, setConnectionSource] = useState(null);
  const [connectionType, setConnectionType] = useState('default');
  
  // State for process form
  const [showProcessForm, setShowProcessForm] = useState(false);
  const [selectedProcessForEdit, setSelectedProcessForEdit] = useState(null);
  
  // State for process details popup
  const [showProcessPopup, setShowProcessPopup] = useState(false);
  const [selectedProcess, setSelectedProcess] = useState(null);
  const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 });
  
  // State for table creation popup
  const [showTablePopup, setShowTablePopup] = useState(false);
  const [selectedSchemaForTable, setSelectedSchemaForTable] = useState(null);
  const [isDragging, setIsDragging] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
  
  // State for column management popup
  const [showColumnPopup, setShowColumnPopup] = useState(false);
  const [selectedTableInfo, setSelectedTableInfo] = useState(null);
  const [tableColumns, setTableColumns] = useState([]);
  
  // State for table update popup
  const [showTableUpdatePopup, setShowTableUpdatePopup] = useState(false);
  const [selectedTableForUpdate, setSelectedTableForUpdate] = useState(null);
  
  // State for schema creation popup
  const [showSchemaPopup, setShowSchemaPopup] = useState(false);
  const [newSchemaName, setNewSchemaName] = useState('');
  const [newSchemaDescription, setNewSchemaDescription] = useState('');
  const [isCreatingSchema, setIsCreatingSchema] = useState(false);
  const [schemaCreationError, setSchemaCreationError] = useState(null);
  
  // Read selected database from localStorage on component mount or when dbSlug changes
  useEffect(() => {
    try {
      console.log(`DataflowCanvas: Loading database with slug: ${dbSlug}`);
      
      // Get the database info from localStorage
      const dbData = localStorage.getItem('selectedDatabase');
      if (dbData) {
        const parsedData = JSON.parse(dbData);
        
        // Only use the database from localStorage if it matches the current dbSlug
        // or if no dbSlug is provided (backward compatibility)
        if (!dbSlug || parsedData.slug === dbSlug) {
          setSelectedDatabase(parsedData);
          console.log('DataFlow view initialized with database:', parsedData);
          
          // Set the current database slug in mockData.js
          if (typeof window.setCurrentDbSlug === 'function') {
            // First clear any existing data
            window.setCurrentDbSlug(null);
            
            // Then set the new database slug with a small delay to ensure cleanup
            setTimeout(() => {
              window.setCurrentDbSlug(parsedData.slug);
              
              // Force a re-render of the component
              setSelectedDatabase({...parsedData, timestamp: Date.now()});
            }, 50);
          }
        } else {
          console.log(`Database in localStorage (${parsedData.slug}) doesn't match current dbSlug (${dbSlug})`);
          
          // If we have a dbSlug but it doesn't match localStorage, update localStorage
          if (dbSlug) {
            // Find the database name based on slug
            let dbName = "Unknown Database";
            if (dbSlug === 'my_dwh') dbName = "MyDataWarehouseDB";
            if (dbSlug === 'my_dwh2') dbName = "service 2";
            
            // Create a new database object
            const newDbData = {
              id: `db-${dbSlug}`,
              name: dbName,
              slug: dbSlug,
              isEmpty: dbSlug === 'my_dwh2',
              timestamp: Date.now()
            };
            
            // Update localStorage
            localStorage.setItem('selectedDatabase', JSON.stringify(newDbData));
            setSelectedDatabase(newDbData);
            
            // Set the current database slug in mockData.js
            if (typeof window.setCurrentDbSlug === 'function') {
              window.setCurrentDbSlug(dbSlug);
            }
          }
        }
      } else if (dbSlug) {
        // If we have a dbSlug but no localStorage data, create it
        let dbName = "Unknown Database";
        if (dbSlug === 'my_dwh') dbName = "MyDataWarehouseDB";
        if (dbSlug === 'my_dwh2') dbName = "service 2";
        
        // Create a new database object
        const newDbData = {
          id: `db-${dbSlug}`,
          name: dbName,
          slug: dbSlug,
          isEmpty: dbSlug === 'my_dwh2',
          timestamp: Date.now()
        };
        
        // Update localStorage
        localStorage.setItem('selectedDatabase', JSON.stringify(newDbData));
        setSelectedDatabase(newDbData);
        
        // Set the current database slug in mockData.js
        if (typeof window.setCurrentDbSlug === 'function') {
          window.setCurrentDbSlug(dbSlug);
        }
      }
    } catch (error) {
      console.error('Error reading database from localStorage:', error);
    }
  }, [dbSlug]); // Re-run when dbSlug changes
  
  // Use API data when available
  useEffect(() => {
    if (apiData && !loading) {
      console.log('API data loaded successfully:', apiData);
      console.log('Schemas:', apiData.schemas?.length);
      console.log('Tables:', apiData.tables?.length);
    }
  }, [apiData, loading]);
  
  // Create a loading component
  const LoadingComponent = () => (
    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
      <div>Loading data from API...</div>
    </div>
  );

  // Hierarchical Breadcrumb Component
  const HierarchicalBreadcrumb = () => {
    const [dataMappingsMenuAnchor, setDataMappingsMenuAnchor] = useState(null);
    const [selectedView, setSelectedView] = useState('Data Flow View');

    const handleDataMappingsClick = (event) => {
      setDataMappingsMenuAnchor(event.currentTarget);
    };

    const handleDataMappingsClose = () => {
      setDataMappingsMenuAnchor(null);
    };

    const handleViewSelect = (view) => {
      setSelectedView(view);
      setDataMappingsMenuAnchor(null);
      
      // Handle navigation based on selected view
      if (view === 'Pipelines') {
        // Add logic to switch to Pipelines view
        console.log('Switching to Pipelines view');
        // You can add navigation logic here
      } else {
        // Data Flow View is the current view
        console.log('Staying in Data Flow View');
      }
    };

    return (
      <>
        <div style={{ 
          marginBottom: '16px',
          padding: '8px 0'
        }}>
          <Breadcrumbs 
            aria-label="breadcrumb"
            separator="›"
            sx={{
              '& .MuiBreadcrumbs-separator': {
                color: 'black',
                margin: '0 8px',
              },
              fontSize: '14px',
            }}
          >
            <Link
              underline="hover"
              color="black"
              href="#"
              onClick={(e) => e.preventDefault()}
              sx={{ fontWeight: 500 }}
            >
              Qubit
            </Link>
            
            {/* Data Mappings Dropdown */}
            <div 
              style={{
                display: 'flex',
                alignItems: 'center',
                cursor: 'pointer',
                color: '#023020',
                fontWeight: 500
              }}
              onClick={handleDataMappingsClick}
            >
              <Typography 
                color="#023020" 
                sx={{ fontWeight: 500, cursor: 'pointer' }}
              >
                Data Mappings
              </Typography>
              <FaChevronDown 
                style={{ 
                  marginLeft: '4px', 
                  fontSize: '12px',
                  transform: dataMappingsMenuAnchor ? 'rotate(180deg)' : 'rotate(0deg)',
                  transition: 'transform 0.2s ease'
                }} 
              />
            </div>

            {/* Selected View */}
            <Typography color="#301934">{selectedView}</Typography>
          </Breadcrumbs>
        </div>

        {/* Data Mappings Menu */}
        <Menu
          anchorEl={dataMappingsMenuAnchor}
          open={Boolean(dataMappingsMenuAnchor)}
          onClose={handleDataMappingsClose}
          PaperProps={{
            sx: {
              mt: 1,
              minWidth: 180,
              '& .MuiMenuItem-root': {
                px: 2,
                py: 1,
              },
            },
          }}
        >
          <MenuItem 
            onClick={() => handleViewSelect('Data Flow View')}
            selected={selectedView === 'Data Flow View'}
          >
            <ListItemIcon>
              <FaExchangeAlt size={16} />
            </ListItemIcon>
            <ListItemText primary="Data Flow View" />
          </MenuItem>
          <MenuItem 
            onClick={() => handleViewSelect('Pipelines')}
            selected={selectedView === 'Pipelines'}
          >
            <ListItemIcon>
              <FaArrowRight size={16} />
            </ListItemIcon>
            <ListItemText primary="Pipelines" />
          </MenuItem>
        </Menu>
      </>
    );
  };
  
  // Log error but continue with mockApiData as fallback
  useEffect(() => {
    if (error) {
      console.error('Error loading API data:', error);
    }
  }, [error]);
  
  // Create a loading component
  // const LoadingComponent = () => (
  //   <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
  //     <div>Loading data from API...</div>
  //   </div>
  // );
  
  // Log error but continue with mockApiData as fallback
  useEffect(() => {
    if (error) {
      console.error('Error loading API data:', error);
    }
  }, [error]);
  
  // Set up global callbacks for process editing and column creation
  // This is used by the ProcessNode and TableNode components
  useEffect(() => {
    // Store references to the state setters in the global API object
    window.dataflowCanvasApi = {
      ...window.dataflowCanvasApi,
      setSelectedProcessForEdit,
      setShowProcessForm,
      setTableColumns,
      setSelectedTableInfo,
      setShowColumnPopup,
      setSelectedSchemaForTable,
      setShowTablePopup,
      fetchColumns
    };
    
    // Process edit callback
    window.processEditCallback = (process) => {
      setSelectedProcessForEdit(process);
      setShowProcessForm(true);
    };
    
    // Column management callback
    window.showColumnPopup = async (tableInfo) => {
      console.log('Show column popup called with table info:', tableInfo);
      
      try {
        // Fetch columns for the selected table
        const columns = await fetchColumns(tableInfo.tbl, tableInfo.sch, tableInfo.con);
        console.log('Fetched columns for table:', columns);
        
        // Process columns to ensure they have both slug and col properties
        const processedColumns = columns.map(column => ({
          ...column,
          col: column.col || column.slug, // Ensure col exists
          slug: column.slug || column.col // Ensure slug exists
        }));
        
        console.log('Processed columns:', processedColumns);
        
        // Set the table columns
        setTableColumns(processedColumns || []);
        
        // Set the selected table info
        setSelectedTableInfo(tableInfo);
        
        // Show the column popup
        setShowColumnPopup(true);
      } catch (error) {
        console.error('Error fetching columns for table:', error);
        alert(`Error fetching columns: ${error.message}`);
        
        // Still show the popup but with empty columns
        setTableColumns([]);
        setSelectedTableInfo(tableInfo);
        setShowColumnPopup(true);
      }
    };
    
    // Table creation callback - define it directly on the window object
    window.showTableCreationPopup = (schemaInfo) => {
      console.log('Show table creation popup called with schema info:', schemaInfo);
      
      // Set the selected schema for table creation
      setSelectedSchemaForTable(schemaInfo);
      
      // Show the table creation popup
      setShowTablePopup(true);
    };
    
    // Table update popup callback
    window.showTableUpdatePopup = (tableInfo) => {
      console.log('Show table update popup called with table info:', tableInfo);
      setSelectedTableForUpdate(tableInfo);
      setShowTableUpdatePopup(true);
    };
    
    // Table delete callback
    window.deleteTable = async (tableInfo) => {
      console.log('Delete table called with table info:', tableInfo);
      try {
        // Always ensure the database identifier is present
        // First try to use the provided con
        // Then try to use the selected database
        // Then try to use the global currentDbSlug
        if (!tableInfo.con) {
          if (selectedDatabase && selectedDatabase.slug) {
            console.log(`Adding missing database identifier from selected database: ${selectedDatabase.slug}`);
            tableInfo.con = selectedDatabase.slug;
          } else if (typeof window.getCurrentDbSlug === 'function') {
            const currentDbSlug = window.getCurrentDbSlug();
            if (currentDbSlug) {
              console.log(`Adding missing database identifier from global currentDbSlug: ${currentDbSlug}`);
              tableInfo.con = currentDbSlug;
            }
          }
        }
        
        // Log the final table info being sent
        console.log('Final table info for deletion:', tableInfo);
        
        await handleDeleteTable(tableInfo);
      } catch (error) {
        console.error('Error deleting table:', error);
        alert(`Error deleting table: ${error.message}`);
      }
    };
    
    // Also define it on our API object for redundancy
    window.dataflowCanvasApi.showTableCreationPopup = window.showTableCreationPopup;
    window.dataflowCanvasApi.showTableUpdatePopup = window.showTableUpdatePopup;
    window.dataflowCanvasApi.deleteTable = window.deleteTable;
    
    console.log('Global callbacks set up:', {
      processEditCallback: typeof window.processEditCallback,
      showColumnPopup: typeof window.showColumnPopup,
      showTableCreationPopup: typeof window.showTableCreationPopup,
      showTableUpdatePopup: typeof window.showTableUpdatePopup,
      deleteTable: typeof window.deleteTable
    });
    
    return () => {
      // Clean up when component unmounts
      window.processEditCallback = null;
      window.showColumnPopup = null;
      window.showTableCreationPopup = null;
      window.showTableUpdatePopup = null;
      window.deleteTable = null;
      
      // Clear the API object
      window.dataflowCanvasApi = {};
    };
  }, []);
  
  // Define node types
  const nodeTypes = useMemo(() => ({
    table: TableNode,
    process: ProcessNode,
    schemaBackground: SchemaBackgroundNode,
  }), []);
  
  // Define edge types
  const edgeTypes = useMemo(() => ({
    custom: CustomEdge,
  }), []);

  // Create initial nodes from tables data
  const initialNodes = useMemo(() => {
    // If hasSchemas is false, return empty array immediately
    if (!hasSchemas) {
      console.log('Database is known to have no schemas - skipping node creation');
      return [];
    }
    
    // Calculate schema boundaries based on their tables
    const schemaBoundaries = {};
    
    // Use API data when available, otherwise fall back to mock data
    // Make sure we're using a stable reference to the data
    const schemas = apiData?.schemas || mockApiData.schemas;
    const tables = apiData?.tables || mockApiData.tables;
    
    console.log('DataflowCanvas - Schemas available:', schemas?.length || 0);
    console.log('DataflowCanvas - Tables available:', tables?.length || 0);
    console.log('DataflowCanvas - hasSchemas prop:', hasSchemas);
    console.log('DataflowCanvas - dbSlug prop:', dbSlug);
    console.log('DataflowCanvas - selectedDatabase:', selectedDatabase?.name);
    
    // Special handling for MyDataWarehouseDB
    if (dbSlug === 'my_dwh' && (!schemas || schemas.length === 0)) {
      console.log('MyDataWarehouseDB should have schemas but none found - using default mock data');
      // Force the use of mock data for MyDataWarehouseDB
      return createNodesFromMockData();
    }
    
    // Check if we have any schemas
    if (!schemas || schemas.length === 0) {
      console.log('No schemas available for this database');
      // Return an empty array if there are no schemas
      return [];
    }
    
    // Helper function to create nodes from mock data
    function createNodesFromMockData() {
      console.log('Creating nodes from default mock data');
      const mockSchemas = mockApiData.schemas;
      const mockTables = mockApiData.tables;
      
      // Initialize schema boundaries
      mockSchemas.forEach(schema => {
        schemaBoundaries[schema.slug] = {
          minX: schema.position?.x || 0,
          minY: schema.position?.y || 0,
          maxX: (schema.position?.x || 0) + (schema.width || 500),
          maxY: (schema.position?.y || 0) + (schema.height || 500)
        };
      });
      
      // Update boundaries based on table positions
      mockTables.forEach(table => {
        const schemaSlug = table.schema;
        if (schemaBoundaries[schemaSlug]) {
          const tableMinX = table.orientation.x - 250;
          const tableMinY = table.orientation.y - 250;
          const tableMaxX = table.orientation.x + 450;
          const tableMaxY = table.orientation.y + 450;
          
          schemaBoundaries[schemaSlug].minX = Math.min(schemaBoundaries[schemaSlug].minX, tableMinX);
          schemaBoundaries[schemaSlug].minY = Math.min(schemaBoundaries[schemaSlug].minY, tableMinY);
          schemaBoundaries[schemaSlug].maxX = Math.max(schemaBoundaries[schemaSlug].maxX, tableMaxX);
          schemaBoundaries[schemaSlug].maxY = Math.max(schemaBoundaries[schemaSlug].maxY, tableMaxY);
        }
      });
      
      // Create schema background nodes
      const schemaBackgroundNodes = mockSchemas.map(schema => {
        const bounds = schemaBoundaries[schema.slug];
        const width = bounds.maxX - bounds.minX;
        const height = bounds.maxY - bounds.minY;
        
        return {
          id: `schema-bg-${schema.slug}`,
          type: 'schemaBackground',
          position: { x: bounds.minX, y: bounds.minY },
          style: { width, height },
          data: {
            name: schema.name,
            slug: schema.slug,
            color: schema.color,
            database: schema.database || dbSlug // Include the database slug
          },
          draggable: true,
          selectable: false
        };
      });
      
      // Create table nodes
      const tableNodes = mockTables.map(table => ({
        id: `table-${table.slug}`,
        type: 'table',
        data: {
          name: table.name,
          slug: table.slug,
          schema: table.schema,
          columns: table.columns,
          type: table.type || 'dimension'
        },
        position: { x: table.orientation.x, y: table.orientation.y },
        parentNode: `schema-bg-${table.schema}`,
        extent: 'parent',
        style: {
          marginBottom: '30px',
          marginRight: '30px'
        },
        className: 'table-node'
      }));
      
      return [...schemaBackgroundNodes, ...tableNodes];
    }
    
    // Initialize with default values from schema definitions
    schemas.forEach(schema => {
      schemaBoundaries[schema.slug] = {
        minX: schema.position?.x || 0,
        minY: schema.position?.y || 0,
        maxX: (schema.position?.x || 0) + (schema.width || 500),
        maxY: (schema.position?.y || 0) + (schema.height || 500)
      };
    });
    
    // Update boundaries based on table positions
    tables.forEach(table => {
      const schemaSlug = table.schema;
      if (schemaBoundaries[schemaSlug]) {
        // Add more padding around tables (250px on each side for better spacing)
        const tableMinX = table.orientation.x - 250;
        const tableMinY = table.orientation.y - 250;
        const tableMaxX = table.orientation.x + 450; // Table width + padding
        const tableMaxY = table.orientation.y + 450; // Table height + padding
        
        schemaBoundaries[schemaSlug].minX = Math.min(schemaBoundaries[schemaSlug].minX, tableMinX);
        schemaBoundaries[schemaSlug].minY = Math.min(schemaBoundaries[schemaSlug].minY, tableMinY);
        schemaBoundaries[schemaSlug].maxX = Math.max(schemaBoundaries[schemaSlug].maxX, tableMaxX);
        schemaBoundaries[schemaSlug].maxY = Math.max(schemaBoundaries[schemaSlug].maxY, tableMaxY);
      }
    });
    
    // Schema background nodes (add these first so they appear behind other nodes)
    const schemaBackgroundNodes = schemas.map(schema => {
      const bounds = schemaBoundaries[schema.slug];
      const width = bounds.maxX - bounds.minX;
      const height = bounds.maxY - bounds.minY;
      
      // Add 60% extra size for better spacing and to ensure all elements are contained
      const extraWidth = width * 0.6;
      const extraHeight = height * 0.6;
      
      return {
        id: `schema-bg-${schema.slug}`,
        type: 'schemaBackground',
        data: { 
          name: schema.name,
          color: schema.color,
          slug: schema.slug,
          database: schema.database || dbSlug // Include the database slug
        },
        position: { 
          x: bounds.minX - (extraWidth / 2),
          y: bounds.minY - (extraHeight / 2)
        },
        style: { 
          width: width + extraWidth,
          height: height + extraHeight,
          zIndex: -1 // Ensure it's behind other nodes
        },
        draggable: true,
        selectable: true,
        zIndex: -1,
      };
    });
    
    // Table nodes with additional spacing
    const tableNodes = tables.map(table => ({
      id: table.slug,
      type: 'table',
      data: { 
        label: table.name,
        type: table.type,
        columns: table.columns,
        slug: table.slug,
        schema: table.schema, // Include schema information
        database: dbSlug // Include database information
      },
      position: (table.config && table.config.orientation) ? table.config.orientation : 
        (table.orientation || { 
          // Try to get stored position from localStorage
          ...((() => {
            try {
              const storageKey = `table_position_${dbSlug}_${table.schema}_${table.slug}`;
              const storedPosition = localStorage.getItem(storageKey);
              if (storedPosition) {
                return JSON.parse(storedPosition);
              }
            } catch (e) {
              console.error('Error retrieving stored position:', e);
            }
            // Default random position if nothing is stored
            return { 
              x: Math.floor(Math.random() * 700) + 100, 
              y: Math.floor(Math.random() * 700) + 100 
            };
          })())
        }),
      parentNode: `schema-bg-${table.schema}`, // Connect to parent schema
      extent: 'parent', // Keep within parent boundaries
      style: {
        marginBottom: '30px', // Add margin to prevent overlapping
        marginRight: '30px'   // Add margin to prevent overlapping
      },
      className: 'table-node' // Add class for styling
    }));
    
    return [...schemaBackgroundNodes, ...tableNodes];
  }, [apiData, hasSchemas, dbSlug]); // Add dependencies to ensure re-render when they change

  // Create process nodes
  const processNodes = useMemo(() => {
    // If hasSchemas is false, return empty array immediately
    if (!hasSchemas) {
      console.log('Database is known to have no schemas - skipping process node creation');
      return [];
    }
    
    // Use API data when available, otherwise fall back to mock data
    const processes = apiData?.processes || mockApiData.processes;
    const tables = apiData?.tables || mockApiData.tables;
    
    return processes.map((process, index) => {
      // Calculate position between source and destination tables
      const sourceTable = tables.find(t => t.slug === process.source_table[0]);
      const destTable = tables.find(t => t.slug === process.destination_table[0]);
      
      let x = 300;
      let y = 200;
      let parentSchema = null;
      
      if (sourceTable && destTable) {
        // For a left-to-right data flow, position the process node between the source and destination
        // but slightly closer to the source to maintain the flow direction
        
        // Calculate the position 1/3 of the way from source to destination
        const sourceX = sourceTable.orientation.x;
        const sourceY = sourceTable.orientation.y;
        const destX = destTable.orientation.x;
        const destY = destTable.orientation.y;
        
        // Position process node at 1/3 of the distance from source to destination
        // This creates a clearer left-to-right flow
        x = sourceX + (destX - sourceX) / 3 + 100; // Add offset to position after source table
        
        // Keep the y-coordinate aligned with the source table for a cleaner look
        // If source and destination are at different y positions, adjust slightly
        if (Math.abs(sourceY - destY) > 50) {
          // If vertical difference is significant, position between them
          y = sourceY + (destY - sourceY) / 2;
        } else {
          // Otherwise keep aligned with source
          y = sourceY;
        }
        
        // Determine which schema this process belongs to
        // If source and destination are in the same schema, use that schema
        if (sourceTable.schema === destTable.schema) {
          parentSchema = sourceTable.schema;
        } else {
          // If they're in different schemas, use the source schema
          parentSchema = sourceTable.schema;
        }
      } else if (sourceTable) {
        parentSchema = sourceTable.schema;
      } else if (destTable) {
        parentSchema = destTable.schema;
      }
      
      return {
        id: process.slug,
        type: 'process',
        data: { 
          label: process.name,
          description: process.description,
          type: process.type,
          status: process.status,
          processType: process.type, // Pass process type to the component
          fullProcessData: process // Include the full process data for editing
        },
        position: { x, y },
        parentNode: parentSchema ? `schema-bg-${parentSchema}` : undefined,
        extent: parentSchema ? 'parent' : undefined,
        style: {
          zIndex: 5, // Ensure process nodes are above edges
          margin: '20px', // Add margin to prevent overlapping
          background: 'white', // Ensure background is white
          borderRadius: '8px', // Rounded corners
          boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)' // Add shadow for better visibility
        },
        className: 'process-node' // Add class for styling
      };
    });
  }, [apiData, hasSchemas, dbSlug]); // Add dependencies to ensure re-render when they change

  // Create edges between tables and processes
  const initialEdges = useMemo(() => {
    // If hasSchemas is false, return empty array immediately
    if (!hasSchemas) {
      console.log('Database is known to have no schemas - skipping edge creation');
      return [];
    }
    
    const edges = [];
    
    // Use API data when available, otherwise fall back to mock data
    const processes = apiData?.processes || mockApiData.processes;
    
    processes.forEach(process => {
      // Determine if process is active or inactive
      const isActive = process.status === 'active';
      
      // Set colors and animation based on process status
      const sourceColor = isActive ? '#52c41a' : '#aaaaaa'; // Green or gray
      const destColor = isActive ? '#1890ff' : '#aaaaaa';   // Blue or gray
      const animated = isActive; // Only animate if active
      const strokeWidth = isActive ? 2 : 1.5; // Slightly thinner if inactive
      
      // Get the mappings for this process
      const mappings = process.mappings || [];
      
      // Format source columns for display
      const sourceColumns = mappings.map(m => m.source).join(', ');
      
      // Format target columns for display
      const targetColumns = mappings.map(m => m.target).join(', ');
      
      // Create edges from source tables to process
      process.source_table.forEach(sourceId => {
        edges.push({
          id: `e-${sourceId}-${process.slug}`,
          source: sourceId,
          target: process.slug,
          type: 'custom',
          animated: animated,
          style: { 
            stroke: sourceColor, 
            strokeWidth: strokeWidth,
            opacity: isActive ? 0.9 : 0.6, // Reduced opacity for better visual clarity
            zIndex: 4 // Ensure edges are below nodes
          },
          markerEnd: {
            type: 'arrowclosed',
            width: 15, // Smaller arrow
            height: 15, // Smaller arrow
            color: sourceColor,
          },
          data: {
            label: sourceColumns || 'No mappings',
            processName: process.name,
            isActive: isActive, // Pass status to the edge component
            edgeType: 'source',
            mappings: mappings.map(m => m.source)
          }
        });
      });
      
      // Create edges from process to destination tables
      process.destination_table.forEach(destId => {
        edges.push({
          id: `e-${process.slug}-${destId}`,
          source: process.slug,
          target: destId,
          type: 'custom',
          animated: animated,
          style: { 
            stroke: destColor, 
            strokeWidth: strokeWidth,
            opacity: isActive ? 0.9 : 0.6, // Reduced opacity for better visual clarity
            zIndex: 4 // Ensure edges are below nodes
          },
          markerEnd: {
            type: 'arrowclosed',
            width: 15, // Smaller arrow
            height: 15, // Smaller arrow
            color: destColor,
          },
          data: {
            label: targetColumns || 'No mappings',
            processName: process.name,
            isActive: isActive, // Pass status to the edge component
            edgeType: 'target',
            mappings: mappings.map(m => m.target)
          }
        });
      });
    });
    
    return edges;
  }, [apiData, hasSchemas, dbSlug]); // Add dependencies to ensure re-render when they change

  // Use React Flow's node state management
  const [nodes, setNodes, onNodesChangeDefault] = useNodesState([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  
  // Update nodes and edges when initialNodes or initialEdges change
  useEffect(() => {
    console.log('Updating nodes from initialNodes and processNodes:', initialNodes.length, processNodes.length);
    
    // Get current custom nodes (nodes that were added manually, not from API data)
    setNodes(currentNodes => {
      // First, identify any custom nodes that aren't in initialNodes
      // These would be nodes that were added manually (like newly created tables)
      const customNodes = currentNodes.filter(node => {
        // Check if this node is not in initialNodes
        // For table nodes, we check by slug
        if (node.type === 'table') {
          const nodeSlug = node.data.slug;
          const existsInInitial = initialNodes.some(initNode => 
            initNode.type === 'table' && initNode.data.slug === nodeSlug
          );
          
          // If it doesn't exist in initialNodes, it's a custom node
          return !existsInInitial;
        }
        
        // For other node types, we can just include them
        return false;
      });
      
      console.log('Found custom nodes that need to be preserved:', customNodes.length);
      
      // Merge initialNodes, processNodes, and customNodes
      // But avoid duplicates by checking node IDs
      const mergedNodes = [...initialNodes, ...processNodes];
      
      // Add custom nodes if they don't already exist in the merged nodes
      customNodes.forEach(customNode => {
        const exists = mergedNodes.some(node => node.id === customNode.id);
        if (!exists) {
          mergedNodes.push(customNode);
        }
      });
      
      console.log('Final merged nodes count:', mergedNodes.length);
      return mergedNodes;
    });
  }, [initialNodes, processNodes, dbSlug, apiData]);
  
  useEffect(() => {
    console.log('Updating edges from initialEdges:', initialEdges.length);
    // Always set edges, even if empty, to ensure proper rendering
    setEdges(initialEdges);
  }, [initialEdges, dbSlug, apiData]);
  
  // Make refreshData available globally for the SchemaBackgroundNode component
  useEffect(() => {
    // Create an enhanced refresh function that ensures UI updates
    window.refreshCanvasData = async () => {
      console.log('Enhanced refreshCanvasData called');
      
      try {
        // First call the original refreshData function to update the cache
        await refreshData();
        
        // After refreshing data, update the nodes and edges
        // This ensures the UI reflects the latest data
        console.log('Updating nodes and edges after data refresh');
        
        // Get the latest data
        const latestData = apiData || mockApiData;
        
        // Create a map of tables by slug for quick lookup
        const tableMap = {};
        if (latestData.tables) {
          latestData.tables.forEach(table => {
            tableMap[table.slug] = table;
          });
        }
        
        // Update the nodes with the latest data
        setNodes(nodes => {
          console.log('Updating nodes with latest data, preserving custom nodes');
          
          // First, identify any custom nodes that aren't in the API data
          const customNodes = [];
          const apiNodeIds = new Set();
          
          // Track which nodes are from the API
          nodes.forEach(node => {
            if (node.type === 'table') {
              const tableSlug = node.data.slug;
              if (tableMap[tableSlug]) {
                // This is an API node
                apiNodeIds.add(node.id);
              } else {
                // This might be a custom node
                customNodes.push(node);
              }
            } else {
              // Non-table nodes are preserved
              customNodes.push(node);
            }
          });
          
          console.log(`Found ${customNodes.length} custom nodes to preserve`);
          
          // Update each node with the latest data
          const updatedNodes = nodes.map(node => {
            // Only update table nodes that exist in the API data
            if (node.type === 'table') {
              const tableSlug = node.data.slug;
              const tableData = tableMap[tableSlug];
              
              // If we have updated data for this table
              if (tableData) {
                console.log(`Updating table node ${tableSlug} with latest data:`, tableData);
                
                // Get column names from the table data
                const columnNames = tableData.columns ? tableData.columns.map(col => col.name || col) : [];
                
                // Return updated node
                return {
                  ...node,
                  data: {
                    ...node.data,
                    columns: columnNames,
                    label: tableData.name,
                    type: tableData.table_type
                  }
                };
              }
            }
            
            // Return unchanged node
            return node;
          });
          
          console.log('Nodes updated with latest data');
          return updatedNodes;
        });
        
        // Force edge re-render
        setEdges(edges => {
          console.log('Forcing edge re-render');
          return [...edges];
        });
      } catch (error) {
        console.error('Error in refreshCanvasData:', error);
      }
    };
    
    // Set up the schema update callback
    window.onSchemaUpdated = (updatedSchema) => {
      if (!updatedSchema) return;
      
      console.log('Schema update detected, updating nodes directly:', updatedSchema);
      
      try {
        // Find and update the schema node directly
        setNodes(currentNodes => {
          return currentNodes.map(node => {
            if (node.type === 'schemaBackground' && 
                node.data && 
                node.data.slug === updatedSchema.slug) {
              console.log('Found schema node to update:', node.id);
              return {
                ...node,
                data: {
                  ...node.data,
                  name: updatedSchema.name,
                  description: updatedSchema.description,
                  updated_at: updatedSchema.updated_at
                }
              };
            }
            return node;
          });
        });
      } catch (error) {
        console.error('Error updating nodes in onSchemaUpdated:', error);
      }
    };
    
    return () => {
      // Clean up when component unmounts
      delete window.refreshCanvasData;
      delete window.onSchemaUpdated;
    };
  }, [refreshData, setNodes, setEdges]);
  
  // Custom nodes change handler to update schema boundaries when nodes move
  const onNodesChange = useCallback(
    (changes) => {
      // Apply the default node changes
      onNodesChangeDefault(changes);
      
      // Check if any of the changes are position changes
      const hasPositionChanges = changes.some(
        change => change.type === 'position' && change.dragging
      );
      
      // If there are position changes, force a re-render of the schema wrapper
      if (hasPositionChanges) {
        // Use a small timeout to ensure the node positions are updated first
        setTimeout(() => {
          setNodes((nds) => [...nds]);
        }, 0);
      }
    },
    [onNodesChangeDefault, setNodes]
  );

  // Track viewport changes
  const onMove = useCallback((event, viewport) => {
    setScale(viewport.zoom);
    setPosition({ x: viewport.x, y: viewport.y });
  }, []);

  const onConnect = useCallback(
    (params) => {
      // Find the source and target nodes
      const sourceNode = nodes.find(node => node.id === params.source);
      const targetNode = nodes.find(node => node.id === params.target);
      
      // Determine if this is a process connection
      let isActive = true;
      
      // Check if either source or target is a process node
      if (sourceNode?.type === 'process') {
        isActive = sourceNode.data.status === 'active';
      } else if (targetNode?.type === 'process') {
        isActive = targetNode.data.status === 'active';
      }
      
      // Create a custom edge with the selected connection type
      const edgeColor = connectionType === 'reference' ? '#00a99d' : 
                        connectionType === 'dependency' ? '#ff4d4f' : '#722ed1';
      
      // If inactive, use gray color
      const finalColor = isActive ? edgeColor : '#aaaaaa';
      
      const edgeLabel = connectionType === 'reference' ? 'references' : 
                        connectionType === 'dependency' ? 'depends on' : 'connects to';
      
      const newEdge = {
        ...params,
        id: `e-custom-${params.source}-${params.target}`,
        type: 'custom',
        animated: isActive, // Only animate if active
        style: { 
          stroke: finalColor,
          strokeWidth: isActive ? 2 : 1.5,
          opacity: isActive ? 1 : 0.7
        },
        markerEnd: {
          type: 'arrowclosed',
          width: 20,
          height: 20,
          color: finalColor,
        },
        data: {
          label: edgeLabel,
          isActive: isActive
        }
      };
      
      // Add the new edge to the edges array
      setEdges(eds => [...eds, newEdge]);
      
      // If in connection mode, exit it after creating a connection
      if (isConnectionMode) {
        setIsConnectionMode(false);
        setConnectionSource(null);
      }
      
      console.log(`Connection created: ${params.source} -> ${params.target} (${connectionType}), Active: ${isActive}`);
    },
    [setEdges, connectionType, isConnectionMode, nodes]
  );

  // Handle connection creation
  const onConnectStart = (event, params) => {
    console.log('Connection started:', params);
    setConnectionSource(params);
  };
  
  // Handle connection completion
  const onConnectEnd = (event) => {
    console.log('Connection ended');
  };

  // Initialize the flow
  const onInit = (instance) => {
    setReactFlowInstance(instance);
    
    // Set the viewport from the API data or fallback to mock data
    const viewportSettings = apiData?.viewportSettings || mockApiData.viewportSettings;
    const { x, y, zoom } = viewportSettings;
    instance.setViewport({ x, y, zoom });
    
    setTimeout(() => {
      // Use a larger padding and lower maxZoom to ensure all nodes are visible
      fitView({ padding: 1.0, maxZoom: 0.4 });
    }, 500);
  };
  const popupRef = useRef(null);
  
  // Drag handlers for the popup
  const handleMouseDown = (e) => {
    if (popupRef.current && !e.target.closest('button')) {
      const rect = popupRef.current.getBoundingClientRect();
      setIsDragging(true);
      setDragOffset({
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
      });
      e.preventDefault();
    }
  };

  const handleMouseMove = (e) => {
    if (isDragging && popupRef.current) {
      const newX = e.clientX - dragOffset.x;
      const newY = e.clientY - dragOffset.y;
      
      // Keep popup within viewport bounds
      const rect = popupRef.current.getBoundingClientRect();
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;
      
      const boundedX = Math.max(0, Math.min(newX, viewportWidth - rect.width));
      const boundedY = Math.max(0, Math.min(newY, viewportHeight - rect.height));
      
      setPopupPosition({ x: boundedX, y: boundedY });
    }
  };

  const handleMouseUp = () => {
    setIsDragging(false);
  };

  // Add and remove event listeners for dragging
  useEffect(() => {
    if (showProcessPopup) {
      window.addEventListener('mousemove', handleMouseMove);
      window.addEventListener('mouseup', handleMouseUp);
      
      return () => {
        window.removeEventListener('mousemove', handleMouseMove);
        window.removeEventListener('mouseup', handleMouseUp);
      };
    }
  }, [showProcessPopup, isDragging, dragOffset]);

  // Handle node click
  const onNodeClick = (event, node) => {
    console.log('Node clicked:', node);
    
    // Use API data when available, otherwise fall back to mock data
    const tables = apiData?.tables || mockApiData.tables;
    const processes = apiData?.processes || mockApiData.processes;
    
    // If it's a table node, show details
    if (node.type === 'table') {
      const table = tables.find(t => t.slug === node.id);
      if (table) {
        alert(`Table: ${table.name}\nType: ${table.type}\nColumns: ${table.columns.join(', ')}`);
      }
    }
    
    // If it's a process node, show details in a custom popup
    if (node.type === 'process') {
      // Use the full process data from the node data if available
      const process = node.data.fullProcessData || processes.find(p => p.slug === node.id);
      if (process) {
        // Get source and destination table names
        const sourceTables = process.source_table.map(slug => {
          const table = tables.find(t => t.slug === slug);
          return table ? table.name : slug;
        });
        
        const destTables = process.destination_table.map(slug => {
          const table = tables.find(t => t.slug === slug);
          return table ? table.name : slug;
        });
        
        // Add table names to the process object
        const processWithTableNames = {
          ...process,
          source_table_names: sourceTables,
          destination_table_names: destTables
        };
        
        setSelectedProcess(processWithTableNames);
        
        // Position the popup near the node but not directly on top of it
        const nodeElement = document.querySelector(`[data-id="${node.id}"]`);
        if (nodeElement) {
          const rect = nodeElement.getBoundingClientRect();
          setPopupPosition({ 
            x: rect.right + 20, 
            y: rect.top 
          });
        } else {
          setPopupPosition({ 
            x: event.clientX, 
            y: event.clientY 
          });
        }
        
        setShowProcessPopup(true);
      }
    }
  };
  
  // Handle edit process button click in the popup
  const handleEditProcess = (process) => {
    setSelectedProcessForEdit(process);
    setShowProcessForm(true);
    setShowProcessPopup(false);
  };


  
  // Handle table creation from the popup
  const handleCreateTable = async (tableData) => {
    try {
      console.log('Creating new table with data:', tableData);
      
      // Extract orientation from config or use orientation directly, or generate random one
      const orientation = (tableData.config && tableData.config.orientation) ? 
        tableData.config.orientation : 
        (tableData.orientation || {
          x: Math.floor(Math.random() * 700) + 100, 
          y: Math.floor(Math.random() * 700) + 100
        });
        
      console.log('Using orientation for new table:', orientation);
      
      console.log('Using orientation for new table:', orientation);
      
      // Call the createTable function with the provided data and orientation
      const newTable = await createTable(
        tableData.sch,
        tableData.name,
        tableData.table_type,
        tableData.external_name,
        tableData.description,
        tableData.con,
        orientation
      );
      
      console.log('Table created successfully:', newTable);
      
      // Prepare column data for the node
      const columnNames = tableData.columns && tableData.columns.length > 0 
        ? tableData.columns.map(col => col.name) 
        : [];
      
      // Create a new table node
      const tableNode = {
        id: `table-${newTable.slug}`,
        type: 'table',
        data: { 
          label: newTable.name,
          type: newTable.table_type,
          slug: newTable.slug,
          schema: tableData.sch,
          database: tableData.con,
          columns: columnNames, // Use the column names from the tableData
          columnDetails: tableData.columns || [] // Store the full column details
        },
        // Position the table inside the schema using the orientation from the API
        position: newTable.orientation || { 
          x: Math.floor(Math.random() * 400) + 100, 
          y: Math.floor(Math.random() * 400) + 100 
        },
        // Make it part of the schema
        parentNode: `schema-${tableData.sch}`,
        extent: 'parent',
        className: 'table-node',
        style: {
          border: '2px solid #1890ff',
          boxShadow: '0 0 10px rgba(24, 144, 255, 0.5)',
          zIndex: 10
        }
      };
      
      // Add the new table to the nodes, ensuring we don't duplicate
      setNodes(nodes => {
        // Check if a node with this ID already exists
        const existingNodeIndex = nodes.findIndex(node => node.id === tableNode.id);
        
        if (existingNodeIndex >= 0) {
          console.log(`Node with ID ${tableNode.id} already exists, updating it`);
          // Replace the existing node
          const updatedNodes = [...nodes];
          updatedNodes[existingNodeIndex] = tableNode;
          return updatedNodes;
        } else {
          console.log(`Adding new node with ID ${tableNode.id}`);
          // Add the new node
          return [...nodes, tableNode];
        }
      });
      
      // Create columns if provided
      if (tableData.columns && tableData.columns.length > 0) {
        console.log(`Creating ${tableData.columns.length} columns for table ${newTable.name}:`, tableData.columns);
        
        // Filter out empty columns
        const validColumns = tableData.columns.filter(col => col.name && col.name.trim() !== '');
        
        if (validColumns.length > 0) {
          console.log(`Creating ${validColumns.length} valid columns for table ${newTable.name}`);
          
          // Create each column
          for (const column of validColumns) {
            try {
              console.log(`Creating column ${column.name} with type ${column.data_type}`);
              
              await createColumn(
                newTable.slug,
                tableData.sch,
                column.name,
                column.data_type,
                "",  // description
                "",  // alias
                0,   // is_key
                tableData.con
              );
              
              console.log(`Column ${column.name} created successfully`);
            } catch (columnError) {
              console.error(`Error creating column ${column.name}:`, columnError);
            }
          }
          
          // Update the table node with the new columns
          setNodes(nodes => {
            return nodes.map(node => {
              if (node.id === `table-${newTable.slug}`) {
                // Get column names
                const columnNames = validColumns.map(col => col.name);
                
                console.log(`Updating table node with columns:`, columnNames);
                
                return {
                  ...node,
                  data: {
                    ...node.data,
                    columns: columnNames
                  }
                };
              }
              return node;
            });
          });
        }
      }
      
      // Instead of refreshing data immediately (which might overwrite our new node),
      // we'll use a timeout to allow the UI to update first
      setTimeout(() => {
        console.log('Refreshing data after table creation');
        refreshData();
      }, 500);
      
      // Show success message
      alert(`Table "${tableData.name}" created successfully!`);
      
      // Close the popup
      setShowTablePopup(false);
      setSelectedSchemaForTable(null);
    } catch (error) {
      console.error('Error creating table:', error);
      alert(`Error creating table: ${error.message}`);
    }
  };
  
  // Function to handle column creation
  const handleCreateColumn = async (columnData) => {
    try {
      console.log('Creating new column with data:', columnData);
      
      // Call the createColumn function with the provided data
      const newColumn = await createColumn(
        columnData.tbl,
        columnData.sch,
        columnData.name,
        columnData.data_type,
        columnData.description,
        columnData.alias,
        columnData.is_key,
        columnData.con
      );
      
      console.log('Column created successfully:', newColumn);
      
      // Add the new column to the table columns
      setTableColumns(prevColumns => [...prevColumns, newColumn]);
      
      // Refresh the data to show the new column
      refreshData();
      
      // Show success message
      alert(`Column "${columnData.name}" created successfully!`);
    } catch (error) {
      console.error('Error creating column:', error);
      alert(`Error creating column: ${error.message}`);
    }
  };
  
  // Function to handle column update
  const handleUpdateColumn = async (columnData) => {
    try {
      console.log('Updating column with data:', columnData);
      
      // Call the updateColumn function with the provided data
      const updatedColumn = await updateColumn(
        columnData.col,
        columnData.tbl,
        columnData.sch,
        columnData.name,
        columnData.data_type,
        columnData.description,
        columnData.alias,
        columnData.is_key,
        columnData.con
      );
      
      console.log('Column updated successfully:', updatedColumn);
      
      // Refresh the data to show the updated column
      refreshData();
      
      // Show success message
      alert(`Column "${columnData.name}" updated successfully!`);
    } catch (error) {
      console.error('Error updating column:', error);
      alert(`Error updating column: ${error.message}`);
    }
  };
  
  // Function to handle column deletion
  const handleDeleteColumn = async (columnData) => {
    try {
      console.log('Deleting column with data:', columnData);
      
      // Get the column identifier (could be in col or slug property)
      const columnId = columnData.col || columnData.slug;
      
      // Validate column data
      if (!columnId) {
        console.error('Column identifier is missing in:', columnData);
        throw new Error('Column identifier is required');
      }
      
      console.log(`Using column identifier: ${columnId}`);
      
      // Call the deleteColumn function with the provided data
      await deleteColumn(
        columnId,
        columnData.tbl,
        columnData.sch,
        columnData.con
      );
      
      console.log('Column deleted successfully');
      
      // Refresh the data to show the changes
      refreshData();
      
      // Show success message
      alert('Column deleted successfully!');
    } catch (error) {
      console.error('Error deleting column:', error);
      alert(`Error deleting column: ${error.message}`);
    }
  };
  
  // Function to handle table update
  const handleUpdateTable = async (tableData) => {
    try {
      console.log('Updating table with data:', tableData);
      
      // Validate table data
      if (!tableData.tbl) {
        throw new Error('Table identifier is required');
      }
      
      if (!tableData.name) {
        throw new Error('Table name is required');
      }
      
      if (!tableData.table_type) {
        throw new Error('Table type is required');
      }
      
      // Call the updateTable function with the provided data
      await updateTable(tableData);
      
      console.log('Table updated successfully');
      
      // Refresh the data to show the updated table
      refreshData();
      
      // Show success message
      alert(`Table "${tableData.name}" updated successfully!`);
      
      // Close the popup
      setShowTableUpdatePopup(false);
      setSelectedTableForUpdate(null);
    } catch (error) {
      console.error('Error updating table:', error);
      
      // Check if the error is actually a success message
      if (error.message && error.message.toLowerCase() === 'success') {
        console.log('Table update completed with success message');
        
        // Consider it a success and close the popup
        setShowTableUpdatePopup(false);
        setSelectedTableForUpdate(null);
        
        // Refresh data to show updated table
        refreshData();
      } else {
        // Real error - show alert but don't close popup
        alert(`Error updating table: ${error.message}`);
      }
    }
  };
  
  // Function to handle table deletion
  const handleDeleteTable = async (tableData) => {
    try {
      console.log('Deleting table with data:', tableData);
      
      // Validate table data
      if (!tableData.tbl) {
        throw new Error('Table identifier is required');
      }
      
      if (!tableData.sch) {
        throw new Error('Schema identifier is required');
      }
      
      // IMPORTANT: Always ensure we have a database identifier
      // Try multiple sources in order of preference
      if (!tableData.con) {
        // 1. Try to get it from the selected database
        if (selectedDatabase && selectedDatabase.slug) {
          console.log(`Using selected database slug: ${selectedDatabase.slug}`);
          tableData.con = selectedDatabase.slug;
        } 
        // 2. Try to get it from the dbSlug prop
        else if (dbSlug) {
          console.log(`Using dbSlug prop: ${dbSlug}`);
          tableData.con = dbSlug;
        }
        // 3. Try to get it from the global currentDbSlug
        else if (typeof window.getCurrentDbSlug === 'function') {
          const currentDbSlug = window.getCurrentDbSlug();
          if (currentDbSlug) {
            console.log(`Using global currentDbSlug: ${currentDbSlug}`);
            tableData.con = currentDbSlug;
          } else {
            throw new Error('Database identifier is required');
          }
        } else {
          throw new Error('Database identifier is required');
        }
      }
      
      // Log the final table data being sent to the API
      console.log('Final table data for deletion:', tableData);
      
      // Call the deleteTable function with the provided data
      // The deleteTable function now always uses force: true
      await deleteTable(tableData);
      
      console.log('Table deleted successfully');
      
      // Remove the table node from the nodes array
      setNodes(nodes => nodes.filter(node => {
        if (node.type === 'table') {
          return node.data.slug !== tableData.tbl;
        }
        return true;
      }));
      
      // Refresh the data to show the changes
      refreshData();
      
      // Show success message
      alert('Table deleted successfully!');
    } catch (error) {
      console.error('Error in handleDeleteTable:', error);
      alert(`Error deleting table: ${error.message}`);
    }
  };

  // Function to handle schema creation
  const handleCreateSchema = async () => {
    if (!newSchemaName.trim()) {
      setSchemaCreationError('Schema name is required');
      return;
    }
    
    if (!dbSlug) {
      setSchemaCreationError('Database slug is required to create a schema');
      return;
    }
    
    setIsCreatingSchema(true);
    setSchemaCreationError(null);
    
    try {
      console.log(`Creating schema "${newSchemaName}" in database with slug: ${dbSlug}`);
      
      // Call the createSchema function with the current database slug
      const newSchema = await createSchema(
        dbSlug, 
        newSchemaName.trim(), 
        newSchemaDescription.trim()
      );
      
      console.log('Schema created successfully:', newSchema);
      
      // Reset form fields
      setNewSchemaName('');
      setNewSchemaDescription('');
      
      // Close the popup
      setShowSchemaPopup(false);
      
      // Refresh the data to show the new schema
      if (typeof refreshData === 'function') {
        console.log('Refreshing data to show the new schema...');
        refreshData();
      } else {
        console.log('No refreshData function available, reloading page...');
        // If refreshData is not available, reload the page
        window.location.reload();
      }
    } catch (error) {
      console.error('Error creating schema:', error);
      setSchemaCreationError(error.message || 'Failed to create schema');
    } finally {
      setIsCreatingSchema(false);
    }
  };

  // Get canvas boundaries for process placement
  const getSchemasBoundaries = () => {
    // Calculate based on existing nodes
    let minX = 100;
    let minY = 100;
    let maxX = 500;
    let maxY = 500;
    
    if (nodes.length > 0) {
      minX = Math.min(...nodes.map(node => node.position.x));
      minY = Math.min(...nodes.map(node => node.position.y));
      maxX = Math.max(...nodes.map(node => node.position.x + 200)); // Assuming node width is ~200px
      maxY = Math.max(...nodes.map(node => node.position.y + 200)); // Assuming node height is ~200px
    }
    
    return { minX, minY, maxX, maxY };
  };
  
  // We don't need the moveSchemaNodes function anymore
  
  // Open the process form to create a new process
  const addProcessNode = () => {
    setSelectedProcessForEdit(null);
    setShowProcessForm(true);
  };
  
  // Handle saving a new process from the form
  const handleSaveProcess = (processData) => {
    const { minX, minY, maxX, maxY } = getSchemasBoundaries();
    
    // Place the new process outside of all schemas
    // Either to the right of all schemas or below all schemas
    let newX, newY;
    
    // Get the current viewport to help position the new node in visible area
    const viewport = reactFlowInstance ? reactFlowInstance.getViewport() : { x: 0, y: 0, zoom: 1 };
    
    // Determine placement position - right side is preferred
    newX = maxX + 200;
    newY = minY + (maxY - minY) / 2;
    
    // If we're editing an existing process, find it and update it
    if (selectedProcessForEdit) {
      const updatedNodes = nodes.map(node => {
        if (node.id === selectedProcessForEdit.slug) {
          return {
            ...node,
            data: {
              ...node.data,
              label: processData.name,
              description: processData.description,
              type: processData.type,
              status: processData.status,
              mappings: processData.mappings,
              filters: processData.filters,
              aggregations: processData.aggregations
            }
          };
        }
        return node;
      });
      
      setNodes(updatedNodes);
      
      // Update edges if source or destination tables have changed
      const processes = apiData?.processes || mockApiData.processes;
      const oldProcess = processes.find(p => p.slug === selectedProcessForEdit.slug);
      
      // Remove old edges
      if (oldProcess) {
        const edgesToRemove = edges.filter(edge => 
          edge.source === oldProcess.slug || 
          edge.target === oldProcess.slug
        );
        
        if (edgesToRemove.length > 0) {
          const remainingEdges = edges.filter(edge => 
            !edgesToRemove.some(e => e.id === edge.id)
          );
          
          setEdges(remainingEdges);
        }
      }
      
      // Create new edges
      const newEdges = [];
      
      // Determine if process is active or inactive
      const isActive = processData.status === 'active';
      
      // Set colors and animation based on process status
      const sourceColor = isActive ? '#52c41a' : '#aaaaaa'; // Green or gray
      const destColor = isActive ? '#1890ff' : '#aaaaaa';   // Blue or gray
      const animated = isActive; // Only animate if active
      const strokeWidth = isActive ? 2 : 1.5; // Slightly thinner if inactive
      const opacity = isActive ? 1 : 0.7; // Slightly transparent if inactive
      
      // Create edges from source tables to process
      processData.source_table.forEach(sourceId => {
        newEdges.push({
          id: `e-${sourceId}-${processData.slug}`,
          source: sourceId,
          target: processData.slug,
          type: 'custom',
          animated: animated,
          style: { 
            stroke: sourceColor, 
            strokeWidth: strokeWidth,
            opacity: opacity
          },
          markerEnd: {
            type: 'arrowclosed',
            width: 20,
            height: 20,
            color: sourceColor,
          },
          data: {
            label: processData.name,
            isActive: isActive
          }
        });
      });
      
      // Create edges from process to destination tables
      processData.destination_table.forEach(destId => {
        newEdges.push({
          id: `e-${processData.slug}-${destId}`,
          source: processData.slug,
          target: destId,
          type: 'custom',
          animated: animated,
          style: { 
            stroke: destColor, 
            strokeWidth: strokeWidth,
            opacity: opacity
          },
          markerEnd: {
            type: 'arrowclosed',
            width: 20,
            height: 20,
            color: destColor,
          },
          data: {
            label: processData.name,
            isActive: isActive
          }
        });
      });
      
      setEdges(eds => [...eds, ...newEdges]);
      
      // Update the data in memory
      // Note: In a real application, you would make an API call to update the data on the server
      // For now, we'll just update the mockApiData for consistency
      const processIndex = mockApiData.processes.findIndex(p => p.slug === processData.slug);
      if (processIndex !== -1) {
        mockApiData.processes[processIndex] = processData;
      }
      
      // If we have API data, update it too
      if (apiData && apiData.processes) {
        const apiProcessIndex = apiData.processes.findIndex(p => p.slug === processData.slug);
        if (apiProcessIndex !== -1) {
          apiData.processes[apiProcessIndex] = processData;
        }
      }
    } else {
      // Create a new process node
      const newProcess = {
        id: processData.slug,
        type: 'process',
        data: { 
          label: processData.name,
          description: processData.description,
          type: processData.type,
          status: processData.status,
          mappings: processData.mappings,
          filters: processData.filters,
          aggregations: processData.aggregations
        },
        position: { x: newX, y: newY },
      };
      
      setNodes(nodes => [...nodes, newProcess]);
      
      // Create edges
      const newEdges = [];
      
      // Determine if process is active or inactive
      const isActive = processData.status === 'active';
      
      // Set colors and animation based on process status
      const sourceColor = isActive ? '#52c41a' : '#aaaaaa'; // Green or gray
      const destColor = isActive ? '#1890ff' : '#aaaaaa';   // Blue or gray
      const animated = isActive; // Only animate if active
      const strokeWidth = isActive ? 2 : 1.5; // Slightly thinner if inactive
      const opacity = isActive ? 1 : 0.7; // Slightly transparent if inactive
      
      // Create edges from source tables to process
      processData.source_table.forEach(sourceId => {
        newEdges.push({
          id: `e-${sourceId}-${processData.slug}`,
          source: sourceId,
          target: processData.slug,
          type: 'custom',
          animated: animated,
          style: { 
            stroke: sourceColor, 
            strokeWidth: strokeWidth,
            opacity: opacity
          },
          markerEnd: {
            type: 'arrowclosed',
            width: 20,
            height: 20,
            color: sourceColor,
          },
          data: {
            label: processData.name,
            isActive: isActive
          }
        });
      });
      
      // Create edges from process to destination tables
      processData.destination_table.forEach(destId => {
        newEdges.push({
          id: `e-${processData.slug}-${destId}`,
          source: processData.slug,
          target: destId,
          type: 'custom',
          animated: animated,
          style: { 
            stroke: destColor, 
            strokeWidth: strokeWidth,
            opacity: opacity
          },
          markerEnd: {
            type: 'arrowclosed',
            width: 20,
            height: 20,
            color: destColor,
          },
          data: {
            label: processData.name,
            isActive: isActive
          }
        });
      });
      
      setEdges(eds => [...eds, ...newEdges]);
      
      // Add to mock data
      mockApiData.processes.push(processData);
      
      // If we have API data, update it too
      if (apiData && apiData.processes) {
        apiData.processes.push(processData);
      }
    }
  };

  // Removed schema-related functions

  // Handle dragging tables into schemas
  const onDragOver = useCallback((event) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }, []);

  const onDrop = useCallback((event) => {
    event.preventDefault();

    // Get the node ID from the data transfer
    const nodeId = event.dataTransfer.getData('application/reactflow');
    
    if (!nodeId || !reactFlowInstance) {
      return;
    }

    // Get the drop position
    const position = reactFlowInstance.screenToFlowPosition({
      x: event.clientX,
      y: event.clientY,
    });

    // Find the node being dragged
    const draggedNode = nodes.find(node => node.id === nodeId);
    
    if (!draggedNode) {
      return;
    }

    // Check if the drop position is within any schema
    const schemas = apiData?.schemas || mockApiData.schemas;
    let targetSchema = null;

    for (const schema of schemas) {
      const schemaNode = nodes.find(node => node.id === `schema-bg-${schema.slug}`);
      
      if (schemaNode) {
        const { x, y } = schemaNode.position;
        const { width, height } = schemaNode.style;
        
        // Check if the drop position is within this schema
        if (
          position.x >= x && 
          position.x <= x + width && 
          position.y >= y && 
          position.y <= y + height
        ) {
          targetSchema = schema;
          break;
        }
      }
    }

    // Update the node with the new position and parent schema
    const updatedNodes = nodes.map(node => {
      if (node.id === nodeId) {
        return {
          ...node,
          position,
          parentNode: targetSchema ? `schema-bg-${targetSchema.slug}` : undefined,
          extent: targetSchema ? 'parent' : undefined,
          // Remove the draggable styling
          style: {
            ...node.style,
            border: null,
            boxShadow: null
          },
          className: 'table-node'
        };
      }
      return node;
    });

    setNodes(updatedNodes);
  }, [nodes, reactFlowInstance]);

  // Add the custom CSS to the document
  useEffect(() => {
    // Create a style element
    const styleElement = document.createElement('style');
    styleElement.innerHTML = generateCustomStyles();
    document.head.appendChild(styleElement);
    
    // Clean up on unmount
    return () => {
      document.head.removeChild(styleElement);
    };
  }, []);

  // Create a style element with our custom styles
  const customStyles = useMemo(() => generateCustomStyles(), []);

  // Render the component
  return (
    <div style={{ width: '100%', height: '100%', background: '#ffffff' }} ref={reactFlowWrapper}>
      <style>{customStyles}</style>
      
      {/* Show loading state if data is still loading */}
      {loading ? (
        <LoadingComponent />
      ) : (
        <>
          {/* Database Header */}
          {selectedDatabase && (
        <div style={{
          padding: '10px 15px',
          background: 'linear-gradient(90deg, #00a99d, #52c41a)',
          color: 'black',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
            <svg width="24" height="24" viewBox="0 0 41 39" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="40.5" height="38.7" rx="3.6" fill="white" fillOpacity="0.2"/>
              <path d="M19.8845 24.789C17.0714 24.789 14.2465 24.0672 12.912 22.5097C12.8725 22.683 12.8462 22.8607 12.8462 23.0493V25.8844C12.8462 28.3962 16.4937 29.5392 19.8845 29.5392C23.2753 29.5392 26.9228 28.3962 26.9228 25.8844V23.0493C26.9228 22.8607 26.8964 22.6837 26.8569 22.5104C25.5217 24.068 22.6976 24.7904 19.8837 24.7904L19.8845 24.789ZM19.8845 19.3083C17.0714 19.3083 14.2465 18.5865 12.9127 17.0289C12.8706 17.2053 12.8486 17.3858 12.8469 17.5671V20.4022C12.8469 22.9133 16.4937 24.0563 19.8845 24.0563C23.2753 24.0563 26.9228 22.9133 26.9228 20.4015V17.5657C26.9228 17.3778 26.8964 17.2001 26.8569 17.0268C25.5217 18.5843 22.6976 19.3068 19.8837 19.3068L19.8845 19.3083ZM19.8845 8.42944C16.4937 8.42944 12.8462 9.57385 12.8462 12.0857V14.9208C12.8462 17.4326 16.4937 18.5755 19.8845 18.5755C23.2753 18.5755 26.9228 17.4333 26.9228 14.9215V12.0864C26.9228 9.57458 23.2753 8.43017 19.8845 8.43017V8.42944ZM19.8845 14.2794C16.8059 14.2794 14.3087 13.2974 14.3087 12.0857C14.3087 10.8747 16.8052 9.89194 19.8845 9.89194C22.9638 9.89194 25.4603 10.8747 25.4603 12.0857C25.4603 13.2981 22.9638 14.2794 19.8845 14.2794Z" fill="white"/>
            </svg>
            <div>
              <h2 style={{ margin: 0, fontSize: '18px', color: 'black' }}>{selectedDatabase.name} Database</h2>
              {/* <div style={{ fontSize: '12px', opacity: 0.9 }}>Data Flow View</div> */}
              <HierarchicalBreadcrumb />
            </div>
          </div>
          <div>
            <button 
              onClick={() => {
                // Use hash-based routing to navigate back to explorer
                window.location.hash = '#/qubit_service';
                
                // Also dispatch the custom event as a fallback
                const event = new CustomEvent('switchToTab', { detail: 'canvas' });
                window.dispatchEvent(event);
              }}
              style={{
                background: 'rgba(255, 255, 255, 0.2)',
                border: 'none',
                color: 'white',
                padding: '5px 10px',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '12px'
              }}
            >
              Back to Explorer
            </button>
          </div>
        </div>
      )}
      
      <ReactFlow
        nodes={nodes}
        edges={edges}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onDrop={onDrop}
        onDragOver={onDragOver}
        onConnect={onConnect}
        onConnectStart={onConnectStart}
        onConnectEnd={onConnectEnd}
        onInit={onInit}
        onNodeClick={onNodeClick}
        onMove={onMove}
        onNodeDragStop={(event, node) => {
          // Only handle table node drag events
          if (node.type === 'table' && node.data) {
            console.log('Table dragged to new position:', node.position);
            console.log('Table data:', node.data);
            
            // Send the new position to the API
            if (node.data.slug && node.data.schema) {
              try {
                console.log('Updating table position through qbt_table_update endpoint');
                
                // Prepare table data for update with config structure
                const tableData = {
                  tbl: node.data.slug,
                  sch: node.data.schema,
                  con: node.data.database || dbSlug, // Use node's database or current dbSlug
                  name: node.data.label,
                  table_type: node.data.type || 'stage', // Default to stage if not specified
                  // Use config object with orientation nested inside
                  config: {
                    orientation: node.position
                  }
                };
                
                // Call the regular updateTable function
                updateTable(tableData)
                  .then(result => {
                    console.log('Table position updated successfully through regular update:', result);
                  })
                  .catch(error => {
                    console.error('Failed to update table position:', error);
                  });
              } catch (error) {
                console.error('Error preparing table update:', error);
              }
            } else {
              console.error('Missing data for table position update:', node.data);
            }
          }
        }}
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        minZoom={0.05}
        maxZoom={8}
        defaultViewport={{ x: 0, y: 0, zoom: 0.4 }}
        fitView
        fitViewOptions={{ padding: 1.0, maxZoom: 0.4 }}
        style={{ background: '#ffffff' }}
        className={isConnectionMode ? 'connection-mode' : ''}
        connectionMode="loose"
        connectionLineStyle={{
          stroke: connectionType === 'reference' ? '#00a99d' : 
                 connectionType === 'dependency' ? '#ff4d4f' : '#52c41a',
          strokeWidth: 3,
          strokeDasharray: '5,5'
        }}
        connectionLineType="bezier"
        defaultMarkerColor="#00a99d"
      >
        {/* Empty Database Message */}
        {nodes.length === 0 && selectedDatabase && (
          <Panel position="center">
            <div style={{
              background: 'rgba(255, 255, 255, 0.9)',
              padding: '30px',
              borderRadius: '8px',
              boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
              textAlign: 'center',
              maxWidth: '500px'
            }}>
              <svg width="80" height="80" viewBox="0 0 41 39" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ margin: '0 auto 20px' }}>
                <rect width="40.5" height="38.7" rx="3.6" fill="url(#db_paint0_linear)"/>
                <path d="M19.8845 24.789C17.0714 24.789 14.2465 24.0672 12.912 22.5097C12.8725 22.683 12.8462 22.8607 12.8462 23.0493V25.8844C12.8462 28.3962 16.4937 29.5392 19.8845 29.5392C23.2753 29.5392 26.9228 28.3962 26.9228 25.8844V23.0493C26.9228 22.8607 26.8964 22.6837 26.8569 22.5104C25.5217 24.068 22.6976 24.7904 19.8837 24.7904L19.8845 24.789ZM19.8845 19.3083C17.0714 19.3083 14.2465 18.5865 12.9127 17.0289C12.8706 17.2053 12.8486 17.3858 12.8469 17.5671V20.4022C12.8469 22.9133 16.4937 24.0563 19.8845 24.0563C23.2753 24.0563 26.9228 22.9133 26.9228 20.4015V17.5657C26.9228 17.3778 26.8964 17.2001 26.8569 17.0268C25.5217 18.5843 22.6976 19.3068 19.8837 19.3068L19.8845 19.3083ZM19.8845 8.42944C16.4937 8.42944 12.8462 9.57385 12.8462 12.0857V14.9208C12.8462 17.4326 16.4937 18.5755 19.8845 18.5755C23.2753 18.5755 26.9228 17.4333 26.9228 14.9215V12.0864C26.9228 9.57458 23.2753 8.43017 19.8845 8.43017V8.42944ZM19.8845 14.2794C16.8059 14.2794 14.3087 13.2974 14.3087 12.0857C14.3087 10.8747 16.8052 9.89194 19.8845 9.89194C22.9638 9.89194 25.4603 10.8747 25.4603 12.0857C25.4603 13.2981 22.9638 14.2794 19.8845 14.2794Z" fill="white"/>
                <defs>
                  <linearGradient id="db_paint0_linear" x1="40.5" y1="19.35" x2="0" y2="19.35" gradientUnits="userSpaceOnUse">
                    <stop stopColor="#006064"/>
                    <stop offset="0.711538" stopColor="#00A1A8"/>
                  </linearGradient>
                </defs>
              </svg>
              <h3 style={{ margin: '0 0 10px', color: '#333', fontSize: '20px' }}>
                {selectedDatabase.name} Database is Empty
              </h3>
              <p style={{ color: '#666', marginBottom: '20px' }}>
                {selectedDatabase.slug === 'my_dwh2' ? 
                  "This database (service 2) doesn't contain any schemas or tables. This is expected behavior." :
                  "This database doesn't have any tables or data flows yet. Start by adding tables and processes to visualize your data flow."
                }
              </p>
              <div style={{ display: 'flex', justifyContent: 'center', gap: '10px' }}>
                <button 
                  onClick={() => setShowTablePopup(true)}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    gap: '5px',
                    padding: '8px 16px',
                    background: '#52c41a',
                    color: 'white',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    fontSize: '14px'
                  }}
                >
                  <FaTable size={14} />
                  Add First Table
                </button>
              </div>
            </div>
          </Panel>
        )}
        
        {/* Process Details Popup */}
        {showProcessPopup && selectedProcess && (
          <div 
            ref={popupRef}
            style={{
              position: 'absolute',
              top: popupPosition.y,
              left: popupPosition.x,
              zIndex: 1000,
              background: '#ffffff',
              border: '2px solid #fa8c16',
              borderRadius: '8px',
              padding: '15px',
              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
              color: '#333333',
              width: '350px',
              maxWidth: '90vw',
              maxHeight: '80vh',
              overflow: 'auto',
              backdropFilter: 'blur(5px)',
              animation: 'fadeIn 0.3s ease',
              cursor: isDragging ? 'grabbing' : 'grab',
              userSelect: 'none'
            }}
            onMouseDown={handleMouseDown}
            onClick={(e) => e.stopPropagation()}
          >
            <div style={{ 
              display: 'flex', 
              justifyContent: 'space-between', 
              alignItems: 'center',
              marginBottom: '15px',
              borderBottom: '1px solid rgba(250, 140, 22, 0.3)',
              paddingBottom: '10px',
              cursor: 'grab'
            }}
            className="popup-header"
            >
              <div style={{
                display: 'flex',
                alignItems: 'center',
                gap: '8px'
              }}>
                {/* Drag handle indicator */}
                <div style={{
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '2px',
                  marginRight: '5px',
                  opacity: 0.5
                }}>
                  <div style={{ width: '20px', height: '2px', background: '#fa8c16', borderRadius: '1px' }}></div>
                  <div style={{ width: '20px', height: '2px', background: '#fa8c16', borderRadius: '1px' }}></div>
                  <div style={{ width: '20px', height: '2px', background: '#fa8c16', borderRadius: '1px' }}></div>
                </div>
                
                <h3 style={{ 
                  margin: 0, 
                  color: '#fa8c16',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '8px'
                }}>
                  <CustomProcessIcon width="20" height="20" /> {selectedProcess.name}
                </h3>
              </div>
              
              <button 
                onClick={() => setShowProcessPopup(false)}
                style={{
                  background: 'transparent',
                  border: 'none',
                  color: '#666',
                  fontSize: '16px',
                  cursor: 'pointer',
                  padding: '5px'
                }}
              >
                ✕
              </button>
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between',
                marginBottom: '8px'
              }}>
                <span style={{ color: '#666' }}>Process ID:</span>
                <span style={{ 
                  background: 'rgba(250, 140, 22, 0.1)', 
                  padding: '2px 6px', 
                  borderRadius: '4px',
                  fontFamily: 'monospace',
                  color: '#333'
                }}>
                  {selectedProcess.slug}
                </span>
              </div>
              
              <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between',
                marginBottom: '8px'
              }}>
                <span style={{ color: '#666' }}>Type:</span>
                <span style={{ 
                  background: 'rgba(250, 140, 22, 0.1)', 
                  padding: '2px 6px', 
                  borderRadius: '4px',
                  color: '#333'
                }}>
                  {selectedProcess.type}
                </span>
              </div>
              
              <div style={{ 
                display: 'flex', 
                justifyContent: 'space-between',
                marginBottom: '8px'
              }}>
                <span style={{ color: '#666' }}>Status:</span>
                <span style={{ 
                  background: selectedProcess.status === 'active' ? 'rgba(82, 196, 26, 0.2)' : 'rgba(255, 77, 79, 0.2)', 
                  color: selectedProcess.status === 'active' ? '#52c41a' : '#ff4d4f',
                  padding: '2px 6px', 
                  borderRadius: '4px',
                  fontWeight: 'bold'
                }}>
                  {selectedProcess.status}
                </span>
              </div>
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <h4 style={{ 
                margin: '0 0 8px 0', 
                color: '#555',
                fontSize: '14px'
              }}>
                Description
              </h4>
              <p style={{ 
                margin: 0, 
                padding: '8px', 
                background: 'rgba(250, 140, 22, 0.05)', 
                borderRadius: '4px',
                fontSize: '14px',
                color: '#333',
                border: '1px solid rgba(250, 140, 22, 0.2)'
              }}>
                {selectedProcess.description || 'No description available'}
              </p>
            </div>
            
            <div style={{ display: 'flex', gap: '15px' }}>
              <div style={{ flex: 1 }}>
                <h4 style={{ 
                  margin: '0 0 8px 0', 
                  color: '#52c41a',
                  fontSize: '14px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '5px'
                }}>
                  <CustomDatabaseIcon width="16" height="16" /> Source Tables
                </h4>
                <ul style={{ 
                  margin: 0, 
                  padding: '8px', 
                  background: 'rgba(82, 196, 26, 0.1)', 
                  borderRadius: '4px',
                  listStyle: 'none',
                  border: '1px solid rgba(82, 196, 26, 0.2)'
                }}>
                  {selectedProcess.source_table_names.map((name, index) => (
                    <li key={index} style={{ 
                      padding: '4px 0',
                      borderBottom: index < selectedProcess.source_table_names.length - 1 ? '1px solid rgba(0, 0, 0, 0.05)' : 'none',
                      fontSize: '13px',
                      color: '#333'
                    }}>
                      {name}
                    </li>
                  ))}
                </ul>
              </div>
              
              <div style={{ flex: 1 }}>
                <h4 style={{ 
                  margin: '0 0 8px 0', 
                  color: '#1890ff',
                  fontSize: '14px',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '5px'
                }}>
                  <CustomDatabaseIcon width="16" height="16" /> Destination Tables
                </h4>
                <ul style={{ 
                  margin: 0, 
                  padding: '8px', 
                  background: 'rgba(24, 144, 255, 0.1)', 
                  borderRadius: '4px',
                  listStyle: 'none',
                  border: '1px solid rgba(24, 144, 255, 0.2)'
                }}>
                  {selectedProcess.destination_table_names.map((name, index) => (
                    <li key={index} style={{ 
                      padding: '4px 0',
                      borderBottom: index < selectedProcess.destination_table_names.length - 1 ? '1px solid rgba(0, 0, 0, 0.05)' : 'none',
                      fontSize: '13px',
                      color: '#333'
                    }}>
                      {name}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            
            <div style={{ 
              marginTop: '15px', 
              display: 'flex', 
              justifyContent: 'flex-end',
              gap: '10px',
              borderTop: '1px solid rgba(250, 140, 22, 0.3)',
              paddingTop: '15px'
            }}>
              <button 
                onClick={() => setShowProcessPopup(false)}
                style={{
                  background: '#f0f0f0',
                  border: '1px solid #ccc',
                  color: '#333',
                  padding: '6px 12px',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                Close
              </button>
              <button 
                onClick={() => handleEditProcess(selectedProcess)}
                style={{
                  background: '#fa8c16',
                  border: 'none',
                  color: '#fff',
                  padding: '6px 12px',
                  borderRadius: '4px',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '5px',
                  boxShadow: '0 2px 5px rgba(250, 140, 22, 0.3)'
                }}
              >
                <CustomProcessIcon width="16" height="16" /> Edit Process
              </button>
            </div>
          </div>
        )}
        <Controls />
        <MiniMap 
          nodeStrokeColor={(n) => {
            if (n.type === 'table') return n.data.type === 'fact' ? '#1890ff' : '#52c41a';
            return '#fa8c16';
          }}
          nodeColor={(n) => {
            if (n.type === 'table') return n.data.type === 'fact' ? 'rgba(24, 144, 255, 0.2)' : 'rgba(82, 196, 26, 0.2)';
            return 'rgba(250, 140, 22, 0.2)';
          }}
          maskColor="rgba(255, 255, 255, 0.7)"
          style={{ background: '#f0f0f0', border: '1px solid #ddd' }}
        />
        <Background color="#e0e0e0" gap={16} variant="dots" />
        
        <Panel position="top-right">
          <div style={{ 
            display: 'flex', 
            gap: '10px', 
            background: 'rgba(255, 255, 255, 0.9)', 
            padding: '10px', 
            borderRadius: '5px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
            backdropFilter: 'blur(5px)',
            border: '1px solid rgba(82, 196, 26, 0.3)',
          }}>
 
            <button 
              onClick={addProcessNode}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '5px',
                padding: '5px 10px',
                background: '#fa8c16',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              <CustomProcessIcon width="18" height="18" />
              Add Process
            </button>
            <button 
              onClick={() => setShowSchemaPopup(true)}
              disabled={!dbSlug}
              title={!dbSlug ? "Please select a database first" : "Create a new schema in this database"}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '5px',
                padding: '5px 10px',
                background: dbSlug ? '#1890ff' : '#d9d9d9',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: dbSlug ? 'pointer' : 'not-allowed',
                opacity: dbSlug ? 1 : 0.7
              }}
            >
              <CustomSchemaIcon width="18" height="18" />
              Add Schema
            </button>
            <button 
              onClick={() => setConnectionType(connectionType === 'default' ? 'reference' : 'default')}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: '5px',
                padding: '5px 10px',
                background: connectionType === 'reference' ? '#00a99d' : '#722ed1',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              <FaExchangeAlt size={14} />
              {connectionType === 'reference' ? 'Reference' : 'Default'} Connection
            </button>
          </div>
        </Panel>
      </ReactFlow>
      
      {/* Process Form */}
      <ProcessForm 
        isOpen={showProcessForm}
        onClose={() => setShowProcessForm(false)}
        onSave={handleSaveProcess}
        tables={apiData?.tables || mockApiData.tables}
        existingProcess={selectedProcessForEdit}
      />
      
      {/* Table Creation Popup */}
      {showTablePopup && selectedSchemaForTable && (
        <TableCreationPopup 
          onClose={() => {
            setShowTablePopup(false);
            setSelectedSchemaForTable(null);
          }}
          onCreateTable={handleCreateTable}
          schemaInfo={selectedSchemaForTable}
        />
      )}
      
      {/* Make the showTableCreationPopup function globally available */}
      <div style={{ display: 'none' }}>
        {/* This is a hack to ensure the function is available globally */}
        {(() => {
          // Define the function on the window object
          window.showTableCreationPopup = (schemaInfo) => {
            console.log('Global showTableCreationPopup called with:', schemaInfo);
            setSelectedSchemaForTable(schemaInfo);
            setShowTablePopup(true);
          };
          return null;
        })()}
      </div>
      
      {/* Column Management Popup */}
      {showColumnPopup && selectedTableInfo && (
        <ColumnManagementPopup 
          onClose={() => {
            setShowColumnPopup(false);
            setSelectedTableInfo(null);
            setTableColumns([]);
          }}
          onCreateColumn={handleCreateColumn}
          onUpdateColumn={handleUpdateColumn}
          onDeleteColumn={handleDeleteColumn}
          tableInfo={selectedTableInfo}
          existingColumns={tableColumns}
        />
      )}
      
      {/* Table Update Popup */}
      {showTableUpdatePopup && selectedTableForUpdate && (
        <TableUpdatePopup 
          onClose={() => {
            setShowTableUpdatePopup(false);
            setSelectedTableForUpdate(null);
          }}
          onUpdateTable={handleUpdateTable}
          tableInfo={selectedTableForUpdate}
        />
      )}
      
      {/* Schema Creation Popup */}
      {showSchemaPopup && dbSlug && (
        <div
          style={{
            position: 'fixed',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            zIndex: 1000,
            background: '#ffffff',
            border: '2px solid #1890ff',
            borderRadius: '8px',
            padding: '20px',
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
            width: '400px',
            maxWidth: '90vw'
          }}
          onClick={(e) => e.stopPropagation()}
        >
          <div style={{ 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            marginBottom: '15px',
            borderBottom: '1px solid #1890ff',
            paddingBottom: '10px'
          }}>
            <div>
              <h3 style={{ margin: 0, color: '#1890ff', display: 'flex', alignItems: 'center', gap: '8px' }}>
                <CustomSchemaIcon width="24" height="24" />
                Create New Schema
              </h3>
              <p style={{ margin: '5px 0 0 0', fontSize: '12px', color: '#666' }}>
                Database: <strong>{dbSlug || 'No database selected'}</strong>
              </p>
            </div>
            <button 
              onClick={() => setShowSchemaPopup(false)}
              style={{
                background: 'none',
                border: 'none',
                fontSize: '18px',
                cursor: 'pointer',
                color: '#999'
              }}
            >
              ×
            </button>
          </div>
          
          {schemaCreationError && (
            <div style={{
              padding: '10px',
              marginBottom: '15px',
              background: '#fff2f0',
              border: '1px solid #ffccc7',
              borderRadius: '4px',
              color: '#ff4d4f'
            }}>
              {schemaCreationError}
            </div>
          )}
          
          <div style={{ marginBottom: '15px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Schema Name *
            </label>
            <input
              type="text"
              value={newSchemaName}
              onChange={(e) => setNewSchemaName(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px'
              }}
              placeholder="Enter schema name"
              disabled={isCreatingSchema}
            />
          </div>
          
          <div style={{ marginBottom: '20px' }}>
            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
              Description
            </label>
            <textarea
              value={newSchemaDescription}
              onChange={(e) => setNewSchemaDescription(e.target.value)}
              style={{
                width: '100%',
                padding: '8px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                minHeight: '80px',
                resize: 'vertical'
              }}
              placeholder="Enter schema description (optional)"
              disabled={isCreatingSchema}
            />
          </div>
          
          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
            <button
              onClick={() => setShowSchemaPopup(false)}
              style={{
                padding: '8px 16px',
                background: '#f0f0f0',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '14px'
              }}
              disabled={isCreatingSchema}
            >
              Cancel
            </button>
            <button
              onClick={handleCreateSchema}
              style={{
                padding: '8px 16px',
                background: '#1890ff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                fontSize: '14px',
                display: 'flex',
                alignItems: 'center',
                gap: '5px'
              }}
              disabled={isCreatingSchema}
            >
              {isCreatingSchema ? 'Creating...' : 'Create Schema'}
            </button>
          </div>
        </div>
      )}
        </>
      )}
    </div>
  );
};

// Wrap with ReactFlowProvider
const DataflowCanvasWrapper = ({ dbSlug, hasSchemas }) => {
  return (
    <ReactFlowProvider>
      <DataflowCanvas dbSlug={dbSlug} hasSchemas={hasSchemas} />
    </ReactFlowProvider>
  );
};

export default DataflowCanvasWrapper;