"use client";

import { useMemo, useState } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import styles from "./contactForm.module.css";
import { isValidPhoneNumber } from "libphonenumber-js";
import { FaChevronRight } from "react-icons/fa";
import { toast } from "react-toastify";
import { useUIStore } from "@/store/ui/useUIStore";
import { useRouter } from "next/navigation";
import type { RequestFormBlock } from "@/types";

type FormFields = {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  selectedPackage: string;
  timeContact: string;
  optIn: boolean;
};

interface Props {
  data: RequestFormBlock;
}

export default function ContactFormClient({ data }: Props) {
  const { formStatus, setFormStatus } = useUIStore();
  const router = useRouter();
  const submitUrl = "/api/form-submissions";

  const [dialCode, setDialCode] = useState("91");
  const [countryIso, setCountryIso] = useState<string>("IN");
  const [errors, setErrors] = useState<
    Partial<Record<keyof FormFields, string>>
  >({});
  const [state, setState] = useState<FormFields>({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    selectedPackage: "",
    timeContact: "",
    optIn: false,
  });

  const update = (key: keyof FormFields, value: string | boolean) =>
    setState((prev) => ({ ...prev, [key]: value }));

  const validateField = (
    key: keyof FormFields,
    value: string | boolean,
  ): string => {
    const fields = data.fields;
    switch (key) {
      case "firstName":
        if (fields.firstName.required && !String(value).trim())
          return "First name is required";
        return "";
      case "lastName":
        if (fields.lastName.required && !String(value).trim())
          return "Last name is required";
        return "";
      case "email": {
        const v = String(value).trim();
        if (fields.email.required && !v) return "Email is required";
        if (v && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v))
          return "Please enter a valid email";
        return "";
      }
      case "phone": {
        const v = String(value).trim();
        if (!v) return "Mobile number is required";
        if (!/^\d+$/.test(v)) return "Only numbers are allowed";
        const fullNumber = `+${dialCode}${v}`;
        if (!isValidPhoneNumber(fullNumber, countryIso.toUpperCase() as any))
          return "Please enter a valid mobile number";
        return "";
      }
      case "selectedPackage":
        if (fields.package.required && !String(value))
          return "Please select a package";
        return "";
      case "timeContact":
        if (fields.bestTime.required && !String(value).trim())
          return "Best time to contact is required";
        return "";
      case "optIn":
        if (!value) return "Please accept the terms and conditions";
        return "";
      default:
        return "";
    }
  };

  const handleFieldChange = (
    key: keyof FormFields,
    value: string | boolean,
  ) => {
    if (key === "phone" && typeof value === "string") {
      value = value.replace(/\D/g, "");
    }
    update(key, value);
    const err = validateField(key, value);
    setErrors((prev) => ({ ...prev, [key]: err }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const newErrors: Partial<Record<keyof FormFields, string>> = {};
    for (const key of Object.keys(state) as (keyof FormFields)[]) {
      const err = validateField(key, state[key]);
      if (err) newErrors[key] = err;
    }
    setErrors(newErrors);
    if (Object.keys(newErrors).length > 0) return;

    setFormStatus("submitting");

    const payload = {
      form: data.formId,
      submissionData: [
        { field: "firstName", value: state.firstName },
        { field: "lastName", value: state.lastName },
        { field: "email", value: state.email },
        {
          field: "phone",
          value: state.phone ? `+${dialCode}${state.phone}` : "",
        },
        { field: "selectedPackage", value: state.selectedPackage },
        { field: "timeContact", value: state.timeContact },
        { field: "optIn", value: state.optIn ? "Yes" : "No" },
      ],
    };

    try {
      const res = await fetch(submitUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });

      const responseText = await res.text();
      let apiMessage = "";
      try {
        const parsed = JSON.parse(responseText);
        apiMessage = parsed?.message || "";
      } catch {
        apiMessage = "";
      }
 
      if (!res.ok) {
        console.warn(
          "[contactForm] Submission failed:",
          res.status,
          apiMessage || responseText,
        );
        setFormStatus("error");
        return;
      }
 

      toast.success(apiMessage || "Form Submission successfully created.");
      setFormStatus("success");
      try {
        localStorage.setItem(
          "formSubmitMessage",
          apiMessage || "Form Submission successfully created.",
        );
      } catch {
        // ignore storage errors
      }
      const redirect = data.redirect;
      const isExternal = (href: string) => /^https?:\/\//i.test(href);
      const buildRedirectUrl = () => {
        if (!redirect) return "";
        if (redirect.redirectType === "internal" && redirect.slug) {
          return `/thank-you/${redirect.slug.replace(/^\/+/, "")}`;
        }
        if (redirect.url) return redirect.url;
        return "";
      };

      if (redirect) {
        const snippets = {
          head: redirect.head,
          bodyTop: redirect.bodyTop,
          bodyBottom: redirect.bodyBottom,
        };
        if (snippets.head || snippets.bodyTop || snippets.bodyBottom) {
          try {
            localStorage.setItem(
              "cmsFormRedirectSnippets",
              JSON.stringify(snippets),
            );
          } catch {
            // ignore storage errors
          }
        }
      }

      const targetUrl = buildRedirectUrl();
      if (targetUrl) {
        if (redirect?.openInNewTab) {
          window.open(targetUrl, "_blank", "noopener,noreferrer");
        } else if (isExternal(targetUrl)) {
          window.location.assign(targetUrl);
        } else {
          router.push(targetUrl);
        }
      } else {
        router.push("/thank-you");
      }
      setState({
        firstName: "",
        lastName: "",
        email: "",
        phone: "",
        selectedPackage: "",
        timeContact: "",
        optIn: false,
      });
    } catch (err) {
      console.error("Submit error:", err);
      setFormStatus("error");
    }
  };

  const EXACT_HEIGHT = useMemo(() => `${data.ui.inputHeightPx}px`, [data.ui]);
  const BORDER = useMemo(
    () => `${data.ui.borderWidthPx}px solid ${data.ui.borderColor}`,
    [data.ui],
  );

  const inputBaseClass = `
    w-full rounded-full px-6 text-center
    placeholder:text-gray-400 bg-transparent focus:outline-none
    text-[13px] tracking-[0.15em] text-[#555] font-medium
    block transition-all
  `;

  const packagesList = (data.packages || [])
    .map((p) => p.title)
    .filter(Boolean);

  return (
    <section
      id="send-request"
      className="w-full bg-[#f5f5f5] pt-[60px] pb-[60px]"
      style={{ fontFamily: `'${data.ui.fontFamily}', sans-serif` }}
    >
      <div className="mx-0 w-full max-w-[430px] min-h-[702px] px-[15px] box-border md:mx-auto md:w-full md:max-w-[720px] md:min-h-[663px] md:px-0 lg:max-w-[1450px] lg:min-h-[561px]">
        <h2 className="text-center text-[30px] font-[700] leading-[1.1] tracking-[1px] uppercase text-[2rem] md:text-[3rem] mt-[20px] mb-[40px]">
          {data.title ?? "SEND REQUEST FORM"}
        </h2>

        <form
          onSubmit={handleSubmit}
          noValidate
          className="w-full space-y-[25px]"
        >
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-[25px] gap-y-[25px] lg:gap-y-0">
              <div>
                <input
                  type="text"
                  placeholder={data.fields.firstName.label}
                  className={inputBaseClass}
                  style={{
                    height: EXACT_HEIGHT,
                    border: errors.firstName
                      ? `${data.ui.borderWidthPx}px solid #ef4444`
                      : BORDER,
                  }}
                  value={state.firstName}
                  onChange={(e) =>
                    handleFieldChange("firstName", e.target.value)
                  }
                />
                {errors.firstName && (
                  <p className="text-[12px] text-red-500 mt-1 ml-6">
                    {errors.firstName}
                  </p>
                )}
              </div>

              <div>
                <input
                  type="text"
                  placeholder={data.fields.lastName.label}
                  className={inputBaseClass}
                  style={{
                    height: EXACT_HEIGHT,
                    border: errors.lastName
                      ? `${data.ui.borderWidthPx}px solid #ef4444`
                      : BORDER,
                  }}
                  value={state.lastName}
                  onChange={(e) =>
                    handleFieldChange("lastName", e.target.value)
                  }
                />
                {errors.lastName && (
                  <p className="text-[12px] text-red-500 mt-1 ml-6">
                    {errors.lastName}
                  </p>
                )}
              </div>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-[25px] gap-y-[25px] lg:gap-y-0">
              <div>
                <input
                  type="email"
                  placeholder={data.fields.email.label}
                  className={inputBaseClass}
                  style={{
                    height: EXACT_HEIGHT,
                    border: errors.email
                      ? `${data.ui.borderWidthPx}px solid #ef4444`
                      : BORDER,
                  }}
                  value={state.email}
                  onChange={(e) => handleFieldChange("email", e.target.value)}
                />
                {errors.email && (
                  <p className="text-[12px] text-red-500 mt-1 ml-6">
                    {errors.email}
                  </p>
                )}
              </div>

              <div>
                <div className={styles.wrapper} style={{ position: "relative", width: "100%" }}>
                  <div className="contact-phone-picker">
                    <PhoneInput
                      country={data.fields.phone.country ?? "in"}
                      value={dialCode}
                      onChange={(_v, countryData) => {
                        if (countryData && "dialCode" in countryData) {
                          setDialCode((countryData as any).dialCode);
                          setCountryIso(
                            (
                              (countryData as any).countryCode ?? "in"
                            ).toUpperCase(),
                          );
                          if (state.phone) {
                            const newCode = (countryData as any).dialCode;
                            const fullNumber = `+${newCode}${state.phone}`;
                            const iso = (
                              (countryData as any).countryCode ?? "in"
                            ).toUpperCase() as any;
                            setErrors((prev) => ({
                              ...prev,
                              phone: isValidPhoneNumber(fullNumber, iso)
                                ? undefined
                                : "Please enter a valid mobile number",
                            }));
                          }
                        }
                      }}
                      disableCountryCode
                      containerClass="contact-phone"
                      inputStyle={{ display: "none" }}
                      buttonStyle={{
                        border: "none",
                        borderRadius: "9999px 0 0 9999px",
                        backgroundColor: "transparent",
                        width: "44px",
                        height: "100%",
                      }}
                    />
                  </div>
                  <span
                    className={styles.phoneDialCodeOverlay}
                    onClick={() => {
                      const flagBtn = document.querySelector<HTMLElement>(
                        ".contact-phone .selected-flag",
                      );
                      flagBtn?.click();
                    }}
                  >
                    +{dialCode}
                  </span>
                  <input
                    type="tel"
                    placeholder={data.fields.phone.label}
                    className={inputBaseClass}
                    style={{
                      height: EXACT_HEIGHT,
                      border: errors.phone
                        ? `${data.ui.borderWidthPx}px solid #ef4444`
                        : BORDER,
                      paddingLeft: "30px",
                    }}
                    value={state.phone}
                    onChange={(e) => handleFieldChange("phone", e.target.value)}
                  />
                </div>
                {errors.phone && (
                  <p className="text-[12px] text-red-500 mt-1 ml-6">
                    {errors.phone}
                  </p>
                )}
              </div>
            </div>

            <div>
              <div className="relative">
                <select
                  className={`${inputBaseClass} appearance-none cursor-pointer`}
                  style={{
                    height: EXACT_HEIGHT,
                    border: errors.selectedPackage
                      ? `${data.ui.borderWidthPx}px solid #ef4444`
                      : BORDER,
                    textAlignLast: "center",
                  }}
                  value={state.selectedPackage}
                  onChange={(e) =>
                    handleFieldChange("selectedPackage", e.target.value)
                  }
                >
                  <option value="" disabled>
                    {data.fields.package.label}
                  </option>
                  {packagesList.map((pkg) => (
                    <option key={pkg} value={pkg}>
                      {pkg}
                    </option>
                  ))}
                </select>

                <div className="pointer-events-none absolute inset-y-0 right-6 flex items-center">
                  <svg
                    className="h-5 w-5 text-[#777]"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2.5"
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </div>
              </div>
              {errors.selectedPackage && (
                <p className="text-[12px] text-red-500 mt-1 ml-6">
                  {errors.selectedPackage}
                </p>
              )}
            </div>

            <div>
              <input
                type="text"
                placeholder={data.fields.bestTime.label}
                className={inputBaseClass}
                style={{
                  height: EXACT_HEIGHT,
                  border: errors.timeContact
                    ? `${data.ui.borderWidthPx}px solid #ef4444`
                    : BORDER,
                }}
                value={state.timeContact}
                onChange={(e) =>
                  handleFieldChange("timeContact", e.target.value)
                }
              />
              {errors.timeContact && (
                <p className="text-[12px] text-red-500 mt-1 ml-6">
                  {errors.timeContact}
                </p>
              )}
            </div>

            <div className="flex items-start gap-4 px-2 md:px-4">
              <label className="flex items-start gap-4 cursor-pointer">
                <input
                  type="checkbox"
                  checked={state.optIn}
                  onChange={(e) => handleFieldChange("optIn", e.target.checked)}
                  className="hidden"
                />
                <div className="mt-[3px] md:mt-0 w-12 h-12 md:w-11 md:h-11 shrink-0 rounded-none flex items-center justify-center border-2 border-[#333]">
                  {state.optIn && (
                    <svg className="w-10 h-10 md:w-12 md:h-12 text-[#333]" fill="none" stroke="currentColor" strokeWidth="3" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                  )}
                </div>
                <span className="text-[14px] md:text-[16px] text-[#333] font-medium leading-[1.4]">
                  {data.terms.text}
                </span>
              </label>
              {errors.optIn && (
                <p className="text-[12px] text-red-500 mt-1 ml-2">
                  {errors.optIn}
                </p>
              )}
            </div>

            <div className="flex justify-center pt-2">
              <button
                type="submit"
                id={data.submit.id ?? undefined}
                disabled={formStatus === "submitting"}
                className="group flex items-center justify-between w-full sm:w-auto sm:min-w-[380px] bg-white rounded-full pl-6 sm:pl-10 pr-[4px] hover:bg-[#555] hover:text-white transition-all duration-300 disabled:opacity-60"
                style={{ height: EXACT_HEIGHT, border: BORDER }}
              >
                <span className="font-bold text-[14px] sm:text-[16px] tracking-[0.1em] uppercase">
                  {formStatus === "submitting"
                    ? "SUBMITTING..."
                    : data.submit.label}
                </span>
                <div className="bg-[#555] w-[36px] h-[36px] rounded-full flex items-center justify-center group-hover:bg-white transition-colors">
                  <FaChevronRight className="text-white group-hover:text-[#555] text-sm" />
                </div>
              </button>
            </div>
        </form>
      </div>
    </section>
  );
}