"use client";
import React from "react";
import { Button, Col, Container, Image, Row } from "react-bootstrap";
import styles from "@/styles/Component/HalfValuation/HalfValuation.module.scss";
import { useRequest } from "@/components/App/request";
import { useRouter } from "next/navigation";
import { toastr } from "@/utils/helpers";
import { FormikProvider, useFormik, Form as FormikForm } from "formik";
import { halfValuationSchema } from "@/utils/validatonSchema/schema";
import {
  CxTextInput,
  CxTextArea
} from "@/components/default/Field/CxTextInput";
import { VehicleDetails } from "@/types/api";
import { useApp } from "@/components/App";
import ReCAPTCHA from "react-google-recaptcha";
import { useEffect, useRef, useState } from "react";
import Cookies from "js-cookie";
import { isCookiesAccepted } from "@/components/common/CookieConsent";
// import { jsPDF } from "jspdf";

function HalfValuationCard({
  open = false,
  showSecondpageData = false,
  directShowData = false,
  setOpen,
  viewCaptchaBtn = false
}) {
  useEffect(() => {
    if (directShowData) {
      setOpen(true); // Automatically expands the section if flag is true
    }
  }, [directShowData, setOpen]);

  // const handleGeneratePdf = async () => {
    // const element = document.getElementById("pdf-content");
    // const opt = {
    //   margin: [20, 0, 20, 0],
    //   filename: "download.pdf",
    //   image: { type: "jpeg", quality: 0.7 },
    //   html2canvas: { scale: 2, useCORS: true },
    //   jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
    //   pagebreak: { mode: ["css", "legacy"], avoid: ".avoid-break" }
    // };

    // const html2pdf = (await import("html2pdf.js")).default;
    // const workerWithout = html2pdf().set(opt).from(element).toPdf();
    // const pdfWithout = await workerWithout.get("pdf");
    // const pdfBlobWithout = pdfWithout.output("blob");
    // const fileWithout = new File([pdfBlobWithout], "without_pages.pdf", {
    //   type: "application/pdf"
    // });

    // return fileWithout;
  // };


  const { state, dispatch } = useApp();
  const VEHICLE_AND_MOT_DATA = state?.VEHICLE_AND_MOT_DATA as VehicleDetails;

  const recaptchaRef = useRef(null);
  const [showCaptcha, setShowCaptcha] = useState(false);
  const { request } = useRequest();

  const router = useRouter();
  // const pdfFileRef = useRef<HTMLInputElement>(null);
  // const numberpdfFileRef = useRef<HTMLInputElement>(null);

  const onSubmit = async (values, { setSubmitting }) => {
    // const pdfFile = null;
    // const pdfFile = await handleGeneratePdf();


    try {
      // Check for cookie consent
      if (!isCookiesAccepted()) {
        // toastr("You must accept cookies to submit the form.", "error", "Cookies Not Accepted");
        toastr("", "error", "Privacy / Cookies Policy Not Accepted");
        setSubmitting(false);
        return;
      }
      // Check if cookieCountSecondPage >= cookieLimitSecondPage before processing
      const preCookieCountSecondPage = parseInt(
        Cookies.get("cookieCountSecondPage") || "0",
        10
      );
      const preCookieLimit = parseInt(
        Cookies.get("cookieLimitSecondPage") || "0",
        10
      );
      if (
        !isNaN(preCookieLimit) &&
        preCookieCountSecondPage >= preCookieLimit
      ) {
        dispatch({
          ...state,
          SECOND_PAGE_FORMDATA: values
        });
        router.push(`/manual-entry`);
        setSubmitting(false);
        return;
      }
      setSubmitting(true);

      // ✅ Build FormData
      const formData = new FormData();

      // Add all normal fields
      formData.append("vrm", values.vrm);
      formData.append("name", values.name);
      formData.append("email", values.email);
      formData.append("mobile", values.mobile);
      formData.append("post_code", values.post_code);
      formData.append("city", values.city);
      formData.append("additional_information", values.additional_information);

      // ✅ Attach the file
      // const fileInput = pdfFile;
      // const numberfileInput = numberpdfFileRef.current;

      // formData.append("pdf_file", fileInput);

      // if (fileInput?.files?.length) {
      //   formData.append("pdf_file", fileInput.files[0]);
      //   console.log("✅ Attached PDF:", fileInput.files[0]);
      // } else {
      //   console.log("⚠️ No file selected");
      // }

      // ✅ Now send FormData instead of JSON
      const res1 = await request("SECOND_PAGE_FORMDATA", formData);

      toastr(res1.message, "success", "Success");
      dispatch({
        ...state,
        SECOND_PAGE_FORMDATA: res1?.data ?? {}
      });
      // Increment cookieCountSecondPage after successful submit
      let cookieCountSecondPage = parseInt(
        Cookies.get("cookieCountSecondPage") || "0",
        10
      );
      if (isNaN(cookieCountSecondPage)) cookieCountSecondPage = 0;
      cookieCountSecondPage += 1;
      Cookies.set("cookieCountSecondPage", cookieCountSecondPage.toString());
      // Check against limit and update isHit/ipAllowed if needed
      const cookieLimitSecondPage = parseInt(
        Cookies.get("cookieLimitSecondPage") || "0",
        10
      );
      if (
        !isNaN(cookieLimitSecondPage) &&
        cookieLimitSecondPage > 0 &&
        cookieCountSecondPage >= cookieLimitSecondPage
      ) {
        Cookies.set("isHitSecond", "false");
        dispatch({
          ...state,
          ipAllowed: false
        });
      }
      router.push("/thank-you");
    } catch (err) {
      toastr(err.message, "error", "Error Occurred");
    } finally {
      setSubmitting(false);
    }
  };

  const formik = useFormik({
    initialValues: {
      vrm: state?.vrm,
      name: "",
      email: "",
      mobile: null,
      post_code: null,
      city: "",
      additional_information: "",
      pdf_file: null, // Assuming pdf is a file input, initialized as null,
      number_pdf_file: null
    },
    validationSchema: halfValuationSchema,
    onSubmit: onSubmit
  });

  const getHitIp = async () => {
    try {
      const res = await request("USER_IP_CHECK");
      //@ts-expect-error "Invalid"
      const isAllowed = res?.data?.allowed;
      Cookies.set("isHitSecond", isAllowed);
      dispatch({
        ...state,
        ipAllowed: isAllowed
      });
    } catch (err) {
      console.log(err);
    }
  };
  useEffect(() => {
    getHitIp();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const { handleSubmit, isSubmitting } = formik;
  return (
    <>
      <div className={styles.HalfValuationBlock}>
        <Container className="bigContainer">
          <div className="vehiclechangescardBlock ">
            <div
              className={`${styles.CarBrandsCard} d-md-flex align-items-center justify-content-between`}
            >
              <div className={`${styles.ManuallyHd} d-flex align-items-center`}>
                {VEHICLE_AND_MOT_DATA.vehicleInformation?.makelogourl ==
                null ? (
                  <i>
                    <Image
                      style={{ width: "6rem" }}
                      src={`/assets/logos/${VEHICLE_AND_MOT_DATA.vehicleInformation?.Make}.png`}
                      alt="mazda"
                    />
                  </i>
                ) : (
                  <i>
                    <Image
                      style={{ width: "6rem" }}
                      src={`${VEHICLE_AND_MOT_DATA.vehicleInformation?.makelogourl}`}
                      alt="mazda"
                    />
                  </i>
                )}

                <h3>{VEHICLE_AND_MOT_DATA.vehicleInformation?.MakeModel}</h3>
              </div>

              <Button
                className={styles.ManuallyBtn}
                onClick={() => router.push("/manual-entry")}
              >
                Not your cars? <small>enter car details manually</small>
              </Button>
            </div>
            <div className={styles.HalfValuationForm}>
              <h4>For Free Valuation please fill the form below</h4>
              <FormikProvider value={formik}>
                <FormikForm onSubmit={handleSubmit}>
                  <Row>
                    <Col md={6}>
                      <CxTextInput
                        name="name"
                        required={true}
                        label="Your Name Please"
                        placeholder="Full Name"
                        maxLength={20}
                      />
                    </Col>
                    <Col md={6}>
                      <CxTextInput
                        name="email"
                        label="Email Address"
                        required={true}
                        placeholder="We will send valuation email"
                      />
                    </Col>
                    <Col md={4}>
                      <CxTextInput
                        name="mobile"
                        label="Mobile Number"
                        required={true}
                        placeholder="Carefully enter please"
                        maxLength={11}
                      />
                    </Col>
                    <Col md={4}>
                      <CxTextInput
                        name="post_code"
                        label="Enter Your post code"
                        required={true}
                        placeholder="Carefully enter half of full postcode"
                      />
                    </Col>
                    <Col md={4}>
                      <CxTextInput
                        name="city"
                        label="City"
                        required={true}
                        placeholder="City"
                        maxLength={20}
                      />
                    </Col>
                    <Col md={12}>
                      <CxTextArea
                        name="additional_information"
                        label="Mechanical,  electrical or body work issue?"
                        required={true}
                        placeholder="Message to the buyer / Additional information"
                        maxLength={300}
                      />
                    </Col>
                    <Button
                      className="btn-custom full_value_btn_google"
                      type="submit"
                      disabled={isSubmitting}
                    >
                      Value My Car
                      <Image
                        src="../assets/cursor-icon.png"
                        alt="cursor-icon"
                      />
                    </Button>
                  </Row>
                </FormikForm>
              </FormikProvider>
            </div>

            <div className="CarImgCard">
              <Image src="/assets/carImg.png" alt="carImg" />
            </div>
            <div className="CarImgCardOne">
              <Image src="/assets/carImg1.png" alt="carImg" />
            </div>
            <div className="captcha" style={{ position: "relative" }}>
              {void console.log("showCaptcha", showCaptcha)}
              {void console.log("viewCaptchaBtn", viewCaptchaBtn)}
              {void console.log("directShowData", directShowData)}
              {void console.log("setOpen==>>>>", setOpen, open)}
              {viewCaptchaBtn && showCaptcha ? (
                <ReCAPTCHA
                  ref={recaptchaRef}
                  sitekey={"6Ldx8qQrAAAAAMPiITAcIZbhGzTO-ALFu1RfZJy7"}
                  onChange={() => setOpen(!open)}
                />
              ) : null}
            </div>
            
            {showSecondpageData ? (
              <>
                <a
                  className={styles.ViewMore}
                  onClick={() => {
                    if (!viewCaptchaBtn) {
                      setOpen(!open);
                    } else {
                      setShowCaptcha(true);
                    }
                  }}
                  aria-controls="example-collapse-text"
                  aria-expanded={open}
                  // size={"sm"}
                >
                  {!directShowData ? (!open ? "View More" : "View Less") : ""}
                </a>
              </>
            ) : (
              ""
            )}
          </div>
        </Container>
      </div>
    </>
  );
}

export default HalfValuationCard;