"use client";

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

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> = {};

    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.";
    } 
    if (!formData.email.trim()) {
      newErrors.email = "Please Enter Your Email";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Please enter a valid email address";
    }
    if (!formData.phone.trim()) {
      newErrors.phone = "Please Enter Your Phone Number";
    } else if(formData.phone.length < 10){
      newErrors.phone = "Please Enter up to 10 digits";
    } 
    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.REACT_APP_CONTACT_HIRE_DEVELOPER_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 (
    <>
      <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"
              isInvalid={!!errors.name}
            />
          </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"
                isInvalid={!!errors.email}
              />
            </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 ${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}
              name="phone"
              autoComplete="off"
              isInvalid={!!errors.phone}
            />
          </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"
              isInvalid={!!errors.subject}
            />
          </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"
                isInvalid={!!errors.message}
              />
            </ListGroup.Item>
          <Form.Control.Feedback type="invalid">{errors.message}</Form.Control.Feedback>
        </Form.Group>
        <Form.Group className="captcha mb-3">
          <ListGroup.Item className={`form-field ${errors.message ? "is-invalid" : ""}`}>
            <ReCAPTCHA
                    sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY!}
                    onChange={handleCaptchaChange}
            />
          </ListGroup.Item>
          {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-style border-0" : "default-btn default-btn-style border-0"}`}>
          {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>
        )
      )}
    </>
  );
};

export default ContactForm;