import React, { useEffect, useState } from "react";
import useAuthProvider from "@/useAuthProvider";
import { InputSwitch } from "primereact/inputswitch";
import "primereact/resources/primereact.css";
import "primereact/resources/themes/saga-blue/theme.css";
import { getcarrierbyid ,powerUnitUpdate} from "@/services/public";
import { FormLabel, FormControl, Col, Button, Modal } from "react-bootstrap";
import { ToastContainer, toast } from "react-toastify";
import { object, string, SchemaOf } from "yup";
import { Controller, useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";

import {
  carriersinfoDetails,
  carriersinfoDetailsUpdate,
  sendBulletin,
  BusinessCarrierUpdate,
} from "@/services/profile";
import { useSession } from "next-auth/react";
import { ScaleLoader } from "react-spinners";
import EditCarrierProfile from "./EditCarrierProfile";
import { WebsiteRules } from "@/utils/regex/regex";
function CarrierDetails() {  

  const { Permission: userData } = useAuthProvider();

  const [checkedone, setCheckedone] = useState(false);
  const [ftchecked, setftchecked] = useState(false);
  const [hazchecked, sethazchecked] = useState(false);
  const [bondedchecked, setbondedchecked] = useState(false);
  const [chassischecked, setchassischecked] = useState(false);
  const [transloadchecked, settransloadchecked] = useState(false);
  const [parkingchecked, setparkingchecked] = useState(false);
  const [isViewLogOpen, setViewLogOpen] = useState(false);
  const [update] = useState(false);
  const [isloading, setIsloading] = useState(false);
  const { data } = useSession();
  const carrierId = data?.user?.carrier_id;
  const User_id = data?.user?.id
  const token = data?.user?.image;
  
  const [datalisting, setDataListint] = useState();
  function validateWebsite(value) {
    const regexPattern = WebsiteRules;
    return regexPattern.test(value);
  }
  const schema: SchemaOf<FormData> = object().shape({
    scac: string().required("SCAC Code is required"),
    business_website: string()
      .required("business website is required")
      .test("isValidWebsite", "Invalid business website format.", (value) =>
        validateWebsite(value),
      )
      .max(100, "Website URL cannot exceed 100 characters"),
  });
  function prefillData(userDetails) {
    setValue("business_website", userDetails.business_website);

    setValue("scac", userDetails?.scac);
  }
  const updateCheckboxStates = (data1) => {
    setCheckedone(data1.size === 1);
    setftchecked(data1.height === 1);
    sethazchecked(data1.is_hazmat === 1);
    setchassischecked(data1.chassis === 1);
    setbondedchecked(data1.bonded === 1);
    settransloadchecked(data1.transload === 1);
    setparkingchecked(data1.parking === 1);
  };

  const carriersinfoDetailsGet = async (authtoken, carrier) => {
    await carrierinfoDetailsScope(authtoken, carrier, setIsloading, updateCheckboxStates, setDataListint, prefillData);
  };

  const {
    handleSubmit,
    control,
    setValue,
    formState: { errors },
  } = useForm<FormData>({
    resolver: yupResolver(schema),
  });
  useEffect(() => {
    carriersinfoDetailsGet(token, carrierId);
  }, [token, carrierId, update, !isViewLogOpen]);

  const carriersinfoDetailsPost = carriersinfoDetailsPostScope(setIsloading);
  const [showRegisterPopup, setShowRegisterPopup] = useState(false);
  const toggleRegisterPopup = () => {
    setShowRegisterPopup((prev) => !prev);
  };
  const createCheckboxHandler = (stateUpdater, propertyName) => (e) => {
    stateUpdater(e.target.value);
    const payload = {
      bonded: +bondedchecked,
      chassis: +chassischecked,
      transload: +transloadchecked,
      parking: +parkingchecked,
      size: +checkedone,
      height: +ftchecked,
      is_hazmat: +hazchecked,
      [propertyName]: e.target.value ? 1 : 0,
      carrier_id: carrierId,
    };

    carriersinfoDetailsPost(token, payload);
  };

  const SwitchRow = ({ label, checked, onChange }) => (
    <tr>
      <td>
        <label>
          {label} :
          <InputSwitch disabled={userData?.EditCarrierDetailstab?false:true} checked={checked} onChange={onChange} />
        </label>
      </td>
    </tr>
  );

  const renderSwitches = () => (
    <>
      {renderSwitchesScope({ SwitchRow, checkedone, createCheckboxHandler, setCheckedone, ftchecked, setftchecked, hazchecked, sethazchecked, bondedchecked, setbondedchecked, chassischecked, setchassischecked, transloadchecked, settransloadchecked, parkingchecked, setparkingchecked })}
    </>
  );

  const InfoCard = ({ title, data2 }) => (
    <Col>
      <div className="card_body">
        <h5 className="g-1 mb-1">{title}</h5>
        {data2?.map((item: any) => <p key={item}>{item}</p>)}
      </div>
    </Col>
  );

  const rawData = datalisting?.state_names;
  const dataArray = rawData?.split(",");
  const rawMarket = datalisting?.markets?.split(",");
  const rawTerminals = datalisting?.terminal_names?.split(",");
  const [bulletinText, setBulletinText] = useState("");
  const [obj, setObj] = useState();
  const handleSaveClick = async (e) => {
    const Payload = {
      carrier_id: carrierId,
      carrier_bulletin: bulletinText,
    };
    let res = await sendBulletin(token, Payload);

    toast[res?.status === "success" ? "success" : "error"](res?.message, {
      position: toast.POSITION.TOP_CENTER,
    });
  };
  useEffect(() => {
    const fetchData = async () => {
      let res = await getcarrierbyid(token, carrierId);
      setBulletinText(res?.data?.bulletin);
      setObj(res?.data);
    };
    fetchData();
  }, []);
  const [fmcsaPayload, setFmcsaPayload] = useState({ total_driver: '', total_power_unit: '', user_id:'' });
  useEffect(() => {
    if (obj) {
      setFmcsaPayload({
        total_driver: driverObj12(obj), 
        total_power_unit: swPowerScope(obj), 
        user_id: User_id,
      });
    }
  }, [obj]);
  const handleChange = (e) => {
    let { name, value } = e.target;
    const maxLengths = {
      total_driver: 5,
      total_power_unit: 5,
    };
    if (/^\d*$/.test(value) && value.length <= (maxLengths[name] || Infinity)) {
      setFmcsaPayload(prevState => ({
        ...prevState,
        [name]: value
      }));
    }
  };
  
  const toggleSubmit = async () => {
    let res = await powerUnitUpdate(token, fmcsaPayload)
    if (res?.status === "success"){
      toast.success(res.message, {
        position: toast.POSITION.TOP_CENTER,
      });
    }
  }
  const onSubmit = async (payload) => {
    try {
      const modifiedPayload = {
        carrier_id: carrierId,
        business_website: payload.business_website,
        scac: payload.scac,
      };
      let res = await BusinessCarrierUpdate(
        data?.user?.image,

        modifiedPayload,
      );
      if (res?.status === "success") {
        toast.success(res.message, {
          position: toast.POSITION.TOP_CENTER,
        });
      }
    } catch (error) {
      return error;
    }
  };

  return jsxContent({ isloading, bulletinText, setBulletinText, userData, handleSaveClick, obj, toggleRegisterPopup, renderSwitches, isViewLogOpen, setViewLogOpen, InfoCard, dataArray, rawMarket, rawTerminals, handleSubmit, onSubmit, data, control, errors, validateWebsite, showRegisterPopup, handleChange, fmcsaPayload, toggleSubmit });
}

export default CarrierDetails;
function jsxContent({ isloading, bulletinText, setBulletinText, userData, handleSaveClick, obj, toggleRegisterPopup, renderSwitches, isViewLogOpen, setViewLogOpen, InfoCard, dataArray, rawMarket, rawTerminals, handleSubmit, onSubmit, data, control, errors, validateWebsite, showRegisterPopup, handleChange, fmcsaPayload, toggleSubmit }: { isloading: boolean; bulletinText: string; setBulletinText: React.Dispatch<React.SetStateAction<string>>; userData: undefined; handleSaveClick: (e: any) => Promise<void>; obj: undefined; toggleRegisterPopup: () => void; renderSwitches: () => JSX.Element; isViewLogOpen: boolean; setViewLogOpen: React.Dispatch<React.SetStateAction<boolean>>; InfoCard: ({ title, data2 }: { title: any; data2: any; }) => JSX.Element; dataArray: any; rawMarket: any; rawTerminals: any; handleSubmit: any; onSubmit: (payload: any) => Promise<unknown>; data; control; errors; validateWebsite: (value: any) => boolean; showRegisterPopup: boolean; handleChange: any; fmcsaPayload: any; toggleSubmit :any}) {


  
  return <>
    {isloading && (
      <div id="loader_table">
        <ScaleLoader color="#3180f3" className="table_loader" />
      </div>
    )}
    <ToastContainer />
    {JsxnewContent()}

    {JsxnewContent1(bulletinText, setBulletinText, userData, handleSaveClick)}
    <div style={{ display: "flex" }}>
      <div className="table-header-carrier">
        <h3 className="carriers-h6 mb-3">
          <b>General Information</b>
        </h3>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "12px",
            margin: "1px",
          }}
        >
          <p className="mb-3" style={{ fontSize: "medium" ,fontWeight: "200"}}>
            MC Number:
          </p>
          <input
            maxLength={150}
            style={{ width: "fit-content", padding: "0px",backgroundColor:"#c3bdbd" }}
            className="form-control-input mb-3"
            type="text"
            disabled={true}
            value={mcNumberScopedata(obj)}
            // onChange={(e) => setBulletinText(e.target.value)}
            placeholder="Enter Mc number" />

          <p style={{ fontSize: "medium",fontWeight: "200" }} className="mb-3">
            Carrier Name:
          </p>
          <input
            style={{
              width: "101px",
              padding: "4px",
              backgroundColor: "#c3bdbd",
              width: "fit-content"
            }}
            maxLength={150}
            className="form-control-input mb-3"
            type="text"
            disabled={true}
            // onChange={(e) => setBulletinText(e.target.value)}
            value={objnameScope(obj)}

            // onChange={(e) => setBulletinText(e.target.value)}
            placeholder="Enter Carrier Name" />
          <p style={{ fontSize: "medium",fontWeight: "200" }} className="mb-3">
            Drivers:
          </p>
          <input
            style={{
              width: "101px",
              padding: "4px",
            }}
            maxLength={10}
            disabled={data?.user?.is_child === 1 ?true:false}
            className="form-control-input mb-3"
            type="number"
            name="total_driver"
            // value={driverObj12(obj)}
            value={fmcsaPayload.total_driver || ''} // Bind to state
            onChange={(e)=>handleChange(e)}
            // onChange={(e) => setBulletinText(e.target.value)}
            placeholder="Enter drivers" />
          <p style={{ fontSize: "medium",fontWeight: "200" }} className="mb-3">
            Power Units:
          </p>
          <input
            style={{
              width: "101px",
              padding: "4px",
              width: "fit-content"
            }}
            maxLength={150}
            disabled={data?.user?.is_child === 1 ? true : false}

            className="form-control-input mb-3"
            type="number"
            name="total_power_unit"
            onChange={(e)=>handleChange(e)}
            value={fmcsaPayload.total_power_unit || ''} 
            placeholder="Enter power units" />
          {data?.user?.is_child === 0 ? <Button
            style={{
              width: "100 %",
              marginBottom: " 16px",
              // height: "136%",
            }}
            disabled={disabledScope(bulletinText)}
            type="submit"
            className="btn btn-primary divStylecss-update"
            onClick={toggleSubmit}
          >
            Save
          </Button>:""}  
      
          <Button
            style={{
              width: "100 %",
              marginBottom: " 16px",
              // height: "136%",
            }}
            disabled={disabledScope(bulletinText)}
            type="submit"
            className="btn btn-primary divStylecss-update"
            onClick={toggleRegisterPopup}
          >
            Request&nbsp;Changes
          </Button>
        </div>
      </div>
    </div>
    <div className="table_resonsive toggle_table c">
      <table className="table">{renderSwitches()}</table>
    </div>

    <div className={isViewLogOpenScopeCheck(isViewLogOpen)}>
      {isViewLogOpen && (
        <EditCarrierProfile
          onClose={() => {
            setViewLogOpen(false);
          } } />
      )}
    </div>
    {jsxFunContent(userData, setViewLogOpen)}
    <div className="row row-cols-1 row-cols-md-3 g-4">
      <InfoCard title="State" data2={dataArray} />
      <InfoCard title="Markets" data2={rawMarket} />
      <InfoCard title="Terminals" data2={rawTerminals} />
    </div>
    <form className="row g-4 form-carrier" onSubmit={handleSubmit(onSubmit)}>
      <div className="scac-value">
        {handleSubmitHandler(data, control, errors)}
      </div>
      {userData?.EditCarrierDetailstab ? <div className="col-12 primary-save">
        <Button
          onClick={() => validateWebsite()}
          type="submit"
          className="btn btn-primary divStylecss-update"
        >
          Save
        </Button>
      </div> : ""}

    </form>
    <Modal show={showRegisterPopup} onHide={toggleRegisterPopup}>
      <Modal.Body>
        <p className="justify-content-center registrationText">
          &quot;To request a change of the preceding information please send
          an email to <a style={{ color: "blue" }}>support@draydex.com</a>{" "}
          including your full name, current Carrier Name, and a phone number
          where you can be reached and a support associate will contact
          you.&quot;{" "}
        </p>
      </Modal.Body>
      <Modal.Footer>
        <div style={{ textAlign: "center" }}>
          <Button variant="secondary" onClick={toggleRegisterPopup}>
            Close
          </Button>
        </div>
      </Modal.Footer>
    </Modal>
  </>;
}

function handleSubmitHandler(data: any, control: any, errors: any): React.ReactNode {
  return data?.user?.group_type === "carriers" ? (
    <>
      <div className="col-md-6  ">
        <FormLabel htmlFor="business_city">SCAC Code:</FormLabel>
        <Controller
          name="scac"
          control={control}
          render={({ field }) => (
            <FormControl
              type="text"
              maxLength={10}
              className={`form-control ${errors.scac ? "is-invalid" : ""}`}
              id="scac"
              {...field}
              onChange={(e) => {
                const inputValue = e.target.value.toUpperCase();
                if (/^[A-Z]*$/.test(inputValue)) {
                  field.onChange(inputValue);
                }
              } } />
          )} />
        {errors.scac && (
          <p className="text-danger">{errors.scac.message}</p>
        )}
      </div>
      <div className="col-md-6  ">
        <FormLabel htmlFor="business_website">
          Company Website:
        </FormLabel>
        <div className="email_seprate">
          <Controller
            name="business_website"
            control={control}
            render={({ field }) => (
              <FormControl
                type="text"
                className={`form-control ${errors.business_website ? "is-invalid" : ""}`}
                id="business_website"
                {...field} />
            )} />
        </div>
        {errors.business_website && (
          <p className="text-danger">
            {errors.business_website.message}
          </p>
        )}
      </div>
    </>
  ) : (
    ""
  );
}

