"use client";

import React, { useState } from "react";
import Image from "next/image";
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
import Alert from 'react-bootstrap/Alert';
import ReCAPTCHA from "react-google-recaptcha";
import ListGroup from 'react-bootstrap/ListGroup';

interface FormValues {
  name: string;
  email: string;
  phone: string;
  subject: string;
  message: string;
  captchaToken: string | null;
}

const ContactForm: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [response, setResponse] = useState<{ status: string; message: string } | null>(null);
  const [formData, setFormData] = useState<FormValues>({
    name: "",
    email: "",
    phone: "",
    subject: "",
    message: "",
    captchaToken: null,
  });
  const [errors, setErrors] = useState<Partial<FormValues>>({});

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
  
    let updatedValue = value.replace(/<[^>]*>/g, "");
  
    if (name === "name") {
      updatedValue = updatedValue.replace(/[0-9]/g, "");
    }
  
    if (name === "phone") {
      updatedValue = updatedValue.replace(/[^\d+]/g, "");
    }
  
    updatedValue = updatedValue.trimStart();
  
    setFormData((prevFormData) => ({
      ...prevFormData,
      [name]: updatedValue,
    }));
  
    setErrors((prevErrors) => ({
      ...prevErrors,
      [name]: "", // Clear the error
    }));
  };

  const handlelabel = (event: React.FormEvent<HTMLInputElement>) => {
    const inputElement = event.currentTarget;
    const fieldName = inputElement.getAttribute("name");
    const labelElement = document.querySelector(`label[data-name="${fieldName}"]`);
    if(labelElement){
      if(inputElement.value !== '') {
        labelElement?.classList.add('label-view');
      } else {
        labelElement?.classList.remove('label-view');
      }
    }
  }
  

  const handleCaptchaChange = (token: string | null) => {
    setFormData((prevFormData) => ({
      ...prevFormData,
      captchaToken: token,
    }));
    setErrors((prevErrors) => ({
      ...prevErrors,
      captchaToken: "", // Clear the error
    }));
    setResponse(null);
  };

  const validateForm = (): boolean => {
    const newErrors: Partial<FormValues> = {};
    var pattern = /^[56789]\d{14}$/;

    setFormData((prevFormData) => ({
      ...prevFormData,
      name: prevFormData.name.trim(),
      email: prevFormData.email.trim(),
      phone: prevFormData.phone.trim(),
      subject: prevFormData.subject.trim(),
      message: prevFormData.message.trim(),
    }));

    if (!formData.name.trim()) {
      newErrors.name = "Please Enter Your Name.";
    } else if (/\d/.test(formData.name)) {
      newErrors.name = "Name cannot contain numbers.";
    }
    if (!formData.email.trim()) {
      newErrors.email = "Please Enter Your Email.";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid.";
    }
    // if (!formData.phone.trim()) {
    //   newErrors.phone = "Please Enter Your Phone.";
    // } else if(formData.phone.length < 15){
    //   newErrors.phone = "Invalid phone number. Please enter a 15 digit number.";
    // } else if(!pattern.test(formData.phone)) {
    //   newErrors.phone = "Invalid mobile number! It must start with 5, 6, 7, 8, or 9.";
    // }
    if (!formData.subject.trim()) {
      newErrors.subject = "Please Enter Your Subject.";
    }
    if (!formData.message.trim()) {
      newErrors.message = "Please Enter Your Message.";
    }
    if (!formData.captchaToken) newErrors.captchaToken = "Please Validate the Captcha.";

    setErrors(newErrors);

    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    if (!validateForm()) {
      return; // Stop submission if validation fails
    }

    setLoading(true);

    try {
      const response = await fetch(process.env.NEXT_PUBLIC_CONTACT_API!, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      const result = await response.json();

      if (result.status === "true") {
        setResponse(result);
        setFormData({
          name: "",
          email: "",
          phone: "",
          subject: "",
          message: "",
          captchaToken: null,
        });

        setTimeout(() => {
          setResponse(null);
        }, 5000);
        const items = document.querySelectorAll('.form-field .form-label');
        items.forEach((item) => {
          if (item.classList.contains('label-view')) {
            item.classList.remove('label-view');
          }
        });
      } else {
        setResponse(result);
        setTimeout(() => {
          setResponse(null);
        }, 5000)
      }
    } catch (error) {
      setResponse({ status: "fail", message: "Something went wrong. Please try again." });
      setTimeout(() => {
        setResponse(null);
      },5000)
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="contact-area pb-100">
      <div className="container">
        <div className="section-title">
          <span className="sub-title">
            <Image src="/img/star-icon.png" alt="image" width={32} height={34} />
            Get in Touch
          </span>
          <h2>Ready to Get Started?</h2>
        </div>
        <div className="row align-items-center">
          <div className="col-lg-6 col-md-12">
            <div className="contact-image">
              <Image src="/img/contact.png" alt="image" width={750} height={620} />
            </div>
          </div>

          <div className="col-lg-6 col-md-12">
            <div className="contact-form">
              <Form onSubmit={handleSubmit} autoComplete="off" className="form-container">
                <Form.Group className="mb-3 contact_name_field">
                  <ListGroup.Item className={`form-field ${errors.name ? "is-invalid" : ""}`}>
                    <Form.Label data-name="name">Name</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder=""
                      value={formData.name}
                      onChange={handleChange}
                      onInput={handlelabel}
                      name="name"
                      autoComplete="off"
                    />
                  </ListGroup.Item>
                  <Form.Control.Feedback type="invalid">
                    {errors.name}
                  </Form.Control.Feedback>
                </Form.Group>

                <Form.Group className="mb-3">
                  <ListGroup.Item className={`form-field ${errors.email ? "is-invalid" : ""}`}>
                    <Form.Label data-name="email">Email</Form.Label>
                      <Form.Control
                        type="text"
                        placeholder=""
                        value={formData.email}
                        onChange={handleChange}
                        onInput={handlelabel}
                        name="email"
                        autoComplete="off"
                      />
                    </ListGroup.Item>
                  <Form.Control.Feedback type="invalid">{errors.email}</Form.Control.Feedback>
                </Form.Group>
                <Form.Group className="mb-3">
                  {/* <ListGroup.Item className={`form-field ${errors.phone ? "is-invalid" : "" }`}>
                    <Form.Label data-name="phone">Phone number</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder=""
                      value={formData.phone}
                      onChange={handleChange}
                      onInput={handlelabel}
                      maxLength={15}
                      name="phone"
                      autoComplete="off"
                    />
                  </ListGroup.Item> */}
                  <ListGroup.Item className="form-field">
                    <Form.Label data-name="phone">Phone number</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder=""
                      value={formData.phone}
                      onChange={handleChange}
                      onInput={handlelabel}
                      maxLength={15}
                      name="phone"
                      autoComplete="off"
                    />
                  </ListGroup.Item>
                  {/* <Form.Control.Feedback type="invalid">{errors.phone}</Form.Control.Feedback> */}
                </Form.Group>
                <Form.Group className="mb-3">
                  <ListGroup.Item className={`form-field ${errors.subject ? "is-invalid" : ""}`}>
                    <Form.Label data-name="subject">Subject</Form.Label>
                    <Form.Control
                      type="text"
                      placeholder=""
                      value={formData.subject}
                      onChange={handleChange}
                      onInput={handlelabel}
                      name="subject"
                      autoComplete="off"
                    />
                  </ListGroup.Item>
                  <Form.Control.Feedback type="invalid">{errors.subject}</Form.Control.Feedback>
                </Form.Group>
                <Form.Group className="mb-3">
                  <ListGroup.Item className={`form-field ${errors.message ? "is-invalid" : ""}`}>
                    <Form.Label data-name="message">Message</Form.Label>
                      <Form.Control
                        as="textarea"
                        placeholder=""
                        value={formData.message}
                        onChange={handleChange}
                        onInput={handlelabel}
                        name="message"
                        autoComplete="off"
                      />
                    </ListGroup.Item>
                  <Form.Control.Feedback type="invalid">{errors.message}</Form.Control.Feedback>
                </Form.Group>
                <Form.Group className="captcha mb-3">
                  <ReCAPTCHA
                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
                    onChange={handleCaptchaChange}
                  />
                  {errors.captchaToken ? (
                    <Form.Control.Feedback type="invalid">
                      {errors.captchaToken}
                    </Form.Control.Feedback>
                  ) : null}
                </Form.Group>
                <Button variant="primary" type="submit" className={`${loading ? "default-btn loading" : "default-btn"}`}>
                  {loading ? "Submitting..." : "Send Message"}
                  <span></span>
                </Button>
              </Form>
              {response && (
                response.status === "true" ? (
                  <Alert variant="success" className="mt-3 mb-0">
                    {response.message}
                  </Alert>
                ) : (
                  <Alert variant="danger" className="mt-3 mb-0">
                    {response.message}
                  </Alert>
                )
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactForm;