"use client";
import { useState } from "react";
import { URL } from "./url";

export default function EnquiryModal({ property }) {
  const [isOpen, setIsOpen] = useState(false);
  const [form, setForm] = useState({
    name: "",
    email: "",
    phone: "",
    address: "",
    message: "",
  });

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch(
        URL?.API_BASE_URL + "/publicApi/emailenquirysubmit",
        {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ ...form, productId: property._id }),
        }
      );

      if (res.ok) {
        alert("Enquiry submitted successfully!");
        setIsOpen(false);
        setForm({ name: "", address: "", email: "", phone: "", message: "" });
      } else {
        alert("Something went wrong");
      }
    } catch (err) {
      console.error(err);
      alert("Server error");
    }
  };

  return (
    <div>
      <button
        onClick={() => setIsOpen(true)}
        className="text-sm text-white bg-green-600 hover:bg-green-700 px-3 py-1.5 rounded-lg"
      >
        Enquire
      </button>

      {isOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-6 rounded-2xl w-full max-w-md relative">
            <button
              onClick={() => setIsOpen(false)}
              className="absolute top-3 right-3 text-gray-600 hover:text-red-500"
            >
              ✕
            </button>

            <h2 className="text-xl font-bold mb-4">
              Enquiry for {property.title}
            </h2>

            <form onSubmit={handleSubmit} className="space-y-3">
              <input
                type="text"
                name="name"
                value={form.name}
                onChange={handleChange}
                placeholder="Your Name"
                required
                className="w-full border px-3 py-2 rounded-lg"
              />
              <input
                type="email"
                name="email"
                value={form.email}
                onChange={handleChange}
                placeholder="Your Email"
                required
                className="w-full border px-3 py-2 rounded-lg"
              />
              <input
                type="tel"
                name="phone"
                value={form.phone}
                onChange={handleChange}
                placeholder="Your Phone"
                required
                className="w-full border px-3 py-2 rounded-lg"
              />
              <textarea
                name="address"
                value={form.address}
                onChange={handleChange}
                placeholder="Your address"
                className="w-full border px-3 py-2 rounded-lg"
              />
              <textarea
                name="message"
                value={form.message}
                onChange={handleChange}
                placeholder="Your Message"
                className="w-full border px-3 py-2 rounded-lg"
              />

              <button
                type="submit"
                className="w-full bg-green-600 text-white py-2 rounded-lg"
              >
                Submit Enquiry
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}
