import React, { useState }from 'react';
import useAuth from '../hooks/useAuth';
import { Container, Row, Col, Form, Button } from 'react-bootstrap';
import illustration from '../../../../assets/images/illustration/IllustrationLogin.png';
import { Link, useNavigate } from 'react-router-dom';

const LoginPage = () => {
  const { login, loading, error } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    await login(email, password);
  };

  return (
    <Container fluid className='h-screen bg-blue-50'>
      <Row className='h-100'>
        <Col md={6} className="d-flex items-center">
          <div className='w-75'>
            <h2 className='text-blue fw-bold mb-3'>Welcome Back</h2>
            <p className='text-secondary'>Login to access your personalized English lessons and keep progressing on your journey.</p>
            <img src={illustration} alt="" className='w-75'/>
          </div>
        </Col>
        <Col md={6} className="bg-white d-flex items-center rounded-5 rounded-end shadow">
          <div className='w-75'>
            <h2 className='text-blue fw-bold'>Login</h2>
            <p className='text-secondary'>Let’s continue your learning journey.</p>
            <div className='bg-gd rounded' style={{padding:"1px"}}>
              <Form className='bg-white form-sm rounded p-4' onSubmit={onSubmit}>
                <Form.Group className="mb-3" controlId="formBasicEmail">
                  <Form.Label>Email Address <span className='text-danger'>*</span></Form.Label>
                  <Form.Control type="text" placeholder="Email Address"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    required
                  />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicPassword">
                  <Form.Label>Password <span className='text-danger'>*</span></Form.Label>
                  <Form.Control type="password" placeholder="Password"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                    required
                  />
                </Form.Group>
                <div className="mb-3 d-flex justify-content-between align-items-center">
                  <Form.Group controlId="formBasicCheckbox">
                    <Form.Check type="checkbox" label="Remember me" />
                  </Form.Group>
                  <a href='/forgot' className="text-blue m-0">
                    Forgot password?
                  </a>
                </div>
                <Button type="submit"  variant="gd" className='w-100'  disabled={loading}>
                  {loading ? 'Logging In...' : 'Log In'}
                </Button>
                {error && <p className="text-danger">{error}</p>}
                <p className='mt-4 mb-0 text-center'>Haven't joined us yet? <Link to="/signup" className='text-blue'>Sign Up</Link> first</p>
                {/* <h6 className='my-4 text-center text-muted-50'>OR</h6>
                <Button variant="outline-muted" className='w-100' onClick={handleLogin}>
                  <i className="bi bi-envelope me-1"></i>Log In with Google
                </Button> */}
              </Form>
            </div>
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default LoginPage;
