import React, { useState } from 'react';
import { TextField, Button, Typography, Stack, Box, IconButton, InputAdornment } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
import { VisibilityOutlined } from '@mui/icons-material';
import { useNavigate } from 'react-router-dom';
import { Link } from 'react-router-dom';


const LoginForm = () => {

    const navigate = useNavigate();
    const theme = useTheme();
    const [showPassword, setShowPassword] = useState(false);

    const handleTogglePassword = () => {
        setShowPassword((prev) => !prev);
    };
    const handleLogin = () => {
        // بعد تنفيذ عملية تسجيل الدخول بنجاح، يتم التوجيه
        navigate('/dashboard');
    };
    return (


        <Box

            display="flex"
            sx={{
                width: '140%',
                height: '90vh',

            }}
        >

            {/* Login Content */}
            <Box
                sx={{
                    width: '100%',
                }}
            >
                <Box
                    flex={1}
                    paddingTop={4}
                    paddingBottom={4}
                    paddingLeft={0}
                    paddingRight={0}
                    sx={{
                        // backgroundColor: '#FFFFFF',
                        minHeight: '10vh',
                        justifyContent: 'center',
                        display: 'flex',
                        alignItems: 'center',
                        position: 'sticky',
                    }}
                >
                    <Box
                        sx={{
                            backgroundColor: '#FFFFFF',
                            width: '100%',
                            maxWidth: 500,
                            paddingTop: 8,       // زيادة المسافة من الأعلى داخل الكرت
                            paddingX: 10,         // الجوانب
                            paddingBottom: 8,    // الأسفل
                            borderRadius: '16px',
                            // boxShadow: '0px 4px 20px rgba(0,0,0,0.1)',
                        }}
                    >

                        <Stack spacing={1.5}>

                            <Typography
                                variant="h4"
                                fontWeight={700}
                                sx={{
                                    fontSize: {
                                        xs: '1.8rem',
                                        sm: '2rem',
                                        md: '2.2rem'
                                    }
                                }}
                            >
                                Login
                            </Typography>

                            <Typography
                                variant="body2"
                                color="text.secondary"
                                fontWeight={500}
                                sx={{ pb: 1 }}
                            >
                                Enter your username and password to access your account securely. Welcome back to our service!
                            </Typography>

                            {/* Email Input */}
                            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                                <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                                    Email
                                </Typography>
                                <TextField
                                    placeholder="Enter your email"
                                    type="email"
                                    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>

                            {/* Password Input */}
                            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
                                <Typography variant="body2" color="black" sx={{ fontWeight: '500', fontSize: '16px' }}>
                                    Password
                                </Typography>
                                <TextField
                                    type={showPassword ? 'text' : 'password'}
                                    placeholder="Enter your password"
                                    fullWidth
                                    variant="outlined"
                                    autoComplete="new-password"
                                    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)'
                                        },
                                        '& input::-ms-reveal, & input::-ms-clear': {
                                            display: 'none',
                                        },
                                    }}
                                    InputProps={{
                                        endAdornment: (
                                            <InputAdornment position="end">
                                                <IconButton onClick={handleTogglePassword} edge="end">
                                                    {showPassword ? <VisibilityOffOutlinedIcon /> : <VisibilityOutlined />}
                                                </IconButton>
                                            </InputAdornment>
                                        )
                                    }}
                                />
                            </Box>

                            {/* Login Button */}
                            <Box sx={{ pt: 2 }}>
                                <Button
                                    variant="contained"
                                    fullWidth
                                    onClick={handleLogin}
                                    sx={{
                                        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
                                        }
                                         , fontFamily: 'PlusJakartaSans'  
                                    }}
                                >
                                    Log in
                                </Button>
                            </Box>

                            {/* Divider */}
                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, py: 2 }}>
                                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
                                <Typography variant="body1" sx={{ fontWeight: 500, fontSize: '16px', color: 'black' , fontFamily: 'PlusJakartaSans'  }}>
                                    Or
                                </Typography>
                                <Box sx={{ flex: 1, height: '1px', backgroundColor: '#E0E0E0' }} />
                            </Box>

                            {/* Google Button */}
                            <Button
                                variant="outlined"
                                fullWidth
                                sx={{
                                    fontWeight: 500,
                                    fontSize: '16px',
                                    borderRadius: '50px',
                                    height: '50px',
                                    textTransform: 'none',
                                    gap: 1,
                                    borderColor: '#E6E6E6',
                                    color: 'black',
                                    '&:hover': {
                                        borderColor: 'black',
                                        backgroundColor: 'transparent'
                                    }
                                }}
                            >
                                <Box sx={{ display: 'flex', alignItems: 'center' , fontFamily: 'PlusJakartaSans'   }}>
                                    <img
                                        src="https://upload.wikimedia.org/wikipedia/commons/c/c1/Google_%22G%22_logo.svg"
                                        alt="Google"
                                        style={{ width: 25, height: 25 }}
                                    />
                                </Box>
                                Login with Google
                            </Button>




                            {/* Register Link */}
                            <Typography
                                variant="body2"
                                sx={{
                                    fontSize: '16px',
                                    textAlign: 'center',
                                    color: '#969BA7',
                                    pt: 3
                                }}
                            >
                                Don’t have an account?{' '}
                                <Link
                                    to="/register"
                                    style={{
                                        color: '#2261FF',
                                        textDecoration: 'none'
                                    }}
                                >
                                    Register
                                </Link>
                            </Typography>

                        </Stack>
                    </Box>
                </Box>
            </Box>
        </Box>
    );
};

export default LoginForm;