"use client";

import { useEffect, useId, useRef, useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { contactFormSchema, type ContactFormValues } from "@/lib/validation";
import { Button } from "@/components/ui/Button";

type Status =
  | { kind: "idle" }
  | { kind: "submitting" }
  | { kind: "success"; delivered: boolean }
  | { kind: "error"; message: string };

export function ContactForm({
  subjects,
  consentLabel,
  successTitle,
  successMessage,
}: {
  subjects: string[];
  consentLabel: string;
  successTitle: string;
  successMessage: string;
}) {
  const id = useId();
  const startedAt = useRef<number>(0);
  useEffect(() => {
    startedAt.current = Date.now();
  }, []);
  const [status, setStatus] = useState<Status>({ kind: "idle" });
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<ContactFormValues>({
    resolver: zodResolver(contactFormSchema),
    defaultValues: {
      name: "",
      email: "",
      organization: "",
      subject: "",
      message: "",
      consent: undefined,
    },
  });

  const submit = async (values: ContactFormValues) => {
    setStatus({ kind: "submitting" });
    try {
      const form = document.getElementById(`${id}-form`) as HTMLFormElement | null;
      const honeypot =
        (form?.elements.namedItem("website") as HTMLInputElement | null)?.value ?? "";
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ ...values, website: honeypot, startedAt: startedAt.current }),
      });
      const data = (await res.json().catch(() => ({}))) as {
        ok?: boolean;
        delivered?: boolean;
        error?: string;
      };
      if (!res.ok || !data.ok) {
        setStatus({
          kind: "error",
          message:
            res.status === 429
              ? "Trop de tentatives. Veuillez réessayer dans quelques minutes."
              : (data.error ?? "L’envoi a échoué. Veuillez réessayer ou nous écrire directement."),
        });
        return;
      }
      setStatus({ kind: "success", delivered: data.delivered !== false });
      reset();
    } catch {
      setStatus({
        kind: "error",
        message: "Connexion impossible. Vérifiez votre réseau puis réessayez.",
      });
    }
  };

  if (status.kind === "success") {
    return (
      <div
        role="status"
        aria-live="polite"
        className="border-success/30 rounded-[var(--radius-lg)] border bg-white/70 p-8"
      >
        <h2 className="text-h4 text-success">{successTitle}</h2>
        <p className="text-ink-700 mt-3">{successMessage}</p>
        {!status.delivered ? (
          <p className="text-ink-500 mt-3 text-sm">
            Note : le service de messagerie n’est pas encore configuré sur cet environnement ; le
            message a été reçu mais pas relayé par courriel.
          </p>
        ) : null}
        <div className="mt-6">
          <Button variant="outline" arrow={false} onClick={() => setStatus({ kind: "idle" })}>
            Envoyer un autre message
          </Button>
        </div>
      </div>
    );
  }

  const field = (name: keyof ContactFormValues) => ({
    "aria-invalid": errors[name] ? true : undefined,
    "aria-describedby": errors[name] ? `${id}-${name}-error` : undefined,
  });
  const err = (name: keyof ContactFormValues) =>
    errors[name] ? (
      <p id={`${id}-${name}-error`} role="alert" className="text-danger mt-1.5 text-sm">
        {errors[name]?.message as string}
      </p>
    ) : null;

  const input =
    "mt-1.5 w-full rounded-md border border-pale-300 bg-white px-3.5 py-2.5 text-ink-900 placeholder:text-ink-300 focus:border-slate-500 aria-[invalid]:border-danger";
  const label = "block text-sm font-medium text-ink-900";

  return (
    <form
      id={`${id}-form`}
      onSubmit={(e) => void handleSubmit(submit)(e)}
      noValidate
      className="flex flex-col gap-5"
      aria-describedby={status.kind === "error" ? `${id}-status` : undefined}
    >
      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor={`${id}-name`} className={label}>
            Nom <span aria-hidden="true">*</span>
          </label>
          <input
            id={`${id}-name`}
            type="text"
            autoComplete="name"
            required
            maxLength={120}
            className={input}
            {...register("name")}
            {...field("name")}
          />
          {err("name")}
        </div>
        <div>
          <label htmlFor={`${id}-email`} className={label}>
            Courriel <span aria-hidden="true">*</span>
          </label>
          <input
            id={`${id}-email`}
            type="email"
            autoComplete="email"
            required
            maxLength={254}
            className={input}
            {...register("email")}
            {...field("email")}
          />
          {err("email")}
        </div>
      </div>
      <div className="grid gap-5 sm:grid-cols-2">
        <div>
          <label htmlFor={`${id}-organization`} className={label}>
            Organisation <span className="text-ink-500 font-normal">(facultatif)</span>
          </label>
          <input
            id={`${id}-organization`}
            type="text"
            autoComplete="organization"
            maxLength={160}
            className={input}
            {...register("organization")}
            {...field("organization")}
          />
          {err("organization")}
        </div>
        <div>
          <label htmlFor={`${id}-subject`} className={label}>
            Sujet <span aria-hidden="true">*</span>
          </label>
          <select
            id={`${id}-subject`}
            required
            className={input}
            defaultValue=""
            {...register("subject")}
            {...field("subject")}
          >
            <option value="" disabled>
              Choisir un sujet…
            </option>
            {subjects.map((s) => (
              <option key={s} value={s}>
                {s}
              </option>
            ))}
          </select>
          {err("subject")}
        </div>
      </div>
      <div>
        <label htmlFor={`${id}-message`} className={label}>
          Message <span aria-hidden="true">*</span>
        </label>
        <textarea
          id={`${id}-message`}
          rows={6}
          required
          minLength={20}
          maxLength={4000}
          className={input}
          {...register("message")}
          {...field("message")}
        />
        {err("message")}
      </div>

      {/* Honeypot : invisible et hors tabulation ; doit rester vide. */}
      <div className="absolute -left-[9999px] h-0 w-0 overflow-hidden" aria-hidden="true">
        <label htmlFor={`${id}-website`}>Site web</label>
        <input
          id={`${id}-website`}
          type="text"
          name="website"
          tabIndex={-1}
          autoComplete="off"
          defaultValue=""
        />
      </div>

      <div className="flex items-start gap-3">
        <input
          id={`${id}-consent`}
          type="checkbox"
          className="mt-1 h-4 w-4 accent-slate-500"
          {...register("consent")}
          {...field("consent")}
        />
        <label htmlFor={`${id}-consent`} className="text-ink-700 text-sm">
          {consentLabel} <span aria-hidden="true">*</span>
        </label>
      </div>
      {err("consent")}

      {status.kind === "error" ? (
        <p
          id={`${id}-status`}
          role="alert"
          className="border-danger/40 bg-danger/5 text-danger rounded-md border px-4 py-3 text-sm"
        >
          {status.message}
        </p>
      ) : null}

      <div>
        <Button
          type="submit"
          size="lg"
          disabled={isSubmitting || status.kind === "submitting"}
          aria-busy={status.kind === "submitting"}
        >
          {status.kind === "submitting" ? "Envoi en cours…" : "Envoyer le message"}
        </Button>
        <p className="text-ink-500 mt-3 text-xs">
          <span aria-hidden="true">* </span>Champs obligatoires.
        </p>
      </div>
    </form>
  );
}