"use client";

import React, { useState, useEffect } from "react";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";

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

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

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        const { name, value } = e.target;
        setFormData((prev) => ({ ...prev, [name]: value }));
    };

    const handleCaptchaChange = (token: string | null) => {
        setCaptchaToken(token);
    };

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

        const errors: any = {};
        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,
        };

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

            setAlert({
                show: true,
                type: "success",
                message: "Thank you! Your message has been 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 (
        <>
            <section className="contact-area section-space">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-5 col-md-12">
                            <div className="contact-info-wrapper">
                                <div className="sec-title-wrapper">
                                    <div className="sec-title">
                                        <div className="sec-title__shape"></div>
                                        <h6 className="sec-title__tagline">Let's Connect</h6>
                                        <h2 className="sec-title__title mb-15">Drop us a Line.</h2>
                                        <p>Whether you have a question, a project idea, or just want to chat about your digital needs, our team is here to listen and provide tailored solutions. Reach out to Metatroncube Software Solution and start your journey towards innovative digital success.</p>
                                    </div>
                                </div>
                                <div className="contact-info-list">
                                    <div className="contact-info-item d-flex align-items-center mb-30">
                                        <div className="icon">
                                            <i className="fa-solid fa-phone-volume"></i>
                                        </div>
                                        <div className="content">
                                            <span>Call Anytime</span>
                                            <h6><a href="tel:+16476797651">+1-647-679-7651</a></h6>
                                        </div>
                                    </div>
                                    <div className="contact-info-item d-flex align-items-center mb-30">
                                        <div className="icon">
                                            <i className="fa-solid fa-envelope"></i>
                                        </div>
                                        <div className="content">
                                            <span>Send Email</span>
                                            <h6><a href="mailto:info@metatroncubesolutions.com">info@metatroncubesolutions.com</a></h6>
                                        </div>
                                    </div>
                                    <div className="contact-info-item d-flex align-items-center">
                                        <div className="icon">
                                            <i className="fa-solid fa-location-dot"></i>
                                        </div>
                                        <div className="content">
                                            <span>Location</span>
                                            <h6>Waterloo, Ontario Canada</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="col-lg-7 col-md-12">
                            <div className="contact-form-wrapper bg-color-light p-relative">
                                <form className="contact-form" onSubmit={handleSubmit}>
                                    {alert.show && (
                                        <div className={`alert alert-${alert.type === 'danger' ? 'danger' : 'success'} mb-4`} style={{ padding: '15px', borderRadius: '12px' }}>
                                            {alert.message}
                                        </div>
                                    )}
                                    <div className="form-one__group">
                                        <div className="mb-20">
                                            <label className="form-label">Full Name</label>
                                            <input
                                                type="text"
                                                name="name"
                                                placeholder="Full Name"
                                                value={formData.name}
                                                onChange={handleChange}
                                            />
                                            {formErrors.name && <small className="text-danger">{formErrors.name}</small>}
                                        </div>
                                        <div className="mb-20">
                                            <label className="form-label">Email Address</label>
                                            <input
                                                type="email"
                                                name="email"
                                                placeholder="Email Address"
                                                value={formData.email}
                                                onChange={handleChange}
                                            />
                                            {formErrors.email && <small className="text-danger">{formErrors.email}</small>}
                                        </div>
                                        <div className="mb-20">
                                            <label className="form-label">Phone Number</label>
                                            <input
                                                type="tel"
                                                name="phone"
                                                placeholder="Phone Number"
                                                value={formData.phone}
                                                onChange={handleChange}
                                            />
                                            {formErrors.phone && <small className="text-danger">{formErrors.phone}</small>}
                                        </div>
                                        <div className="mb-20">
                                            <label className="form-label">Select Service</label>
                                            <select
                                                name="service"
                                                value={formData.service}
                                                onChange={handleChange}
                                                style={{
                                                    width: '100%',
                                                    padding: '18px 25px',
                                                    border: '1px solid #e2e8f0',
                                                    backgroundColor: '#fff',
                                                    borderRadius: '12px',
                                                    outline: 'none',
                                                    fontSize: '15px',
                                                    color: '#787878'
                                                }}
                                            >
                                                <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>
                                                <option value="ERP Development & Implementation">ERP Development & Implementation</option>
                                            </select>
                                            {formErrors.service && <small className="text-danger">{formErrors.service}</small>}
                                        </div>
                                        <div className="form-one__control--full mb-20">
                                            <label className="form-label">Write Message</label>
                                            <textarea
                                                name="message"
                                                placeholder="Write a Message"
                                                rows={5}
                                                value={formData.message}
                                                onChange={handleChange}
                                            ></textarea>
                                            {formErrors.message && <small className="text-danger">{formErrors.message}</small>}
                                        </div>

                                        <div className="form-one__control--full mb-4">
                                            <ReCAPTCHA
                                                sitekey="6LekfpwrAAAAAOTwuP1d2gg-Fv9UEsAjE2gjOQJl"
                                                onChange={handleCaptchaChange}
                                            />
                                            {formErrors.captcha && <small className="text-danger">{formErrors.captcha}</small>}
                                        </div>

                                        <div className="form-one__control--full">
                                            <button type="submit" className="submit-btn-custom-global">
                                                SEND A MESSAGE
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    );
};

export default ContactSection;