import { contactSchema, type ContactFormData } from "@/schemas/contact-form-schema";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, type SubmitHandler } from "react-hook-form";
import { cn, postData, timeOut } from "@/lib/utils";
import FormLoader from "@/components/FormLoader";
import Toast from "@/components/Toast";
import { useState } from "react";

const ContactForm = () => {
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm<ContactFormData>({
    resolver: zodResolver(contactSchema),
    defaultValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      message: "",
    },
  });

  const [toast, setToast] = useState<{
    type: "success" | "error";
    title: string;
    message: string;
    isVisible: boolean;
  } | null>(null);

  const onSubmit: SubmitHandler<ContactFormData> = async (data) => {
    if (toast?.isVisible) {
      setToast((prev) => (prev ? { ...prev, isVisible: false } : null));
      await timeOut(500);
    }
    setToast(null);
    await timeOut(1000);
    try {
      const apiUrl = `${import.meta.env.PUBLIC_API_URL}/contact-yoyo`;
      await postData(apiUrl, data);
      setToast({
        type: "success",
        title: "Éxito",
        message: "Tu mensaje ha sido enviado con éxito",
        isVisible: true,
      });
      reset();
    } catch (error) {
      console.error("Error al enviar el formulario:", error);
      setToast({
        type: "error",
        title: "Error",
        message: "Hubo un error al enviar el mensaje. Por favor, intenta de nuevo.",
        isVisible: true,
      });
    }
  };

  return (
    <>
      <form
        noValidate
        className={cn("w-[min(100%,52.125rem)] mx-auto", { "pointer-events-none opacity-65": isSubmitting })}
        onSubmit={handleSubmit(onSubmit)}
      >
        <div className="grid grid-cols-1 md:grid-cols-2 mb-6 gap-6">
          <div>
            <label className="font-bold text-sm/[1] mb-2 block" htmlFor="firstName">
              Nombre
            </label>
            <input
              className="yoyo-input"
              id="firstName"
              placeholder="Nombre"
              {...register("firstName")}
              aria-invalid={!!errors["firstName"]?.message}
            />
            {errors.firstName && (
              <p className="text-red-600 text-sm mt-1 flex items-center gap-1">
                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                  />
                </svg>
                {errors.firstName.message}
              </p>
            )}
          </div>
          <div>
            <label className="font-bold text-sm/[1] mb-2 block" htmlFor="lastName">
              Apellido
            </label>
            <input
              className="yoyo-input"
              id="lastName"
              placeholder="Apellido"
              {...register("lastName")}
              aria-invalid={!!errors["lastName"]?.message}
            />
            {errors.lastName && (
              <p className="text-red-600 text-sm mt-1 flex items-center gap-1">
                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                  />
                </svg>
                {errors.lastName.message}
              </p>
            )}
          </div>
          <div>
            <label className="font-bold text-sm/[1] mb-2 block" htmlFor="email">
              Email
            </label>
            <input
              className="yoyo-input"
              id="email"
              placeholder="Email"
              {...register("email")}
              aria-invalid={!!errors["email"]?.message}
            />
            {errors.email && (
              <p className="text-red-600 text-sm mt-1 flex items-center gap-1">
                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                  />
                </svg>
                {errors.email.message}
              </p>
            )}
          </div>
          <div>
            <label className="font-bold text-sm/[1] mb-2 block" htmlFor="phone">
              Teléfono
            </label>
            <input
              className="yoyo-input"
              id="phone"
              placeholder="Ej: 1112345678 (sin +54)"
              {...register("phone")}
              onInput={(e) => {
                const input = e.currentTarget;
                input.value = input.value.replace(/\D/g, "");
              }}
              aria-invalid={!!errors["phone"]?.message}
            />
            {errors.phone && (
              <p className="text-red-600 text-sm mt-1 flex items-center gap-1">
                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                  />
                </svg>
                {errors.phone.message}
              </p>
            )}
          </div>
          <div className="col-span-full">
            <label className="font-bold text-sm/[1] mb-2 block" htmlFor="message">
              Mensaje
            </label>
            <textarea
              {...register("message")}
              placeholder="Mensaje"
              aria-invalid={!!errors["message"]?.message}
              id="message"
              className="yoyo-input resize-none h-[8rem]"
            />
            {errors.message && (
              <p className="text-red-600 text-sm mt-1 flex items-center gap-1">
                <svg fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
                  />
                </svg>
                {errors.message.message}
              </p>
            )}
          </div>
        </div>
        <button
          type="submit"
          disabled={isSubmitting}
          className="sm:max-w-[11.875rem] yoyo-btn flex items-center justify-center min-h-[3.375rem]"
        >
          {isSubmitting ? <FormLoader /> : "Enviar"}
        </button>
      </form>

      {toast && (
        <Toast
          type={toast.type}
          title={toast.title}
          message={toast.message}
          isVisible={toast.isVisible}
          onClose={() => setToast(null)}
        />
      )}
    </>
  );
};

export default ContactForm;