import FadeInStagger from "@/components/FadeInStagger";
import { useRouter } from "next/router";
import React from "react";
import { Col, Container, Row } from "react-bootstrap";
import axios from "axios";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "@hookform/resolvers/yup";
export const Contact = () => {
  /* ---------------- VALIDATION SCHEMA ---------------- */
  const schema = yup.object({
    name: yup.string().required("Full name is required"),

    email: yup
      .string()
      .email("Enter a valid email address")
      .required("Email is required"),

    phone: yup
      .string()
      .matches(/^[0-9]{10}$/, "Phone number must be 10 digits")
      .required("Phone number is required"),

    message: yup.string().required("Message is required"),

    consent: yup.boolean().oneOf([true], "You must accept the terms"),
  });

  const router = useRouter();

  const {
    register,
    handleSubmit,
    watch,
    formState: { errors, isSubmitting, isValid },
    reset,
  } = useForm({
    resolver: yupResolver(schema),
    mode: "onChange", // important for button enable/disable
  });

  const onSubmit = async (data) => {
    try {
      const payload = {
        data: {
          // FormSource: "Contact Form",
          Name: data.name,
          Email: data.email,
          MobileNumber: data.phone,
          Message: data.message,
        },
      };

      await axios.post(
        `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/website-leads`,
        payload,
      );

      reset();
      router.push("/thankyou");
    } catch (error) {
      console.error(error);
      alert("Failed to submit form. Please try again.");
    }
  };
  return (
    <>
      <section className="contact_sec">
        <Container className="custom_container">
          <Row className="justify-content-end">
            <Col md={4}>
              <div className="">
                <FadeInStagger direction="top">
                  <h2 className="heading">Let’s Connect</h2>
                  <p>Create your Dream space together, Visit Us Today!</p>
                </FadeInStagger>
                <form
                  className="let-connect-form"
                  onSubmit={handleSubmit(onSubmit)}
                  noValidate
                >
                  <Row>
                    <Col md={6} className="mb-3">
                      <div className="mb-1">Name</div>
                      <div>
                        <input
                          type="text"
                          placeholder="Type here"
                          name="name"
                          className="inputField nameInput"
                          {...register("name")}
                        />
                        {errors.name && (
                          <p className="error">{errors.name.message}</p>
                        )}
                      </div>
                    </Col>
                    <Col md={6} className="mb-3">
                      <div className="mb-1">Mobile Number</div>
                      <div>
                        <input
                          type="text"
                          placeholder="Type here"
                          name="Mobile Number"
                          className="inputField nameInput"
                          {...register("phone")}
                        />
                        {errors.phone && (
                          <p className="error">{errors.phone.message}</p>
                        )}
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col md={12} className="mb-3">
                      <div className="mb-1">Email Address</div>
                      <div>
                        <input
                          type="text"
                          placeholder="Type here"
                          name="Email Address"
                          className="inputField nameInput"
                          {...register("email")}
                        />
                        {errors.email && (
                          <p className="error">{errors.email.message}</p>
                        )}
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col md={12} className="mb-3">
                      <div className="mb-1">Message</div>
                      <div>
                        <textarea
                          rows="4"
                          type="text"
                          placeholder="Type here"
                          name="name"
                          className="inputField nameInput"
                          {...register("message")}
                        />
                        {errors.message && (
                          <p className="error">{errors.message.message}</p>
                        )}
                      </div>
                    </Col>
                  </Row>
                  <Row>
                    <Col className="mb-3">
                      <div className="form-check">
                        <input
                          className="form-check-input"
                          type="checkbox"
                          id="checkChecked"
                          {...register("consent")}
                        />
                        <label
                          className="form-check-label"
                          htmlFor="checkChecked"
                        >
                          I accept the processing of my personal data for
                          traditional and automated direct marketing purposes.
                        </label>
                      </div>
                      {errors.consent && (
                        <p className="error">{errors.consent.message}</p>
                      )}
                    </Col>
                  </Row>
                  <Row>
                    <Col className="mb-3">
                      <div className="d-flex gap-3">
                        <button
                          type="submit"
                          className="btn3"
                          disabled={!watch("consent") || isSubmitting}
                        >
                          {isSubmitting ? "Submitting..." : "Submit"} <i className="fa-solid fa-arrow-right"></i>
                        </button>
                      </div>
                    </Col>
                  </Row>
                </form>
              </div>
            </Col>
          </Row>
        </Container>
      </section>
    </>
  );
};