import React, { useState, useContext, useEffect } from "react";
import { Form, Button, Card, Container, Alert } from "react-bootstrap";
import { useNavigate, Link } from "react-router-dom";
import { AuthContext } from "../../context/AuthContext";
import { FaGraduationCap } from "react-icons/fa";
import "./Login.css";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  const { login, userLogin } = useContext(AuthContext);
  
  const navigate = useNavigate();

  useEffect(() => {
    if (userLogin) {
      if (userLogin.role === "admin") {
        navigate("/dashboard-admin");
      } else {
        navigate("/dashboard-user");
      }
    }
  }, [userLogin, navigate]);

  const handleLogin = async (e) => {
    e.preventDefault();
    setError("");
    setIsLoading(true);

    const res = await login(email, password);

    if (res.sukses) {
      if (res.user.role === "admin") {
        navigate("/dashboard-admin");
      } else {
        navigate("/dashboard-user");
      }
    } else {
      setError(res.pesan);
      setIsLoading(false);
    }
  };

  return (
    <div className="login-page">
      <Container className="d-flex justify-content-center align-items-center min-vh-100">
        <Card className="login-card">
          <Card.Body className="p-4">
            <div className="text-center mb-4">
              <h2 className="login-title">
                <FaGraduationCap className="me-2" /> EduKita
              </h2>
              <p className="login-subtitle">Masuk ke akun Anda</p>
            </div>

            {error && <Alert variant="danger">{error}</Alert>}

            <Form onSubmit={handleLogin}>
              <Form.Group className="mb-3">
                <Form.Label>Email</Form.Label>
                <Form.Control
                  type="email"
                  placeholder="Masukkan email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </Form.Group>

              <Form.Group className="mb-4">
                <Form.Label>Password</Form.Label>
                <Form.Control
                  type="password"
                  placeholder="Masukkan password"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  required
                />
              </Form.Group>

              <Button
                variant="primary"
                type="submit"
                className="w-100 btn-login mb-3"
                disabled={isLoading}
              >
                {isLoading ? "Loading..." : "Masuk"}
              </Button>

              <div className="text-center mt-3">
                <p className="mb-0">
                  Belum punya akun?{" "}
                  <Link to="/register" className="register-link">
                    Daftar di sini
                  </Link>
                </p>
              </div>
            </Form>
          </Card.Body>
        </Card>
      </Container>
    </div>
  );
};

export default Login;
