Wabenhain/src/components/business-inquiry-form.tsx

"use client";

import { useState, type FormEvent } from "react";
import { Button } from "@/components/ui";
import { TurnstileWidget } from "@/components/turnstile-widget";
import { useI18n } from "@/i18n/i18n-provider";

type Status = "idle" | "loading" | "success" | "error";

/**
 * Der Turnstile-Sitekey kommt als Prop vom Server und NICHT aus
 * process.env in dieser Datei.
 *
 * Grund: NEXT_PUBLIC_-Variablen werden in Client Components zur BUILD-Zeit
 * ins Bundle eingebacken. Der Wert wird hier aber erst zur Laufzeit gesetzt
 * (k8s/01-configmap.yaml). Ein Zugriff auf process.env an dieser Stelle
 * ergibt deshalb dauerhaft undefined — das Widget erschiene nie, waehrend die
 * Serverseite bei gesetztem TURNSTILE_SECRET_KEY sehr wohl einen Token
 * verlangt. Das Formular waere damit unabsendbar, ohne dass irgendwo ein
 * Fehler auftaucht.
 *
 * Alle uebrigen Formulare (Login, Registrierung, Passwort-Reset, Zwei-Faktor,
 * Checkout, Verfuegbarkeits-Benachrichtigung) lesen den Wert bereits im
 * Server Component und reichen ihn als Prop weiter. Diese Datei folgt jetzt
 * demselben Muster.
 */
export function BusinessInquiryForm({ turnstileSiteKey }: { turnstileSiteKey?: string }) {
  const { t } = useI18n();
  const [status, setStatus] = useState<Status>("idle");
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [turnstileToken, setTurnstileToken] = useState("");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("loading");
    setErrorMessage(null);

    const formData = new FormData(event.currentTarget);
    const payload = {
      companyName: String(formData.get("companyName") ?? ""),
      contactPerson: String(formData.get("contactPerson") ?? ""),
      email: String(formData.get("email") ?? ""),
      phone: String(formData.get("phone") ?? "") || undefined,
      desiredQuantity: String(formData.get("desiredQuantity") ?? ""),
      desiredDeliveryDate: String(formData.get("desiredDeliveryDate") ?? "") || undefined,
      package: String(formData.get("package") ?? "KLASSIK"),
      message: String(formData.get("message") ?? "") || undefined,
      turnstileToken,
    };

    try {
      const response = await fetch("/api/business-inquiry", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!response.ok) throw new Error("request failed");
      setStatus("success");
      event.currentTarget.reset();
    } catch {
      setStatus("error");
      setErrorMessage(t.businessInquiryForm.errorMessage);
    }
  }

  if (status === "success") {
    return (
      <p className="text-forest">
        {t.businessInquiryForm.successMessage}
      </p>
    );
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-5">
      <div className="grid sm:grid-cols-2 gap-4">
        <TextField name="companyName" label={t.businessInquiryForm.companyLabel} required />
        <TextField name="contactPerson" label={t.businessInquiryForm.contactPersonLabel} required />
      </div>
      <div className="grid sm:grid-cols-2 gap-4">
        <TextField name="email" label={t.businessInquiryForm.emailLabel} type="email" required />
        <TextField name="phone" label={t.businessInquiryForm.phoneOptionalLabel} />
      </div>
      <div className="grid sm:grid-cols-2 gap-4">
        <TextField name="desiredQuantity" label={t.businessInquiryForm.quantityLabel} type="number" required />
        <TextField name="desiredDeliveryDate" label={t.businessInquiryForm.deliveryDateLabel} type="date" />
      </div>

      <label className="block text-sm">
        <span className="text-ink/70">{t.businessInquiryForm.packageLabel}</span>
        <select
          name="package"
          className="mt-1 w-full border border-ink/20 bg-background px-4 py-3"
        >
          {t.unternehmenPage.packages.map((p) => (
            <option key={p.key} value={p.key}>
              {p.title} — {p.text}
            </option>
          ))}
        </select>
      </label>

      <label className="block text-sm">
        <span className="text-ink/70">{t.businessInquiryForm.messageLabel}</span>
        <textarea
          name="message"
          rows={4}
          className="mt-1 w-full border border-ink/20 bg-background px-4 py-3"
        />
      </label>

      {errorMessage ? <p className="text-sm text-red-700">{errorMessage}</p> : null}

      {turnstileSiteKey ? (
        <TurnstileWidget siteKey={turnstileSiteKey} onVerify={setTurnstileToken} />
      ) : null}

      <Button type="submit" disabled={status === "loading"}>
        {status === "loading" ? t.businessInquiryForm.submitting : t.businessInquiryForm.submit}
      </Button>
    </form>
  );
}

function TextField({
  name,
  label,
  type = "text",
  required = false,
}: {
  name: string;
  label: string;
  type?: string;
  required?: boolean;
}) {
  return (
    <label className="block text-sm">
      <span className="text-ink/70">{label}</span>
      <input
        name={name}
        type={type}
        required={required}
        className="mt-1 w-full border border-ink/20 bg-background px-4 py-3 focus:outline-none focus:border-forest"
      />
    </label>
  );
}