RestaurantDash/src/components/Home/Settings/AccountSettings.js

import React, { useState } from 'react';
import {
    Box,
    Typography,
    TextField,
    Button,
    styled,
    useTheme
} from '@mui/material';
import AddAPhotoOutlinedIcon from '@mui/icons-material/AddAPhotoOutlined';

const AccountSettings = () => {
    const theme = useTheme();
    const [profileImage, setProfileImage] = useState(null);
    const [fullName, setFullName] = useState('');
    const [username, setUsername] = useState('');
    const [bio, setBio] = useState('');
    const [email, setEmail] = useState('');
    const [phone, setPhone] = useState('');

    const handleImageUpload = (event) => {
        if (event.target.files && event.target.files[0]) {
            setProfileImage(URL.createObjectURL(event.target.files[0]));
        }
    };

    const Input = styled('input')({
        display: 'none',
    });

    const customInputStyle = {
        '& input': { fontWeight: 500, fontSize: '15px' },
        '& input::placeholder': { color: '#969BA7' },
        '& .MuiOutlinedInput-root': {
            borderRadius: '10px',
            transition: '0.3s',
            '&.Mui-focused fieldset': {
                borderColor: theme.palette.primary.main,
                boxShadow: '0 0 0 2px rgba(255, 145, 77, 0.2)',
            },
        },
        '& .MuiOutlinedInput-root.Mui-focused': {
            borderColor: '#3f51b5',
            boxShadow: '0 0 0 2px rgba(63,81,181,0.1)',
        },
    };

    const renderField = (label, value, onChange, type = 'text') => (
        <Box
            sx={{
                flex: 1,
                minWidth: { xs: '100%', sm: '45%' },
                display: 'flex',
                flexDirection: 'column',
                gap: 1,
            }}
        >
            <Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
                {label}
            </Typography>
            <TextField
                placeholder={`Enter your ${label.toLowerCase()}`}
                type={type}
                value={value}
                onChange={onChange}
                variant="outlined"
                fullWidth
                sx={customInputStyle}
            />
        </Box>
    );

    return (
        <Box
            sx={{
                // margin: 'auto',
                p: { xs: 2, sm: 3 },
                backgroundColor: '#FFFFFF',
                maxWidth: { xs: '90%', md: '100%' },
                borderRadius: 2,
            }}
        >
            {/* العنوان الرئيسي */}
            <Typography variant="h4" component="h1" sx={{ mb: 3, fontWeight: 'bold' }}>
                Account Setting
            </Typography>

            {/* صورة الملف الشخصي */}
            <Typography variant="h6" component="h2" sx={{ mb: 2, fontWeight: 'bold' }}>
                Your Profile Picture
            </Typography>

            <Box sx={{ display: 'flex', alignItems: 'center', mb: 3 }}>
                <label htmlFor="icon-button-file">
                    <Input
                        accept="image/*"
                        id="icon-button-file"
                        type="file"
                        onChange={handleImageUpload}
                    />
                    <Box
                        component="span"
                        sx={{
                            width: { xs: 100, sm: 110 },
                            height: { xs: 100, sm: 110 },
                            border: '2px dashed #4C535F',
                            borderRadius: 2,
                            display: 'flex',
                            flexDirection: 'column',
                            alignItems: 'center',
                            justifyContent: 'center',
                            color: '#4C535F',
                            cursor: 'pointer',
                            textAlign: 'center',
                            backgroundColor: '#f6f6f6',
                            '&:hover': {
                                backgroundColor: '#f9f9f9',
                            },
                        }}
                    >
                        <AddAPhotoOutlinedIcon sx={{ fontSize: 28, mb: 1 }} />
                        <Typography sx={{ fontSize: '13px', fontWeight: 500 }}>
                            Upload your photo
                        </Typography>
                    </Box>
                </label>
            </Box>

            {/* الحقول النصية */}
            <Box sx={{ mb: 3 }}>
                <Typography variant="subtitle1" sx={{ fontWeight: 'bold', mb: 2 }}>
                    Personal Information
                </Typography>

                {/* السطر الأول: Full Name + Email */}
                <Box
                    sx={{
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: 2,
                        mb: 2,
                    }}
                >
                    {renderField('Full Name', fullName, (e) => setFullName(e.target.value))}
                    {renderField('Email', email, (e) => setEmail(e.target.value), 'email')}
                </Box>

                {/* السطر الثاني: Username + Phone Number */}
                <Box
                    sx={{
                        display: 'flex',
                        flexWrap: 'wrap',
                        gap: 2,
                        mb: 2,
                    }}
                >
                    {renderField('Username', username, (e) => setUsername(e.target.value))}
                    {renderField('Phone Number', phone, (e) => setPhone(e.target.value), 'tel')}
                </Box>

                {/* الحقل Bio منفصل */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: '500', fontSize: '16px' }}>
                        Bio
                    </Typography>
                    <TextField
                        placeholder="Write something about your restaurant"
                        value={bio}
                        onChange={(e) => setBio(e.target.value)}
                        fullWidth
                        multiline
                        rows={3}
                        sx={customInputStyle}
                    />
                </Box>
            </Box>

            {/* الأزرار */}
            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 2, flexWrap: 'wrap' }}>
                <Button
                    variant="outlined"
                    sx={{
                        px: 4,
                        py: 1.5,
                        borderRadius: 2,
                        textTransform: 'none',
                        fontWeight: 'bold',
                        width: { xs: '100%', sm: 'auto' },
                    }}
                >
                    Cancel
                </Button>
                <Button
                    variant="contained"
                    sx={{
                        px: 4,
                        py: 1.5,
                        borderRadius: 2,
                        textTransform: 'none',
                        fontWeight: 'bold',
                        color: '#FFFFFF',
                        width: { xs: '100%', sm: 'auto' },
                        transition: 'border-color 0.3s',
                       backgroundColor: theme.palette.primary.main,
                            '&:hover': {
                                backgroundColor: theme.palette.primary.hover
                            }
                    }}
                >
                    Update
                </Button>
            </Box>
        </Box>
    );
};

export default AccountSettings;