"use client";

import { useState, type FormEvent } from "react";
import toast from "react-hot-toast";

export default function ContactForm() {
  const [status, setStatus] = useState<"idle" | "submitting" | "success">("idle");

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const form = e.currentTarget;
    const data = Object.fromEntries(new FormData(form).entries());
    setStatus("submitting");

    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      if (!res.ok) throw new Error("request failed");
      setStatus("success");
      toast.success("Anfrage gesendet!");
      form.reset();
    } catch {
      setStatus("idle");
      toast.error("Da ist etwas schiefgelaufen. Bitte versuch es erneut.");
    }
  }

  if (status === "success") {
    return (
      <div role="status" className="rounded-lg border border-accent/40 bg-accent/10 p-6 text-secondary">
        <p className="font-semibold">Vielen Dank für deine Anfrage!</p>
        <p className="mt-1 text-sm text-gray-700">
          Wir melden uns innerhalb von zwei bis drei Tagen bei dir.
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="name" className="block text-sm font-medium text-secondary">
            Name *
          </label>
          <input
            id="name"
            name="name"
            type="text"
            required
            className="mt-1.5 w-full rounded border border-gray-200 px-3 py-2.5 text-sm focus-visible:border-primary"
          />
        </div>
        <div>
          <label htmlFor="email" className="block text-sm font-medium text-secondary">
            E-Mail *
          </label>
          <input
            id="email"
            name="email"
            type="email"
            required
            className="mt-1.5 w-full rounded border border-gray-200 px-3 py-2.5 text-sm focus-visible:border-primary"
          />
        </div>
      </div>

      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor="phone" className="block text-sm font-medium text-secondary">
            Telefon
          </label>
          <input
            id="phone"
            name="phone"
            type="tel"
            className="mt-1.5 w-full rounded border border-gray-200 px-3 py-2.5 text-sm focus-visible:border-primary"
          />
        </div>
        <div>
          <label htmlFor="alterYears" className="block text-sm font-medium text-secondary">
            Für wen?
          </label>
          <select
            id="alterYears"
            name="alterYears"
            className="mt-1.5 w-full rounded border border-gray-200 bg-white px-3 py-2.5 text-sm focus-visible:border-primary"
            defaultValue="Erwachsene"
          >
            <option value="Erwachsene">Erwachsene</option>
            <option value="Kind unter 12">Kind unter 12</option>
            <option value="Kind 12-16">Kind 12–16</option>
          </select>
        </div>
      </div>

      <fieldset>
        <legend className="text-sm font-medium text-secondary">Interesse an *</legend>
        <div className="mt-2 flex flex-wrap gap-4">
          {["Probetraining", "Mitgliedschaft", "Allgemeine Info"].map((option, i) => (
            <label key={option} className="flex items-center gap-2 text-sm text-gray-700">
              <input type="radio" name="typ" value={option} required defaultChecked={i === 0} />
              {option}
            </label>
          ))}
        </div>
      </fieldset>

      <div>
        <label htmlFor="nachricht" className="block text-sm font-medium text-secondary">
          Nachricht
        </label>
        <textarea
          id="nachricht"
          name="nachricht"
          rows={4}
          className="mt-1.5 w-full rounded border border-gray-200 px-3 py-2.5 text-sm focus-visible:border-primary"
        />
      </div>

      <label className="flex items-start gap-2.5 text-sm text-gray-700">
        <input type="checkbox" name="datenschutz" required className="mt-1" />
        <span>
          Ich habe die Datenschutzerklärung gelesen und bin einverstanden, dass meine Angaben zur Bearbeitung meiner
          Anfrage gespeichert werden.
        </span>
      </label>

      <button
        type="submit"
        disabled={status === "submitting"}
        className="w-full rounded bg-primary px-6 py-3 font-semibold text-cream transition-colors duration-fast hover:bg-primary-light disabled:opacity-60 sm:w-auto"
      >
        {status === "submitting" ? "Wird gesendet…" : "Anfrage senden"}
      </button>
    </form>
  );
}