function jsxFunContent(userData: undefined, setViewLogOpen: React.Dispatch<React.SetStateAction<boolean>>) {
  return userData?.EditCarrierDetailstab ? <span className="edit__btn ">
    <i onClick={() => setViewLogOpen(true)} className="bi bi-pen ">
      Edit
    </i>
  </span> : "";
}

function isViewLogOpenScopeCheck(isViewLogOpen: boolean): string | undefined {
  return `${isViewLogOpen ? "overlay" : ""}`;
}

function swPowerScope(obj) {
  return obj?.sw_power_units_total ? obj?.sw_power_units_total : "N/A";
}

function driverObj12(obj){
  return obj?.sw_drivers_total ? obj?.sw_drivers_total : "N/A";
}

function objnameScope(obj) {
  
  return obj?.billing_company ? obj?.billing_company : "N/A";
}

function mcNumberScopedata(obj) {
  return obj?.mc_number ? obj?.mc_number : "N/A";
}

function disabledScope(bulletinText: string): boolean | undefined {
  return bulletinText?.length === 0 ? true : false;
}

function JsxnewContent1(bulletinText: string, setBulletinText: React.Dispatch<React.SetStateAction<string>>, userData: undefined, handleSaveClick: (e: any) => Promise<void>) {
  return <div className="row">
    <div className="col-md-11">
      <input
        maxLength={150}
        className="form-control mb-3"
        type="text"
        value={bulletinText}
        onChange={(e) => setBulletinText(e.target.value)}
        placeholder="Enter bulletin" />
    </div>
    {userData?.EditCarrierDetailstab ? <div className="col-md-1">
      <Button
        style={{ height: "fit-content" }}
        disabled={EditCarrierDetailstabScope(bulletinText)}
        type="submit"
        className="btn btn-primary divStylecss-update"
        onClick={handleSaveClick}
      >
        Save
      </Button>
    </div> : ""}

  </div>;
}

