"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;
  submitLabel?: string;
};

/**
 * Opens the visitor's email client with a pre-filled message. There is no
 * backend configured yet — swap this for a Server Action once a mail
 * provider is connected.
 */
export function ContactForm({
  toEmail,
  subjectPrefix = "Nachricht über anouma.org",
  submitLabel = "Nachricht senden",
}: ContactFormProps) {
  const [sent, setSent] = useState(false);

  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") ?? "");

    const subject = encodeURIComponent(`${subjectPrefix} von ${name}`);
    const body = encodeURIComponent(`${message}\n\n– ${name} (${email})`);
    window.location.href = `mailto:${toEmail}?subject=${subject}&body=${body}`;
    // Event only — never the form's name/email/message content, see
    // lib/analytics/events.ts and the data-minimization requirement.
    track("contact_clicked");
    setSent(true);
  }

  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"
      >
        {submitLabel}
      </button>
      {sent && (
        <p className="text-sm text-anouma-olive" role="status">
          Dein E-Mail-Programm sollte sich jetzt geöffnet haben. Falls nicht, schreib gerne direkt an{" "}
          {toEmail}.
        </p>
      )}
    </form>
  );
}