"use client";
import Layout from "@/components/layout/Layout";
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [wrongCred, setWrongCred] = useState(false);
  const router = useRouter();

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

    // Simulate a login validation (replace this with actual logic or API calls)
    if (email === "test@example.com" && password === "password123") {
      // Successful login simulation
      router.push("/client-area");
    } else {
      setError("Invalid login credentials, please try again.");
      setWrongCred(true);
    }

    setIsLoading(false);
  };

  return (
    <>
      <Layout headerStyle={6} footerStyle={3} transparent={false}>
        <section className="login__area-one">
          <div className="container">
            <div className="box-form-login">
              <div className="head-login">
                <h3>Client Area</h3>
                <p className={wrongCred ? "display-none" : ""}>
                  Login with your email
                </p>
                <p className={wrongCred ? "error-red" : "display-none"}>
                  Invalid login credentials, please try again.
                </p>
                <div className="form-login">
                  <form onSubmit={handleLogin}>
                    <div className="form-group">
                      <input
                        type="text"
                        className="form-control account"
                        placeholder="Email Address"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                      />
                    </div>
                    <div className="form-group">
                      <input
                        type="password"
                        className="form-control"
                        placeholder="Password"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                        minLength={8}
                        required
                      />
                      <span className="view-password" />
                    </div>
                    <div className="box-forgot-pass">
                      <label>
                        <input
                          type="checkbox"
                          className="cb-remember"
                          defaultValue={1}
                        />{" "}
                        Remember me
                      </label>
                      <Link href="/forgot-password">Forgot Password ?</Link>
                    </div>
                    <div className="form-group">
                      {!isLoading ? (
                        <input
                          type="submit"
                          className="btn btn-login"
                          defaultValue="Login"
                        />
                      ) : (
                        <div
                          className="btn btn-login btn-loader"
                          defaultValue="Register now"
                        >
                          <div
                            className="spinner-border text-light"
                            role="status"
                          >
                            <span className="sr-only">Loading...</span>
                          </div>
                        </div>
                      )}
                    </div>
                  </form>
                  <p>
                    Don’t have an account?{" "}
                    <Link href="/register" className="link-bold">
                      Register
                    </Link>{" "}
                    now
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </Layout>
    </>
  );
}