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 SidePanel from './SidePanel'; // استدعاء SidePanel من نفس المجلد أو حسب المسار المناسب
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
      bgcolor={"background.default"}
      color={"text.primary"}
      display="flex"
      sx={{
        width: '100vw',
        height: '100vh',
        overflow: 'auto',
        scrollbarWidth: 'none',
        '&::-webkit-scrollbar': {
          display: 'none',
        },
      }}
    >
      {/* SidePanel ثابت */}
      <SidePanel />
      
      {/* Login Content */}
      <Box
        sx={{
          marginLeft: { xs: 0, sm: '50%'  },
          width: { xs: '100%', sm: '50%' ,md:'70%'},
        }}
      >
        <Box
          flex={1}
          paddingTop={4}
          paddingBottom={4}
          paddingLeft={2}
          paddingRight={2}
          sx={{
            backgroundColor: '#FFFFFF',
            minHeight: '10vh',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            position: 'sticky',
          }}
        >
          <Box
            sx={{
              width: {
                xs: '120%',
                sm: '100%',
                md: '150%',
                lg: '150%'
              },
              maxWidth: '600px'
            }}
          >
            <Stack spacing={2}>

              {/* Logo */}
              <Box>
                <img
                  src="/image.png"
                  alt="logo"
                  style={{
                    width: '4vw',
                    maxWidth: '80px',
                    height: 'auto',
                    objectFit: 'contain'
                  }}
                />
              </Box>

              <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={{
                     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
                    }
                  }}
                >
                  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'
                  }
                   , fontFamily: 'PlusJakartaSans'  
                }}
              >
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                  <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>

              {/* Facebook 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'
                  }
                   , fontFamily: 'PlusJakartaSans'  
                }}
              >
                <Box sx={{ display: 'flex', alignItems: 'center' }}>
                  <img
                    src="https://upload.wikimedia.org/wikipedia/commons/0/05/Facebook_Logo_%282019%29.png"
                    alt="Facebook"
                    style={{ width: 25, height: 25 }}
                  />
                </Box>
                Login with Facebook
              </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>

              {/* ForgetPassword Link */}
              <Typography
                variant="body2"
                sx={{
                  fontSize: '14px',
                  textAlign: 'center',
                  color: '#969BA7',
                  pt: 3
                }}
              >
                Did you forget the password?{' '}
                <Link
                  to="/forget"
                  style={{
                    color: '#2261FF',
                    textDecoration: 'none'
                  }}
                >
                  Forget Password
                </Link>
              </Typography>

              {/* Terms */}
              <Typography
                variant="caption"
                sx={{
                  fontSize: '14px',
                  textAlign: 'center',
                  color: '#969BA7',
                  pt: 5
                }}
              >
                By logging in, I agree to the{' '}
                <a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
                  Terms of Service
                </a>{' '}
                and{' '}
                <a href="#" style={{ color: '#2261FF', textDecoration: 'none' }}>
                  Privacy Policy
                </a>.
              </Typography>
            </Stack>
          </Box>
        </Box>
      </Box>
    </Box>
  );
};

export default LoginForm;