"use client";

import { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import SubCard from "@/src/components/AboveFooter";
import Contacts from "@/src/components/services-details-banner/contacts.js";
import ConsenHead from "@/src/ConsenHead";
import Layout from "@/src/layout/Layout";

const Contact = () => {
  const [formData, setFormData] = useState({
    name: "",
    phone: "",
    email: "",
    service: "",
    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.phone.trim()) errors.phone = "Phone is required.";
    if (!formData.email.trim()) errors.email = "Email is required.";
    if (!formData.service.trim()) errors.service = "Please select a service.";
    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 = {
      ...formData,
      message: `Service: ${formData.service}<br /><br />Message: ${formData.message}`,
      to: "info@metatroncubesolutions.com",
      senderName: "Metatroncube Contact Page",
      recaptchaToken: captchaToken,
    };

    // console.log("🚀 Submitting 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: "",
        phone: "",
        email: "",
        service: "",
        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 (
    <>
      <ConsenHead
        title="Contact - Metatroncube Software Solutions | Innovative & User-Centric Tech Services in Waterloo"
        description="Let's Connect. Drop us a Line. Whether you have a question, a project idea, or just want to chat, we're here for you."
      />
      <Layout>
        <Contacts pageName="CONTACT US" />

        <div className="contact-us">
          <div className="container">
            <div className="row">
              <div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0">
                <div className="contact_from_box">
                  <div className="contact_title pb-4">
                    <h3>Get In Touch with us</h3>
                  </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="Full 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">
                           <select
                        name="service"
                        value={formData.service}
                        onChange={handleChange}
                        className="form-control"
                      >
                        <option value="">Select Service</option>
                        <option value="Website Development">Website Development</option>
                        <option value="Mobile Application Development">Mobile Application Development</option>
                        <option value="Graphic Designing">Graphic Designing</option>
                        <option value="UI / UX Designing ">UI / UX Designing </option>
                        <option value="SEO & Content Writing">SEO & Content Writing</option>
                        <option value="Digital Marketing">Digital Marketing</option>
                      </select>
                          {formErrors.service && (
                            <small className="text-danger">{formErrors.service}</small>
                          )}
                        </div>
                      </div>

                      <div className="col-lg-12">
                        <div className="form_box mb-30">
                          <textarea
                            name="message"
                            placeholder="Write 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>

              <div className="col-sm-12 col-md-6 col-lg-6 pl-0 pr-0 contact-box">
                <div className="cda-content-area">
                  <div className="cda-single-content d-flex">
                    <div className="cda-content-inner">
                      <h4 className="mid-container">Say Hello to Us</h4>
                      <h1>We’re just a message away.</h1>
                    </div>
                  </div>
                  <div className="cda-single-content hr d-flex">
                    <div className="cda-content-inner">
                      <p>
                        Have a question, an idea, or a project in mind? At <b>MetatronCube India</b>, we’re always excited to hear from you. Whether you want to discuss your digital goals, need expert guidance, or are ready to start building something amazing, our team is here to listen and provide tailored solutions.
                        <br/>Reach out to us today and take the first step toward your next digital success story.
                      </p>
                    </div>
                  </div>
                  <div className="cda-single-content hr d-flex">
                    <div className="cda-content-inner">
                      <h4>Our Email Address</h4>
                      <p>info@metatroncubesolutions.in</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="sub color-bg">
          <div className="container">
            <SubCard />
          </div>
        </div>
      </Layout>
    </>
  );
};

export default Contact;