"use client";

import { FormEvent, useState } from "react";

import { interpolate } from "@/i18n/index";
import { useMessages } from "@/i18n/locale-context";

export default function CallbackForm() {
  const t = useMessages();
  const [status, setStatus] = useState<"idle" | "sending" | "ok" | "error">("idle");
  const [message, setMessage] = useState("");

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget;
    const data = new FormData(form);
    const name = String(data.get("name") || "").trim();
    const cellNumber = String(data.get("cellNumber") || "").trim();
    setStatus("sending");
    setMessage("");

    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name,
          title: t.callback.title,
          cellNumber,
          text: interpolate(t.callback.body, { phone: cellNumber }),
        }),
      });

      if (!response.ok) {
        setStatus("error");
        setMessage(t.callback.error);
        return;
      }

      setStatus("ok");
      setMessage(t.callback.ok);
      form.reset();
    } catch {
      setStatus("error");
      setMessage(t.callback.network);
    }
  }

  return (
    <form className="callback-form" onSubmit={onSubmit}>
      <label className="sr-only" htmlFor="callback-name">
        {t.callback.name}
      </label>
      <input id="callback-name" name="name" type="text" required placeholder={t.callback.name} autoComplete="name" />
      <label className="sr-only" htmlFor="callback-phone">
        {t.callback.phone}
      </label>
      <input
        id="callback-phone"
        name="cellNumber"
        type="tel"
        required
        inputMode="tel"
        placeholder={t.callback.phone}
        autoComplete="tel"
      />
      <button type="submit" className="btn btn-gold" disabled={status === "sending"}>
        {status === "sending" ? t.callback.sending : t.callback.submit}
      </button>
      {message ? <p className={status === "ok" ? "ok" : "err"}>{message}</p> : null}
    </form>
  );
}