"use client";

import { useState } from "react";
import { submitContact } from "@/lib/meshkee/api";
import { useToast } from "@/app/providers/toast-provider";

export function ContactForm() {
  const { showToast } = useToast();
  const [name, setName] = useState("");
  const [cellNumber, setCellNumber] = useState("");
  const [text, setText] = useState("");
  const [successText, setSuccessText] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);

  async function onSubmit(event: React.FormEvent) {
    event.preventDefault();
    setSubmitting(true);
    setSuccessText(null);
    try {
      await submitContact({
        title: "تماس از وبسایت هومت",
        name: name.trim(),
        cellNumber: cellNumber.trim() || undefined,
        text: text.trim(),
      });
      setName("");
      setCellNumber("");
      setText("");
      setSuccessText("پیام شما با موفقیت ارسال شد. به زودی با شما تماس می‌گیریم.");
      showToast("پیام با موفقیت ارسال شد");
    } catch (error) {
      showToast(error instanceof Error ? error.message : "ارسال پیام ناموفق بود");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form className="form" onSubmit={(event) => void onSubmit(event)}>
      <input
        required
        aria-label="نام و نام خانوادگی"
        placeholder="نام و نام خانوادگی"
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <input
        aria-label="شماره تماس"
        placeholder="شماره تماس"
        className="ltr-number"
        dir="ltr"
        lang="en"
        value={cellNumber}
        onChange={(event) => setCellNumber(event.target.value)}
      />
      <textarea
        required
        aria-label="پیام"
        placeholder="پیام شما"
        value={text}
        onChange={(event) => setText(event.target.value)}
      />
      <button className="primary-btn" type="submit" disabled={submitting}>
        {submitting ? "در حال ارسال..." : "ارسال پیام"}
      </button>
      {successText ? <p className="form-success">{successText}</p> : null}
    </form>
  );
}