"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 Register() {
  const router = useRouter();
  const [error, setError] = useState("");
  const [clientError, setClientError] = useState("");
  const [loading, setLoading] = useState(false);

  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [clientId, setClientId] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");

  const handleRegister = async (e) => {
    e.preventDefault();
    setError("");
    setLoading(true);

    if (password !== confirmPassword) {
      setError("Passwords do not match");
      setLoading(false);
      return;
    }

    // Placeholder for Client ID validation logic
    if (clientId === "") {
      setError("This Client ID does not exist");
      setClientError("This Client ID does not exist");
      setLoading(false);
      return;
    }

    // Simulate registration process
    try {
      // Add your custom user registration logic here

      setLoading(false);
      router.push("/client-area");
    } catch (error) {
      setError("Error: " + error.message);
      setLoading(false);
    }
  };

  return (
    <>
      <Layout headerStyle={6} footerStyle={3} transparent={false}>
        <section className="register__area-one">
          <div className="container">
            <div className="text-center mb-55">
              <h1 className="text-48-bold">Create An Account</h1>
            </div>
            <div className="box-form-login">
              <div className="head-login">
                <h3>Register</h3>
                <p className={clientError ? "display-none" : ""}>
                  Create an account today to manage your subscription easily
                </p>
                <p className={clientError ? "error-red" : "display-none"}>
                  {clientError}
                </p>
                <div className="form-login">
                  <form onSubmit={handleRegister}>
                    <div className="form-group">
                      <input
                        type="text"
                        className="form-control account"
                        placeholder="Your Name"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        required
                      />
                    </div>
                    <div className="form-group">
                      <input
                        type="email"
                        className="form-control email-address"
                        placeholder="Email Address"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                      />
                    </div>
                    <div className="form-group">
                      <input
                        type="text"
                        className="form-control account"
                        placeholder="Client ID"
                        value={clientId}
                        onChange={(e) => setClientId(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="form-group">
                      <input
                        type="password"
                        className="form-control"
                        placeholder="Confirm Password"
                        value={confirmPassword}
                        onChange={(e) => setConfirmPassword(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}
                          required
                        />{" "}
                        <span>
                          I have read and agree to the Terms &amp; Conditions
                          and the Privacy Policy of this website.
                        </span>
                      </label>
                    </div>
                    <div className="form-group">
                      {!loading ? (
                        <input
                          type="submit"
                          className="btn btn-login"
                          defaultValue="Register now"
                        />
                      ) : (
                        <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>
                    Already have an account?{" "}
                    <Link href="/login" className="link-bold">
                      Login
                    </Link>{" "}
                    now. Need our help?{" "}
                    <Link href="/contact" className="link-bold">
                      Contact Us
                    </Link>
                    .
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </Layout>
    </>
  );
}