"use client";

import { useState, type FormEvent } from "react";
import { TextField, TextAreaField } from "@/components/FormField";

export function GroupRegistrationForm({ offerSlug }: { offerSlug: string }) {
  const [state, setState] = useState<{ sent: boolean; error?: string }>({ sent: false });
  const [busy, setBusy] = useState(false);

  async function submit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setBusy(true);
    setState({ sent: false });
    const data = new FormData(event.currentTarget);
    try {
      const response = await fetch("/api/group-registration", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          offerSlug,
          name: data.get("name"),
          email: data.get("email"),
          phone: data.get("phone"),
          message: data.get("message"),
        }),
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok) setState({ sent: false, error: result.error || "Die Anmeldung konnte nicht gesendet werden." });
      else { setState({ sent: true }); event.currentTarget.reset(); }
    } catch { setState({ sent: false, error: "Verbindung fehlgeschlagen. Bitte versuche es erneut." }); }
    finally { setBusy(false); }
  }

  if (state.sent) return <p className="rounded-2xl bg-anouma-cream-light p-5 text-sm leading-relaxed text-anouma-olive" role="status">Danke, deine Anmeldung ist angekommen. Anna meldet sich, sobald sie die Plätze geprüft hat.</p>;

  return (
    <form onSubmit={submit} className="space-y-5">
      <TextField label="Name" id="group-name" name="name" type="text" required autoComplete="name" />
      <TextField label="E-Mail" id="group-email" name="email" type="email" required autoComplete="email" />
      <TextField label="Telefon (optional)" id="group-phone" name="phone" type="tel" autoComplete="tel" />
      <TextAreaField label="Nachricht / Motivation (optional)" id="group-message" name="message" rows={4} />
      {state.error && <p className="text-sm text-red-700" role="alert">{state.error}</p>}
      <button type="submit" disabled={busy} className="rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium text-white transition-colors hover:bg-anouma-plum disabled:opacity-60">{busy ? "Wird gesendet …" : "Anmeldung senden"}</button>
    </form>
  );
}