import React from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Grid,
  Button,
  Pagination,
  TablePagination,
} from "@mui/material";
import VisibilitySharpIcon from "@mui/icons-material/VisibilitySharp";
import EditSharpIcon from "@mui/icons-material/EditSharp";
import DeleteOutlineSharpIcon from "@mui/icons-material/DeleteOutlineSharp";
import { useStyles } from "../../theme/appStyles";
import CustomCheckbox from "../Checkbox.tsx";

interface Column {
  id: string;
  label: string;
  align?: "left" | "center" | "right";
  renderCell?: (value: any) => React.ReactNode;
}

interface ProductTableProps<T> {
  columns: Column[];
  data: T[];
  page: number;
  rowsPerPage: number;
  isError: boolean;
  handleChangePage: (
    event: React.ChangeEvent<unknown>,
    newPage: number
  ) => void;
  handleOpenDialog: (row: T) => void;
  handleOpenDeletePopup: (row: T) => void;
  navigate: (path: string) => void;
}

const ProductTable = <T extends Record<string, any>>({
  columns,
  data,
  page,
  rowsPerPage,
  isError,
  handleChangePage,
  handleOpenDialog,
  handleOpenDeletePopup,
  navigate,
}: ProductTableProps<T>) => {
  const classes = useStyles();

  return (
    <TableContainer>
      <Table className={classes.table}>
        <TableHead className={classes.tableHeaderRow}>
          <TableRow>
            <TableCell className={classes.tablheader}>
              <CustomCheckbox name="checkbox" />
            </TableCell>
            <TableCell className={classes.tablheader}>
              <strong>#</strong>
            </TableCell>
            {columns.map((column) => (
              <TableCell
                key={column.id}
                className={classes.tablheader}
                align={column.align || "left"}
              >
                <strong>{column.label}</strong>
              </TableCell>
            ))}
            <TableCell className={classes.tablheader}>
              <strong>Actions</strong>
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {isError || data.length === 0 ? (
            <TableRow>
              <TableCell colSpan={columns.length + 1} align="center">
                {isError ? "Error fetching data" : "No data available"}
              </TableCell>
            </TableRow>
          ) : (
            data
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row, index) => (
                <TableRow key={index} className={classes.tableRowHover}>
                  <TableCell className={classes.tablCell}>
                    <CustomCheckbox name="checkbox" />
                  </TableCell>
                  <TableCell scope="row" className={classes.tablCell}>
                    {page * rowsPerPage + index + 1}
                  </TableCell>
                  {columns.map((column) => (
                    <TableCell
                      key={column.id}
                      className={classes.tablCell}
                      align={column.align || "left"}
                    >
                      {column.renderCell
                        ? column.renderCell(row[column.id])
                        : row[column.id]}
                    </TableCell>
                  ))}
                  <TableCell className={classes.tablCell}>
                    <Grid
                      container
                      spacing={1}
                      sx={{ display: "flex", justifyContent: "flex-end" }}
                    >
                      <Grid item>
                        <Button
                          variant="contained"
                          className={classes.viewButtonList}
                          onClick={() =>
                            navigate(`/product-history/${row["id"]}`)
                          }
                        >
                          <VisibilitySharpIcon
                            className={classes.viewListIcon}
                          />
                        </Button>
                      </Grid>
                      <Grid item>
                        <Button
                          variant="contained"
                          className={classes.editButtonList}
                          onClick={() => handleOpenDialog(row)}
                        >
                          <EditSharpIcon className={classes.editListIcon} />
                        </Button>
                      </Grid>
                      <Grid item>
                        <Button
                          variant="contained"
                          className={classes.deleteButtonList}
                          onClick={() => handleOpenDeletePopup(row)}
                        >
                          <DeleteOutlineSharpIcon
                            className={classes.deleteListIcon}
                          />
                        </Button>
                      </Grid>
                    </Grid>
                  </TableCell>
                </TableRow>
              ))
          )}
        </TableBody>
      </Table>
      <Grid
        spacing={5}
        p={"18px"}
        py={4}
        justifyContent={"end"}
        container
        textAlign={"center"}
        alignContent={"center"}
        alignItems={"center"}
      >
        <Grid
          sx={{
            textAlign: "end",
            justifyContent: "flex-end",
            alignItems: "flex-end",
          }}
        >
          <Pagination
            count={Math.ceil(data.length / rowsPerPage)}
            page={page + 1}
            onChange={handleChangePage} 
          />
        </Grid>
      </Grid>
    </TableContainer>
  );
};

export default ProductTable;
