"use client";

import { FormEvent, useState } from "react";
import { ArrowLeft } from "lucide-react";

export function ContactForm() {
  const [error, setError] = useState("");
  const [success, setSuccess] = useState("");
  const [sending, setSending] = useState(false);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const formElement = event.currentTarget;
    const form = new FormData(formElement);
    const name = String(form.get("name") ?? "").trim();
    const phone = String(form.get("phone") ?? "").trim();
    const subject = String(form.get("subject") ?? "").trim();
    const message = String(form.get("message") ?? "").trim();

    if (!name || !phone || !subject || !message) {
      setError("لطفا نام، شماره تماس، موضوع و متن پیام را کامل کنید.");
      return;
    }

    setError("");
    setSuccess("");
    setSending(true);

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: subject,
          name,
          cellNumber: phone,
          text: message,
        }),
      });
      if (!response.ok) throw new Error("Contact submission failed");
      formElement.reset();
      setSuccess("پیام شما با موفقیت ثبت شد. همکاران ما با شما تماس می‌گیرند.");
    } catch {
      setError("ارسال پیام انجام نشد. لطفا دوباره تلاش کنید.");
    } finally {
      setSending(false);
    }
  }

  return (
    <form className="contact-form" onSubmit={submit}>
      <div className="form-row">
        <label>
          <span>نام و نام خانوادگی</span>
          <input type="text" name="name" placeholder="نام شما" autoComplete="name" />
        </label>
        <label>
          <span>شماره تماس</span>
          <input type="tel" name="phone" placeholder="۰۹۱۲ ۱۲۳ ۴۵۶۷" inputMode="tel" autoComplete="tel" />
        </label>
      </div>
      <label>
        <span>موضوع</span>
        <input type="text" name="subject" placeholder="موضوع پیام" />
      </label>
      <label>
        <span>پیام شما</span>
        <textarea name="message" rows={6} placeholder="پیام خود را اینجا بنویسید..." />
      </label>
      {error && <p className="form-error" role="alert">{error}</p>}
      {success && <p className="form-success" role="status">{success}</p>}
      <button type="submit" className="primary-button" disabled={sending}>
        {sending ? "در حال ارسال..." : "ارسال پیام"}
        <ArrowLeft />
      </button>
    </form>
  );
}