import React, { useState } from "react";
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Checkbox,
  Typography,
  Box,
  Grid,
  FormControlLabel,
  Button,
} from "@mui/material";
import { useNavigate } from "react-router-dom"; // Import useNavigate

// Define the data structure
interface Permission {
  module: string;
  list: boolean;
  add: boolean;
  edit: boolean;
  view: boolean;
  delete: boolean;
}

// Sample data
const initialPermissions: Permission[] = [
  { module: "Role & Permission", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Staff", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Manage Users", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Business Type", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Category", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Orders", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Discounts", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Transaction History", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Commission", list: false, add: false, edit: false, view: false, delete: false },
  { module: "Email Templates", list: false, add: false, edit: false, view: false, delete: false },
];

// Table component
const PermissionsTable: React.FC = () => {
  const [permissions, setPermissions] = useState<Permission[]>(initialPermissions);
  const navigate = useNavigate(); // Initialize useNavigate

  // Handle checkbox change
  const handleCheckboxChange = (module: string, action: keyof Permission) => {
    setPermissions((prevPermissions) =>
      prevPermissions.map((perm) =>
        perm.module === module ? { ...perm, [action]: !perm[action] } : perm
      )
    );
  };

  // Handle Back Navigation
  const handleBack = () => {
    navigate("/panel/role-list"); // Navigate back to Role List
  };

  return (
    <Box sx={{ width: "100%", maxWidth: 1200, margin: "auto", mt: 4, px: 2 }}>
      {/* Title & Back Button Section */}
      <Box
        sx={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          backgroundColor: "#1976D2",
          color: "#fff",
          p: 2,
          borderRadius: "8px",
          mb: 2,
        }}
      >
        <Typography variant="h6" fontWeight={600}>
          Role Permissions
        </Typography>
        <Button variant="contained" color="secondary" onClick={handleBack}>
          Back
        </Button>
      </Box>

      {/* Table Container */}
      <TableContainer component={Paper} sx={{ borderRadius: "8px", overflow: "hidden" }}>
        <Table>
          {/* Table Head */}
          <TableHead>
            <TableRow sx={{ backgroundColor: "#f5f5f5" }}>
              <TableCell sx={{ fontWeight: "bold", width: "30%" }}>Module Name</TableCell>
              <TableCell sx={{ fontWeight: "bold", width: "70%" }}>
                <Typography>Actions</Typography>
              </TableCell>
            </TableRow>
          </TableHead>

          {/* Table Body */}
          <TableBody>
            {permissions.map((row, index) => (
              <TableRow key={index} sx={{ "&:nth-of-type(odd)": { backgroundColor: "#FAFAFA" } }}>
                {/* Module Name */}
                <TableCell sx={{ fontWeight: 500 }}>{row.module}</TableCell>

                {/* Action Checkboxes */}
                <TableCell>
                  <Grid container spacing={1} justifyContent="space-between">
                    {(["list", "add", "edit", "view", "delete"] as (keyof Permission)[]).map(
                      (action) => (
                        <Grid item key={action}>
                          <FormControlLabel
                            control={
                              <Checkbox
                                checked={row[action]}
                                onChange={() => handleCheckboxChange(row.module, action)}
                                sx={{ color: "#1976D2" }}
                              />
                            }
                            label={action.charAt(0).toUpperCase() + action.slice(1)}
                          />
                        </Grid>
                      )
                    )}
                  </Grid>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Box>
  );
};

export default PermissionsTable;
