"use client";

import { useTranslations } from "next-intl";
import { FormEvent, useState } from "react";

export function ReserveForm() {
  const t = useTranslations("reserve");
  const [status, setStatus] = useState<"idle" | "ok" | "err">("idle");
  const [loading, setLoading] = useState(false);

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);
    setStatus("idle");
    const form = e.currentTarget;
    const fd = new FormData(form);
    const date = String(fd.get("date"));
    const body = {
      name: String(fd.get("name")),
      email: String(fd.get("email")),
      phone: String(fd.get("phone")),
      partySize: Number(fd.get("partySize")),
      date: new Date(`${date}T12:00:00`).toISOString(),
      time: String(fd.get("time")),
      message: fd.get("message") ? String(fd.get("message")) : undefined,
    };

    try {
      const res = await fetch("/api/reservations", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      if (!res.ok) throw new Error("fail");
      setStatus("ok");
      form.reset();
    } catch {
      setStatus("err");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form
      onSubmit={onSubmit}
      className="mx-auto mt-8 grid max-w-lg gap-4 rounded-xl border border-border bg-card/60 p-6 shadow-[0_0_40px_rgba(201,162,39,0.06)] backdrop-blur"
    >
      <div>
        <label className="mb-1 block text-sm text-muted">{t("name")}</label>
        <input
          required
          name="name"
          className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"
        />
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className="mb-1 block text-sm text-muted">{t("email")}</label>
          <input
            required
            type="email"
            name="email"
            className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"
          />
        </div>
        <div>
          <label className="mb-1 block text-sm text-muted">{t("phone")}</label>
          <input
            required
            name="phone"
            className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"
          />
        </div>
      </div>
      <div>
        <label className="mb-1 block text-sm text-muted">{t("partySize")}</label>
        <input
          required
          type="number"
          min={1}
          max={50}
          name="partySize"
          defaultValue={2}
          className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"
        />
      </div>
      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className="mb-1 block text-sm text-muted">{t("date")}</label>
          <input
            required
            type="date"
            name="date"
            className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"
          />
        </div>
        <div>
          <label className="mb-1 block text-sm text-muted">{t("time")}</label>
          <input
            required
            type="time"
            name="time"
            className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"
          />
        </div>
      </div>
      <div>
        <label className="mb-1 block text-sm text-muted">{t("message")}</label>
        <textarea
          name="message"
          rows={3}
          className="w-full rounded-md border border-border bg-background px-3 py-2 text-foreground focus:border-gold focus:outline-none focus:ring-1 focus:ring-gold"
        />
      </div>
      {status === "ok" && (
        <p className="text-sm text-gold" role="status">
          {t("success")}
        </p>
      )}
      {status === "err" && (
        <p className="text-sm text-red-400" role="alert">
          {t("error")}
        </p>
      )}
      <button
        type="submit"
        disabled={loading}
        className="rounded-md bg-gold px-4 py-3 text-sm font-medium text-background transition hover:bg-gold-hover disabled:opacity-60"
      >
        {loading ? "…" : t("submit")}
      </button>
    </form>
  );
}