"use client";

import { useState } from "react";
import { submitContactForm } from "@/lib/api";
import { useToast } from "./providers/ToastProvider";
import { CheckIcon } from "./icons";

type Status = "idle" | "submitting" | "sent" | "error";

// Posts straight to POST /tenants/moalem.shop/contact-submissions — a real,
// documented endpoint, no bearer required. On success: a toast, inline
// success text, and the form resets and stays put (not swapped for a
// separate "thank you" panel) so another message can be sent right away.
export default function ContactForm() {
  const [status, setStatus] = useState<Status>("idle");
  const { showToast } = useToast();

  async function handleSubmit(e: React.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("submitting");
    try {
      await submitContactForm({
        name,
        title,
        text,
        email: email || undefined,
        cellNumber: cellNumber || undefined,
      });
      form.reset();
      setStatus("sent");
      showToast("پیام شما با موفقیت ارسال شد");
    } catch {
      setStatus("error");
    }
  }

  const input =
    "h-12 w-full rounded-xl border border-line bg-white px-4 text-sm outline-none transition focus:border-brand";

  return (
    <form onSubmit={handleSubmit} onChange={() => status === "sent" && setStatus("idle")} className="space-y-4">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <input name="name" required placeholder="نام و نام خانوادگی" className={input} />
        <input name="cellNumber" placeholder="شماره موبایل" inputMode="tel" className={input} />
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <input name="email" type="email" placeholder="ایمیل (اختیاری)" className={input} />
        <input name="title" required placeholder="موضوع پیام" className={input} />
      </div>
      <textarea
        name="text"
        required
        rows={5}
        placeholder="متن پیام شما…"
        className="w-full rounded-xl border border-line bg-white p-4 text-sm outline-none transition focus:border-brand"
      />

      {status === "error" && (
        <p className="text-[12.5px] text-brand">ارسال پیام ناموفق بود. لطفاً دوباره تلاش کنید.</p>
      )}
      {status === "sent" && (
        <p className="flex items-center gap-1.5 text-[12.5px] font-bold text-brand">
          <CheckIcon className="size-4" />
          پیام شما ارسال شد. همکاران ما در اسرع وقت با شما تماس می‌گیرند.
        </p>
      )}

      <button
        type="submit"
        disabled={status === "submitting"}
        className="flex h-12 w-full items-center justify-center rounded-xl bg-brand text-sm font-bold text-white transition hover:bg-brand-dark disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto sm:px-10"
      >
        {status === "submitting" ? "در حال ارسال…" : "ارسال پیام"}
      </button>
    </form>
  );
}