function EditCarrierDetailstabScope(bulletinText: string): boolean | undefined {
  return bulletinText?.length === 0 ? true : false;
}

function JsxnewContent() {
  return <div className="">
    <div className="table-header-carrier">
      <h3>Carrier Bulletin</h3>
    </div>
    <label style={{ paddingBottom: "6px", fontSize: "15px" }} className="">
      Information entered below can be viewed by Brokers.
    </label>
  </div>;
}

function carriersinfoDetailsPostScope(setIsloading: React.Dispatch<React.SetStateAction<boolean>>) {
  return async (authtoken, value) => {
    try {
      setIsloading(true);
      const response = await carriersinfoDetailsUpdate(authtoken, value);
      const status = response?.status;

      toast[status === "success" ? "success" : "error"](response?.message, {
        position: toast.POSITION.TOP_CENTER,
      });
    } catch (error) {
      return error;
    } finally {
      setIsloading(false);
    }
  };
}

function renderSwitchesScope({ SwitchRow, checkedone, createCheckboxHandler, setCheckedone, ftchecked, setftchecked, hazchecked, sethazchecked, bondedchecked, setbondedchecked, chassischecked, setchassischecked, transloadchecked, settransloadchecked, parkingchecked, setparkingchecked }: { SwitchRow: ({ label, checked, onChange }: { label: any; checked: any; onChange: any; }) => JSX.Element; checkedone: boolean; createCheckboxHandler: (stateUpdater: any, propertyName: any) => (e: any) => void; setCheckedone: React.Dispatch<React.SetStateAction<boolean>>; ftchecked: boolean; setftchecked: React.Dispatch<React.SetStateAction<boolean>>; hazchecked: boolean; sethazchecked: React.Dispatch<React.SetStateAction<boolean>>; bondedchecked: boolean; setbondedchecked: React.Dispatch<React.SetStateAction<boolean>>; chassischecked: boolean; setchassischecked: React.Dispatch<React.SetStateAction<boolean>>; transloadchecked: boolean; settransloadchecked: React.Dispatch<React.SetStateAction<boolean>>; parkingchecked: boolean; setparkingchecked: React.Dispatch<React.SetStateAction<boolean>>; }) {
  return <tbody>
    <tr>
      <td>
        <SwitchRow
          label="20/40FT"
          checked={checkedone}
          onChange={createCheckboxHandler(setCheckedone, "size")} />
      </td>
      <td>
        <SwitchRow
          label="53FT"
          checked={ftchecked}
          onChange={createCheckboxHandler(setftchecked, "height")} />
      </td>
      <td>
        <SwitchRow
          label="HAZ"
          checked={hazchecked}
          onChange={createCheckboxHandler(sethazchecked, "is_hazmat")} />
      </td>
    </tr>
    <tr>
      <td>
        <SwitchRow
          label="BONDED"
          checked={bondedchecked}
          onChange={createCheckboxHandler(setbondedchecked, "bonded")} />
      </td>
      <td>
        <SwitchRow
          label="CHASSIS"
          checked={chassischecked}
          onChange={createCheckboxHandler(setchassischecked, "chassis")} />
      </td>
      <td>
        <SwitchRow
          label="TRANSLOAD"
          checked={transloadchecked}
          onChange={createCheckboxHandler(settransloadchecked, "transload")} />
      </td>
    </tr>
    <tr>
      <td>
        <SwitchRow
          label="PARKING"
          checked={parkingchecked}
          onChange={createCheckboxHandler(setparkingchecked, "parking")} />
      </td>
      <td></td>
      <td></td>
    </tr>
  </tbody>;
}

async function carrierinfoDetailsScope(authtoken: any, carrier: any, setIsloading: React.Dispatch<React.SetStateAction<boolean>>, updateCheckboxStates: (data1: any) => void, setDataListint: React.Dispatch<React.SetStateAction<undefined>>, prefillData: (userDetails: any) => void) {
  try {
    const response = await carriersinfoDetails(authtoken, carrier);
    if (response?.status === "success") {
      setIsloading(false);
      updateCheckboxStates(response.data);
      setDataListint(response?.data);
      prefillData(response?.data);
    } else {
      setIsloading(false);
    }
  } catch (error) {
    setIsloading(false);
  }
}