import React, { useContext, useState } from "react";
import { Container, Row, Col, Form, FormGroup, Button } from "reactstrap";
import "../styles/login.css";
import { Link, useNavigate } from "react-router-dom";
import loginImg from "../assets/images/login.png";
import userIcon from "../assets/images/user.png";
import { AuthContext } from "../context/AuthContext";
import { BASE_URL } from "../utils/config";
import { FiEye, FiEyeOff } from "react-icons/fi";

// Import Firebase auth and the provider
import { auth, googleProvider } from "../firebase";
import { signInWithPopup } from "firebase/auth";

const Login = () => {
  const [credentials, setCredentials] = useState({
    email: undefined,
    password: undefined,
  });

  const [showPassword, setShowPassword] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const { dispatch } = useContext(AuthContext);
  const navigate = useNavigate();

  const handleChange = (e) => {
    setCredentials((prev) => ({ ...prev, [e.target.id]: e.target.value }));
  };

  const handleClick = async (e) => {
    e.preventDefault();
    const { email, password } = credentials;

    // Basic validation
    if (!email || !password) {
      alert("Please fill in all fields.");
      return;
    }

    if (password.length < 6) {
      alert("Password must be at least 6 characters.");
      return;
    }

    // Email format validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      alert("Please enter a valid email.");
      return;
    }

    dispatch({ type: "LOGIN_START" });

    setIsLoading(true);

    try {
      const res = await fetch(`${BASE_URL}/auth/login`, {
        method: "post",
        headers: {
          "content-type": "application/json",
        },
        credentials: "include",
        body: JSON.stringify(credentials),
      });

      const result = await res.json();
      if (!res.ok) {
        alert(result.message);
        setIsLoading(false);
      }
      console.log(result.data);

      dispatch({ type: "LOGIN_SUCCESS", payload: result.data });
      navigate("/");
    } catch (err) {
      dispatch({ type: "LOGIN_FAILURE", payload: err.message });
      setIsLoading(false);
    }
  };

  const handleGoogleSignIn = async () => {
    dispatch({ type: "LOGIN_START" });
    setIsLoading(true);

    try {
      const result = await signInWithPopup(auth, googleProvider);
      // After successful sign-in, the onAuthStateChanged listener
      // in AuthContext will handle the state update.
      // We can also dispatch success here to update the UI immediately.
      dispatch({ type: "LOGIN_SUCCESS", payload: result.user });
      setIsLoading(false);
      navigate("/home");
    } catch (error) {
      alert(error.message);
      dispatch({ type: "LOGIN_FAILURE", payload: error.message });
      setIsLoading(false);
      console.error("Error signing in with Google: ", error);
    }
  };

  return (
    <section style={{ backgroundColor: "black" }}>
      <Container>
        <Row>
          <Col lg="8" className="m-auto">
            <div className="login__container d-flex justify-content-between">
              <div className="login__img">
                <img src={loginImg} alt="" />
              </div>

              <div className="login__form">
                <div className="user">
                  <img src={userIcon} alt="" />
                </div>
                <h2>Login</h2>

                <Form onSubmit={handleClick}>
                  <FormGroup>
                    <input
                      type="email"
                      placeholder="Email"
                      id="email"
                      onChange={handleChange}
                      required
                    />
                  </FormGroup>
                  <FormGroup style={{ position: "relative" }}>
                    <input
                      type={showPassword ? "text" : "password"}
                      placeholder="Password"
                      id="password"
                      onChange={handleChange}
                      required
                    />
                    <span
                      onClick={() => setShowPassword(!showPassword)}
                      style={{
                        position: "absolute",
                        right: "10px",
                        top: "50%",
                        transform: "translateY(-50%)",
                        cursor: "pointer",
                      }}
                    >
                      {showPassword ? <FiEyeOff /> : <FiEye />}
                    </span>
                  </FormGroup>
                  <Button
                    className="btn secondary__btn auth__btn"
                    type="submit"
                    disabled={isLoading}
                  >
                    {isLoading ? 'Logging in...' : 'Login'}
                  </Button>
                </Form>

                <div className="auth__divider">
                  <hr />
                  <span>OR</span>
                  <hr />
                </div>
                
                <Button
                  className="btn google__btn auth__btn"
                  onClick={handleGoogleSignIn}
                  disabled={isLoading}
                >
                   {isLoading ? 'Signing in...' : 'Sign in with Google'}
                </Button>

                <p>
                  <Link to="/forgot-password">Forgot Password?</Link>
                </p>
                <p>
                  Don't have an account? <Link to="/register">Create</Link>
                </p>
              </div>
            </div>
          </Col>
        </Row>
      </Container>
    </section>
  );
};

export default Login;
