import React, { useState, useEffect, useCallback } from 'react';
import { 
  Box, 
  Paper, 
  Typography, 
  CircularProgress, 
  Snackbar, 
  Alert,
  AlertTitle,
  Tabs,
  Tab,
  Button
} from '@mui/material';
import { 
  TableChart, 
  Terminal, 
  CloudDownload, 
  CloudUpload, 
  Info,
  Save,
  Undo
} from '@mui/icons-material';
import { 
  DataGrid, 
  useGridApiRef, 
  type GridPaginationModel, 
  type GridRowModel, 
  type GridFilterModel 
} from '@mui/x-data-grid';
import { useAppStore } from '../store/useAppStore';
import { SchemaService } from '../services/api';
import TransferContent from './TransferContent';
import DatabaseTablesGrid from './DatabaseTablesGrid';
import TechnicalOverview from './TechnicalOverview';
import SqlConsole from './SqlConsole';
import { useTableSchema } from '../hooks/useTableSchema';
import { useTableData } from '../hooks/useTableData';
import type { MainNotification } from '../types/database';

const MainContent: React.FC = () => {
  const { activeTable, activeDatabase, darkMode, dbTab, setDbTab } = useAppStore();
  const apiRef = useGridApiRef();
  
  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
    page: 0,
    pageSize: 100,
  });
  const [filterModel, setFilterModel] = useState<GridFilterModel>({ items: [] });

  const [notification, setNotification] = useState<MainNotification>({
    open: false,
    message: '',
    title: '',
    severity: 'error'
  });

  const [pendingChanges, setPendingChanges] = useState<Record<string, any>>({});
  const [isSaving, setIsSaving] = useState(false);
  const [cellFocus, setCellFocus] = useState<{ id: string | number, field: string } | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [dragType, setDragType] = useState<'fill' | 'select' | null>(null);
  const [dragStart, setDragStart] = useState<{ id: string | number, field: string } | null>(null);
  const [dragCurrent, setDragCurrent] = useState<{ id: string | number, field: string } | null>(null);
  const [selectionStart, setSelectionStart] = useState<{ id: string | number, field: string } | null>(null);
  const [selectionEnd, setSelectionEnd] = useState<{ id: string | number, field: string } | null>(null);
  
  const { columns, loading: loadingSchema, primaryKey } = useTableSchema(activeTable, activeDatabase);
  const { rows, rowCount, loading: loadingData, refetch } = useTableData(activeTable, activeDatabase, paginationModel, filterModel);

  const handleRowUpdate = (newRow: GridRowModel, oldRow: GridRowModel) => {
    const hasChanged = Object.keys(newRow).some(key => newRow[key] !== oldRow[key]);
    if (hasChanged) {
      const rowId = newRow[primaryKey];
      setPendingChanges(prev => ({
        ...prev,
        [rowId]: {
          ...(prev[rowId] || {}),
          ...newRow
        }
      }));
    }
    return newRow;
  };

  const handleBatchSave = async () => {
    if (!activeTable) return;
    setIsSaving(true);
    try {
      const changes = Object.values(pendingChanges);
      await SchemaService.batchUpdate(activeTable, changes);
      setNotification({
        open: true,
        title: 'Batch Update Success',
        message: `Successfully updated ${changes.length} records.`,
        severity: 'success'
      });
      setPendingChanges({});
      refetch(); // Refresh data from server to be sure
    } catch (error: any) {
      setNotification({
        open: true,
        title: 'Update Failed',
        message: error.response?.data?.error || error.message,
        severity: 'error'
      });
    } finally {
      setIsSaving(false);
    }
  };

  const handleExport = async (format: 'sql' | 'csv') => {
    if (!activeTable || !activeDatabase) return;
    try {
      setNotification({ open: true, title: 'Exporting', message: 'Generating export file...', severity: 'success' });
      
      // For now, we'll use the existing SQL export for 'sql'
      // and implement a client-side CSV export for 'csv' since we have the rows
      if (format === 'sql') {
        const response = await SchemaService.exportDatabase(activeDatabase, activeTable, filterModel.items);
        const url = window.URL.createObjectURL(new Blob([response.data]));
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `${activeTable}_${new Date().toISOString().split('T')[0]}.sql`);
        document.body.appendChild(link);
        link.click();
        link.remove();
      } else {
        // Simple CSV Export
        const headers = columns.map(c => c.headerName || c.field).join(',');
        const csvRows = rows.map(row => 
          columns.map(c => {
            const val = row[c.field];
            return typeof val === 'string' ? `"${val.replace(/"/g, '""')}"` : val;
          }).join(',')
        );
        const csvContent = [headers, ...csvRows].join('\n');
        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `${activeTable}_export.csv`);
        document.body.appendChild(link);
        link.click();
        link.remove();
      }
    } catch (error: any) {
      setNotification({
        open: true,
        title: 'Export Failed',
        message: error.message,
        severity: 'error'
      });
    }
  };

  const handlePaste = useCallback((event: React.ClipboardEvent) => {
    if (!cellFocus || !activeTable) return;

    const pasteData = event.clipboardData.getData('text');
    const rows_data = pasteData.split(/\r?\n/).filter(line => line.length > 0).map(line => line.split('\t'));

    if (rows_data.length === 0) return;

    const updatedChanges = { ...pendingChanges };
    const focusedRowIndex = rows.findIndex(r => r[primaryKey] === cellFocus.id);
    const focusedColIndex = columns.findIndex(c => c.field === cellFocus.field);

    if (focusedRowIndex === -1 || focusedColIndex === -1) return;

    rows_data.forEach((rowData, rIdx) => {
      const targetRowIndex = focusedRowIndex + rIdx;
      if (targetRowIndex >= rows.length) return;

      const targetRow = rows[targetRowIndex];
      const targetRowId = targetRow[primaryKey];
      
      const newRowData = { ...(updatedChanges[targetRowId] || {}), [primaryKey]: targetRowId };

      rowData.forEach((cellData, cIdx) => {
        const targetColIndex = focusedColIndex + cIdx;
        if (targetColIndex >= columns.length) return;

        const targetCol = columns[targetColIndex];
        if (targetCol.editable !== false && targetCol.field !== primaryKey) {
          newRowData[targetCol.field] = cellData;
        }
      });

      updatedChanges[targetRowId] = newRowData;
    });

    setPendingChanges(updatedChanges);
    event.preventDefault();
  }, [cellFocus, rows, columns, primaryKey, pendingChanges, activeTable]);

  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
    // Excel Ctrl+D support (Fill Down)
    if (event.ctrlKey && event.key === 'd') {
      if (!cellFocus || !activeTable) return;
      
      const focusedRowIndex = rows.findIndex(r => r[primaryKey] === cellFocus.id);
      if (focusedRowIndex === -1 || focusedRowIndex + 1 >= rows.length) return;

      const valueToCopy = (pendingChanges[cellFocus.id]?.[cellFocus.field]) ?? rows[focusedRowIndex][cellFocus.field];
      const nextRow = rows[focusedRowIndex + 1];
      const nextRowId = nextRow[primaryKey];

      setPendingChanges(prev => ({
        ...prev,
        [nextRowId]: {
          ...(prev[nextRowId] || {}),
          [primaryKey]: nextRowId,
          [cellFocus.field]: valueToCopy
        }
      }));
      
      event.preventDefault();
    }

    // Delete key to clear selection or focused cell
    if (event.key === 'Delete') {
      const updatedChanges = { ...pendingChanges };
      let changed = false;

      if (selectionStart && selectionEnd) {
        const startRowIdx = rows.findIndex(r => r[primaryKey] === selectionStart.id);
        const endRowIdx = rows.findIndex(r => r[primaryKey] === selectionEnd.id);
        const startColIdx = columns.findIndex(c => c.field === selectionStart.field);
        const endColIdx = columns.findIndex(c => c.field === selectionEnd.field);

        if (startRowIdx !== -1 && endRowIdx !== -1 && startColIdx !== -1 && endColIdx !== -1) {
          const rStart = Math.min(startRowIdx, endRowIdx);
          const rEnd = Math.max(startRowIdx, endRowIdx);
          const cStart = Math.min(startColIdx, endColIdx);
          const cEnd = Math.max(startColIdx, endColIdx);

          for (let r = rStart; r <= rEnd; r++) {
            const rowId = rows[r][primaryKey];
            for (let c = cStart; c <= cEnd; c++) {
              const field = columns[c].field;
              if (columns[c].editable !== false && field !== primaryKey) {
                updatedChanges[rowId] = {
                  ...(updatedChanges[rowId] || {}),
                  [primaryKey]: rowId,
                  [field]: ''
                };
                changed = true;
              }
            }
          }
        }
      } else if (cellFocus) {
        const col = columns.find(c => c.field === cellFocus.field);
        if (col && col.editable !== false && col.field !== primaryKey) {
          updatedChanges[cellFocus.id] = {
            ...(updatedChanges[cellFocus.id] || {}),
            [primaryKey]: cellFocus.id,
            [cellFocus.field]: ''
          };
          changed = true;
        }
      }

      if (changed) {
        setPendingChanges(updatedChanges);
      }
    }
  }, [cellFocus, selectionStart, selectionEnd, rows, columns, pendingChanges, primaryKey, activeTable]);

  const handleCellMouseDown = useCallback((params: any, event: React.MouseEvent) => {
    const cellElement = (event.target as HTMLElement).closest('.MuiDataGrid-cell');
    if (!cellElement) return;

    const rect = cellElement.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    
    // Check if click is in the bottom-right corner (approx 12x12px fill handle)
    if (x > rect.width - 15 && y > rect.height - 15) {
      setIsDragging(true);
      setDragType('fill');
      setDragStart({ id: params.id, field: params.field });
      setDragCurrent({ id: params.id, field: params.field });
      event.stopPropagation();
      event.preventDefault();
    } else {
      // Start range selection
      setIsDragging(true);
      setDragType('select');
      setSelectionStart({ id: params.id, field: params.field });
      setSelectionEnd({ id: params.id, field: params.field });
      // Reset dragCurrent to avoid visual confusion
      setDragCurrent(null);
    }
  }, []);

  const handleCellMouseEnter = useCallback((params: any) => {
    if (isDragging) {
      if (dragType === 'fill') {
        setDragCurrent({ id: params.id, field: params.field });
      } else if (dragType === 'select') {
        setSelectionEnd({ id: params.id, field: params.field });
      }
    }
  }, [isDragging, dragType]);

  const handleMouseUp = useCallback(() => {
    if (isDragging) {
      if (dragType === 'fill' && dragStart && dragCurrent) {
        const startIndex = rows.findIndex(r => r[primaryKey] === dragStart.id);
        const endIndex = rows.findIndex(r => r[primaryKey] === dragCurrent.id);
        
        if (startIndex !== -1 && endIndex !== -1) {
          const start = Math.min(startIndex, endIndex);
          const end = Math.max(startIndex, endIndex);
          
          const valueToFill = (pendingChanges[dragStart.id]?.[dragStart.field]) ?? rows[startIndex][dragStart.field];
          const updatedChanges = { ...pendingChanges };
          
          for (let i = start; i <= end; i++) {
            const targetRowId = rows[i][primaryKey];
            const targetCol = columns.find(c => c.field === dragStart.field);
            if (targetCol && targetCol.editable !== false && targetCol.field !== primaryKey) {
              updatedChanges[targetRowId] = {
                ...(updatedChanges[targetRowId] || {}),
                [primaryKey]: targetRowId,
                [dragStart.field]: valueToFill
              };
            }
          }
          setPendingChanges(updatedChanges);
        }
      }
      // Selection stays until another click or clear
    }
    setIsDragging(false);
    setDragType(null);
    setDragStart(null);
    setDragCurrent(null);
  }, [isDragging, dragType, dragStart, dragCurrent, rows, columns, primaryKey, pendingChanges]);

  useEffect(() => {
    window.addEventListener('mouseup', handleMouseUp);
    return () => window.removeEventListener('mouseup', handleMouseUp);
  }, [handleMouseUp]);

  useEffect(() => {
    const api = apiRef.current;
    if (!api || !api.subscribeEvent) return;

    const unsubs = [
      api.subscribeEvent('cellFocusIn', (params) => {
        setCellFocus({ id: params.id, field: params.field });
        // Single click should reset selection unless dragging
        if (!isDragging) {
          setSelectionStart(null);
          setSelectionEnd(null);
        }
      }),
      api.subscribeEvent('cellMouseDown', handleCellMouseDown),
      api.subscribeEvent('cellMouseOver', handleCellMouseEnter)
    ];

    return () => unsubs.forEach(unsub => unsub?.());
  }, [apiRef, activeTable, handleCellMouseDown, handleCellMouseEnter]);

  useEffect(() => {
    setPaginationModel({ page: 0, pageSize: 100 });
    setPendingChanges({});
    setSelectionStart(null);
    setSelectionEnd(null);
  }, [activeTable]);

  const handleCloseNotification = () => setNotification({ ...notification, open: false });

  if (!activeDatabase) {
    return (
      <Box sx={{ flexGrow: 1, p: 3, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: 'background.default' }}>
        <Typography variant="h6" color="text.secondary">Select a database to start</Typography>
      </Box>
    );
  }

  const handleTabChange = (_: React.SyntheticEvent, newValue: string) => {
    setDbTab(newValue);
  };

  return (
    <Box sx={{ flexGrow: 1, p: 3, bgcolor: 'background.default', display: 'flex', flexDirection: 'column', width: '100%', minWidth: 0, overflow: 'hidden', gap: 2 }}>
      {/* Database Navigation Tabs */}
      <Paper elevation={0} sx={{ 
        flexShrink: 0,
        borderRadius: 3, 
        border: 1, 
        borderColor: 'divider',
        bgcolor: darkMode ? '#111827' : '#ffffff',
        overflow: 'hidden'
      }}>
        <Tabs 
          value={dbTab} 
          onChange={handleTabChange}
          sx={{
            px: 2,
            minHeight: 56,
            '& .MuiTabs-indicator': { height: 3, borderRadius: '3px 3px 0 0' },
            '& .MuiTab-root': { 
              textTransform: 'none', 
              fontWeight: 700, 
              fontSize: '0.9rem',
              minHeight: 56,
              minWidth: 120,
              gap: 1
            }
          }}
        >
          <Tab value="tables" icon={<TableChart sx={{ fontSize: 18 }} />} iconPosition="start" label="Data Explorer" />
          <Tab value="sql" icon={<Terminal sx={{ fontSize: 18 }} />} iconPosition="start" label="SQL Editor" />
          <Tab value="import" icon={<CloudUpload sx={{ fontSize: 18 }} />} iconPosition="start" label="Import" />
          <Tab value="export" icon={<CloudDownload sx={{ fontSize: 18 }} />} iconPosition="start" label="Export" />
          <Tab value="info" icon={<Info sx={{ fontSize: 18 }} />} iconPosition="start" label="Technical Info" />
        </Tabs>
      </Paper>

      {/* Tables View */}
      {dbTab === 'tables' && (
        <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden' }}>
          {!activeTable ? (
            <Box sx={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
              <Typography variant="h6" sx={{ fontWeight: 800 }}>Database Tables: {activeDatabase}</Typography>
              <DatabaseTablesGrid database={activeDatabase} setNotification={setNotification} />
            </Box>
          ) : (
            <>
              <Box sx={{ mb: 1.5, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
                  <Typography variant="h6" sx={{ fontWeight: 800 }}>Table Results: {activeTable}</Typography>
                  <Box sx={{ px: 1.5, py: 0.5, borderRadius: 10, bgcolor: 'rgba(0, 97, 255, 0.1)', color: 'primary.main' }}>
                    <Typography variant="caption" sx={{ fontWeight: 700 }}>{rowCount} rows found</Typography>
                  </Box>
                  <Box sx={{ display: 'flex', gap: 1 }}>
                    <Button size="small" variant="outlined" startIcon={<CloudDownload />} onClick={() => handleExport('sql')} sx={{ borderRadius: 2, fontSize: '0.7rem' }}>SQL Export</Button>
                    <Button size="small" variant="outlined" startIcon={<TableChart />} onClick={() => handleExport('csv')} sx={{ borderRadius: 2, fontSize: '0.7rem' }}>Excel/CSV</Button>
                  </Box>
                </Box>
                
                {Object.keys(pendingChanges).length > 0 && (
                  <Box sx={{ display: 'flex', gap: 1 }}>
                    <Button 
                      variant="contained" 
                      color="success" 
                      size="small" 
                      startIcon={<Save />} 
                      onClick={handleBatchSave}
                      disabled={isSaving}
                      sx={{ borderRadius: 2, fontWeight: 700 }}
                    >
                      {isSaving ? <CircularProgress size={20} color="inherit" /> : `Save ${Object.keys(pendingChanges).length} Changes`}
                    </Button>
                    <Button 
                      variant="outlined" 
                      color="inherit" 
                      size="small" 
                      startIcon={<Undo />} 
                      onClick={() => setPendingChanges({})}
                      disabled={isSaving}
                      sx={{ borderRadius: 2 }}
                    >
                      Discard
                    </Button>
                  </Box>
                )}
              </Box>
              
              <Paper sx={{ 
                flexGrow: 1, 
                borderRadius: 3, 
                overflow: 'hidden', 
                display: 'flex', 
                flexDirection: 'column', 
                width: '100%', 
                border: 1, 
                borderColor: 'divider',
                boxShadow: '0 4px 12px rgba(0,0,0,0.05)'
              }}>
                {loadingSchema ? (
                  <Box sx={{ display: 'flex', height: '100%', alignItems: 'center', justifyContent: 'center' }}>
                    <CircularProgress />
                  </Box>
                ) : (
                  <DataGrid
                    apiRef={apiRef}
                    rows={rows.map(row => ({
                      ...row,
                      ...(pendingChanges[row[primaryKey]] || {})
                    }))}
                    getRowId={(row) => row[primaryKey]}
                    columns={columns}
                    rowCount={rowCount}
                    loading={loadingData}
                    paginationMode="server"
                    paginationModel={paginationModel}
                    onPaginationModelChange={setPaginationModel}
                    filterMode="server"
                    filterModel={filterModel}
                    onFilterModelChange={setFilterModel}
                    pageSizeOptions={[25, 50, 100]}
                    processRowUpdate={handleRowUpdate}
                    onProcessRowUpdateError={(error) => {
                      console.error('Row update error:', error);
                    }}
                    slotProps={{
                      root: {
                        onPaste: handlePaste,
                        onKeyDown: handleKeyDown,
                      }
                    }}
                    density="compact"
                    sx={{
                      border: 'none',
                      '& .MuiDataGrid-columnHeaderTitle': {
                        fontWeight: 800,
                        fontSize: '0.75rem',
                        textTransform: 'uppercase',
                        letterSpacing: '0.5px'
                      },
                      '& .MuiDataGrid-cell': {
                        fontSize: '0.8rem',
                        px: 1,
                        borderRight: '1px solid',
                        borderColor: 'divider',
                      },
                      '& .MuiDataGrid-row': {
                        minHeight: '32px !important',
                        maxHeight: '32px !important',
                      },
                      '& .MuiDataGrid-row:nth-of-type(even)': {
                        bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.01)',
                      },
                      '& .MuiDataGrid-cell--editable': {
                        bgcolor: (theme) => theme.palette.mode === 'dark' ? 'rgba(0, 255, 0, 0.02)' : 'rgba(0, 255, 0, 0.01)',
                      },
                      '& .MuiDataGrid-columnHeader': {
                        borderRight: '1px solid',
                        borderColor: 'divider',
                      },
                      '& .MuiDataGrid-columnHeaders': {
                        borderBottom: '1px solid',
                        borderColor: 'divider',
                      },
                      '& .MuiDataGrid-row:hover': { bgcolor: 'rgba(0, 97, 255, 0.04)' },
                      '& .MuiDataGrid-cell:focus-within': {
                        outline: '2px solid #0061ff',
                        outlineOffset: '-2px',
                        position: 'relative',
                        '&::after': {
                          content: '""',
                          position: 'absolute',
                          bottom: -1,
                          right: -1,
                          width: 8,
                          height: 8,
                          bgcolor: '#0061ff',
                          border: '1px solid white',
                          cursor: 'crosshair',
                          zIndex: 10,
                        }
                      },
                      '& .MuiDataGrid-cell--dragging': {
                        bgcolor: 'rgba(0, 97, 255, 0.15) !important',
                        border: '1px dashed #0061ff !important',
                      },
                      '& .MuiDataGrid-cell--selected': {
                        bgcolor: 'rgba(0, 97, 255, 0.08) !important',
                        border: '1px double rgba(0, 97, 255, 0.3) !important',
                      }
                    }}
                    getCellClassName={(params) => {
                      const classNames: string[] = [];
                      
                      // Filling preview
                      if (isDragging && dragType === 'fill' && dragStart && dragCurrent && params.field === dragStart.field) {
                        const startIndex = rows.findIndex(r => r[primaryKey] === dragStart.id);
                        const endIndex = rows.findIndex(r => r[primaryKey] === dragCurrent.id);
                        const currentIndex = rows.findIndex(r => r[primaryKey] === params.id);
                        if (currentIndex >= Math.min(startIndex, endIndex) && currentIndex <= Math.max(startIndex, endIndex)) {
                          classNames.push('MuiDataGrid-cell--dragging');
                        }
                      }

                      // Selection range
                      if (selectionStart && selectionEnd) {
                        const startRowIdx = rows.findIndex(r => r[primaryKey] === selectionStart.id);
                        const endRowIdx = rows.findIndex(r => r[primaryKey] === selectionEnd.id);
                        const startColIdx = columns.findIndex(c => c.field === selectionStart.field);
                        const endColIdx = columns.findIndex(c => c.field === selectionEnd.field);
                        
                        const currentRowIdx = rows.findIndex(r => r[primaryKey] === params.id);
                        const currentColIdx = columns.findIndex(c => c.field === params.field);

                        if (currentRowIdx !== -1 && endRowIdx !== -1 && startColIdx !== -1 && endColIdx !== -1) {
                          if (
                            currentRowIdx >= Math.min(startRowIdx, endRowIdx) && 
                            currentRowIdx <= Math.max(startRowIdx, endRowIdx) &&
                            currentColIdx >= Math.min(startColIdx, endColIdx) &&
                            currentColIdx <= Math.max(startColIdx, endColIdx)
                          ) {
                            classNames.push('MuiDataGrid-cell--selected');
                          }
                        }
                      }
                      
                      return classNames.join(' ');
                    }}
                  />
                )}
              </Paper>
            </>
          )}
        </Box>
      )}

      {/* SQL View */}
      {dbTab === 'sql' && (
        <SqlConsole 
          initialQuery={activeTable && activeDatabase ? `SELECT * FROM ${activeDatabase}.${activeTable} LIMIT 1000;` : ''} 
          setNotification={setNotification} 
        />
      )}

      {/* Import/Export Views */}
      {dbTab === 'import' && <TransferContent mode="import" />}
      {dbTab === 'export' && <TransferContent mode="export" />}

      {/* Technical Info View */}
      {dbTab === 'info' && <TechnicalOverview database={activeDatabase} table={activeTable} setNotification={setNotification} />}

      {/* Custom Notification (Snackbar) */}
      <Snackbar open={notification.open} autoHideDuration={6000} onClose={handleCloseNotification} anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
        <Alert onClose={handleCloseNotification} severity={notification.severity} variant="filled" sx={{ 
          width: '100%', 
          borderRadius: 2,
          boxShadow: notification.severity === 'success' ? '0 8px 24px rgba(46, 125, 50, 0.25)' : '0 8px 24px rgba(211, 47, 47, 0.25)'
        }}>
          <AlertTitle sx={{ fontWeight: 800 }}>{notification.title}</AlertTitle>
          <Typography variant="body2">{notification.message}</Typography>
        </Alert>
      </Snackbar>
    </Box>
  );
};

export default MainContent;
