import { useEffect, useState } from 'react';
import {
    Box,
    Button,
    TextField,
    Typography,
    Paper,
    MenuItem
} from '@mui/material';

export default function AddOrEditAdminForm({ onAdd, initialData, onCancel }) {
    const [formData, setFormData] = useState({
        name: '',
        description: '',
        status: 'Active'
    });

    useEffect(() => {
        if (initialData) {
            setFormData(initialData);
        } else {
            setFormData({
                name: '',
                description: '',
                status: 'Active'
            });
        }
    }, [initialData]);

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value
        }));
    };

    const handleSubmit = () => {
        if (onAdd) {
            onAdd(formData);
        }
    };

    return (
        <Box sx={{ px: 2, py: 3 }}>
            <Paper elevation={0} sx={{ bgcolor: '#f9f9f9', p: 2, borderRadius: 2 }}>
                <Typography variant="h6" gutterBottom>
                    Item details
                </Typography>

                <TextField
                    fullWidth
                    label="Name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    margin="normal"
                />

                <TextField
                    fullWidth
                    label="Description"
                    name="description"
                    value={formData.description}
                    onChange={handleChange}
                    margin="normal"
                />

                <TextField
                    select
                    fullWidth
                    label="Status"
                    name="status"
                    value={formData.status}
                    onChange={handleChange}
                    margin="normal"
                >
                    <MenuItem value="Active">Active</MenuItem>
                    <MenuItem value="Inactive">Inactive</MenuItem>
                </TextField>

                <Box display="flex" justifyContent="flex-end" gap={1} mt={3}>
                    <Button onClick={onCancel} className="button-transparent">
                        Cancel
                    </Button>
                    <Button variant="contained" onClick={handleSubmit} className="button-gold">
                        Save
                    </Button>
                </Box>
            </Paper>
        </Box>
    );
}