"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { reachGoal } from "@/lib/analytics";

export function BookingForm({ embedded = false }: { embedded?: boolean }) {
  const router = useRouter();
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
  const [errorMessage, setErrorMessage] = useState("Не удалось отправить заявку. Проверьте поля и попробуйте еще раз.");
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");

  useEffect(() => {
    fetch("/api/auth/me", { cache: "no-store" }).then((response) => response.ok ? response.json() : null).then((body) => {
      if (!body?.user) return;
      setName((value) => value || body.user.name || "");
      setPhone((value) => value || (body.user.phone ? `+${body.user.phone}` : ""));
    }).catch(() => undefined);
  }, []);

  async function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (status === "loading") return;
    setStatus("loading");
    setErrorMessage("Не удалось отправить заявку. Проверьте поля и попробуйте еще раз.");
    const formElement = event.currentTarget;
    const form = new FormData(formElement);
    const payload = {
      name: String(form.get("name") || ""),
      phone: String(form.get("phone") || ""),
      email: String(form.get("email") || ""),
      date: String(form.get("date") || ""),
      time: String(form.get("time") || ""),
      guests: Number(form.get("guests") || 1),
      comment: String(form.get("comment") || ""),
      consent: form.get("consent") === "on",
      website: String(form.get("website") || "")
    };
    try {
      const response = await fetch("/api/booking", { method: "POST", body: JSON.stringify(payload) });
      if (response.ok) {
        const result = await response.json() as { bookingUrl?: string };
        reachGoal("booking_submitted");
        setStatus("success");
        formElement.reset();
        if (result.bookingUrl) router.push(new URL(result.bookingUrl, location.origin).pathname);
        return;
      }
      const result = await response.json().catch(() => null) as { error?: string } | null;
      if (result?.error) setErrorMessage(result.error);
      setStatus("error");
    } catch {
      setErrorMessage("Нет связи с сайтом. Проверьте подключение и попробуйте ещё раз.");
      setStatus("error");
    }
  }

  return (
    <form className={`grid gap-4 ${embedded ? "" : "card p-5"}`} onSubmit={submit}>
      <input className="hidden" name="website" tabIndex={-1} autoComplete="off" />
      <label>
        <span className="mb-1 block text-sm">Имя</span>
        <input className="input" name="name" required value={name} onChange={(event) => setName(event.target.value)} />
      </label>
      <label>
        <span className="mb-1 block text-sm">Телефон</span>
        <input className="input" name="phone" type="tel" inputMode="tel" pattern={"^[0-9+()\\-\\s]{10,32}$"} placeholder="+7 (___) ___-__-__" required value={phone} onChange={(event) => setPhone(event.target.value)} />
      </label>
      <label>
        <span className="mb-1 block text-sm">Электронная почта для подтверждения</span>
        <input className="input" name="email" type="email" />
      </label>
      <div className="grid gap-4 sm:grid-cols-3">
        <label>
          <span className="mb-1 block text-sm">Дата</span>
          <input className="input" name="date" type="date" required />
        </label>
        <label>
          <span className="mb-1 block text-sm">Время</span>
          <input className="input" name="time" type="time" required />
        </label>
        <label>
          <span className="mb-1 block text-sm">Гостей</span>
          <input className="input" name="guests" type="number" min={1} max={20} defaultValue={2} required />
        </label>
      </div>
      <label>
        <span className="mb-1 block text-sm">Комментарий</span>
        <textarea className="input min-h-28" name="comment" />
      </label>
      <label className="flex items-start gap-3 text-sm text-kiln-milk/78">
        <input className="mt-1 h-4 w-4" type="checkbox" name="consent" required />
        <span>Согласен на обработку персональных данных. Бронирование считается подтвержденным после звонка или сообщения ресторана.</span>
      </label>
      <button className="button button-primary disabled:cursor-not-allowed disabled:opacity-60" disabled={status === "loading"}>
        {status === "loading" ? "Отправляем..." : "Отправить заявку"}
      </button>
      {status === "success" ? <p className="text-sm text-kiln-milk/80">Заявка отправлена. Бронирование считается подтвержденным после звонка или сообщения ресторана.</p> : null}
      {status === "error" ? <p className="text-sm text-kiln-flame">{errorMessage}</p> : null}
    </form>
  );
}