import { useState } from "react";
import {
    Box,
    Button,
    Typography,
    TextField,
    Modal,
    IconButton,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";

export default function AddManagerModal({ open, handleClose, handleAddManager }) {
    // State for input fields
    const [managerName, setManagerName] = useState("");
    const [stationName, setStationName] = useState("");
    const [stationLocation, setStationLocation] = useState("");
    const [phoneNumber, setPhoneNumber] = useState("");

    const handleSubmit = () => {
        if (!managerName || !stationName || !stationLocation || !phoneNumber) {
            alert("Please fill all fields");
            return;
        }

        const newManager = {
            managerName,
            stationName,
            stationLocation,
            phoneNumber,
        };

        handleAddManager(newManager); // Add manager to table
        handleClose(); // Close modal after adding
    };

    return (
        <Modal open={open} onClose={handleClose} aria-labelledby="add-manager-modal">
            <Box
                sx={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    width: 400,
                    bgcolor: "background.paper",
                    boxShadow: 24,
                    p: 3,
                    borderRadius: 2,
                }}
            >
                {/* Header */}
                <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <Typography variant="h6" fontWeight={600}>
                        Add Managers
                    </Typography>
                    <IconButton onClick={handleClose}>
                        <CloseIcon />
                    </IconButton>
                </Box>

                {/* Horizontal Line */}
                <Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />

                {/* Input Fields */}
                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
                    {/* First Row - Two Inputs */}
                    <Box sx={{ display: "flex", gap: 2 }}>
                        <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
                            <Typography variant="body2" fontWeight={500}>Manager Name</Typography>
                            <TextField 
                                fullWidth 
                                placeholder="Enter Manager Name" 
                                size="small" 
                                value={managerName} 
                                onChange={(e) => setManagerName(e.target.value)} 
                            />
                        </Box>

                        <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
                            <Typography variant="body2" fontWeight={500}>Station Name</Typography>
                            <TextField 
                                fullWidth 
                                placeholder="Enter Station Name" 
                                size="small" 
                                value={stationName} 
                                onChange={(e) => setStationName(e.target.value)} 
                            />
                        </Box>
                    </Box>

                    {/* Second Row - Two Inputs */}
                    <Box sx={{ display: "flex", gap: 2 }}>
                        <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
                            <Typography variant="body2" fontWeight={500}>Station Location</Typography>
                            <TextField 
                                fullWidth 
                                placeholder="Enter Station Location" 
                                size="small" 
                                value={stationLocation} 
                                onChange={(e) => setStationLocation(e.target.value)} 
                            />
                        </Box>

                        <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
                            <Typography variant="body2" fontWeight={500}>Phone Number</Typography>
                            <TextField 
                                fullWidth 
                                placeholder="Enter Phone Number" 
                                size="small" 
                                value={phoneNumber} 
                                onChange={(e) => setPhoneNumber(e.target.value)} 
                            />
                        </Box>
                    </Box>
                </Box>

                {/* Submit Button */}
                <Box sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}>
                    <Button variant="contained" onClick={handleSubmit}>
                        Add Manager
                    </Button>
                </Box>
            </Box>
        </Modal>
    );
}
