@flowuent-org/diagramming-core 1.3.10 → 1.4.1

package/packages/diagrams/src/lib/templates/cloud-arch/components/FormatConverter.tsx

@@ -1,810 +1,810 @@
-import React, { useState, useCallback } from 'react';
-import {
-  Box,
-  Button,
-  Typography,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Paper,
-  Tabs,
-  Tab,
-  TextField,
-  FormControlLabel,
-  Switch,
-  Alert,
-  Chip,
-  IconButton,
-  Tooltip,
-  Divider,
-} from '@mui/material';
-import {
-  SwapHoriz as ConvertIcon,
-  ContentCopy as CopyIcon,
-  Download as DownloadIcon,
-  Upload as UploadIcon,
-  Close as CloseIcon,
-  CheckCircle as SuccessIcon,
-  Error as ErrorIcon,
-} from '@mui/icons-material';
-import {
-  defaultSchemaConverter,
-  autoConvert,
-  type SupportedFormat,
-  type ConversionOptions,
-} from '../utils/schemaConverter';
-
-interface FormatConverterProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialData?: any;
-  initialFormat?: SupportedFormat;
-}
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-}
-
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
-  return (
-    <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && <Box sx={{ p: 0 }}>{children}</Box>}
-    </div>
-  );
-}
-
-const FormatConverter: React.FC<FormatConverterProps> = ({
-  isOpen,
-  onClose,
-  initialData,
-  initialFormat = 'json',
-}) => {
-  const [activeTab, setActiveTab] = useState(0);
-  const [inputFormat, setInputFormat] = useState<SupportedFormat>(initialFormat);
-  const [outputFormat, setOutputFormat] = useState<SupportedFormat>(
-    initialFormat === 'json' ? 'yaml' : 'json'
-  );
-  const [inputData, setInputData] = useState('');
-
-  // Auto-load current diagram data when dialog opens
-  React.useEffect(() => {
-    if (isOpen && initialData) {
-      const currentDiagramJSON = JSON.stringify(initialData, null, 2);
-      setInputData(currentDiagramJSON);
-      setInputFormat('json');
-      setOutputFormat('yaml');
-      setOutputData('');
-      setConvertError(null);
-      setConvertSuccess(`Current diagram loaded automatically (${typeof initialData === 'object' && initialData ? Object.keys(initialData).length : 'unknown'} fragments, ready to convert to YAML)`);
-    }
-  }, [isOpen, initialData]);
-  const [outputData, setOutputData] = useState('');
-  const [convertError, setConvertError] = useState<string | null>(null);
-  const [convertSuccess, setConvertSuccess] = useState<string | null>(null);
-  const [options, setOptions] = useState<Partial<ConversionOptions>>({
-    prettyPrint: true,
-    indent: 2,
-    sortKeys: false,
-    includeComments: true,
-  });
-
-  // Convert data
-  const handleConvert = useCallback(() => {
-    if (!inputData.trim()) {
-      setConvertError('Please provide input data to convert');
-      return;
-    }
-
-    try {
-      setConvertError(null);
-      setConvertSuccess(null);
-
-      const result = autoConvert(inputData, outputFormat);
-      
-      if (result.success) {
-        setOutputData(result.data);
-        setConvertSuccess(
-          `Successfully converted from ${inputFormat.toUpperCase()} to ${outputFormat.toUpperCase()} (${result.size} bytes)`
-        );
-      } else {
-        setConvertError(result.error || 'Conversion failed');
-        setOutputData('');
-      }
-    } catch (error) {
-      setConvertError(error instanceof Error ? error.message : 'Conversion failed');
-      setOutputData('');
-    }
-  }, [inputData, inputFormat, outputFormat]);
-
-  // Swap input and output formats
-  const handleSwapFormats = useCallback(() => {
-    setInputFormat(outputFormat);
-    setOutputFormat(inputFormat);
-    setInputData(outputData);
-    setOutputData('');
-    setConvertError(null);
-    setConvertSuccess(null);
-  }, [inputFormat, outputFormat, outputData]);
-
-  // Copy to clipboard
-  const handleCopy = useCallback(async (data: string) => {
-    try {
-      await navigator.clipboard.writeText(data);
-      setConvertSuccess('Copied to clipboard!');
-      setTimeout(() => setConvertSuccess(null), 2000);
-    } catch (error) {
-      setConvertError('Failed to copy to clipboard');
-    }
-  }, []);
-
-  // Download file
-  const handleDownload = useCallback((data: string, format: SupportedFormat) => {
-    if (!data) return;
-
-    const mimeType = defaultSchemaConverter.getMimeType(format);
-    const extension = defaultSchemaConverter.getFileExtension(format);
-    
-    const blob = new Blob([data], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `cloud-architecture-schema.${extension}`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }, []);
-
-  // Load current diagram data
-  const loadCurrentDiagram = useCallback(() => {
-    if (initialData) {
-      const currentDiagramJSON = JSON.stringify(initialData, null, 2);
-      setInputData(currentDiagramJSON);
-      setInputFormat('json');
-      setOutputFormat('yaml');
-      setOutputData('');
-      setConvertError(null);
-      setConvertSuccess('Current diagram loaded');
-    } else {
-      setConvertError('No diagram data available');
-    }
-  }, [initialData]);
-
-  // Load sample data (kept for demo purposes)
-  const loadSample = useCallback((format: SupportedFormat) => {
-    const yamlSample = `# Cloud Architecture Schema
-# Generated on 2024-01-15T10:30:00Z
-# Format: YAML
-
-base: # Core schema structure
-  version: "1.0.0"
-  nodes:
-    - id: "vpc-main"
-      type: "subnetNode"
-      data:
-        service: "vpc"
-        cloudProvider: "aws"
-  edges: []
-
-metadata: # Export metadata and timestamps
-  exportedAt: "2024-01-15T10:30:00Z"
-  nodeCount: 1
-  edgeCount: 0
-  cloudProviders:
-    - "aws"`;
-
-    const samples = {
-      json: `{
-  "base": {
-    "version": "1.0.0",
-    "nodes": [
-      {
-        "id": "vpc-main",
-        "type": "subnetNode",
-        "data": {
-          "service": "vpc",
-          "cloudProvider": "aws"
-        }
-      }
-    ],
-    "edges": []
-  },
-  "metadata": {
-    "exportedAt": "2024-01-15T10:30:00Z",
-    "nodeCount": 1,
-    "edgeCount": 0,
-    "cloudProviders": ["aws"]
-  }
-}`,
-      yaml: yamlSample,
-      yml: yamlSample,
-    };
-
-    setInputData(samples[format]);
-    setInputFormat(format);
-    setOutputFormat(format === 'json' ? 'yaml' : 'json');
-    setOutputData('');
-    setConvertError(null);
-    setConvertSuccess(null);
-  }, []);
-
-  // Handle file upload
-  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      const content = e.target?.result as string;
-      setInputData(content);
-      
-      // Try to detect format from file extension
-      if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) {
-        setInputFormat('yaml');
-        setOutputFormat('json');
-      } else {
-        setInputFormat('json');
-        setOutputFormat('yaml');
-      }
-      
-      setOutputData('');
-      setConvertError(null);
-      setConvertSuccess(`Loaded ${file.name}`);
-    };
-    reader.readAsText(file);
-  }, []);
-
-  // Clear all data
-  const handleClear = useCallback(() => {
-    setInputData('');
-    setOutputData('');
-    setConvertError(null);
-    setConvertSuccess(null);
-  }, []);
-
-  return (
-    <Dialog 
-      open={isOpen} 
-      onClose={onClose} 
-      maxWidth="xl" 
-      fullWidth
-      PaperProps={{
-        sx: {
-          bgcolor: '#1a1a1a',
-          color: '#ffffff',
-        }
-      }}
-    >
-      <DialogTitle sx={{ bgcolor: '#2d2d2d', color: '#ffffff' }}>
-        <Box display="flex" alignItems="center" justifyContent="space-between">
-          <Typography variant="h6" color="#ffffff">Schema Format Converter - Current Diagram</Typography>
-          <IconButton onClick={onClose} size="small" sx={{ color: '#ffffff' }}>
-            <CloseIcon />
-          </IconButton>
-        </Box>
-      </DialogTitle>
-
-      <DialogContent sx={{ p: 0, bgcolor: '#1a1a1a' }}>
-        <Box sx={{ borderBottom: 1, borderColor: '#444444' }}>
-          <Tabs 
-            value={activeTab} 
-            onChange={(_, newValue) => setActiveTab(newValue)}
-            sx={{
-              '& .MuiTab-root': {
-                color: '#cccccc',
-                '&.Mui-selected': {
-                  color: '#61dafb',
-                },
-              },
-              '& .MuiTabs-indicator': {
-                backgroundColor: '#61dafb',
-              },
-            }}
-          >
-            <Tab label="Converter" />
-            <Tab label="Options" />
-            <Tab label="Examples" />
-          </Tabs>
-        </Box>
-
-        {/* Main Converter Tab */}
-        <TabPanel value={activeTab} index={0}>
-          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
-            {/* Format Selection and Controls */}
-            <Box display="flex" alignItems="center" gap={2} mb={3}>
-              <Chip 
-                label={inputFormat.toUpperCase()} 
-                sx={{
-                  bgcolor: '#2d2d2d',
-                  color: '#61dafb',
-                  border: '1px solid #61dafb',
-                }}
-                variant="outlined"
-              />
-              <Button
-                variant="outlined"
-                startIcon={<ConvertIcon />}
-                onClick={handleSwapFormats}
-                size="small"
-                sx={{
-                  color: '#ffffff',
-                  borderColor: '#444444',
-                  '&:hover': {
-                    borderColor: '#61dafb',
-                    bgcolor: '#2d2d2d',
-                  },
-                }}
-              >
-                Swap
-              </Button>
-              <Chip 
-                label={outputFormat.toUpperCase()} 
-                sx={{
-                  bgcolor: '#2d2d2d',
-                  color: '#ff6b9d',
-                  border: '1px solid #ff6b9d',
-                }}
-                variant="outlined"
-              />
-              <Box flexGrow={1} />
-              <Button
-                variant="contained"
-                onClick={handleConvert}
-                disabled={!inputData.trim()}
-                startIcon={<ConvertIcon />}
-                sx={{
-                  bgcolor: '#61dafb',
-                  color: '#000000',
-                  '&:hover': {
-                    bgcolor: '#4fa8c5',
-                  },
-                  '&:disabled': {
-                    bgcolor: '#444444',
-                    color: '#888888',
-                  },
-                }}
-              >
-                Convert
-              </Button>
-            </Box>
-
-            {/* Current Diagram Controls */}
-            <Box display="flex" gap={1} mb={2}>
-              <Button
-                onClick={loadCurrentDiagram}
-                variant="contained"
-                startIcon={<UploadIcon />}
-                size="small"
-                sx={{
-                  bgcolor: '#61dafb',
-                  color: '#000000',
-                  '&:hover': { bgcolor: '#4fa8c5' },
-                }}
-              >
-                Load Current Diagram
-              </Button>
-              <Button
-                onClick={() => loadSample('json')}
-                size="small"
-                variant="outlined"
-                sx={{
-                  color: '#ffffff',
-                  borderColor: '#444444',
-                  '&:hover': {
-                    borderColor: '#61dafb',
-                    bgcolor: '#2d2d2d',
-                  },
-                }}
-              >
-                JSON Sample
-              </Button>
-              <Button
-                onClick={() => loadSample('yaml')}
-                size="small"
-                variant="outlined"
-                sx={{
-                  color: '#ffffff',
-                  borderColor: '#444444',
-                  '&:hover': {
-                    borderColor: '#61dafb',
-                    bgcolor: '#2d2d2d',
-                  },
-                }}
-              >
-                YAML Sample
-              </Button>
-              <Button 
-                onClick={handleClear} 
-                size="small" 
-                sx={{
-                  color: '#ff6b9d',
-                  borderColor: '#ff6b9d',
-                  '&:hover': {
-                    bgcolor: '#2d2d2d',
-                    borderColor: '#ff6b9d',
-                  },
-                }}
-                variant="outlined"
-              >
-                Clear
-              </Button>
-            </Box>
-
-            {/* Status Messages */}
-            {convertError && (
-              <Alert 
-                severity="error" 
-                sx={{ 
-                  mb: 2,
-                  bgcolor: '#2d1b1b',
-                  color: '#ff6b9d',
-                  '& .MuiAlert-icon': {
-                    color: '#ff6b9d',
-                  },
-                }} 
-                icon={<ErrorIcon />}
-              >
-                {convertError}
-              </Alert>
-            )}
-            {convertSuccess && (
-              <Alert 
-                severity="success" 
-                sx={{ 
-                  mb: 2,
-                  bgcolor: '#1b2d1b',
-                  color: '#4caf50',
-                  '& .MuiAlert-icon': {
-                    color: '#4caf50',
-                  },
-                }} 
-                icon={<SuccessIcon />}
-              >
-                {convertSuccess}
-              </Alert>
-            )}
-
-            {/* Input/Output Panels */}
-            <Box display="flex" gap={2} height="400px">
-              {/* Input Panel */}
-              <Paper sx={{ 
-                flex: 1, 
-                display: 'flex', 
-                flexDirection: 'column',
-                bgcolor: '#2d2d2d',
-                border: '1px solid #444444',
-              }}>
-                <Box
-                  sx={{
-                    p: 1,
-                    bgcolor: '#3d3d3d',
-                    borderBottom: '1px solid',
-                    borderColor: '#555555',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <Typography variant="subtitle2" color="#ffffff">
-                    Input ({inputFormat.toUpperCase()})
-                  </Typography>
-                  <Tooltip title="Copy Input">
-                    <IconButton
-                      size="small"
-                      onClick={() => handleCopy(inputData)}
-                      disabled={!inputData}
-                      sx={{
-                        color: '#ffffff',
-                        '&:disabled': {
-                          color: '#666666',
-                        },
-                      }}
-                    >
-                      <CopyIcon fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                </Box>
-                <Box
-                  sx={{
-                    flex: 1,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    position: 'relative',
-                  }}
-                >
-                  <textarea
-                    value={inputData}
-                    onChange={(e) => setInputData(e.target.value)}
-                    placeholder={inputData ? `${inputFormat.toUpperCase()} data loaded` : `Click "Load Current Diagram" to start converting your diagram...`}
-                    style={{
-                      flex: 1,
-                      width: '100%',
-                      height: '100%',
-                      resize: 'none',
-                      border: 'none',
-                      outline: 'none',
-                      padding: '16px',
-                      backgroundColor: '#1a1a1a',
-                      color: '#ffffff',
-                      fontFamily: 'monospace',
-                      fontSize: '12px',
-                      lineHeight: '1.4',
-                      overflow: 'auto',
-                      whiteSpace: 'pre-wrap',
-                      wordWrap: 'break-word',
-                    }}
-                  />
-                  {!inputData && (
-                    <Box
-                      sx={{
-                        position: 'absolute',
-                        top: 16,
-                        left: 16,
-                        color: '#888888',
-                        fontFamily: 'monospace',
-                        fontSize: '12px',
-                        pointerEvents: 'none',
-                        zIndex: 1,
-                      }}
-                    >
-                      Click "Load Current Diagram" to start converting your diagram...
-                    </Box>
-                  )}
-                </Box>
-              </Paper>
-
-              {/* Output Panel */}
-              <Paper sx={{ 
-                flex: 1, 
-                display: 'flex', 
-                flexDirection: 'column',
-                bgcolor: '#2d2d2d',
-                border: '1px solid #444444',
-              }}>
-                <Box
-                  sx={{
-                    p: 1,
-                    bgcolor: '#3d3d3d',
-                    borderBottom: '1px solid',
-                    borderColor: '#555555',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <Typography variant="subtitle2" color="#ffffff">
-                    Output ({outputFormat.toUpperCase()})
-                  </Typography>
-                  <Box>
-                    <Tooltip title="Copy Output">
-                      <IconButton
-                        size="small"
-                        onClick={() => handleCopy(outputData)}
-                        disabled={!outputData}
-                        sx={{
-                          color: '#ffffff',
-                          '&:disabled': {
-                            color: '#666666',
-                          },
-                        }}
-                      >
-                        <CopyIcon fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
-                    <Tooltip title="Download">
-                      <IconButton
-                        size="small"
-                        onClick={() => handleDownload(outputData, outputFormat)}
-                        disabled={!outputData}
-                        sx={{
-                          color: '#ffffff',
-                          '&:disabled': {
-                            color: '#666666',
-                          },
-                        }}
-                      >
-                        <DownloadIcon fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
-                  </Box>
-                </Box>
-                <Paper
-                  sx={{
-                    flex: 1,
-                    p: 2,
-                    bgcolor: outputData ? '#1a1a1a' : '#2a2a2a',
-                    color: '#ffffff',
-                    overflow: 'auto',
-                    fontFamily: 'monospace',
-                    fontSize: '12px',
-                    whiteSpace: 'pre-wrap',
-                    border: 'none',
-                  }}
-                  elevation={0}
-                >
-                  {outputData || 'Converted data will appear here...'}
-                </Paper>
-              </Paper>
-            </Box>
-          </Box>
-        </TabPanel>
-
-        {/* Options Tab */}
-        <TabPanel value={activeTab} index={1}>
-          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
-            <Typography variant="h6" gutterBottom color="#ffffff">
-              Conversion Options
-            </Typography>
-            <Box display="flex" flexDirection="column" gap={2}>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={options.prettyPrint || false}
-                    onChange={(e) =>
-                      setOptions(prev => ({ ...prev, prettyPrint: e.target.checked }))
-                    }
-                    sx={{
-                      '& .MuiSwitch-switchBase.Mui-checked': {
-                        color: '#61dafb',
-                      },
-                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                        backgroundColor: '#61dafb',
-                      },
-                    }}
-                  />
-                }
-                label="Pretty Print Output"
-                sx={{ color: '#ffffff' }}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={options.sortKeys || false}
-                    onChange={(e) =>
-                      setOptions(prev => ({ ...prev, sortKeys: e.target.checked }))
-                    }
-                    sx={{
-                      '& .MuiSwitch-switchBase.Mui-checked': {
-                        color: '#61dafb',
-                      },
-                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                        backgroundColor: '#61dafb',
-                      },
-                    }}
-                  />
-                }
-                label="Sort Object Keys"
-                sx={{ color: '#ffffff' }}
-              />
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={options.includeComments || false}
-                    onChange={(e) =>
-                      setOptions(prev => ({ ...prev, includeComments: e.target.checked }))
-                    }
-                    sx={{
-                      '& .MuiSwitch-switchBase.Mui-checked': {
-                        color: '#61dafb',
-                      },
-                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                        backgroundColor: '#61dafb',
-                      },
-                    }}
-                  />
-                }
-                label="Include Comments"
-                sx={{ color: '#ffffff' }}
-              />
-              <TextField
-                label="Indentation"
-                type="number"
-                value={options.indent || 2}
-                onChange={(e) =>
-                  setOptions(prev => ({ ...prev, indent: parseInt(e.target.value) || 2 }))
-                }
-                inputProps={{ min: 2, max: 8 }}
-                sx={{ 
-                  width: 200,
-                  '& .MuiInputLabel-root': {
-                    color: '#cccccc',
-                  },
-                  '& .MuiOutlinedInput-root': {
-                    color: '#ffffff',
-                    '& fieldset': {
-                      borderColor: '#444444',
-                    },
-                    '&:hover fieldset': {
-                      borderColor: '#61dafb',
-                    },
-                    '&.Mui-focused fieldset': {
-                      borderColor: '#61dafb',
-                    },
-                  },
-                }}
-              />
-            </Box>
-          </Box>
-        </TabPanel>
-
-        {/* Examples Tab */}
-        <TabPanel value={activeTab} index={2}>
-          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
-            <Typography variant="h6" gutterBottom color="#ffffff">
-              Format Examples & Use Cases
-            </Typography>
-            
-            <Typography variant="subtitle1" gutterBottom sx={{ mt: 2, color: '#61dafb' }}>
-              JSON Format
-            </Typography>
-            <Typography variant="body2" color="#cccccc" gutterBottom>
-              • Standard web format, universally supported
-              • Compact and fast to parse
-              • Great for APIs and data exchange
-              • No comments support
-            </Typography>
-
-            <Typography variant="subtitle1" gutterBottom sx={{ mt: 2, color: '#61dafb' }}>
-              YAML Format
-            </Typography>
-            <Typography variant="body2" color="#cccccc" gutterBottom>
-              • Human-readable and editable
-              • Supports comments and documentation
-              • Popular in DevOps and configuration
-              • Great for version control
-            </Typography>
-
-            <Divider sx={{ my: 2, borderColor: '#444444' }} />
-
-            <Typography variant="subtitle1" gutterBottom color="#ffffff">
-              Common Use Cases
-            </Typography>
-            <Box component="ul" sx={{ pl: 2 }}>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>API Integration:</strong> Use JSON for REST APIs and web services
-                </Typography>
-              </li>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>Configuration Files:</strong> Use YAML for readable config files
-                </Typography>
-              </li>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>Documentation:</strong> Use YAML with comments for self-documenting schemas
-                </Typography>
-              </li>
-              <li>
-                <Typography variant="body2" color="#cccccc">
-                  <strong style={{ color: '#61dafb' }}>Version Control:</strong> YAML diffs are more readable in Git
-                </Typography>
-              </li>
-            </Box>
-          </Box>
-        </TabPanel>
-      </DialogContent>
-
-      <DialogActions sx={{ p: 2, bgcolor: '#2d2d2d' }}>
-        <Button 
-          onClick={onClose}
-          sx={{
-            color: '#ffffff',
-            borderColor: '#444444',
-            '&:hover': {
-              bgcolor: '#3d3d3d',
-            },
-          }}
-        >
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-};
-
+import React, { useState, useCallback } from 'react';
+import {
+  Box,
+  Button,
+  Typography,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Paper,
+  Tabs,
+  Tab,
+  TextField,
+  FormControlLabel,
+  Switch,
+  Alert,
+  Chip,
+  IconButton,
+  Tooltip,
+  Divider,
+} from '@mui/material';
+import {
+  SwapHoriz as ConvertIcon,
+  ContentCopy as CopyIcon,
+  Download as DownloadIcon,
+  Upload as UploadIcon,
+  Close as CloseIcon,
+  CheckCircle as SuccessIcon,
+  Error as ErrorIcon,
+} from '@mui/icons-material';
+import {
+  defaultSchemaConverter,
+  autoConvert,
+  type SupportedFormat,
+  type ConversionOptions,
+} from '../utils/schemaConverter';
+
+interface FormatConverterProps {
+  isOpen: boolean;
+  onClose: () => void;
+  initialData?: any;
+  initialFormat?: SupportedFormat;
+}
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && <Box sx={{ p: 0 }}>{children}</Box>}
+    </div>
+  );
+}
+
+const FormatConverter: React.FC<FormatConverterProps> = ({
+  isOpen,
+  onClose,
+  initialData,
+  initialFormat = 'json',
+}) => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [inputFormat, setInputFormat] = useState<SupportedFormat>(initialFormat);
+  const [outputFormat, setOutputFormat] = useState<SupportedFormat>(
+    initialFormat === 'json' ? 'yaml' : 'json'
+  );
+  const [inputData, setInputData] = useState('');
+
+  // Auto-load current diagram data when dialog opens
+  React.useEffect(() => {
+    if (isOpen && initialData) {
+      const currentDiagramJSON = JSON.stringify(initialData, null, 2);
+      setInputData(currentDiagramJSON);
+      setInputFormat('json');
+      setOutputFormat('yaml');
+      setOutputData('');
+      setConvertError(null);
+      setConvertSuccess(`Current diagram loaded automatically (${typeof initialData === 'object' && initialData ? Object.keys(initialData).length : 'unknown'} fragments, ready to convert to YAML)`);
+    }
+  }, [isOpen, initialData]);
+  const [outputData, setOutputData] = useState('');
+  const [convertError, setConvertError] = useState<string | null>(null);
+  const [convertSuccess, setConvertSuccess] = useState<string | null>(null);
+  const [options, setOptions] = useState<Partial<ConversionOptions>>({
+    prettyPrint: true,
+    indent: 2,
+    sortKeys: false,
+    includeComments: true,
+  });
+
+  // Convert data
+  const handleConvert = useCallback(() => {
+    if (!inputData.trim()) {
+      setConvertError('Please provide input data to convert');
+      return;
+    }
+
+    try {
+      setConvertError(null);
+      setConvertSuccess(null);
+
+      const result = autoConvert(inputData, outputFormat);
+      
+      if (result.success) {
+        setOutputData(result.data);
+        setConvertSuccess(
+          `Successfully converted from ${inputFormat.toUpperCase()} to ${outputFormat.toUpperCase()} (${result.size} bytes)`
+        );
+      } else {
+        setConvertError(result.error || 'Conversion failed');
+        setOutputData('');
+      }
+    } catch (error) {
+      setConvertError(error instanceof Error ? error.message : 'Conversion failed');
+      setOutputData('');
+    }
+  }, [inputData, inputFormat, outputFormat]);
+
+  // Swap input and output formats
+  const handleSwapFormats = useCallback(() => {
+    setInputFormat(outputFormat);
+    setOutputFormat(inputFormat);
+    setInputData(outputData);
+    setOutputData('');
+    setConvertError(null);
+    setConvertSuccess(null);
+  }, [inputFormat, outputFormat, outputData]);
+
+  // Copy to clipboard
+  const handleCopy = useCallback(async (data: string) => {
+    try {
+      await navigator.clipboard.writeText(data);
+      setConvertSuccess('Copied to clipboard!');
+      setTimeout(() => setConvertSuccess(null), 2000);
+    } catch (error) {
+      setConvertError('Failed to copy to clipboard');
+    }
+  }, []);
+
+  // Download file
+  const handleDownload = useCallback((data: string, format: SupportedFormat) => {
+    if (!data) return;
+
+    const mimeType = defaultSchemaConverter.getMimeType(format);
+    const extension = defaultSchemaConverter.getFileExtension(format);
+    
+    const blob = new Blob([data], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `cloud-architecture-schema.${extension}`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, []);
+
+  // Load current diagram data
+  const loadCurrentDiagram = useCallback(() => {
+    if (initialData) {
+      const currentDiagramJSON = JSON.stringify(initialData, null, 2);
+      setInputData(currentDiagramJSON);
+      setInputFormat('json');
+      setOutputFormat('yaml');
+      setOutputData('');
+      setConvertError(null);
+      setConvertSuccess('Current diagram loaded');
+    } else {
+      setConvertError('No diagram data available');
+    }
+  }, [initialData]);
+
+  // Load sample data (kept for demo purposes)
+  const loadSample = useCallback((format: SupportedFormat) => {
+    const yamlSample = `# Cloud Architecture Schema
+# Generated on 2024-01-15T10:30:00Z
+# Format: YAML
+
+base: # Core schema structure
+  version: "1.0.0"
+  nodes:
+    - id: "vpc-main"
+      type: "subnetNode"
+      data:
+        service: "vpc"
+        cloudProvider: "aws"
+  edges: []
+
+metadata: # Export metadata and timestamps
+  exportedAt: "2024-01-15T10:30:00Z"
+  nodeCount: 1
+  edgeCount: 0
+  cloudProviders:
+    - "aws"`;
+
+    const samples = {
+      json: `{
+  "base": {
+    "version": "1.0.0",
+    "nodes": [
+      {
+        "id": "vpc-main",
+        "type": "subnetNode",
+        "data": {
+          "service": "vpc",
+          "cloudProvider": "aws"
+        }
+      }
+    ],
+    "edges": []
+  },
+  "metadata": {
+    "exportedAt": "2024-01-15T10:30:00Z",
+    "nodeCount": 1,
+    "edgeCount": 0,
+    "cloudProviders": ["aws"]
+  }
+}`,
+      yaml: yamlSample,
+      yml: yamlSample,
+    };
+
+    setInputData(samples[format]);
+    setInputFormat(format);
+    setOutputFormat(format === 'json' ? 'yaml' : 'json');
+    setOutputData('');
+    setConvertError(null);
+    setConvertSuccess(null);
+  }, []);
+
+  // Handle file upload
+  const handleFileUpload = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const content = e.target?.result as string;
+      setInputData(content);
+      
+      // Try to detect format from file extension
+      if (file.name.endsWith('.yaml') || file.name.endsWith('.yml')) {
+        setInputFormat('yaml');
+        setOutputFormat('json');
+      } else {
+        setInputFormat('json');
+        setOutputFormat('yaml');
+      }
+      
+      setOutputData('');
+      setConvertError(null);
+      setConvertSuccess(`Loaded ${file.name}`);
+    };
+    reader.readAsText(file);
+  }, []);
+
+  // Clear all data
+  const handleClear = useCallback(() => {
+    setInputData('');
+    setOutputData('');
+    setConvertError(null);
+    setConvertSuccess(null);
+  }, []);
+
+  return (
+    <Dialog 
+      open={isOpen} 
+      onClose={onClose} 
+      maxWidth="xl" 
+      fullWidth
+      PaperProps={{
+        sx: {
+          bgcolor: '#1a1a1a',
+          color: '#ffffff',
+        }
+      }}
+    >
+      <DialogTitle sx={{ bgcolor: '#2d2d2d', color: '#ffffff' }}>
+        <Box display="flex" alignItems="center" justifyContent="space-between">
+          <Typography variant="h6" color="#ffffff">Schema Format Converter - Current Diagram</Typography>
+          <IconButton onClick={onClose} size="small" sx={{ color: '#ffffff' }}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+      </DialogTitle>
+
+      <DialogContent sx={{ p: 0, bgcolor: '#1a1a1a' }}>
+        <Box sx={{ borderBottom: 1, borderColor: '#444444' }}>
+          <Tabs 
+            value={activeTab} 
+            onChange={(_, newValue) => setActiveTab(newValue)}
+            sx={{
+              '& .MuiTab-root': {
+                color: '#cccccc',
+                '&.Mui-selected': {
+                  color: '#61dafb',
+                },
+              },
+              '& .MuiTabs-indicator': {
+                backgroundColor: '#61dafb',
+              },
+            }}
+          >
+            <Tab label="Converter" />
+            <Tab label="Options" />
+            <Tab label="Examples" />
+          </Tabs>
+        </Box>
+
+        {/* Main Converter Tab */}
+        <TabPanel value={activeTab} index={0}>
+          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
+            {/* Format Selection and Controls */}
+            <Box display="flex" alignItems="center" gap={2} mb={3}>
+              <Chip 
+                label={inputFormat.toUpperCase()} 
+                sx={{
+                  bgcolor: '#2d2d2d',
+                  color: '#61dafb',
+                  border: '1px solid #61dafb',
+                }}
+                variant="outlined"
+              />
+              <Button
+                variant="outlined"
+                startIcon={<ConvertIcon />}
+                onClick={handleSwapFormats}
+                size="small"
+                sx={{
+                  color: '#ffffff',
+                  borderColor: '#444444',
+                  '&:hover': {
+                    borderColor: '#61dafb',
+                    bgcolor: '#2d2d2d',
+                  },
+                }}
+              >
+                Swap
+              </Button>
+              <Chip 
+                label={outputFormat.toUpperCase()} 
+                sx={{
+                  bgcolor: '#2d2d2d',
+                  color: '#ff6b9d',
+                  border: '1px solid #ff6b9d',
+                }}
+                variant="outlined"
+              />
+              <Box flexGrow={1} />
+              <Button
+                variant="contained"
+                onClick={handleConvert}
+                disabled={!inputData.trim()}
+                startIcon={<ConvertIcon />}
+                sx={{
+                  bgcolor: '#61dafb',
+                  color: '#000000',
+                  '&:hover': {
+                    bgcolor: '#4fa8c5',
+                  },
+                  '&:disabled': {
+                    bgcolor: '#444444',
+                    color: '#888888',
+                  },
+                }}
+              >
+                Convert
+              </Button>
+            </Box>
+
+            {/* Current Diagram Controls */}
+            <Box display="flex" gap={1} mb={2}>
+              <Button
+                onClick={loadCurrentDiagram}
+                variant="contained"
+                startIcon={<UploadIcon />}
+                size="small"
+                sx={{
+                  bgcolor: '#61dafb',
+                  color: '#000000',
+                  '&:hover': { bgcolor: '#4fa8c5' },
+                }}
+              >
+                Load Current Diagram
+              </Button>
+              <Button
+                onClick={() => loadSample('json')}
+                size="small"
+                variant="outlined"
+                sx={{
+                  color: '#ffffff',
+                  borderColor: '#444444',
+                  '&:hover': {
+                    borderColor: '#61dafb',
+                    bgcolor: '#2d2d2d',
+                  },
+                }}
+              >
+                JSON Sample
+              </Button>
+              <Button
+                onClick={() => loadSample('yaml')}
+                size="small"
+                variant="outlined"
+                sx={{
+                  color: '#ffffff',
+                  borderColor: '#444444',
+                  '&:hover': {
+                    borderColor: '#61dafb',
+                    bgcolor: '#2d2d2d',
+                  },
+                }}
+              >
+                YAML Sample
+              </Button>
+              <Button 
+                onClick={handleClear} 
+                size="small" 
+                sx={{
+                  color: '#ff6b9d',
+                  borderColor: '#ff6b9d',
+                  '&:hover': {
+                    bgcolor: '#2d2d2d',
+                    borderColor: '#ff6b9d',
+                  },
+                }}
+                variant="outlined"
+              >
+                Clear
+              </Button>
+            </Box>
+
+            {/* Status Messages */}
+            {convertError && (
+              <Alert 
+                severity="error" 
+                sx={{ 
+                  mb: 2,
+                  bgcolor: '#2d1b1b',
+                  color: '#ff6b9d',
+                  '& .MuiAlert-icon': {
+                    color: '#ff6b9d',
+                  },
+                }} 
+                icon={<ErrorIcon />}
+              >
+                {convertError}
+              </Alert>
+            )}
+            {convertSuccess && (
+              <Alert 
+                severity="success" 
+                sx={{ 
+                  mb: 2,
+                  bgcolor: '#1b2d1b',
+                  color: '#4caf50',
+                  '& .MuiAlert-icon': {
+                    color: '#4caf50',
+                  },
+                }} 
+                icon={<SuccessIcon />}
+              >
+                {convertSuccess}
+              </Alert>
+            )}
+
+            {/* Input/Output Panels */}
+            <Box display="flex" gap={2} height="400px">
+              {/* Input Panel */}
+              <Paper sx={{ 
+                flex: 1, 
+                display: 'flex', 
+                flexDirection: 'column',
+                bgcolor: '#2d2d2d',
+                border: '1px solid #444444',
+              }}>
+                <Box
+                  sx={{
+                    p: 1,
+                    bgcolor: '#3d3d3d',
+                    borderBottom: '1px solid',
+                    borderColor: '#555555',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <Typography variant="subtitle2" color="#ffffff">
+                    Input ({inputFormat.toUpperCase()})
+                  </Typography>
+                  <Tooltip title="Copy Input">
+                    <IconButton
+                      size="small"
+                      onClick={() => handleCopy(inputData)}
+                      disabled={!inputData}
+                      sx={{
+                        color: '#ffffff',
+                        '&:disabled': {
+                          color: '#666666',
+                        },
+                      }}
+                    >
+                      <CopyIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+                <Box
+                  sx={{
+                    flex: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    position: 'relative',
+                  }}
+                >
+                  <textarea
+                    value={inputData}
+                    onChange={(e) => setInputData(e.target.value)}
+                    placeholder={inputData ? `${inputFormat.toUpperCase()} data loaded` : `Click "Load Current Diagram" to start converting your diagram...`}
+                    style={{
+                      flex: 1,
+                      width: '100%',
+                      height: '100%',
+                      resize: 'none',
+                      border: 'none',
+                      outline: 'none',
+                      padding: '16px',
+                      backgroundColor: '#1a1a1a',
+                      color: '#ffffff',
+                      fontFamily: 'monospace',
+                      fontSize: '12px',
+                      lineHeight: '1.4',
+                      overflow: 'auto',
+                      whiteSpace: 'pre-wrap',
+                      wordWrap: 'break-word',
+                    }}
+                  />
+                  {!inputData && (
+                    <Box
+                      sx={{
+                        position: 'absolute',
+                        top: 16,
+                        left: 16,
+                        color: '#888888',
+                        fontFamily: 'monospace',
+                        fontSize: '12px',
+                        pointerEvents: 'none',
+                        zIndex: 1,
+                      }}
+                    >
+                      Click "Load Current Diagram" to start converting your diagram...
+                    </Box>
+                  )}
+                </Box>
+              </Paper>
+
+              {/* Output Panel */}
+              <Paper sx={{ 
+                flex: 1, 
+                display: 'flex', 
+                flexDirection: 'column',
+                bgcolor: '#2d2d2d',
+                border: '1px solid #444444',
+              }}>
+                <Box
+                  sx={{
+                    p: 1,
+                    bgcolor: '#3d3d3d',
+                    borderBottom: '1px solid',
+                    borderColor: '#555555',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <Typography variant="subtitle2" color="#ffffff">
+                    Output ({outputFormat.toUpperCase()})
+                  </Typography>
+                  <Box>
+                    <Tooltip title="Copy Output">
+                      <IconButton
+                        size="small"
+                        onClick={() => handleCopy(outputData)}
+                        disabled={!outputData}
+                        sx={{
+                          color: '#ffffff',
+                          '&:disabled': {
+                            color: '#666666',
+                          },
+                        }}
+                      >
+                        <CopyIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                    <Tooltip title="Download">
+                      <IconButton
+                        size="small"
+                        onClick={() => handleDownload(outputData, outputFormat)}
+                        disabled={!outputData}
+                        sx={{
+                          color: '#ffffff',
+                          '&:disabled': {
+                            color: '#666666',
+                          },
+                        }}
+                      >
+                        <DownloadIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </Box>
+                </Box>
+                <Paper
+                  sx={{
+                    flex: 1,
+                    p: 2,
+                    bgcolor: outputData ? '#1a1a1a' : '#2a2a2a',
+                    color: '#ffffff',
+                    overflow: 'auto',
+                    fontFamily: 'monospace',
+                    fontSize: '12px',
+                    whiteSpace: 'pre-wrap',
+                    border: 'none',
+                  }}
+                  elevation={0}
+                >
+                  {outputData || 'Converted data will appear here...'}
+                </Paper>
+              </Paper>
+            </Box>
+          </Box>
+        </TabPanel>
+
+        {/* Options Tab */}
+        <TabPanel value={activeTab} index={1}>
+          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
+            <Typography variant="h6" gutterBottom color="#ffffff">
+              Conversion Options
+            </Typography>
+            <Box display="flex" flexDirection="column" gap={2}>
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={options.prettyPrint || false}
+                    onChange={(e) =>
+                      setOptions(prev => ({ ...prev, prettyPrint: e.target.checked }))
+                    }
+                    sx={{
+                      '& .MuiSwitch-switchBase.Mui-checked': {
+                        color: '#61dafb',
+                      },
+                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                        backgroundColor: '#61dafb',
+                      },
+                    }}
+                  />
+                }
+                label="Pretty Print Output"
+                sx={{ color: '#ffffff' }}
+              />
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={options.sortKeys || false}
+                    onChange={(e) =>
+                      setOptions(prev => ({ ...prev, sortKeys: e.target.checked }))
+                    }
+                    sx={{
+                      '& .MuiSwitch-switchBase.Mui-checked': {
+                        color: '#61dafb',
+                      },
+                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                        backgroundColor: '#61dafb',
+                      },
+                    }}
+                  />
+                }
+                label="Sort Object Keys"
+                sx={{ color: '#ffffff' }}
+              />
+              <FormControlLabel
+                control={
+                  <Switch
+                    checked={options.includeComments || false}
+                    onChange={(e) =>
+                      setOptions(prev => ({ ...prev, includeComments: e.target.checked }))
+                    }
+                    sx={{
+                      '& .MuiSwitch-switchBase.Mui-checked': {
+                        color: '#61dafb',
+                      },
+                      '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+                        backgroundColor: '#61dafb',
+                      },
+                    }}
+                  />
+                }
+                label="Include Comments"
+                sx={{ color: '#ffffff' }}
+              />
+              <TextField
+                label="Indentation"
+                type="number"
+                value={options.indent || 2}
+                onChange={(e) =>
+                  setOptions(prev => ({ ...prev, indent: parseInt(e.target.value) || 2 }))
+                }
+                inputProps={{ min: 2, max: 8 }}
+                sx={{ 
+                  width: 200,
+                  '& .MuiInputLabel-root': {
+                    color: '#cccccc',
+                  },
+                  '& .MuiOutlinedInput-root': {
+                    color: '#ffffff',
+                    '& fieldset': {
+                      borderColor: '#444444',
+                    },
+                    '&:hover fieldset': {
+                      borderColor: '#61dafb',
+                    },
+                    '&.Mui-focused fieldset': {
+                      borderColor: '#61dafb',
+                    },
+                  },
+                }}
+              />
+            </Box>
+          </Box>
+        </TabPanel>
+
+        {/* Examples Tab */}
+        <TabPanel value={activeTab} index={2}>
+          <Box sx={{ p: 3, bgcolor: '#1a1a1a', color: '#ffffff' }}>
+            <Typography variant="h6" gutterBottom color="#ffffff">
+              Format Examples & Use Cases
+            </Typography>
+            
+            <Typography variant="subtitle1" gutterBottom sx={{ mt: 2, color: '#61dafb' }}>
+              JSON Format
+            </Typography>
+            <Typography variant="body2" color="#cccccc" gutterBottom>
+              • Standard web format, universally supported
+              • Compact and fast to parse
+              • Great for APIs and data exchange
+              • No comments support
+            </Typography>
+
+            <Typography variant="subtitle1" gutterBottom sx={{ mt: 2, color: '#61dafb' }}>
+              YAML Format
+            </Typography>
+            <Typography variant="body2" color="#cccccc" gutterBottom>
+              • Human-readable and editable
+              • Supports comments and documentation
+              • Popular in DevOps and configuration
+              • Great for version control
+            </Typography>
+
+            <Divider sx={{ my: 2, borderColor: '#444444' }} />
+
+            <Typography variant="subtitle1" gutterBottom color="#ffffff">
+              Common Use Cases
+            </Typography>
+            <Box component="ul" sx={{ pl: 2 }}>
+              <li>
+                <Typography variant="body2" color="#cccccc">
+                  <strong style={{ color: '#61dafb' }}>API Integration:</strong> Use JSON for REST APIs and web services
+                </Typography>
+              </li>
+              <li>
+                <Typography variant="body2" color="#cccccc">
+                  <strong style={{ color: '#61dafb' }}>Configuration Files:</strong> Use YAML for readable config files
+                </Typography>
+              </li>
+              <li>
+                <Typography variant="body2" color="#cccccc">
+                  <strong style={{ color: '#61dafb' }}>Documentation:</strong> Use YAML with comments for self-documenting schemas
+                </Typography>
+              </li>
+              <li>
+                <Typography variant="body2" color="#cccccc">
+                  <strong style={{ color: '#61dafb' }}>Version Control:</strong> YAML diffs are more readable in Git
+                </Typography>
+              </li>
+            </Box>
+          </Box>
+        </TabPanel>
+      </DialogContent>
+
+      <DialogActions sx={{ p: 2, bgcolor: '#2d2d2d' }}>
+        <Button 
+          onClick={onClose}
+          sx={{
+            color: '#ffffff',
+            borderColor: '#444444',
+            '&:hover': {
+              bgcolor: '#3d3d3d',
+            },
+          }}
+        >
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
 export default FormatConverter;