"use client";

import React, { useState } from "react";
import Image from "next/image";
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;

    setFormData((prevFormData) => {
      let updatedValue = value.replace(/<[^>]*>/g, "");

      if (name === "name") {
        updatedValue = value.replace(/[0-9]/g, "");
      }

      // Format phone number (e.g., add +91)
      if (name === "phone") {
        updatedValue = value.replace(/[^\d+]/g, "");
      }

      // Clear the corresponding error if the field becomes valid
      setErrors((prevErrors) => ({
        ...prevErrors,
        [name]: "", // Clear the error
      }));

      return {
        ...prevFormData,
        [name]: updatedValue,
      };
    });
  };

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

    if (!formData.name.trim()) {
      newErrors.name = "Name is required.";
    } else if (/\d/.test(formData.name)) {
      newErrors.name = "Name cannot contain numbers.";
    }
    if (!formData.email.trim()) {
      newErrors.email = "Email is required.";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Email is invalid.";
    }
    if (!formData.phone.trim()) newErrors.phone = "Phone is required.";
    if (!formData.subject.trim()) newErrors.subject = "Subject is required.";
    if (!formData.message.trim()) newErrors.message = "Message is required.";
    if (!formData.captchaToken) newErrors.captchaToken = "Please complete the reCAPTCHA.";

    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('/api/send-email', {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      const result = await response.json();

      if (result.status === "success") {
        setResponse(result);
        setFormData({
          name: "",
          email: "",
          phone: "",
          subject: "",
          message: "",
          captchaToken: null,
        });
        setTimeout(() => {
          setResponse(null);
        }, 2000);
      } else {
        setResponse(result);
      }
    } catch (error) {
      setResponse({ status: "fail", message: "Something went wrong. Please try again." });
    } 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>
          <p>Your email address will not be published. Required fields are marked *</p>
        </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}>
                <div className="form-group">
                  <input
                    type="text"
                    name="name"
                    placeholder="Name"
                    className="form-control"
                    value={formData.name}
                    onChange={handleChange}
                  />
                  {errors.name && <p className="error">{errors.name}</p>}
                </div>

                <div className="form-group">
                  <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    className="form-control"
                    value={formData.email}
                    onChange={handleChange}
                  />
                  {errors.email && <p className="error">{errors.email}</p>}
                </div>

                <div className="form-group">
                  <input
                    type="tel"
                    name="phone"
                    placeholder="Phone number"
                    className="form-control"
                    value={formData.phone}
                    onChange={handleChange}
                    maxLength={10}
                  />
                  {errors.phone && <p className="error">{errors.phone}</p>}
                </div>

                <div className="form-group">
                  <input
                    type="text"
                    name="subject"
                    placeholder="Subject"
                    className="form-control"
                    value={formData.subject}
                    onChange={handleChange}
                  />
                  {errors.subject && <p className="error">{errors.subject}</p>}
                </div>

                <div className="form-group">
                  <textarea
                    name="message"
                    cols={30}
                    rows={6}
                    placeholder="Write your message..."
                    className="form-control"
                    value={formData.message}
                    onChange={handleChange}
                  />
                  {errors.message && <p className="error">{errors.message}</p>}
                </div>

                <div className="form-group">
                  <ReCAPTCHA
                    sitekey={process.env.NEXT_PUBLIC_New_RECAPTCHA_SITE_KEY!}
                    onChange={handleCaptchaChange}
                  />
                  {errors.captchaToken && <p className="error">{errors.captchaToken}</p>}
                </div>

                <button type="submit" className="default-btn">
                  {loading ? "Submitting..." : "Send Message"}
                </button>
              </form>
              {response && (
                <p className={response.status === "success" ? "success" : "error"}>
                  {response.message}
                </p>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ContactForm;