"use client";

import { useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    setStatus("");
    setIsSubmitting(true);

    const form = event.currentTarget;
    const formData = new FormData(form);
    const payload = {
      name: formData.get("name"),
      cellNumber: formData.get("cellNumber"),
      title: formData.get("title"),
      text: formData.get("text")
    };

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });
      if (!response.ok) throw new Error("submit failed");
      form.reset();
      setStatus("پیام شما با موفقیت ثبت شد. کارشناسان ما با شما تماس می گیرند.");
    } catch {
      setStatus("ارسال پیام با مشکل روبرو شد. لطفا دوباره تلاش کنید یا با شماره های شرکت تماس بگیرید.");
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <form className="contact-form" onSubmit={handleSubmit}>
      <label>
        نام و نام خانوادگی
        <input name="name" type="text" required />
      </label>
      <label>
        شماره تماس
        <input name="cellNumber" type="tel" required />
      </label>
      <label>
        موضوع
        <input name="title" type="text" required />
      </label>
      <label>
        پیام
        <textarea name="text" rows="5" required />
      </label>
      <button type="submit" disabled={isSubmitting}>{isSubmitting ? "در حال ارسال..." : "ارسال درخواست"}</button>
      {status ? <p className="form-status" role="status">{status}</p> : null}
    </form>
  );
}