"use client";

import { useRouter } from "next/navigation";
import { useState, type FormEvent } from "react";

export default function CheckoutPage() {
  const router = useRouter();
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [error, setError] = useState("");

  async function submit(event: FormEvent) {
    event.preventDefault();
    setError("");
    const response = await fetch("/backend/orders", {
      method: "POST",
      credentials: "include",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ customer_name: name, customer_phone: phone }),
    });
    const data = await response.json().catch(() => ({}));
    if (!response.ok) {
      setError(typeof data.detail === "string" ? data.detail : "Проверьте имя и телефон");
      return;
    }
    router.push(`/orders/${data.id}`);
  }

  return (
    <>
      <h1>Заказ</h1>
      <p className="muted">Оплата не списывается. Заказ только записывается в базу.</p>
      <form onSubmit={(event) => void submit(event)}>
        <input value={name} onChange={(event) => setName(event.target.value)} placeholder="Имя" required />
        <input value={phone} onChange={(event) => setPhone(event.target.value)} placeholder="Телефон" required />
        <button type="submit">Подтвердить</button>
        {error && <p className="error">{error}</p>}
      </form>
    </>
  );
}