import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import "./page-auth.css";
import { AuthWrapper } from "./AuthWrapper";
import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import showToast from "../../services/toastService";
import AuthRepository from "../../repositories/AuthRepository";
import { MarketRepository } from "../../repositories/MarketRepository";

const mobileNumberRegex = /^(?:\d{10}|\d{3}[-\s]?\d{3}[-\s]?\d{4})$/;

const registerSchema = z.object({
  organizatioinName: z
    .string()
    .min(1, { message: "Organization Name is required" }),
  email: z.string().email(),
  about: z
    .string()
    .min(1, { message: "Current Address is required" })
    .max(500, { message: "Address cannot exceed 500 characters" }),
  contactPerson: z.string().min(1, { message: "Person Name is required" }),
  contactNumber: z
    .string()
    .min(1, { message: "Phone Number is required" })
    .regex(mobileNumberRegex, { message: "Invalid phone number " }),
  oragnizationSize: z
    .string()
    .min(1, { message: "please Select Organization Size " }),
  industryId: z.string(),
  terms: z.boolean().refine((val) => val === true, {
    message: "Please accept the terms and conditions.",
  }),
});

const RegisterPage = () => {
  const [registered, setRegristered] = useState(false);
  const [industries, setIndustries] = useState([]);
  const [Loading, setLoading] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
  } = useForm({
    resolver: zodResolver(registerSchema),
  });

  const onSubmit = async (data) => {
    try {
      setLoading(true);
      const response = await MarketRepository.requestDemo(data);
      showToast(
        "Your request has been sent successfully. Please stay in touch!"
      );
      setRegristered(true);
      setLoading(false);
      reset();
    } catch (error) {
      showToast(error.message, "error");
      setLoading(false);
    }
  };
  useEffect(() => {
    fetchIndustries();
  }, []);

  useEffect(() => {}, [industries]);

  const fetchIndustries = async () => {
    try {
      const response = await MarketRepository.getIndustries();
      const industry = response.data;
      setIndustries(industry);
    } catch (error) {
      showToast(error.message, "error");
    }
  };
  return (
    <>
      <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
        <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
          <div className="d-flex align-items-center justify-content-center ">
            <img src="/img/brand/marco.png" width="50" />
            <Link aria-label="Go to Home Page" to="/">
              <span class="app-brand-logo ">
                <span class="text-blue fs-4">OnField</span>
                <span className="text-green fs-4">Work</span>
                <span class="text-dark fs-4">.com</span>
              </span>
              <br />
            </Link>
          </div>
          <h5 className="mb-2">Adventure starts here </h5>
          <p className="mb-3">Make your app management easy and fun!</p>

          <form
            id="formAuthentication"
            className="mb-2"
            onSubmit={handleSubmit(onSubmit)}
          >
            <div className="row">
              <div className="col-12 col-sm-6 mb-2 text-start">
                <label htmlFor="organizatioinName" className="form-label">
                  Organization Name
                </label>
                <input
                  type="text"
                  className="form-control form-control-sm"
                  id="organizatioinName"
                  {...register("organizatioinName")}
                  name="organizatioinName"
                  placeholder="Enter your Organization Name"
                  autoFocus
                />
                {errors.organizatioinName && (
                  <div
                    className="danger-text text-start"
                    style={{ fontSize: "12px" }}
                  >
                    {errors.organizatioinName.message}
                  </div>
                )}
              </div>
              <div className="col-12 col-sm-6 mb-2  text-start">
                <label htmlFor="email" className="form-label">
                  Email
                </label>
                <input
                  type="text"
                  className="form-control form-control-sm"
                  id="email"
                  name="email"
                  placeholder="Enter your email"
                  {...register("email")}
                />
                {errors.email && (
                  <div
                    className="danger-text text-start"
                    style={{ fontSize: "12px" }}
                  >
                    {errors.email.message}
                  </div>
                )}
              </div>
            </div>
            <div className="mb-2 form-password-toggle text-start">
              <label className="form-label" htmlFor="contactperson">
                Contact Person
              </label>
              <input
                type="text"
                id="contactperson"
                {...register("contactPerson")}
                className="form-control form-control-sm"
                name="contactPerson"
                placeholder="Contact Person"
                aria-describedby="contactperson"
              />
              {errors.contactPerson && (
                <div
                  className="danger-text text-start"
                  style={{ fontSize: "12px" }}
                >
                  {errors.contactPerson.message}
                </div>
              )}
            </div>
            <div className="mb-2 form-password-toggle text-start">
              <label className="form-label" htmlFor="contactnumber">
                Contact Number
              </label>
              <input
                type="text"
                id="contactnumber"
                {...register("contactNumber")}
                className="form-control form-control-sm"
                name="contactNumber"
                placeholder="Contact Number"
                aria-describedby="contactnumber"
              />
              {errors.contactNumber && (
                <div
                  className="danger-text text-start"
                  style={{ fontSize: "12px" }}
                >
                  {errors.contactNumber.message}
                </div>
              )}
            </div>
            <div className="mb-2 form-password-toggle text-start">
              <label className="form-label" htmlFor="contactnumber">
                About Organization
              </label>
              <textarea
                id="about"
                className="form-control"
                placeholder="About..."
                aria-label="about"
                aria-describedby="about"
                {...register("about")}
              ></textarea>
              {errors.about && (
                <div
                  className="danger-text text-start"
                  style={{ fontSize: "12px" }}
                >
                  {errors.about.message}
                </div>
              )}
            </div>
            <div className="mb-2 form-password-toggle text-start">
              <label className="form-label" htmlFor="oragnizationSize">
                Organization Size
              </label>
              <select
                className="form-select form-select-sm"
                id="oragnizationSize"
                name="oragnizationSize"
                {...register("oragnizationSize")}
                aria-label="Default select example"
              >
                <option value="">Number of Employees</option>
                <option value="1-10">1-10</option>
                <option value="10-50">10-50</option>
                <option value="50-100">50-100</option>
                <option value="100-200">100-200</option>
                <option value="more than 200">more than 200</option>
              </select>
              {errors.oragnizationSize && (
                <div
                  className="danger-text text-start"
                  style={{ fontSize: "12px" }}
                >
                  {errors.oragnizationSize.message}
                </div>
              )}
            </div>
            <div className="mb-2 form-password-toggle text-start">
              <label className="form-label" htmlFor="industryId">
                Industry
              </label>
              <select
                className="form-select form-select-sm"
                id="industryId"
                name="industryId"
                {...register("industryId")}
                aria-label="Default select example"
              >
                <option value="">Select Industry</option>
                {industries.length > 0 ? (
                  industries.map((item) => (
                    <option value={item.id} key={item.id}>
                      {item.name}
                    </option>
                  ))
                ) : (
                  <option disabled>Loading industries...</option>
                )}
              </select>
              {errors.industryId && (
                <div
                  className="danger-text text-start"
                  style={{ fontSize: "12px" }}
                >
                  {errors.industryId.message}
                </div>
              )}
            </div>
            <div className="mb-2 text-start">
              <div className="form-check">
                <input
                  className="form-check-input"
                  type="checkbox"
                  id="terms-conditions"
                  name="terms"
                  {...register("terms")}
                />
                <label className="form-check-label" htmlFor="terms-conditions">
                  I agree to{" "}
                  <Link
                    to="/legal-info"
                    aria-label="privacy policy and terms"
                    className="text-decoration-underline"
                  >
                    privacy policy & terms
                  </Link>
                </label>
              </div>
              {errors.terms && (
                <div
                  className="danger-text text-start"
                  style={{ fontSize: "12px" }}
                >
                  {errors.terms.message}
                </div>
              )}
            </div>
            <button
              aria-label="Click me "
              className="btn btn-primary d-grid w-100"
            >
              {Loading ? "Please Wait..." : " Request Demo"}
            </button>
          </form>

          <p className="text-center">
            <span>Already have an account? </span>
            <Link
              aria-label="Go to Login Page"
              to="/auth/login"
              className="text-decoration-underline ms-1"
              disabled={Loading}
            >
              <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm me-1"></i>
              Back to login
            </Link>
          </p>
        </div>
      </div>
    </>
  );
};

export default RegisterPage;