"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, 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';

// Etiquetas localizadas (ES) para los mensajes de error exhaustivos.
const fieldLabels: Record<string, string> = {
  email: 'Correo electrónico profesional',
  firstName: 'Nombre',
  lastName: 'Apellidos',
  company: 'Nombre de la empresa',
  phone: 'Teléfono',
  city: 'Ciudad',
  country: 'País/Región',
  message: 'Mensaje',
  rgpd: 'Consentimiento (casilla de verificación)',
};

export const ContactFormES = ({ 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('Complete el captcha antes de enviar.');
      return;
    }
    try {
      await submitContactToHubspot(data, hubspotForm, captchaToken);
    } catch (err) {
      console.error('[ContactFormES] HubSpot submit failed', err);
      toast.error('El envío ha fallado. Inténtelo de nuevo en un momento o contáctenos directamente.');
      return;
    }
    // Envío confirmado en HubSpot: enviamos el evento GTM una sola vez.
    pushFormSubmit('form_contact_submit', 'contact');
    setSubmitted(true);
    toast.success('Mensaje enviado: el equipo de Covalba le responderá rápidamente.');
  };

  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">¡Mensaje enviado!</h3>
        <p className="mt-3 max-w-md font-body leading-relaxed text-foreground/60">
          Gracias, su solicitud se ha enviado correctamente. El equipo de Covalba se pondrá en contacto con usted rápidamente.
        </p>
      </div>
    );
  }

  return (
    <form ref={formRef} onSubmit={handleSubmit(onSubmit, onInvalid)} className="space-y-5" noValidate>
      <Field label="Correo electrónico profesional" required error={errors.email?.message}>
        <input
          type="email"
          placeholder="juan.garcia@empresa.es"
          {...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">
            ¿Quería decir{' '}
            <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="Nombre" required error={errors.firstName?.message}>
          <input type="text" placeholder="Juan" {...register('firstName')} className={textInputClass} />
        </Field>
        <Field label="Apellidos" required error={errors.lastName?.message}>
          <input type="text" placeholder="García" {...register('lastName')} className={textInputClass} />
        </Field>
      </div>

      <Field label="Nombre de la empresa" error={errors.company?.message}>
        <input
          type="text"
          placeholder="Nombre de la empresa"
          {...register('company')}
          className={textInputClass}
        />
      </Field>

      <Field label="Teléfono" 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="Ciudad" error={errors.city?.message}>
          <input type="text" placeholder="Madrid" {...register('city')} className={textInputClass} />
        </Field>
        <Field label="País/Región" error={errors.country?.message}>
          <Controller
            name="country"
            control={control}
            render={({ field }) => <CountrySelect value={field.value} onChange={field.onChange} />}
          />
        </Field>
      </div>

      <Field label="Mensaje" required error={errors.message?.message}>
        <textarea
          rows={5}
          placeholder="Describa su proyecto, su edificio o su consulta…"
          {...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">
          Acepto que Covalba trate mis datos para ponerse en contacto conmigo.{' '}
          <a
            href="/mentions-legales"
            target="_blank"
            rel="noreferrer"
            className="underline underline-offset-2 hover:text-foreground"
          >
            Política de privacidad
          </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 ? 'Enviando…' : 'Enviar'}</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>
  );
};