"use client";

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

type ContactFormProps = {
  toEmail?: string;
  subjectPrefix?: string;
  type?: "contact" | "appointment";
  submitLabel?: string;
};

export function ContactForm({
  subjectPrefix = "Allgemeine Anfrage",
  type = "contact",
  submitLabel = "Nachricht senden",
}: ContactFormProps) {
  const [state, setState] = useState<{ sent: boolean; error?: string }>({ sent: false });
  const [submitting, setSubmitting] = useState(false);

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    const name = String(data.get("name") ?? "");
    const email = String(data.get("email") ?? "");
    const message = String(data.get("message") ?? "");
    setSubmitting(true);
    setState({ sent: false });
    try {
      const response = await fetch("/api/contact/inquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ name, email, message, subject: `${subjectPrefix} von ${name}`, type }),
      });
      const result = await response.json().catch(() => ({}));
      if (!response.ok) {
        setState({ sent: false, error: result.error || "Die Nachricht konnte nicht gesendet werden." });
        setSubmitting(false);
        return;
      }
      track("contact_clicked");
      setState({ sent: true });
      e.currentTarget.reset();
    } catch {
      setState({ sent: false, error: "Verbindung fehlgeschlagen. Bitte versuche es erneut." });
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <TextField label="Name" id="name" name="name" type="text" required autoComplete="name" />
      <TextField label="E-Mail" id="email" name="email" type="email" required autoComplete="email" />
      <TextAreaField label="Deine Nachricht" id="message" name="message" required rows={5} />
      <button
        type="submit"
        className="inline-flex items-center justify-center rounded-full bg-anouma-mauve-dark px-7 py-3.5 text-sm font-medium tracking-wide text-white transition-colors duration-300 hover:bg-anouma-plum"
      >
        {submitting ? "Wird gesendet …" : submitLabel}
      </button>
      {state.sent && (
        <p className="text-sm text-anouma-olive" role="status">
          Danke, deine Nachricht ist angekommen. Anna antwortet dir per E-Mail; du kannst direkt auf ihre Antwort reagieren.
        </p>
      )}
      {state.error && <p className="text-sm text-red-700" role="alert">{state.error}</p>}
    </form>
  );
}