"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 { submitContactToHubspot, type HubspotFormConfig } from '@/lib/hubspot';
import { pushFormSubmit } from '@/lib/dataLayer';
import { suggestEmail } from '@/lib/emailSuggest';
import { formatMissingFields, scrollToFirstError } from '@/lib/formErrors';
import { contactSchema, contactDefaultValues, fieldLabels, type ContactFormValues } from '@/lib/contactForm';
import { Field, textInputClass } from '@/components/diagnostic/Field';
import { PhoneField } from '@/components/diagnostic/PhoneField';
import { CountrySelect } from '@/components/diagnostic/CountrySelect';
import { TurnstileCaptcha } from '@/components/forms/TurnstileCaptcha';

export const ContactForm = ({ hubspotForm }: { hubspotForm?: HubspotFormConfig } = {}) => {
  const {
    control,
    register,
    handleSubmit,
    setValue,
    getValues,
    formState: { errors, isSubmitting },
  } = useForm<ContactFormValues>({
    resolver: zodResolver(contactSchema),
    defaultValues: contactDefaultValues as ContactFormValues,
    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 onInvalid = (errs: FieldErrors<ContactFormValues>) => {
    const msg = formatMissingFields(Object.keys(errs), fieldLabels);
    setErrorSummary(msg);
    toast.error(msg, { duration: 8000 });
    window.setTimeout(() => scrollToFirstError(formRef.current), 60);
  };

  const onSubmit = async (data: ContactFormValues) => {
    if (!captchaToken) {
      toast.error('Validez le captcha avant l’envoi.');
      return;
    }
    try {
      await submitContactToHubspot(data, hubspotForm, captchaToken);
    } catch (err) {
      console.error('[ContactForm] HubSpot submit failed', err);
      toast.error("L'envoi a échoué. Réessayez dans un instant ou contactez-nous directement.");
      return;
    }
    // Envoi confirmé côté HubSpot : on remonte l'event GTM une seule fois.
    pushFormSubmit('form_contact_submit', 'contact');
    setSubmitted(true);
    toast.success('Message envoyé — l’équipe Covalba vous répond rapidement.');
  };

  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">Message envoyé !</h3>
        <p className="mt-3 max-w-md font-body leading-relaxed text-foreground/60">
          Merci, votre demande a bien été transmise. L’équipe Covalba vous recontacte rapidement.
        </p>
      </div>
    );
  }

  return (
    <form ref={formRef} onSubmit={handleSubmit(onSubmit, onInvalid)} className="space-y-5" noValidate>
      <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>

      <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="Nom de l'entreprise" error={errors.company?.message}>
        <input
          type="text"
          placeholder="Nom de l'entreprise"
          {...register('company')}
          className={textInputClass}
        />
      </Field>

      <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>

      <div className="grid gap-4 sm:grid-cols-2">
        <Field label="Ville" error={errors.city?.message}>
          <input type="text" placeholder="Paris" {...register('city')} className={textInputClass} />
        </Field>
        <Field label="Pays/Région" error={errors.country?.message}>
          <Controller
            name="country"
            control={control}
            render={({ field }) => <CountrySelect value={field.value} onChange={field.onChange} />}
          />
        </Field>
      </div>

      <Field label="Message" required error={errors.message?.message}>
        <textarea
          rows={5}
          placeholder="Décrivez votre projet, votre bâtiment ou votre question…"
          {...register('message')}
          className={`${textInputClass} resize-none`}
        />
      </Field>

      <label className="flex items-start gap-3 cursor-pointer">
        <input
          type="checkbox"
          {...register('rgpd')}
          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">
          J'accepte que Covalba traite mes données pour me recontacter.{' '}
          <a
            href="/mentions-legales"
            target="_blank"
            rel="noreferrer"
            className="underline underline-offset-2 hover:text-foreground"
          >
            Politique de confidentialité
          </a>
          <span className="ml-1 text-[#d1290d]">*</span>
        </span>
      </label>
      {errors.rgpd && (
        <p role="alert" className="ml-8 font-body text-xs font-medium text-[#d1290d]">
          {errors.rgpd.message}
        </p>
      )}

      <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…' : 'Envoyer ma demande'}</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>
  );
};