import {
  Box,
  Typography,
  Select,
  MenuItem,
  FormControl,
  Stack,
  Paper,
  Pagination,
  PaginationItem,
} from '@mui/material';

const paginationItemSx = {
  '&.Mui-selected': {
    background: 'linear-gradient(172deg, #7abc51 0%, #46881c 100%)',
    color: 'white',
    '&:hover': {
      background: 'linear-gradient(172deg, #6aad48 0%, #3d7a19 100%)',
    },
  },
};

const TableFooter = ({
  totalCount,
  page,
  rowsPerPage,
  onPageChange,
  onRowsPerPageChange,
  rowsPerPageOptions = [10, 20, 50, 100],
}) => {
  const totalPages = Math.ceil(totalCount / rowsPerPage);

  const handlePaginationChange = (_event, newPage) => {
    onPageChange(newPage - 1);
  };

  const handleRowsPerPageChange = (event) => {
    onRowsPerPageChange(parseInt(event.target.value, 10));
  };

  const from = totalCount > 0 ? page * rowsPerPage + 1 : 0;
  const to = Math.min((page + 1) * rowsPerPage, totalCount);

  return (
    <Paper
      sx={{
        borderTop: '0.53px solid #e5e7eb',
        backgroundColor: '#F9FAFB',
        position: 'sticky',
        bottom: 0,
        borderRadius: '0 0 0.63rem 0.63rem',
      }}
    >
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          padding: '0.75rem 1rem',
          flexWrap: 'wrap',
          gap: 2,
        }}
      >
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
          <Typography
            variant="body2"
            sx={{
              color: '#6B7280',
              fontSize: '0.875rem',
            }}
          >
            {totalCount > 0
              ? `Показано ${from}-${to} из ${totalCount.toLocaleString('ru-RU')}`
              : `Показано ${from}-${to}`}
          </Typography>

          <FormControl size="small" sx={{ minWidth: 120 }}>
            <Select
              labelId="rows-per-page-label"
              value={rowsPerPage}
              onChange={handleRowsPerPageChange}
              sx={{
                backgroundColor: 'white',
                '& .MuiSelect-select': {
                  padding: '0.375rem 2rem 0.375rem 0.75rem',
                },
              }}
            >
              {rowsPerPageOptions.map((option) => (
                <MenuItem key={option} value={option}>
                  {option}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Box>

        <Stack sx={{
          direction: "row", spacing: 2, alignItems: "center"
        }}>
          <Pagination
            count={Math.max(1, totalPages)}
            page={page + 1}
            onChange={handlePaginationChange}
            color="primary"
            shape="rounded"
            showFirstButton
            showLastButton
            siblingCount={1}
            boundaryCount={1}
            disabled={totalCount === 0}
            renderItem={(item) => (
              <PaginationItem {...item} sx={paginationItemSx} />
            )}
          />
        </Stack>
      </Box>
    </Paper>
  );
};

export default TableFooter;
