"use client";

import { useForm } from "react-hook-form";
import { FiX } from "react-icons/fi";
import Button from "../ui/Button";
import Input from "../ui/CustomInput";
import CustomPhoneInput from "../ui/CustomPhoneInput";
import { useModal } from "../../lib/modal-system/ModalContext";


interface ContactFormValues {
  firstName: string;
  lastName: string;
  email: string;
  mobileNumber: string;
  message: string;
}

export default function ContactUsModal() {
  const { closeModal } = useModal();

  const {
    control,
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<ContactFormValues>();

  const onSubmit = (data: ContactFormValues) => {
    console.log(data);

    // API Call Here

    closeModal();
  };

  return (
    <div className="relative">
      {/* Header */}
      <div className="mb-8 text-center">

        <h2 className="font-heading text-2xl font-semibold text-heading">
          Get in Touch
        </h2>

        <p className="mx-auto mt-3 max-w-130 text-base text-text">
          Have questions about our AI image detection, need support?
          Fill out the form, and well get back to you soon.
        </p>
      </div>

      <form
        onSubmit={handleSubmit(onSubmit)}
        className="space-y-5"
      >
        {/* First Name / Last Name */}
        <div className="grid gap-5 md:grid-cols-2">
          <Input
            label="First Name"
            placeholder="Enter Your First Name"
            register={register("firstName")}
            error={errors.firstName?.message}
          />

          <Input
            label="Last Name"
            placeholder="Enter Your Last Name"
            register={register("lastName")}
            error={errors.lastName?.message}
          />
        </div>

        {/* Email / Phone */}
        <div className="grid gap-5 md:grid-cols-2">
          <Input
            type="email"
            label="Email"
            placeholder="Enter Your Email"
            register={register("email")}
            error={errors.email?.message}
          />

          <CustomPhoneInput
            label="Phone Number"
            name="mobileNumber"
            control={control}
            placeholder="Enter Your Phone Number"
          />
        </div>

        {/* Message */}
        <div>
          <label className="mb-2 block text-sm font-medium text-heading">
            Message
          </label>

          <textarea
            rows={3}
            placeholder="Enter Your Message"
            {...register("message")}
            className="
              w-full
              rounded-xl
              border
              border-[#E5DFFF]
              bg-white
              px-4
              py-3
              text-base
              text-heading
              outline-none
              transition-all
              placeholder:text-gray-400
              focus:border-[#8B5CF6]
              focus:ring-2
              focus:ring-[#8B5CF6]/10
            "
          />
        </div>

        {/* Submit */}
        <Button
          type="submit"
          className="w-full"
          BtnInnerclassName="!justify-center !py-4"
        >
          Send Message
        </Button>

        {/* Footer */}
        <p className="text-center text-sm text-text ">
          By submitting this form, you agree to our{" "}
          <span className="cursor-pointer text-link">
            Terms and Conditions
          </span>{" "}
          and{" "}
          <span className="cursor-pointer text-link">
            Privacy Policy
          </span>
          .
        </p>
      </form>
    </div>
  );
}