"use client";

import { useActionState, useRef, useEffect } from "react";
import { useFormStatus } from "react-dom";
import { Send, Check } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { TurnstileWidget } from "@/components/ui/turnstile";
import { submitContactAction } from "./actions";
import { initialContactState } from "./state";

export function ContactForm() {
  const [state, formAction] = useActionState(submitContactAction, initialContactState);
  const formRef = useRef<HTMLFormElement>(null);

  // Sur succes : reset du form pour permettre un nouveau message si besoin.
  useEffect(() => {
    if (state.status === "success") {
      formRef.current?.reset();
    }
  }, [state.status]);

  if (state.status === "success") {
    return (
      <div className="panel p-8 text-center">
        <div className="mx-auto inline-flex size-12 items-center justify-center rounded-full bg-success-soft text-success border border-success/20">
          <Check className="size-6" />
        </div>
        <h2 className="mt-5 font-editorial text-2xl font-medium text-text">
          Message bien reçu.
        </h2>
        <p className="mt-3 text-sm text-text-muted max-w-md mx-auto leading-relaxed">
          Nous vous répondons rapidement, du lundi au vendredi. Vous allez aussi recevoir un email de confirmation
          dans la minute, vérifiez vos spams au besoin.
        </p>
      </div>
    );
  }

  return (
    <form ref={formRef} action={formAction} className="panel p-8 space-y-6" noValidate>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        <Field id="firstName" label="Prénom" required error={state.fieldErrors?.firstName}>
          <Input name="firstName" type="text" autoComplete="given-name" />
        </Field>
        <Field id="lastName" label="Nom" required error={state.fieldErrors?.lastName}>
          <Input name="lastName" type="text" autoComplete="family-name" />
        </Field>
        <Field id="company" label="Entreprise" required error={state.fieldErrors?.company}>
          <Input name="company" type="text" placeholder="Nom de votre activité" autoComplete="organization" />
        </Field>
        <Field id="email" label="Adresse e-mail" required error={state.fieldErrors?.email}>
          <Input name="email" type="email" autoComplete="email" inputMode="email" />
        </Field>
      </div>

      <Field id="reason" label="Vous nous contactez pour" error={state.fieldErrors?.reason}>
        <Select name="reason" defaultValue="Demander un aperçu personnalisé de mon futur site">
          <option>Demander un aperçu personnalisé de mon futur site</option>
          <option>Refaire mon site existant</option>
          <option>Créer un nouveau site</option>
          <option>Question sur l&apos;offre / les tarifs</option>
          <option>Autre</option>
        </Select>
      </Field>

      <Field
        id="message"
        label="Votre message"
        required
        hint="Plus c'est précis, plus on pourra vous répondre concrètement."
        error={state.fieldErrors?.message}
      >
        <Textarea
          name="message"
          rows={6}
          placeholder="Parlez-nous de votre activité, de votre site actuel s'il y en a un, de ce que vous attendez du futur site…"
        />
      </Field>

      {/* Honeypot anti-bot : champ cache au visiteur (et au screen reader via
          aria-hidden + tabindex=-1), visible aux bots qui parsent le HTML. */}
      <div aria-hidden="true" className="absolute -left-[10000px] top-auto h-0 w-0 overflow-hidden">
        <label htmlFor="website">Site web (ne pas remplir)</label>
        <input
          id="website"
          type="text"
          name="website"
          tabIndex={-1}
          autoComplete="off"
          defaultValue=""
        />
      </div>

      {state.status === "error" && (
        <div
          role="alert"
          className="rounded-md border border-danger/30 bg-danger-soft px-4 py-3 text-sm text-danger"
        >
          {state.message ?? "Une erreur est survenue."}
        </div>
      )}

      {/* Cloudflare Turnstile : challenge anti-bot invisible. Si la site key
          n'est pas configuree (dev local), le widget se rend null et la verif
          serveur est skipped. */}
      <div className="flex justify-end">
        <TurnstileWidget action="contact" />
      </div>

      <div className="pt-4 border-t border-border flex items-center justify-between gap-3 flex-wrap">
        <span className="text-xs text-text-dim">
          Vos données restent en France et ne sont utilisées que pour vous répondre.
        </span>
        <SubmitButton />
      </div>
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <Button type="submit" variant="primary" size="lg" loading={pending}>
      <Send className="size-4" />
      Envoyer
    </Button>
  );
}