"use client";

import HeroSection from "@/components/HeroSection";
import { Edit, Mail, MessageSquareMore, User } from "lucide-react";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { useGoogleReCaptcha } from "react-google-recaptcha-v3";
import { toast } from "sonner";
import { useSearchParams } from "next/navigation";
import { useEffect } from "react";
import { motion } from "motion/react";

const contactSchema = z.object({
  name: z.string().min(1, "Name is required"),

  email: z.string().min(1, "Email is required").email("Enter valid email"),

  subject: z.string().min(1, "Subject is required"),

  comment: z.string().min(1, "Comment is required"),
});

type ContactFormData = z.infer<typeof contactSchema>;

const assistanceData = [
  {
    title: "Hospitality-Focused Support Specialists",
    description:
      "Our team has extensive experience in hotel operations, ensuring they understand your business challenges",
  },
  {
    title: "Multiple Support Channels",
    description:
      "Get help via chat, phone, email, or our comprehensive online knowledge base",
  },
];

export default function ContactUsClient() {
  const { executeRecaptcha } = useGoogleReCaptcha();
  const searchParams = useSearchParams();
  const emailFromQuery = searchParams.get("email") || "";
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting, isValid },
  } = useForm<ContactFormData>({
    resolver: zodResolver(contactSchema),
    mode: "onChange",
    defaultValues: {
      email: emailFromQuery,
    },
  });

  useEffect(() => {
    if (emailFromQuery) {
      reset({
        name: "",
        email: emailFromQuery,
        subject: "",
        comment: "",
      });
    }
  }, [emailFromQuery, reset]);

  const handleClearForm = () => {
    reset();
  };

  const onSubmit = async (data: ContactFormData) => {
    try {
      if (!executeRecaptcha) {
        toast.error("Recaptcha not ready");
        return;
      }
      const token = await executeRecaptcha("contact_form");
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ ...data, token }),
      });

      const result = await response.json();

      if (response.ok) {
        toast.success(
          "Thanks for reaching out! We’ve received your message and will respond as soon as possible.",
        );

        reset();
      } else {
        toast.error(result.error || "Something went wrong");
      }
    } catch (error) {
      console.error(error);
      toast.error("Failed to send message! Please try again later.");
    }
  };

  return (
    <div>
      {/* hero section */}
      <HeroSection
        titleStart="Let's Build Your Hotel's"
        titleHighlight="Perfect Future"
        titleEnd="Together"
        description="Whether you have a quick question or are ready to transform your property management — our team of hospitality experts is here for you."
        titleClassName="max-w-[1305px]"
        showImages={false}
      />
      {/* contact us form  */}
      <div
        id="contact-us-form"
        className="px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px] py-[40px] lg:py-[80px] xl:py-[100px] flex flex-col md:flex-row justify-between gap-[16px] md:gap-[20px] lg:gap-[30px] xl:gap-[40px]"
      >
        {/* Left Image */}
        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{
            once: true,
            amount: 0.3,
          }}
          transition={{
            duration: 0.75,
            ease: "easeOut",
          }}
          className="w-full md:w-[50%] xl:w-[50%] h-full flex justify-center my-auto"
        >
          <img
            src="/images/contact-us/contact-us.png"
            className="w-full h-auto object-cover rounded-[26px]"
            alt="Contact Us"
          />
        </motion.div>

        {/* Contact Form */}
        <div className="w-full md:w-[50%] xl:w-[50%] relative overflow-hidden rounded-[30px] border border-black/5">
          <div className="w-[100px] h-[200px] bg-[#F58220] absolute top-5 right-0 z-50 blur-[200px]" />
          <div className="w-[100px] h-[200px] bg-[#F58220] absolute bottom-5 left-0 z-50 blur-[200px]" />
          <div className="p-[24px] sm:p-[32px] md:p-[20px] lg:p-[32px] shadow-[0_10px_40px_rgba(0,0,0,0.04)] flex flex-col gap-[20px] lg:gap-[30px] z-1">
            <motion.div
              initial={{ opacity: 0, x: 20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{
                once: true,
                amount: 0.3,
              }}
              transition={{
                duration: 0.75,
                ease: "easeOut",
              }}
              className="flex flex-col gap-3 sm:gap-4">
              <h2 className="text-[28px] sm:text-[32px] md:text-[40px] lg:text-[42px] 2xl:text-[48px] leading-[32px] sm:leading-[36px] md:leading-[44px] lg:leading-[48px] 2xl:leading-[54px] font-medium walsheim text-start">
                Let’s Start a Meaningful Conversation
              </h2>

              <p className="text-sm sm:text-base md:text-base xl:text-lg leading-[18px] sm:leading-[20px] md:leading-[20px] xl:leading-[24px] text-[#444444] figtree">
                Fill out the form below and our contact team will get back to
                you as soon as possible.
              </p>
            </motion.div>

            <form
              className="flex flex-col gap-[8px]"
              onSubmit={handleSubmit(onSubmit)}
            >
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-[8px] gap-x-[12px] lg:gap-x-[16px] lg:gap-y-[8px]">
                {/* Name */}
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{
                    once: true,
                    amount: 0.3,
                  }}
                  transition={{
                    delay: 0.1,
                    duration: 0.75,
                    ease: "easeOut",
                  }}
                  className="flex flex-col gap-1.5 lg:gap-2.5">
                  <label className="text-sm leading-[14px] font-semibold figtree text-[#3B3B3B]">
                    Full Name <span className="text-[#FF3D3D]">*</span>
                  </label>
                  <div className="w-full">
                    <div className="relative w-full">
                      <User className="absolute top-1/2 left-3 -translate-y-1/2 text-[#D0D0D0] w-4.5 h-4.5" />
                      <input
                        type="text"
                        placeholder="Enter your full name"
                        {...register("name")}
                        className="border pl-10 md:pl-10 border-[#D0D0D0] w-full bg-white p-3 md:p-4 rounded-[8px] outline-none text-sm figtree leading-4.5"
                      />
                    </div>
                    <p className="text-red-600 text-xs min-h-[16px]">
                      {errors.name?.message || ""}
                    </p>
                  </div>
                </motion.div>

                {/* Email */}
                <motion.div
                  initial={{ opacity: 0, x: 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{
                    once: true,
                    amount: 0.3,
                  }}
                  transition={{
                    delay: 0.2,
                    duration: 0.75,
                    ease: "easeOut",
                  }}
                  className="flex flex-col gap-1.5 lg:gap-2.5">
                  <label className="text-sm leading-[14px] font-semibold figtree text-[#3B3B3B]">
                    Email Address <span className="text-[#FF3D3D]">*</span>
                  </label>
                  <div className="w-full">
                    <div className="relative w-full">
                      <Mail className="absolute top-1/2 left-3 -translate-y-1/2 text-[#D0D0D0] w-4.5 h-4.5" />
                      <input
                        type="email"
                        placeholder="Enter your email address"
                        {...register("email")}
                        className="border pl-10 md:pl-10 border-[#D0D0D0] w-full bg-white p-3 md:p-4 rounded-[8px] outline-none text-sm figtree leading-4.5"
                      />
                    </div>
                    <p className="text-red-600 text-xs min-h-[16px]">
                      {errors.email?.message || ""}
                    </p>
                  </div>
                </motion.div>
              </div>

              {/* Subject */}
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.3,
                }}
                transition={{
                  delay: 0.3,
                  duration: 0.75,
                  ease: "easeOut",
                }}
                className="flex flex-col gap-1.5 lg:gap-2.5">
                <label className="text-sm leading-[14px] font-semibold figtree text-[#3B3B3B]">
                  Subject <span className="text-[#FF3D3D]">*</span>
                </label>
                <div className="w-full">
                  <div className="relative w-full">
                    <MessageSquareMore className="absolute top-1/2 left-3 -translate-y-1/2 text-[#D0D0D0] w-4.5 h-4.5" />
                    <input
                      type="text"
                      placeholder="How can we help you?"
                      {...register("subject")}
                      className="border pl-10 md:pl-10 border-[#D0D0D0] w-full bg-white p-3 md:p-4 rounded-[8px] outline-none text-sm figtree leading-4.5"
                    />
                  </div>
                  <p className="text-red-600 text-xs min-h-[16px]">
                    {errors.subject?.message || ""}
                  </p>
                </div>
              </motion.div>
              {/* Comment */}
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.3,
                }}
                transition={{
                  delay: 0.4,
                  duration: 0.75,
                  ease: "easeOut",
                }}
                className="flex flex-col gap-1.5 lg:gap-2.5">
                <label
                  className="text-sm leading-[14px] font-semibold figtree text-[#3B3B3B]"
                  htmlFor="comment"
                >
                  Comment <span className="text-[#FF3D3D]">*</span>
                </label>
                <div className="w-full">
                  <div className="relative w-full h-[135px]">
                    <Edit className="absolute top-[18%] left-3 -translate-y-1/2 text-[#D0D0D0] w-4.5 h-4.5" />
                    <textarea
                      placeholder="Tell us more about your property or requirements..."
                      rows={6}
                      {...register("comment")}
                      className="border pl-10 md:pl-10 border-[#D0D0D0] w-full bg-white p-3 md:p-4 rounded-[8px] outline-none text-sm figtree leading-4.5 max-h-[135px] min-h-[135px]"
                    />
                  </div>
                  <p className="text-red-600 text-xs min-h-[16px]">
                    {errors.comment?.message || ""}
                  </p>
                </div>
              </motion.div>

              {/* Submit Button */}
              <motion.div
                initial={{ opacity: 0, x: 20 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.3,
                }}
                transition={{
                  delay: 0.5,
                  duration: 0.75,
                  ease: "easeOut",
                }}
                className="flex gap-2 justify-end">
                <button
                  onClick={() => handleClearForm()}
                  className="flex-1 sm:flex-none px-6 lg:px-[48px] py-3 lg:py-4 rounded-full border border-[#2C2C2C] text-[#2C2C2C] disabled:opacity-50 text-sm leading-[100%] montserrat font-semibold cursor-pointer"
                  type="button"
                >
                  Clear
                </button>
                <button
                  className="flex-1 sm:flex-none relative overflow-hidden px-6 lg:px-[48px] py-3 lg:py-4 bg-[#2c2c2c] text-white rounded-full text-sm font-semibold leading-[100%] shadow-lg hover:shadow-none transition-all duration-500 group cursor-pointer montserrat disabled:opacity-50"
                  type="submit"
                  disabled={!isValid || isSubmitting}
                >
                  <span className="relative z-10 w-full flex justify-center">
                    {isSubmitting ? "Submitting..." : "Submit"}
                  </span>

                  <span className="pointer-events-none absolute top-[-20%] left-[-30%] h-[160%] w-[24px] bg-white/70 blur-md rotate-20 transition-all duration-500 ease-in-out group-hover:left-[95%]" />
                </button>
              </motion.div>
            </form>
          </div>
        </div>
      </div>

      {/* Assistance */}
      <div className="xl:pt-[57px] xl:pb-[77px] py-[40px] md:py-[40px] lg:py-[80px] px-[20px] xs:px-[20px] sm:px-[30px] md:px-[60px] lg:px-[110px] xl:px-[135px] bg-[#F2F2E9] relative overflow-hidden">
        <div className="absolute top-[-60%] right-[-5%] w-[295px] h-[868px] bg-[#E0E0D2] z-0 rounded-[100%] rotate-[-29.85deg] blur-[100px] pointer-events-none" />
        <div className="absolute top-[-60%] left-[-5%] w-[295px] h-[868px] bg-[#E0E0D2] z-0 rounded-[100%] rotate-[-29.85deg] blur-[100px] pointer-events-none" />
        <div className="absolute bottom-[-50%] right-[-10%] w-[295px] h-[868px] bg-[#E0E0D2] z-0 rounded-[100%] rotate-[-29.85deg] blur-[100px] pointer-events-none" />
        <div className="absolute -top-full left-[10%] w-[295px] h-[868px] bg-[#E0E0D2] z-0 rounded-[100%] rotate-[-29.85deg] blur-[100px] pointer-events-none" />
        <div className="absolute bottom-[-80%] right-[10%] w-[342px] h-[342px] bg-[#E0E0D2] rounded-full z-0 blur-[100px] pointer-events-none" />
        <div className="absolute bottom-[-50%] left-[-20%] w-[342px] h-[342px] bg-[#E0E0D2] rounded-full z-0 blur-[100px] pointer-events-none" />
        <div className="absolute top-[-60%] left-[20%] w-[342px] h-[342px] bg-[#E0E0D2] rounded-full z-0 blur-[100px] pointer-events-none" />
        <div className="flex flex-col gap-[16px] sm:gap-[22px] md:gap-[30px] lg:gap-[36px] w-full relative z-1">
          <motion.div
            initial={{ opacity: 0, scale: 0.96 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{
              once: true,
              amount: 0.3,
            }}
            transition={{
              duration: 0.75,
              ease: "easeOut",
            }} className="text-[22px] sm:text-[24px] md:text-[28px] lg:text-[36px] leading-[22px] sm:leading-[24px] md:leading-[26px] lg:leading-[32px] font-medium walsheim text-[#3B3B3B] text-center lg:text-left">
            24/7 Available Expert Assistance When You Need It Most
          </motion.div>
          <div className="flex flex-col sm:flex-row gap-[16px] sm:gap-[20px] md:gap-[30px] lg:gap-[42px] justify-start w-fit">
            {assistanceData.map((item, index) => (
              <motion.div
                initial={{ opacity: 0, x: -40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{
                  once: true,
                  amount: 0.3,
                }}
                transition={{
                  delay: index * 0.2,
                  duration: 0.75,
                  ease: "easeOut",
                }}
                key={index}
                className="flex gap-[16px] lg:gap-[22px] w-full sm:w-[40%]"
              >
                <div className="text-[32px] sm:text-[40px] md:text-[60px] lg:text-[74px] leading-[44px] sm:leading-[50px] md:leading-[60px] lg:leading-[84px] font-bold walsheim text-[#2C2C2C14] h-fit">
                  {(index + 1).toString().padStart(2, "0")}
                </div>
                <div className="flex flex-col gap-2 lg:gap-[12px]">
                  <p className="text-[18px] sm:text-[20px] md:text-[24px] lg:text-[26px] leading-[20px] sm:leading-[22px] md:leading-[28px] lg:leading-[32px] font-medium walsheim text-[#3B3B3B] w-fit">
                    {item.title}
                  </p>
                  <p className="text-[14px] sm:text-[14px] md:text-[16px] lg:text-[18px] leading-[16px] sm:leading-[18px] md:leading-[22px] lg:leading-[24px] font-normal figtree text-[#707070]">
                    {item.description}
                  </p>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </div >
  );
}