"use client";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { ContactoSchema, ContactoFormData } from "@/utils/validations";
import { useFormSubmit } from "@/hooks/useForm";
import { Input } from "../ui/Input";
import { Button } from "../ui/Button";
import { Checkbox } from "../ui/Checkbox";
import { Textarea } from "../ui/Textarea";
import { motion, AnimatePresence } from "framer-motion";
import { useLanguage } from "@/context/LanguageContext";

export const ContactoForm = () => {
  const { t, locale } = useLanguage();
  const { submit, isSubmitting, success, error } = useFormSubmit("contactos");
  
  const { register, handleSubmit, formState: { errors }, reset } = useForm<ContactoFormData>({
    resolver: zodResolver(ContactoSchema),
  });

  const onSubmit = async (data: ContactoFormData) => {
    await submit(data);
    if (!error) reset();
  };

  return (
    <div className="w-full">
      <AnimatePresence mode="wait">
        {success ? (
          <motion.div 
            initial={{ opacity: 0 }} 
            animate={{ opacity: 1 }} 
            className="p-10 border border-ocean rounded-[24px] text-center bg-ice/10"
          >
            <h3 className="text-xl font-bold text-navy mb-2">
              {t.contacto.success.title}
            </h3>
            <p className="text-navy/60">
              {t.contacto.success.desc}
            </p>
          </motion.div>
        ) : (
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            <Input 
              label={t.contacto.form.name} 
              placeholder={locale === 'en' ? "Your name" : locale === 'ca' ? "El teu nom" : "Tu nombre"}
              {...register("nombre")} 
              error={errors.nombre?.message} 
            />
            
            <Input 
              label={t.contacto.form.email} 
              placeholder="tu@email.com"
              {...register("email")} 
              error={errors.email?.message} 
            />

            <Textarea 
              label={t.contacto.form.message} 
              placeholder={locale === 'en' ? "Write your message here..." : locale === 'ca' ? "Escriu aquí el teu missatge..." : "Escribe aquí tu mensaje..."}
              rows={5}
              {...register("mensaje")} 
              error={errors.mensaje?.message}
            />

            <Checkbox 
              label={t.contacto.form.privacy} 
              {...register("privacidad")} 
              error={errors.privacidad?.message} 
            />

            {error && <p className="text-red-600 font-bold text-sm">{error}</p>}

            <div className="pt-4">
              <Button type="submit" disabled={isSubmitting} className="w-full">
                {isSubmitting 
                  ? (locale === 'en' ? "Sending..." : locale === 'ca' ? "Enviant..." : "Enviando...") 
                  : t.contacto.form.submit}
              </Button>
            </div>
          </form>
        )}
      </AnimatePresence>
    </div>
  );
};