import React, { useState, FormEvent } from "react";
import { useNavigate } from "react-router-dom";
import { LogoIconLarge } from "../components/icons/Logo";
import { EyeIcon } from "../components/icons/ExportCommonIcons";
// import LoadingPage from "../components/templates/LoadingPage";

const UserAuth: React.FC = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [error, setError] = useState("");
  const [isSignIn, setIsSignIn] = useState(true); // Toggle between login and register
  const [userName, setUserName] = useState(""); // Username for registration

  const navigate = useNavigate();

  const handleLogin = (e: FormEvent) => {
    e.preventDefault();
    // Dummy validation for "account not found"
    if (email !== "user@example.com") {
      setError("Account not found");
    } else {
      setError("");
      console.log("Login Successful!");
      console.log("Email:", email);
      console.log("Password:", password);
    }
  };

  const handleRegister = (e: FormEvent) => {
    e.preventDefault();
    // Dummy validation for registration
    if (email && password && userName) {
      setError("");
      console.log("Registration Successful!");
      console.log("Username:", userName);
      console.log("Email:", email);
      console.log("Password:", password);
      setIsSignIn(true);
    } else {
      setError("Please fill all the fields!");
    }
  };

  return (
    <>
      {/* <LoadingPage progress={20} /> */}
      <div className="auth-container">
        <div className="logo-icon">
          <LogoIconLarge />
        </div>
        <h1>Welcome to Dwinzo</h1>
        <p>
          {isSignIn ? (
            <>
              Don’t have an account?{" "}
              <span
                className="link"
                onClick={() => setIsSignIn(false)}
                style={{ cursor: "pointer" }}
              >
                Register here!
              </span>
            </>
          ) : (
            <>
              Already have an account?{" "}
              <span
                className="link"
                onClick={() => setIsSignIn(true)}
                style={{ cursor: "pointer" }}
              >
                Login here!
              </span>
            </>
          )}
        </p>

        <button className="google-login">
          <span className="google-icon">G</span> Continue with Google
        </button>

        {error && <div className="error-message">🛈 {error}</div>}

        <form
          onSubmit={isSignIn ? handleLogin : handleRegister}
          className="auth-form"
        >
          {!isSignIn && (
            <input
              type="text"
              value={userName}
              placeholder="Username"
              onChange={(e) => setUserName(e.target.value)}
              required
            />
          )}
          <input
            type="email"
            value={email}
            placeholder="Email"
            onChange={(e) => setEmail(e.target.value)}
            required
          />
          <div className="password-container">
            <input
              type={showPassword ? "text" : "password"}
              value={password}
              placeholder="Password"
              onChange={(e) => setPassword(e.target.value)}
              required
            />
            <button
              type="button"
              className="toggle-password"
              onClick={() => setShowPassword(!showPassword)}
            >
              <EyeIcon isClosed={showPassword} />
            </button>
          </div>
          {!isSignIn && (
            <div className="policy-checkbox">
              <input type="checkbox" name="" id="" />
              <div className="label">
                I have read and agree to the terms of service
              </div>
            </div>
          )}
          <button type="submit" className="continue-button">
            {isSignIn ? "Continue" : "Register"}
          </button>
        </form>
        <p className="policy">
          By signing up for, or logging into, an account, you agree to our{" "}
          <span
            className="link"
            onClick={() => navigate("/privacy")}
            style={{ cursor: "pointer" }}
          >
            privacy policy
          </span>{" "}
          &{" "}
          <span
            className="link"
            onClick={() => navigate("/terms")}
            style={{ cursor: "pointer" }}
          >
            terms of service
          </span>{" "}
          whether you read them or not. You can also find these terms on our
          website.
        </p>
      </div>
    </>
  );
};

export default UserAuth;