import React from 'react';
import { Box, Typography, Stack, Button, useTheme, TextField } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import { useNavigate } from 'react-router-dom';

const Equipment = ({ currentStepIndex = 0, onNext, onBack }) => {
    const theme = useTheme();
    const navigate = useNavigate();

    const handleNext = () => {
        if (onNext) onNext();
        else navigate('/dashboard');
    };

    return (
        <Box
            sx={{
                height: { xs: '90%', sm: '100%', md: 740 },
                backgroundColor: '#FFFFFF',
                px: 4,
                pt: { xs: 4, md: 12 },
                pb: { xs: 20, sm: 12, md: 3 },
                display: 'block',
                borderRadius: 2,
                boxShadow: '0px 1px 4px rgba(0,0,0,0.05)',
                width: { xs: '85%', sm: '90%' },
                position: 'relative',
            }}
        >
            <Stack spacing={2.5}>
                <Typography fontWeight={700} sx={{ fontSize: { xs: '1.8rem', sm: '2rem', md: '2.2rem' } }}>
                    Equipment
                </Typography>

                <Box sx={{ width: '70%' }}>
                    <Typography
                        fontSize="16px"
                        color="text.secondary"
                        fontWeight={500}
                        sx={{ pb: 1 }}
                    >
                        Enter your kitchen equipment details to complete your restaurant registration.
                    </Typography>
                </Box>

                {/* Oven Input */}
                <InputField label="Oven" placeholder="5" theme={theme} />

                {/* Grill Input */}
                <InputField label="Grill" placeholder="20" theme={theme} />

                {/* Refrigerators Input */}
                <InputField label="Refrigerators" placeholder="200" theme={theme} />

                {/* Add More Equipment Button */}
                <Box>
                    <Button
                        variant="text"
                        fullWidth
                        startIcon={<AddIcon />}
                        sx={{
                            fontWeight: 600,
                            fontSize: { xs: '14px', sm: '16px' },
                            height: { xs: '45px', sm: '52px' },
                            borderRadius: '50px',
                            textTransform: 'none',
                            color: theme.palette.primary.main,
                            '&:hover': {
                                backgroundColor: 'transparent',
                            }
                        }}
                        onClick={() => console.log('Add More Equipment')}
                    >
                        Add More
                    </Button>
                </Box>

                {/* Next Button */}

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

// مكون فرعي لتقليل التكرار في الحقول
const InputField = ({ label, placeholder, theme }) => (
    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
        <Typography variant="body2" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' }}>
            {label}
        </Typography>
        <TextField
            placeholder={placeholder}
            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: theme.palette.primary.main,
                    boxShadow: '0 0 0 2px rgba(255,145,77,0.1)',
                }
            }}
        />
    </Box>
);

export default Equipment;