import React, { useState } from 'react';
import { 
  Box, 
  Table, 
  TableBody, 
  TableCell, 
  TableContainer, 
  TableHead, 
  TableRow, 
  Paper, 
  Pagination, 
  CircularProgress,
  Typography
} from '@mui/material';

const GridViewComponent = () => {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [page, setPage] = useState(1);
  const [selectedRow, setSelectedRow] = useState(null);

  // Simulated data - replace with actual API call
  const mockData = [
    { usrGrp: 1, groupName: 'Admin', groupDesc: 'Administrators', groupLevel: 1, status: 'Active', updateDateFormated: '2023-01-01' },
    { usrGrp: 2, groupName: 'Users', groupDesc: 'Regular users', groupLevel: 2, status: 'Active', updateDateFormated: '2023-01-02' },
    { usrGrp: 3, groupName: 'Guests', groupDesc: 'Guest access', groupLevel: 3, status: 'Inactive', updateDateFormated: '2023-01-03' },
  ];

  // Simulate data loading
  React.useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setData(mockData);
      setLoading(false);
    }, 1000);
  }, []);

  const handlePageChange = (event, value) => {
    setPage(value);
  };

  const handleRowClick = (row) => {
    setSelectedRow(row);
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" gutterBottom>
        User Group Maintenance
      </Typography>
      
      {loading ? (
        <Box sx={{ display: 'flex', justifyContent: 'center', p: 4 }}>
          <CircularProgress />
        </Box>
      ) : error ? (
        <Typography color="error">{error}</Typography>
      ) : (
        <>
          <TableContainer component={Paper}>
            <Table>
              <TableHead>
                <TableRow>
                  <TableCell>User Group No</TableCell>
                  <TableCell>Group Name</TableCell>
                  <TableCell>Description</TableCell>
                  <TableCell>Group Level</TableCell>
                  <TableCell>Status</TableCell>
                  <TableCell>Updated Date</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {data.map((row) => (
                  <TableRow 
                    key={row.usrGrp} 
                    hover 
                    selected={selectedRow?.usrGrp === row.usrGrp}
                    onClick={() => handleRowClick(row)}
                  >
                    <TableCell>{row.usrGrp}</TableCell>
                    <TableCell>{row.groupName}</TableCell>
                    <TableCell>{row.groupDesc}</TableCell>
                    <TableCell>{row.groupLevel}</TableCell>
                    <TableCell>{row.status}</TableCell>
                    <TableCell>{row.updateDateFormated}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
          
          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2 }}>
            <Pagination 
              count={3} 
              page={page} 
              onChange={handlePageChange} 
              color="primary" 
            />
          </Box>
        </>
      )}
    </Box>
  );
};

export default GridViewComponent;