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

export default function AddOrEditClientsForm({ onAdd, initialData, onCancel }) {
    const [client, setClient] = useState({
        fullName: '',
        email: '',
        phone: '',
        address: '',
        company: '',
        avatar: ''
    });

    useEffect(() => {
        if (initialData) {
            setClient(initialData);
        } else {
            setClient({
                fullName: '',
                email: '',
                phone: '',
                address: '',
                company: '',
                avatar: ''
            });
        }
    }, [initialData]);

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

    const handleImageChange = (e) => {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onloadend = () => {
            setClient((prev) => ({ ...prev, avatar: reader.result }));
        };
        reader.readAsDataURL(file);
    };

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

    return (
        <Box sx={{ px: 2, py: 3 }}>
            <Box display="flex" flexDirection={{ xs: 'column', md: 'row' }} gap={4}>
                {/* Left visual panel */}
                <Paper
                    elevation={0}
                    sx={{
                        bgcolor: '#f9f9f9',
                        p: 2,
                        borderRadius: 2,
                        flex: 1,
                        minWidth: '400px',
                    }}
                >
                    <Typography variant="subtitle1" fontWeight={600} gutterBottom>
                        {client.fullName || 'N/A'}
                    </Typography>
                    <Typography variant="body2" gutterBottom>
                        {client.email || 'N/A'}
                    </Typography>
                    <Typography variant="body2" gutterBottom>
                        {client.phone || 'N/A'}
                    </Typography>
                    {client.avatar ? (
                        <Avatar
                            variant="rounded"
                            src={client.avatar}
                            sx={{ width: '100%', height: 280, borderRadius: 2 }}
                            imgProps={{ style: { objectFit: 'cover', width: '100%', height: '100%' } }}
                        />
                    ) : (
                        <Box
                            sx={{
                                width: '100%',
                                height: 240,
                                bgcolor: '#e0e0e0',
                                borderRadius: 2,
                                display: 'flex',
                                alignItems: 'center',
                                justifyContent: 'center'
                            }}
                        >
                            <Typography variant="body2" color="text.secondary">Image Preview</Typography>
                        </Box>
                    )}
                    <Box mt={2}>
                        <Button component="label" className="button-transparent" fullWidth >
                            Upload Image
                            <input type="file" hidden accept="image/*" onChange={handleImageChange} />
                        </Button>
                    </Box>
                </Paper>

                {/* Right input panel */}
                <Box flex={1}>
                    <TextField
                        fullWidth
                        label="Full Name"
                        name="fullName"
                        value={client.fullName}
                        onChange={handleChange}
                        margin="normal"
                    />
                    <TextField
                        fullWidth
                        label="Email"
                        name="email"
                        type="email"
                        value={client.email}
                        onChange={handleChange}
                        margin="normal"
                    />
                    <TextField
                        fullWidth
                        label="Phone"
                        name="phone"
                        value={client.phone}
                        onChange={handleChange}
                        margin="normal"
                    />
                    <TextField
                        fullWidth
                        label="Address"
                        name="address"
                        value={client.address}
                        onChange={handleChange}
                        margin="normal"
                    />
                    <TextField
                        fullWidth
                        label="Company"
                        name="company"
                        value={client.company}
                        onChange={handleChange}
                        margin="normal"
                    />

                    <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>
                </Box>
            </Box>
        </Box>
    );
}