import React, { useState } from "react";
import { Box, Button, Typography, TextField, InputAdornment, IconButton } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import EqualizerIcon from "@mui/icons-material/Tune";
import CustomTable, { Column } from "../../components/CustomTable";
import AddManagerModal from "../../pages/AddManagerModal";
import EditUserModal from "../EditUserModal";

export default function ManagerList() {
    const [search, setSearch] = useState("");
    const [addButtonModal, setAddButtonModal] = useState(false);
    const [modalOpen, setModalOpen] = useState(false);
    const [rowData, setRowData] = useState(null);
    const [viewModal, setViewModal] = React.useState<boolean>(false);
    const [deleteModal, setDeleteModal] = React.useState<boolean>(false);


    const [managers, setManagers] = useState([
        { id: 1, srno: 1, managerName: "John Doe", stationName: "Station A", stationLocation: "Location X", phoneNumber: "123-456-7890" },
        { id: 2, srno: 2, managerName: "Jane Smith", stationName: "Station B", stationLocation: "Location Y", phoneNumber: "987-654-3210" },
    ]);

    const handleSearchChange = (event) => {
        setSearch(event.target.value);
    };

    const handleClickOpen = () => {
        setRowData(null); 
        setAddButtonModal(true);
    };

    const handleCloseModal = () => {
        setAddButtonModal(false);
        setModalOpen(false);
        setRowData(null);
    };

    const handleUpdate = (id, updatedData) => {
        setManagers((prevManagers) =>
            prevManagers.map((manager) => (manager.id === id ? { ...manager, ...updatedData } : manager))
        );
        handleCloseModal();
    };
    const handleAddManager = (newManager) => {
        setManagers((prevManagers) => {
            const newId = prevManagers.length > 0 ? prevManagers[prevManagers.length - 1].id + 1 : 1;
            return [...prevManagers, { ...newManager, id: newId, srno: newId }];
        });
        setAddButtonModal(false); 
    };
    
    

    const managerColumns: Column[] = [
        { id: "srno", label: "Sr No" },
        { id: "managerName", label: "Manager Name" },
        { id: "stationName", label: "Station Name" },
        { id: "stationLocation", label: "Station Location" },
        { id: "phoneNumber", label: "Phone Number" },
        { id: "action", label: "Action", align: "center" },
    ];

    const filteredManagers = managers.filter((manager) =>
        Object.values(manager).some((value) =>
            typeof value === "string" && value.toLowerCase().includes(search.toLowerCase())
        )
    );

    return (
        <>
            <Box sx={{ width: "100%", display: "flex", flexDirection: "column", gap: 2, mt: 2 }}>
                <Typography component="h2" variant="h6" sx={{ fontWeight: 600 }}>
                    Managers
                </Typography>
                <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <TextField
                        variant="outlined"
                        size="small"
                        placeholder="Search"
                        value={search}
                        onChange={handleSearchChange}
                        InputProps={{
                            startAdornment: (
                                <InputAdornment position="start">
                                    <SearchIcon />
                                </InputAdornment>
                            ),
                        }}
                    />
                    <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                        <Button variant="contained" size="medium" onClick={handleClickOpen}>
                            Add Manager
                        </Button>
                        <IconButton>
                            <EqualizerIcon />
                        </IconButton>
                    </Box>
                </Box>
            </Box>

            <CustomTable
                columns={managerColumns}
                rows={filteredManagers}
                setRowData={setRowData}
                setModalOpen={setModalOpen}
                setViewModal={setViewModal}
                viewModal={viewModal}
                setDeleteModal={setDeleteModal}
                deleteModal={deleteModal}



            />

            <EditUserModal
                open={modalOpen}
                handleClose={handleCloseModal}
                handleUpdate={handleUpdate}
                editRow={rowData}
            />

<AddManagerModal 
    open={addButtonModal} 
    handleClose={handleCloseModal} 
    initialData={rowData}
    handleAddManager={handleAddManager} 
/>

        </>
    );
}
