"use client";

import { useRef, useState } from 'react';
import { useForm, Controller, type FieldErrors } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { ArrowRight, Check } from 'lucide-react';
import { toast } from 'sonner';
import { suggestEmail } from '@/lib/emailSuggest';
import { formatMissingFields, scrollToFirstError } from '@/lib/formErrors';
import { leadSchema, leadSchemaWithPhone, leadDefaultValues, fieldLabels, type LeadFormValues } from '@/lib/leadForm';
import { Field, textInputClass } from '@/components/diagnostic/Field';
import { PhoneField } from '@/components/diagnostic/PhoneField';
import { TurnstileCaptcha } from '@/components/forms/TurnstileCaptcha';

type Props = {
  submit: (data: LeadFormValues, captchaToken: string) => Promise<void>;
  submitLabel: string;
  successTitle: string;
  successText: string;
  commsLabel?: string;
  /** Affiche un champ téléphone requis, mappé sur `mobilephone` côté HubSpot (ex. /estimation). */
  requirePhone?: boolean;
  /** Callback déclenché uniquement après un envoi réussi (ex. push GTM dataLayer). */
  onSuccess?: () => void;
};

/**
 * Formulaire de capture réutilisable (livre blanc, estimation…) : Prénom / Nom / E-mail / Entreprise
 * + case opt-in communications. Succès = confirmation inline. Erreur = message exhaustif + scroll.
 */
export const LeadCaptureForm = ({
  submit,
  submitLabel,
  successTitle,
  successText,
  commsLabel = "J'accepte de recevoir d'autres communications de Covalba.",
  requirePhone = false,
  onSuccess,
}: Props) => {
  const {
    register,
    control,
    handleSubmit,
    setValue,
    getValues,
    formState: { errors, isSubmitting },
  } = useForm<LeadFormValues>({
    resolver: zodResolver(requirePhone ? leadSchemaWithPhone : leadSchema),
    defaultValues: leadDefaultValues as LeadFormValues,
    mode: 'onBlur',
  });

  const [submitted, setSubmitted] = useState(false);
  const [emailSuggestion, setEmailSuggestion] = useState<string | null>(null);
  const [errorSummary, setErrorSummary] = useState<string | null>(null);
  const [captchaToken, setCaptchaToken] = useState('');
  const formRef = useRef<HTMLFormElement>(null);
  const emailReg = register('email');

  const onSubmit = async (data: LeadFormValues) => {
    if (!captchaToken) {
      toast.error('Validez le captcha avant l’envoi.');
      return;
    }
    try {
      await submit(data, captchaToken);
    } catch (err) {
      console.error('[LeadCaptureForm] submit failed', err);
      toast.error("L'envoi a échoué. Réessayez dans un instant ou contactez-nous directement.");
      return;
    }
    // Envoi confirmé : on notifie le parent (push GTM dataLayer) une seule fois.
    onSuccess?.();
    setSubmitted(true);
    toast.success(successTitle);
  };

  const onInvalid = (errs: FieldErrors<LeadFormValues>) => {
    const msg = formatMissingFields(Object.keys(errs), fieldLabels);
    setErrorSummary(msg);
    toast.error(msg, { duration: 8000 });
    window.setTimeout(() => scrollToFirstError(formRef.current), 60);
  };

  if (submitted) {
    return (
      <div className="flex flex-col items-center py-8 text-center">
        <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
          <Check className="h-8 w-8 text-green-600" strokeWidth={2.5} />
        </div>
        <h3 className="font-satoshi text-2xl font-black tracking-tight text-foreground">{successTitle}</h3>
        <p className="mt-3 max-w-md font-body leading-relaxed text-foreground/60">{successText}</p>
      </div>
    );
  }

  return (
    <form ref={formRef} onSubmit={handleSubmit(onSubmit, onInvalid)} className="space-y-5" noValidate>
      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Prénom" required error={errors.firstName?.message}>
          <input type="text" placeholder="Jean" {...register('firstName')} className={textInputClass} />
        </Field>
        <Field label="Nom" required error={errors.lastName?.message}>
          <input type="text" placeholder="Dupont" {...register('lastName')} className={textInputClass} />
        </Field>
      </div>

      <Field label="E-mail professionnel" required error={errors.email?.message}>
        <input
          type="email"
          placeholder="jean.dupont@entreprise.fr"
          {...emailReg}
          onChange={(e) => {
            emailReg.onChange(e);
            if (emailSuggestion) setEmailSuggestion(null);
          }}
          onBlur={(e) => {
            emailReg.onBlur(e);
            const v = getValues('email');
            setEmailSuggestion(v ? suggestEmail(v) : null);
          }}
          className={textInputClass}
        />
        {emailSuggestion && (
          <p className="mt-2 font-body text-xs text-foreground/70">
            Vouliez-vous dire{' '}
            <button
              type="button"
              onClick={() => {
                setValue('email', emailSuggestion, { shouldValidate: true, shouldDirty: true });
                setEmailSuggestion(null);
              }}
              className="font-semibold text-primary underline underline-offset-2"
            >
              {emailSuggestion}
            </button>{' '}
            ?
          </p>
        )}
      </Field>

      <Field label="Nom de l'entreprise" required error={errors.company?.message}>
        <input type="text" placeholder="Nom de l'entreprise" {...register('company')} className={textInputClass} />
      </Field>

      {requirePhone && (
        <Field label="Numéro de téléphone" required error={errors.phone?.message}>
          <Controller
            name="phone"
            control={control}
            render={({ field }) => (
              <PhoneField value={field.value} onChange={field.onChange} onBlur={field.onBlur} />
            )}
          />
        </Field>
      )}

      <label className="flex items-start gap-3 cursor-pointer">
        <input
          type="checkbox"
          {...register('comms')}
          className="mt-0.5 h-5 w-5 cursor-pointer rounded border-2 border-foreground/20 text-primary focus:ring-2 focus:ring-primary/30"
        />
        <span className="font-body text-sm leading-relaxed text-foreground/70">{commsLabel}</span>
      </label>

      <TurnstileCaptcha onToken={setCaptchaToken} />

      {errorSummary && (
        <p
          role="alert"
          className="rounded-lg border border-[#d1290d]/30 bg-[#d1290d]/5 px-4 py-3 font-body text-sm font-medium text-[#d1290d]"
        >
          {errorSummary}
        </p>
      )}

      <button
        type="submit"
        disabled={isSubmitting}
        className="group flex w-full items-center justify-center gap-3 rounded-full cta-gradient py-4 font-semibold text-white transition-all duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] hover:shadow-[0_8px_40px_rgba(153,20,55,0.35)] active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-60"
      >
        <span>{isSubmitting ? 'Envoi en cours…' : submitLabel}</span>
        {!isSubmitting && (
          <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] group-hover:translate-x-0.5 group-hover:scale-105">
            <ArrowRight className="h-4 w-4" />
          </span>
        )}
      </button>
    </form>
  );
};