"use client";
import React, { useState } from "react";
import axios from "axios";
import toast, { Toaster } from "react-hot-toast";
import { FaPaperPlane } from "react-icons/fa";
import useFetch from "@/app/hooks/useFetch";
const BASE_URL_API = process.env.NEXT_PUBLIC_BASE_URL_API;
import { MdKeyboardArrowDown } from "react-icons/md";

const Form = () => {

    const service = useFetch("product/all-product");
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [formData, setFormData] = useState({
        name: "",
        email: "",
        phone: "",
        address: "",
        queryFor: "",
        message: "",
        currentUrl:
            typeof window !== "undefined" ? window.location.href : "",
    });

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

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

        setIsSubmitting(true);

        try {
            // 1st API
            // const res = await axios.post(
            //     `${BASE_URL_API}inquery/create`,
            //     formData,
            //     {
            //         headers: { "Content-Type": "application/json" },
            //     }
            // );

            // 2nd API (lead api)
            // await axios.post(
            //     `https://api-lead.instavyapar.co.in/api/inquery/create`,
            //     { ...formData, userId: "69a1446d82a336305b358f5d" },
            //     {
            //         headers: {
            //             "Content-Type": "application/json",
            //             Accept: "application/json",
            //         },
            //     }
            // );

            if (res.data.success) {
                toast.success("Message sent successfully!");
                setFormData({
                    name: "",
                    email: "",
                    phone: "",
                    address: "",
                    queryFor: "",
                    message: "",
                    currentUrl:
                        typeof window !== "undefined" ? window.location.href : "",
                });
            } else {
                toast.error(res.data.message || "Failed to send message");
            }
        } catch (err) {
            console.log(err);
            toast.error(err.response.data.message || "Something went wrong!");
        } finally {
            setIsSubmitting(false);
        }
    };

    return (
        <form onSubmit={handleSubmit} className="mt-4 lg:grid flex flex-wrap lg:grid-cols-2 grid-cols-1 gap-4">

            <input
                type="text"
                name="name"
                placeholder="Name *"
                value={formData.name}
                onChange={handleChange}
                className="w-full block border border-gray-300 py-3 px-4 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-700"
            />

            <input
                type="email"
                name="email"
                placeholder="Email"
                value={formData.email}
                onChange={handleChange}
                className="w-full block border border-gray-300 py-3 px-4 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-700"
            />

            <input
                type="text"
                name="phone"
                placeholder="Phone *"
                required
                value={formData.phone}
                onChange={handleChange}
                className="w-full block border border-gray-300 py-3 px-4 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-700"
            />

            <div className="relative w-full">
                <select
                    name="queryFor"
                    value={formData.queryFor}
                    onChange={handleChange}
                    className="w-full block border border-gray-300 py-3 px-4 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-700 appearance-none pr-12"
                >
                    <option>Select Product *</option>
                    {service?.data?.map((value, index) => (
                        <option key={index} value={value.name}>
                            {value.name}
                        </option>
                    ))}
                </select>

                {/* Custom Arrow */}
                <div className="pointer-events-none absolute top-1/2 right-[12px] transform -translate-y-1/2">
                    <MdKeyboardArrowDown />
                </div>
            </div>
            <input
                type="text"
                name="address"
                placeholder="Address"
                value={formData.address}
                onChange={handleChange}
                className="w-full block md:col-span-2 border border-gray-300 py-3 px-4 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-700"
            />

            <textarea
                name="message"
                value={formData.message}
                onChange={handleChange}
                placeholder="Message"
                className="col-span-2 w-full border border-gray-300 py-3 px-4 rounded-lg bg-gray-50 focus:outline-none focus:ring-2 focus:ring-green-700 h-[120px] resize-none"
            ></textarea>

            <button
                disabled={isSubmitting}
                className="md:col-span-2 bg-green-700 text-white px-6 py-3 rounded-full cursor-pointer flex items-center justify-center gap-2 hover:bg-green-600 transition"
            >
                {isSubmitting ? "Sending..." : "Submit Now"}
                <FaPaperPlane />
            </button>

        </form>
    )
}

export default Form
