import React from 'react';
import {
    Box,
    Typography,
    Stack,
    Button,
    useTheme,
    TextField
} from '@mui/material';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';

const UploadMenu = ({ currentStepIndex = 0, onNext, onBack }) => {
    const theme = useTheme();

    return (
        <Box
            sx={{
                height: { xs: '90%', sm: '100%', md: 740 },
                backgroundColor: '#FFFFFF',
                px: 4,
                pt: {xs:4,md:4.5},
                pb: 10,
                borderRadius: 2,
                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
                width: { xs: '85%', sm: '90%' },
                mx: 'auto'
            }}
        >
            <Stack spacing={2.5}>
                <Typography
                    fontWeight={700}
                    sx={{
                        fontSize: {
                            xs: '1.8rem',
                            sm: '2rem',
                            md: '2.2rem'
                        }
                    }}
                >
                    Upload Menu
                </Typography>

                <Box sx={{ width: '70%' }}>
                    <Typography
                        fontSize="16px"
                        color="text.secondary"
                        fontWeight={500}
                        sx={{ pb: 1 }}
                    >
                        Enter your basic information to proceed to registration of your own restaurant on this platform
                    </Typography>
                </Box>

                {/* Item Name Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
                        Item Name
                    </Typography>
                    <TextField
                        placeholder="Burgers"
                        variant="outlined"
                        fullWidth
                        sx={{
                            '& 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)'
                            }
                        }}
                    />
                </Box>

                {/* Price Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
                        Price
                    </Typography>
                    <TextField
                        placeholder="$120"
                        variant="outlined"
                        fullWidth
                        sx={{
                            '& 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)'
                            }
                        }}
                    />
                </Box>

                {/* Description Input */}
                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                    <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px' }}>
                        Description
                    </Typography>
                    <TextField
                        placeholder="Write here..."
                        variant="outlined"
                        fullWidth
                        multiline
                        minRows={3}
                        sx={{
                            '& .MuiInputBase-root': {
                                fontWeight: 500,
                                fontSize: '15px',
                                alignItems: 'start',
                            },
                            '& textarea::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)',
                            }
                        }}
                    />
                </Box>

                {/* OR Separator */}
                <Box>
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
                        <Box sx={{ flex: 1, height: '0px', backgroundColor: '#E0E0E0' }} />
                        <Typography sx={{ px: 2, fontWeight: 500, fontSize: '16px', color: 'black' }}>
                            OR
                        </Typography>
                        <Box sx={{ flex: 1, height: '0px', backgroundColor: '#E0E0E0' }} />
                    </Box>

                    {/* Upload Menu Picture */}
                    <Box
                        component="label"
                        htmlFor="upload-image"
                        sx={{
                            border: '2px dashed #ccc',
                            borderRadius: '10px',
                            height: '150px',
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                            cursor: 'pointer',
                            color: '#969BA7',
                            backgroundColor: '#FAFAFA',
                            fontWeight: 500,
                            fontSize: '15px',
                            textAlign: 'center',
                            transition: 'border-color 0.3s',
                            '&:hover': {
                                borderColor: '#FF914D',
                                backgroundColor: '#fffaf5',
                            }
                        }}
                    >
                        Upload Menu Picture
                        <input id="upload-image" type="file" accept="image/*" hidden />
                    </Box>
                </Box>

                {/* Buttons: Back and Next */}
            
                           <Box sx={{ pt: 2 }}>
                                                <Button
                                                    variant="contained"
                                                    fullWidth
                                                    onClick={onNext}
                                                    sx={{
                                                        fontFamily: 'PlusJakartaSans',
                                                        fontWeight: 600,
                                                        fontSize: { xs: '14px', sm: '16px' },
                                                        height: { xs: '45px', sm: '52px' },
                                                        borderRadius: '50px',
                                                        textTransform: 'none',
                                                        color: 'white',
                                                        backgroundColor: theme.palette.primary.main,
                                                        '&:hover': {
                                                            backgroundColor: theme.palette.primary.hover,
                                                        },
                                                    }}
                                                >
                                                    Next
                                                </Button>
                        
                                                {/* زر Back تحت زر Next */}
                                                <Button
                                                    variant="outlined"
                                                    fullWidth
                                                    onClick={onBack}
                                                    sx={{
                                                        mt: 2,
                                                        fontFamily: 'PlusJakartaSans',
                                                        fontWeight: 600,
                                                        fontSize: { xs: '14px', sm: '16px' },
                                                        height: { xs: '45px', sm: '52px' },
                                                        borderRadius: '50px',
                                                        textTransform: 'none',
                                                        display: { xs: 'block', sm: 'block', md: 'none' }, // يظهر فقط في xs و sm
                                                        borderColor: theme.palette.primary.main,
                                                        color: theme.palette.primary.main,
                                                        '&:hover': {
                                                            backgroundColor: theme.palette.primary.light,
                                                            borderColor: theme.palette.primary.main,
                                                        },
                                                    }}
                                                >
                                                    Back
                                                </Button>
                                            </Box>
            
            </Stack>
        </Box>
    );
};

export default UploadMenu;