simode/src/components/ContactForm.tsx

"use client";

import { useState, type FormEvent } from "react";
import { submitContactForm } from "@/lib/api";
import { CheckIcon } from "./icons";

type Status = "idle" | "loading" | "success" | "error";

const inputClass =
  "w-full rounded-lg border border-line bg-surface px-4 h-11 text-sm outline-none focus:border-brand transition-colors";

export default function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const data = new FormData(form);

    const name = String(data.get("name") || "").trim();
    const title = String(data.get("title") || "").trim();
    const text = String(data.get("text") || "").trim();
    const email = String(data.get("email") || "").trim();
    const cellNumber = String(data.get("cellNumber") || "").trim();

    if (!name || !title || !text) return;

    setStatus("loading");
    try {
      await submitContactForm({
        name,
        title,
        text,
        email: email || undefined,
        cellNumber: cellNumber || undefined,
      });
      setStatus("success");
      form.reset();
    } catch {
      setStatus("error");
    }
  }

  if (status === "success") {
    return (
      <div className="rounded-xl border border-brand/30 bg-brand-light p-6 text-center">
        <span className="mx-auto flex items-center justify-center size-11 rounded-full bg-brand text-white mb-3">
          <CheckIcon className="size-5" />
        </span>
        <p className="text-sm font-bold text-brand">پیام شما با موفقیت ارسال شد.</p>
        <p className="mt-1 text-xs text-body">به‌زودی با شما تماس می‌گیریم.</p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div>
          <label htmlFor="name" className="block text-xs font-bold text-ink mb-1.5">
            نام و نام خانوادگی *
          </label>
          <input id="name" name="name" required className={inputClass} />
        </div>
        <div>
          <label htmlFor="title" className="block text-xs font-bold text-ink mb-1.5">
            موضوع *
          </label>
          <input id="title" name="title" required className={inputClass} />
        </div>
        <div>
          <label htmlFor="email" className="block text-xs font-bold text-ink mb-1.5">
            ایمیل
          </label>
          <input id="email" name="email" type="email" dir="ltr" className={inputClass} />
        </div>
        <div>
          <label htmlFor="cellNumber" className="block text-xs font-bold text-ink mb-1.5">
            شماره تماس
          </label>
          <input id="cellNumber" name="cellNumber" type="tel" dir="ltr" className={inputClass} />
        </div>
      </div>

      <div>
        <label htmlFor="text" className="block text-xs font-bold text-ink mb-1.5">
          متن پیام *
        </label>
        <textarea
          id="text"
          name="text"
          required
          rows={5}
          className={`${inputClass} h-auto py-3 resize-none`}
        />
      </div>

      {status === "error" && (
        <p className="text-xs text-red-600">ارسال پیام با خطا مواجه شد. لطفاً دوباره تلاش کنید.</p>
      )}

      <button
        type="submit"
        disabled={status === "loading"}
        className="w-full sm:w-auto flex items-center justify-center rounded-md bg-brand px-8 h-12 text-sm font-bold text-white hover:bg-brand-dark transition-colors disabled:opacity-60"
      >
        {status === "loading" ? "در حال ارسال..." : "ارسال پیام"}
      </button>
    </form>
  );
}