import React from 'react';
import { Box, Paper, Typography } from '@mui/material';
import DataGrid, { 
  Column, 
  Editing, 
  Scrolling, 
  Paging, 
  FilterRow, 
  HeaderFilter 
} from 'devextreme-react/data-grid';
import { useAppStore } from '../store/useAppStore';

const MainContent: React.FC = () => {
  const { activeDatabase } = useAppStore();

  // Mock data for initial UI
  const dummyData = [
    { id: 1, name: 'Users', type: 'BASE TABLE', engine: 'InnoDB', rows: 1500, size: '256 KB' },
    { id: 2, name: 'Products', type: 'BASE TABLE', engine: 'InnoDB', rows: 54200, size: '12 MB' },
    { id: 3, name: 'Orders', type: 'BASE TABLE', engine: 'InnoDB', rows: 120400, size: '45 MB' },
    { id: 4, name: 'Order_Items', type: 'BASE TABLE', engine: 'InnoDB', rows: 450000, size: '120 MB' },
  ];

  return (
    <Box sx={{ flexGrow: 1, p: 3, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 2 }}>
      <Box>
        <Typography variant="h5" sx={{ fontWeight: 700 }}>
          {activeDatabase ? `Tables in ${activeDatabase}` : 'Welcome to Mariavel'}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          Manage your database tables with high-performance tools.
        </Typography>
      </Box>

      <Paper sx={{ flexGrow: 1, p: 0, overflow: 'hidden', borderRadius: 3 }}>
        <DataGrid
          dataSource={dummyData}
          keyExpr="id"
          showBorders={false}
          focusedRowEnabled={true}
          height="100%"
          width="100%"
        >
          <Paging enabled={false} />
          <Scrolling mode="virtual" />
          <FilterRow visible={true} />
          <HeaderFilter visible={true} />
          <Editing mode="cell" allowUpdating={true} allowDeleting={true} />

          <Column dataField="id" width={50} />
          <Column dataField="name" caption="Table Name" />
          <Column dataField="type" />
          <Column dataField="engine" width={100} />
          <Column dataField="rows" dataType="number" format="fixedPoint" width={100} />
          <Column dataField="size" width={100} />
        </DataGrid>
      </Paper>
    </Box>
  );
};

export default MainContent;
