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

export default function Schedule({ onFormSubmit }) {
    const [formData, setFormData] = useState({
        firstName: "",
        lastName: "",
        emailAddress: "",
        phoneNumber: "",
        companyName: "",
        websiteUrl: "",
        annualRevenue: "",
        learnFrom: "",
        additionalInfo: "",
        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/schedule-send", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
            });

            if (response.ok) {
                document.cookie = `prospectClient=true; path=/; max-age=31536000`;
                onFormSubmit();
            } 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">
            <form id="contact-form" onSubmit={handleSubmit}>
                <div className="row">
                    <div className="col-md-6">
                        <div className="form-grp">
                            <input
                                type="text"
                                name="firstName"
                                placeholder="First Name"
                                value={formData.firstName}
                                onChange={handleChange}
                                required
                            />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="form-grp">
                            <input
                                type="text"
                                name="lastName"
                                placeholder="Last Name"
                                value={formData.lastName}
                                onChange={handleChange}
                            />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="form-grp">
                            <input
                                type="email"
                                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="companyName"
                                placeholder="Company Name"
                                value={formData.companyName}
                                onChange={handleChange}
                                required
                            />
                        </div>
                    </div>
                    <div className="col-md-6">
                        <div className="form-grp">
                            <input
                                type="text"
                                name="websiteUrl"
                                placeholder="Website URL"
                                value={formData.websiteUrl}
                                onChange={handleChange}
                            />
                        </div>
                    </div>
                </div>
                <div className="form-grp">
                    <h6>Estimated Annual Revenue*</h6>
                    <select
                        className="form-select"
                        name="annualRevenue"
                        value={formData.annualRevenue}
                        onChange={handleChange}
                        required
                    >
                        <option disabled selected value="" className="display-none">
                            Select an option
                        </option>
                        <option value="250K Less">Less than $250K a year</option>
                        <option value="250K-500K">$250K - $500K a year</option>
                        <option value="500K-1M">$500K - $1M a year</option>
                        <option value="1M More">$1M a year or more</option>
                    </select>
                </div>
                <div className="form-grp">
                    <h6>How Did You Learn About RankRunners?*</h6>
                    <select
                        className="form-select"
                        name="learnFrom"
                        required
                        value={formData.learnFrom}
                        onChange={handleChange}
                    >
                        <option disabled selected value="" className="display-none">
                            Select an option
                        </option>
                        <option value="Instagram">Instagram</option>
                        <option value="Facebook">Facebook</option>
                        <option value="LinkedIn">LinkedIn</option>
                        <option value="Google Search">Google Search</option>
                        <option value="Phone Call">Phone Call</option>
                        <option value="Email">Email</option>
                        <option value="Podcast / Webinar">Podcast / Webinar</option>
                        <option value="Networking Event">Networking Event</option>
                        <option value="Referral">Referral</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div className="form-grp">
                    <textarea
                        name="additionalInfo"
                        placeholder="Additional Information"
                        value={formData.additionalInfo}
                        onChange={handleChange}
                    />
                </div>
                <div className="form-grp checkbox-grp">
                    <input
                        type="checkbox"
                        name="checkbox"
                        id="checkbox"
                        checked={formData.checkbox}
                        onChange={handleChange}
                        required
                    />
                    <label htmlFor="checkbox">
                        I'm serious about growing my business and understand services start at $1,500
                    </label>
                </div>
                <button type="submit" className="btn">
                    Submit Request
                </button>
            </form>
            <p className="ajax-response mb-0" />
        </div>
    );
}