"use client";
import React, { useState } from "react";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";

export default function ReportContent() {
    const [formData, setFormData] = useState({
        name: "",
        emailAddress: "",
        phoneNumber: "",
        subject: "",
        message: "",
        checkbox: false,
    });

    const handleChange = (e) => {
        const { name, value, type, checked } = e.target;
        setFormData((prevState) => ({
            ...prevState,
            [name]: type === "checkbox" ? checked : value,
        }));
    };

    const handlePhoneChange = (value) => {
        setFormData((prevState) => ({
            ...prevState,
            phoneNumber: value,
        }));
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await fetch("/api/contact-send", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                alert("Form submitted successfully!");
                document.cookie = `prospectClient=true; path=/; max-age=31536000`;
            } else {
                throw new Error("Form submission failed");
            }
        } catch (error) {
            console.error("Error:", error);
            alert("An error occurred while submitting the form.");
        }
    };

    return (
        <div className="contact__form-wrap">
            <h2 className="title">Get In Touch</h2>
            <form id="contact-form" onSubmit={handleSubmit}>
                <div className="row">
                    <div className="col-md-6">
                        <div className="form-grp">
                            <input
                                type="text"
                                name="name"
                                placeholder="Your Name"
                                value={formData.name}
                                onChange={handleChange}
                                required
                            />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="form-grp">
                            <input
                                type="text"
                                name="emailAddress"
                                placeholder="Email Address"
                                value={formData.emailAddress}
                                onChange={handleChange}
                                required
                            />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="form-grp">
                            <PhoneInput
                                international
                                defaultCountry="US"
                                value={formData.phoneNumber}
                                onChange={handlePhoneChange}
                            />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="form-grp">
                            <input
                                type="text"
                                name="subject"
                                placeholder="Subject"
                                value={formData.subject}
                                onChange={handleChange}
                                required
                            />
                        </div>
                    </div>
                </div>
                <div className="form-grp">
                    <textarea
                        name="message"
                        placeholder="Write Message"
                        value={formData.message}
                        onChange={handleChange}
                        required
                    />
                </div>
                <div className="form-grp checkbox-grp">
                    <input
                        type="checkbox"
                        name="checkbox"
                        id="checkbox"
                        checked={formData.checkbox}
                        onChange={handleChange}
                    />
                    <label htmlFor="checkbox">Save my name, email and phone number for future messages</label>
                </div>
                <button type="submit" className="btn">
                    Submit Request
                </button>
            </form>
            <p className="ajax-response mb-0" />
        </div>
    );
}