"use client";

import { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import Link from "next/link";

const HomeContact = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    web: "",
    message: "",
  });

  const [formErrors, setFormErrors] = useState({});
  const [captchaToken, setCaptchaToken] = useState(null);
  const [alert, setAlert] = useState({ show: false, type: "", message: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleCaptchaChange = (token) => {
    console.log("✅ Captcha token:", token);
    setCaptchaToken(token);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const errors = {};
    if (!formData.name.trim()) errors.name = "Name is required.";
    if (!formData.email.trim()) errors.email = "Email is required.";
    if (!formData.phone.trim()) errors.phone = "Phone is required.";
    if (!formData.message.trim()) errors.message = "Message is required.";
    if (!captchaToken) errors.captcha = "Please verify the CAPTCHA.";

    setFormErrors(errors);
    if (Object.keys(errors).length > 0) return;

    const emailData = {
      name: formData.name,
      email: formData.email,
      phone: formData.phone,
      subject: formData.web || "Home Contact Form",
      message: `Website: ${formData.web}<br/><br/>Message: ${formData.message}`,
      to: "info@metatroncubesolutions.com",
      senderName: "Metatroncube Home Page",
      recaptchaToken: captchaToken,
    };

    console.log("🚀 Submitting home form data:", emailData);

    try {
      const res = await axios.post("https://mailserver.metatronnest.com/send", emailData, {
        headers: { "Content-Type": "application/json" },
      });

      setAlert({
        show: true,
        type: "success",
        message: res?.data?.message || "Message sent successfully!",
      });

      setFormData({
        name: "",
        email: "",
        phone: "",
        web: "",
        message: "",
      });
      setCaptchaToken(null);
      setFormErrors({});
    } catch (error) {
      console.error("❌ Error sending email:", error);
      setAlert({
        show: true,
        type: "danger",
        message: "Failed to send message. Please try again later.",
      });
    }
  };

  useEffect(() => {
    if (alert.show) {
      const timer = setTimeout(() => {
        setAlert((prev) => ({ ...prev, show: false }));
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, [alert.show]);

  return (
    <div className="contact-us pt-90 pb-90">
      <div className="container">
        <div className="row">
          {/* Left Side - Form */}
          <div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
            <div className="contact_from_box">
              <div className="consen-section-title pb-4">
                <h5>CONTACT US</h5>
                <h2>
                  Drop your message <span>here.</span>
                </h2>
              </div>

              {alert.show && (
                <div className={`alert alert-${alert.type}`}>{alert.message}</div>
              )}

              <form onSubmit={handleSubmit}>
                <div className="row">
                  <div className="col-lg-6">
                    <div className="form_box mb-30">
                      <input
                        type="text"
                        name="name"
                        placeholder="Name"
                        value={formData.name}
                        onChange={handleChange}
                      />
                      {formErrors.name && (
                        <small className="text-danger">{formErrors.name}</small>
                      )}
                    </div>
                  </div>

                  <div className="col-lg-6">
                    <div className="form_box mb-30">
                      <input
                        type="email"
                        name="email"
                        placeholder="Email Address"
                        value={formData.email}
                        onChange={handleChange}
                      />
                      {formErrors.email && (
                        <small className="text-danger">{formErrors.email}</small>
                      )}
                    </div>
                  </div>

                  <div className="col-lg-6">
                    <div className="form_box mb-30">
                      <input
                        type="text"
                        name="phone"
                        placeholder="Phone Number"
                        value={formData.phone}
                        onChange={handleChange}
                      />
                      {formErrors.phone && (
                        <small className="text-danger">{formErrors.phone}</small>
                      )}
                    </div>
                  </div>

                  <div className="col-lg-6">
                    <div className="form_box mb-30">
                      <input
                        type="text"
                        name="web"
                        placeholder="Website (Optional)"
                        value={formData.web}
                        onChange={handleChange}
                      />
                    </div>
                  </div>

                  <div className="col-lg-12">
                    <div className="form_box mb-30">
                      <textarea
                        name="message"
                        placeholder="Your Message"
                        value={formData.message}
                        onChange={handleChange}
                      />
                      {formErrors.message && (
                        <small className="text-danger">{formErrors.message}</small>
                      )}
                    </div>
                  </div>

                  <div className="col-lg-12 mb-3">
                    <ReCAPTCHA
                      sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
                      onChange={handleCaptchaChange}
                    />
                    {formErrors.captcha && (
                      <small className="text-danger">{formErrors.captcha}</small>
                    )}
                  </div>

                  <div className="col-lg-12">
                    <div className="quote_button">
                      <button className="btn" type="submit">
                        Send a Message
                      </button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>

          {/* Right Side - Info */}
          <div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
            <div className="cda-content-area">
              <div className="cda-single-content d-flex">
                <div className="cda-content-inner white">
                  <h2>Get In Touch</h2>
                  <p>
                    We’re here to simplify your digital journey. Share your project ideas, challenges, or questions, and our experts will guide you with the right solutions.
                  </p>

                  <h4 className="pt-4">Quick Response:</h4>
                  <p>Expect a personalized reply within one business day.</p>

                  <h4 className="pt-4">Expert Consultation:</h4>
                  <p>Get a free consultation to align your goals with our web, app, and marketing solutions.</p>

                  <h4 className="pt-4">Privacy Assured:</h4>
                  <p>Your data is safe with us. All details remain confidential and secure.</p>
                </div>
              </div>

              <div className="abouts-button pb-110" style={{ margin: "0 45px" }}>
                <div className="new-button d-flex justify-content-center">
                  <Link
                    legacyBehavior
                    href="https://www.trustpilot.com/review/metatroncubesolutions.com?utm_medium=trustbox&utm_source=TrustBoxReviewCollector"
                  >
                    <a>Review us on Trustpilot</a>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>  
    </div>
  );
};

export default HomeContact;