"use client";
import axios from "@/utils/axios-config";
import { Form, message, Button } from "antd";
import { useMutation } from "@tanstack/react-query";
import ContactItem from "../contactItem";
import { FaArrowRightLong } from "react-icons/fa6";
import React, { useState, useEffect } from "react";
import { Select, Input } from "antd";
import { useTranslations,useLocale } from "next-intl";
import { useSelector } from "react-redux";

const { TextArea } = Input;

export interface DataType {
  value:number,
  label:string
}
function ContactUs() {
  const t = useTranslations("contactUs");
  const [form] = Form.useForm();
  const locale = useLocale();
  const { status, profile } = useSelector((state: { Auth: any }) => state.Auth);
  const isGuest = status === "NOT_LOGGED";
  const [settings, setSettings] = useState<any>(null);

  useEffect(() => {
    const fetchSettings = async () => {
      try {
        const response = await axios.get("/settings/about_us");
        setSettings(response?.data?.data);
      } catch (err) {}
    };
    fetchSettings();
  }, []);

  const mutation = useMutation({
    mutationFn: async (values: {
      name?: string;
      email: string;
      phone?: string;
      problemType: string;
      message: string;
    }) => {
      const payload: Record<string, any> = {
        email: values.email,
        contact_type_id: Number(values.problemType),
        message: values.message,
      };
      if (isGuest) {
        payload.name = values.name;
        payload.phone = values.phone;
      } else {
        payload.name = profile?.name;
        payload.phone = profile?.phone;
      }
      return axios.post("/contact-us", payload);
    },
    onSuccess: (res) => {
      message.success(res.data.message)
      form.resetFields();
    },
    onError: (error: any) => {
      if (error.response?.data?.data) {
        const fields: any[] = [];
        if (isGuest) {
          fields.push(
            { name: "name", errors: [error.response.data.data.name?.[0] || ""] },
            { name: "phone", errors: [error.response.data.data.phone?.[0] || ""] },
          );
        }
        fields.push(
          { name: "email", errors: [error.response.data.data.email?.[0] || ""] },
          { name: "problemType", errors: [error.response.data.data.contact_type_id?.[0] || ""] },
          { name: "message", errors: [error.response.data.data.message?.[0] || ""] },
        );
        form.setFields(fields);
      } else {
        const {
          status,
          data: { message },
        } = (error as any).response;
    
        message.error(message, {
          position: "top-center",
          duration: 3000,
        });
      }
    },
  });



  return (
    <section className="py-[35px] sm:py-[50px]" id="contactUs">
      <div className="container mx-auto flex justify-center items-center flex-col px-4 md:px-[20px] min-[810px]:px-0 lg:px-[20px] min-[1070px]:px-[0px]">
        <h2 className="text-[#3D3D3D] min-[280px]:text-[20px] min-[400px]:text-[22px] sm:text-[27px] md:text-[28px] lg:text-3xl font-bold mb-[7px] text-center">
          {t("Reach-our")} <span className="text-[#03B89E]">{t("Help-Desk")}</span> {t("for-support")}
        </h2>
        <p className="text-[#8C8C8C] mb-[10px] min-[280px]:text-[14px] sm:text-[16px] leading-5 md:leading-6 lg:leading-7 md:text-[17px] lg:text-lg  text-center sm:text-left">
          {t("Questions? Need assistance? Our dedicated support")}{" "}
          <br className="block min-[280px]:hidden min-[400px]:block" /> {t("team is here to help you every step of the way:")}{" "}
        </p>
        {(settings?.whatsapp || settings?.email) && (
          <p className="text-[#8C8C8C] mb-[20px] min-[280px]:text-[13px] sm:text-[14px] leading-5 md:leading-6 text-center sm:text-left">
            {t("contact-info-prefix")}{" "}
            {settings?.whatsapp && (
              <a href={`https://wa.me/${settings.whatsapp.replace(/[^0-9]/g, "")}`} target="_blank" rel="noopener noreferrer" className="text-[#25D366] underline font-semibold">{settings.whatsapp}</a>
            )}
            {settings?.whatsapp && settings?.email && <>{" "}{t("contact-info-or")}{" "}</>}
            {settings?.email && (
              <a href={`mailto:${settings.email}`} className="text-primary underline font-semibold">{settings.email}</a>
            )}
          </p>
        )}
        <Form
          form={form}
          layout="vertical"
          onFinish={mutation.mutate}
          className="flex justify-center items-center flex-col w-[96%] sm:w-[400px]"
        >
          {/* <div className="relative mb-[15px] w-full rounded-[15px]">
            <Input
                {...register("email", {
                  required: "Email is required",
                  pattern: {
                    value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                    message: "Invalid email format",
                  },
                })}
              placeholder="Enter Your Email Address"
              className={`border-[1px] rounded-[15px] px-5 min-[280px]:p-[16px] p-[16px] pr-[30px] h-[44px] w-full text-xs sm:text-base md:text-lg lg:text-[17px] placeholder-gray-500 focus:outline-none mb-[5px] 
                ${!true ? "border-red-500" : "border-[#03B89E]"}`}
            />
            <Image
              src={"/images/contact-us/Monotone email.png"}
              alt="icon"
              width={20}
              height={20}
              className="absolute right-[15px] top-[12px]"
            />
            {errors.email && (
              <p className="text-red-500 text-[12px] pl-[10px]">
                {errors.email.message}
              </p>
            )}
          </div> */}

          {/* <div className="mb-[15px] w-full relative">
            <select
              //   {...register("problemType", {
              //     required: "Please select a problem type",
              //   })}
              className={`appearance-none border-[1px] rounded-[15px] mb-[5px] min-[280px]:p-[12px] p-[16px] pr-[30px] w-full focus:outline-none text-xs sm:text-base md:text-lg lg:text-[17px] text-[#8C8C8C] placeholder-gray-500 ${
                !true ? "border-red-500" : "border-[#03B89E]"
              }`}
            >
              <option
                value=""
                hidden
                className="text-xs sm:text-base md:text-lg lg:text-xl"
              >
                Problem Type
              </option>
              <option value="1" className="text-[#000]">
                Problem 1
              </option>
              <option value="2" className="text-[#000]">
                Problem 2
              </option>
              <option value="3" className="text-[#000]">
                Problem 3
              </option>
            </select>
            <span className="absolute top-1/2 right-4 transform -translate-y-4 text-gray-500 pointer-events-none">
              &#128899; 
            </span> Custom down arrow
            {errors.problemType && (
              <p className="text-red-500 text-[12px] pl-[10px]">
                {errors.problemType.message}
              </p>
            )}
          </div> */}

          {/* <div className="mb-[15px] w-full ">
            <textarea
                {...register("message", {
                  required: "Message is required",
                  minLength: {
                    value: 10,
                    message: "Message must be at least 10 characters long",
                  },
                })}
              placeholder="Write Message"
              className={`border-[1px] text-xs sm:text-base md:text-lg lg:text-[17px] px-[16px] placeholder-gray-500 focus:outline-none w-full rounded-[15px] p-[16px] ${
                !true ? "border-red-500" : "border-[#03B89E]"
              }`}
            ></textarea>
            {errors.message && (
              <p className="text-red-500 text-[12px] pl-[10px]">
                {errors.message.message}
              </p>
            )}
          </div> */}

          <ContactItem isGuest={isGuest} />

          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              loading={mutation.isPending}
              className="!bg-[#03B89E] !border-primary !outline-none !text-white flex justify-center items-center gap-[6px] text-[20px] py-[23px] px-[40px] rounded-[15px] text-lg lg:text-[21px] w-full"
            >
              {mutation.isPending ? t("Sending") : t("Contact-Us")}
              <FaArrowRightLong className={`text-[24px] mx-2 ${locale === "ar" ? "rotate-180" : ""}`} />
            </Button>
          </Form.Item>
        </Form>
      </div>
    </section>
  );
}

export default ContactUs;