import { useEffect, useState, useRef, Fragment} from "react";
import { ScaleLoader } from "react-spinners";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { useSession } from "next-auth/react";
import { CarrierTableAll, toGetTableColumnData, toResetTableHeaderColumns } from "@/services/public";
import { authOptions } from "@/pages/api/auth/[...nextauth]";
import { getServerSession } from "next-auth/next";
import ProtectedRoute from "@/ProtectedRoute";
import "primereact/resources/primereact.css";
import SubscriptionPlansModal from "@/components/ui/modal/SubscriptionPlansModal";
import "primereact/resources/themes/saga-blue/theme.css";
import Layout from "@/components/layouts/Layout";
import Head from "next/head";
import Breadcrumb from "@/components/ui/pages/Breadcrumb";
import { getRateQuotess } from "@/services/rateQuotes";
import { useRouter } from "next/router";
import { Dropdown } from "primereact/dropdown";
import { InputText } from "primereact/inputtext";
import "primeicons/primeicons.css";
import { MultiSelect } from "primereact/multiselect";
import { Button } from "primereact/button";
import Link from "next/link";
import moment from "moment";
import { InputNumber, InputGroup, DateRangePicker, DatePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import { Paginator } from "primereact/paginator";
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import { object, string, SchemaOf } from "yup";
import useAuthProvider from "@/useAuthProvider";
import { toCheckUserTypeSubscreption } from "../../helpers/toCheckUserType";
import Image from "next/image";
import { useCollapsed } from "@/components/Context/CollapsedContext";
import star from "../../public/images/star.svg";
import { Tooltip } from "primereact/tooltip";
import { ParsedUrlQuery } from "querystring";
import { Session } from "next-auth";
import Select from 'react-select';
import { getPorts } from "@/services/dashboard";
import {
  equipments,
  sizes,
} from "@/helpers/constants/static/values";
import RunAnalysis from "@/components/ui/run-analysis/RunAnalysis";
import styles from "@/styles/MultiSelect.module.css";
import PaginationTitle from "@/components/ui/pages/PaginationTitle";
import { toast, ToastContainer } from "react-toastify";
import CreateRateModal from "@/components/ui/modal/CreateRateModal";
import { toUpdateTableColumn } from "@/helpers/toUpdateTableColumn";

interface Props {
  datalisting: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
}

const DATE_FORMAT = 'YYYY-MM-DD';

const getRawStartDate = () => {
  return moment().subtract(1, "years");
}

const getRawEndDate = () => {
  return moment();
}

const getStartDate = () => {
  return getRawStartDate().format(DATE_FORMAT);
};

const getEndDate = () => {
  return getRawEndDate().format(DATE_FORMAT);
}

const dateRangeLogic = () => {
  return [new Date(getRawStartDate().toISOString()), new Date(getRawEndDate().toISOString())];
}

function Index(props: Props) {
  const { data } = useSession();
  const Router = useRouter();
  const { Permission: userData } = useAuthProvider();
  const formData = Router.query;
  const [isloading, setIsloading] = useState(true);
  const [totalRecords, setTotalRecords] = useState(0);
  const dt = useRef(null);
  const [startdate, setstartdate] = useState(() => getStartDate());
  const [enddate, setenddate] = useState(() => getEndDate());
  const [first, setFirst] = useState(0);
  const token = data?.user?.image;
  const userType= data?.user; 
  const [rateQuotesdata, setRateQuotesdata] = useState();
  const [dateRange, setDateRange] = useState(() => dateRangeLogic());

  const [requestdateFiltervalue, setrequestdateFiltervalue] = useState(null);
  const [dispatcherFilterValue, setdispatcherFilterValue] = useState("");
  const [salesrepFilterValue, setsalesrepFilterValue] = useState("");
  const [EngagementFilterValue,setEngagementFilterValue] = useState("")

  const [equipmentFilterValue, setequipmentFilterValue] = useState("");
  const [quoteFilterValue, setquoteFilterValue] = useState("");
  const [customerLeadFilterValue, setcustomerLeadFilterValue] = useState("");
  const [StatusLeadFilterValue, setStatusLeadFilterValue] = useState("");

  const [typeFilterValue, settypeFilterValue] = useState("");
  const [sizeFilterValue, setsizeFilterValue] = useState("");
  const [portnameFilterValue, setportnameFilterValue] = useState(formData?.port);
  const [quickNote, setQuickNotes] = useState();
  const [origindestinationFilterValue, setorigindestinationFilterValue] =
    useState("");
  const [sortField, setSortField] = useState(null);
  const [sortOrder, setSortOrder] = useState(null);

  const [minValue, setMinValue] = useState(formData?.min);
  const [maxValue, setMaxValue] = useState(formData?.max);
  const [fscminValue, setfscminValue] = useState("");
  const [fscmaxValue, setfscmaxValue] = useState("");
  const [isFiltered, setIsFiltered] = useState(false);
  const [selectedOption, setSelectedOption] = useState(null);
  const [togetMarketList, setTogetMarketList] = useState([]);
  const [marketOptionValue, setMarketOptionValue] = useState([]);
  const [perPageDataShow, setPerPageDataShow] = useState(0);
  const [rows, setRows] = useState(10);
  const [selectedRows, setSelectedRows] = useState([]);
  const [createRateQuoteModalStatus, setCreateRateQuoteModalStatus] = useState(false);
  const [createQuoteTableModalStatus, setCreateQuoteTableModalStatus] = useState(false);
  const [columns, setColumns] = useState<any>([]);
  const [columnsUpdateStatusCount, setColumnsUpdateStatusCount] = useState(0);
  const [tableHeaderId, setTableHeaderId] = useState("");
  const [resetTableHeaderStatus, setResetTableHeaderStatus] = useState(false);
  const [tableKey, setTableKey] = useState(0);

  const filteredDateRangeData = () => {
    setstartdate(getStartDate());
    setenddate(getEndDate());
    setDateRange(dateRangeLogic());
  };

  const schemaDFOD: SchemaOf<FormData> = object().shape({
    minValue: string().required("Min range is required"),
    maxValue: string().required("Max range is required"),
  });

  const schemaFSC: SchemaOf<FormData> = object().shape({
    fscminValue: string().required("Min range is required"),
    fscmaxValue: string().required("Max range is required"),
  });

  const {
    handleSubmit: handleSubmitDFOD,
    control: controlDFOD,
    setValue: setValueDFOD,
    formState: { errors: errorsDFOD },
  } = useForm<FormData>({
    resolver: yupResolver(schemaDFOD),
  });

  const {
    handleSubmit: handleSubmitFSC,
    control: controlFSC,
    setValue: setValueFSC,
    formState: { errors: errorsFSC },
  } = useForm<FormData>({
    resolver: yupResolver(schemaFSC),
  });

  const fetchTableColumn = async ()=>{
    const requestPayload: any = {
      requestType: 'rate_quotes'
    }
    const response = await toGetTableColumnData(requestPayload);
    if(response?.status == 'success'){
      setColumns(response?.data?.column_preferences);
      setTableHeaderId(response?.data?.id);
    }
  }

  useEffect(()=>{
    fetchTableColumn();
  },[columnsUpdateStatusCount, resetTableHeaderStatus])
  const [visibleColumns, setVisibleColumns] = useState(columns);

  const [
    distanceorigindestinationFilterValue,
    setdistanceorigindestinationFilterValue,
  ] = useState("");
  const [fsctotalFilterValue, setfsctotalFilterValue] = useState("");

  let request_date_filter = request_date_filter_Mod(requestdateFiltervalue);

  const isDateDisabled = (date: number) => {
    return date > new Date();
  };

  useEffect(()=>{
    const storedRateColumn = localStorage.getItem('rate_qoute_selection');
    let selectedRateColumn: any[] = [];
    try {
      const parsed = JSON.parse(storedRateColumn ?? '[]');
      if (Array.isArray(parsed)) {
        selectedRateColumn = parsed;
      }
    } catch (error) {
      selectedRateColumn = [];
    }
    if (selectedRateColumn.length > 0) {
      const oldFieldSet = new Set(selectedRateColumn.map(item => item.field));
      const matchedData = columns.filter((item: { field: any; }) => oldFieldSet.has(item.field));
      setVisibleColumns(matchedData);
    } else {
      setVisibleColumns(columns);
    }
  },[columns])
  
  useEffect(() => {
    const fetchMarketData = async () => {
      let res = await getPorts();
      setTogetMarketList(res?.data);  
      const marketFinalData = res?.data || [];
      if(portnameFilterValue){
        const filteredRateQuoteMarketLocations = marketFinalData.filter(market => market.market === portnameFilterValue);
        if(filteredRateQuoteMarketLocations.length > 0){
          setSelectedOption(filteredRateQuoteMarketLocations);
        }
      }
    };
    filteredDateRangeData();
    fetchMarketData(); 
  }, [portnameFilterValue]);
  
  const rateQuotesDataGet = rateQuotesDataGetnewFunction(setIsloading, formData, setIsFiltered, setQuickNotes, setTotalRecords, setRateQuotesdata, setPerPageDataShow);

  useEffectRateQoutesNewFn({ formData, setValueDFOD, setportnameFilterValue, settypeFilterValue, setsizeFilterValue, setequipmentFilterValue, setMinValue, setMaxValue, minValue, maxValue, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, fscminValue, fscmaxValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue,EngagementFilterValue, marketOptionValue, setstartdate, setenddate, setDateRange, rows, createQuoteTableModalStatus});

  const QuoteBodyTemplate: React.FC<any> = (rowData: string, index) => {
    const [hoveredQuoteId, setHoveredQuoteId] = useState<string | null>(null);

    const handleQuoteHover = (quoteId: string) => {
      setHoveredQuoteId(quoteId);
    };

    const handleQuoteLeave = () => {
      setHoveredQuoteId(null);
    };

    return (
      JSxSCopeIndex(rowData, data, handleQuoteHover, handleQuoteLeave, hoveredQuoteId, setModalStatus)
    );
  };

  const onColumnToggle = (event: { value: any; }) => {
    let selectedColumns = event.value;
    let orderedSelectedColumns = columns.filter((col) =>
      selectedColumns.some((sCol: { field: string; }) => sCol.field === col.field)
    );
    setVisibleColumns(orderedSelectedColumns);
    localStorage.setItem('rate_qoute_selection', JSON.stringify(orderedSelectedColumns));
  }

  const clearFilter = clearFilternewFunction({ formData, setcustomerLeadFilterValue, setrequestdateFiltervalue, setdispatcherFilterValue, setsalesrepFilterValue, setequipmentFilterValue, setquoteFilterValue, settypeFilterValue, setsizeFilterValue, setportnameFilterValue, setorigindestinationFilterValue, setfsctotalFilterValue, setdistanceorigindestinationFilterValue, setDateRange, setValueDFOD, setValueFSC, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setRows, setFirst, rateQuotesDataGet, token ,setStatusLeadFilterValue,setEngagementFilterValue, setSelectedOption, setMarketOptionValue, Router, setSortField, setSortOrder, setSelectedRows, setVisibleColumns, columns});

  const handleDatePickerClose = handleDatePickerClosenewFunction(setValueFSC, setValueDFOD, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setFirst);

  const handleDateRangePickerClose = handleDateRangePickerClosenewFunction(setValueDFOD, setValueFSC, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setFirst);

  const handleDateRangeChange = handleDateRangeChangenewFunction({ rows, setDateRange, setstartdate, setenddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, minValue, maxValue, fscminValue, fscmaxValue, dispatcherFilterValue, rateQuotesDataGet, token ,StatusLeadFilterValue,EngagementFilterValue});
  const handleKeyDown = handleKeyDownnewFunction();

  let quotesRateDetails: any = QuoteRateDetailsnewFunction(userData, quickNote);
  const [modalStatus, setModalStatus] = useState(false);
  const [hoveredPlan, setHoveredPlan] = useState(null);
  const handlePlanHover = (plan: SetStateAction<null>) => {
    setHoveredPlan(plan);
  };

  const handlePlanLeaveEvent = (e: any) => {
    setHoveredPlan(null);
  };

  const fallbackTableData = quickNote?.fallback_table_data;
  const fallbackMaxLinehaul = fallbackTableData?.base_linehaul_max;
  const quickNoteMaxRate = quickNote?.max_rate;


  let resultMaxRate: string = resultMaxRatenewFunction(isFiltered, fallbackTableData, fallbackMaxLinehaul, quickNoteMaxRate);




  let { resultAvgMin, resultChassis }: { resultAvgMin: string; resultChassis: string; } = resultChassisnewFunction(quickNote, quotesRateDetails, isFiltered);

  const clearSelectionFilter = () => {
    toast.success("View reset to default successfully.",{
      position: toast.POSITION.TOP_CENTER,
      className: "toast-font-size",
    });
    localStorage.removeItem('rate_qoute_selection');
    setVisibleColumns(columns);
  }

  const editViewFooterTemplate = () => {
    return (
      <div className="py-2 text-center">
        <Button onClick={()=>clearSelectionFilter()}>Default</Button>
      </div>
    );
  };

  const clearResetOrder = async ()=>{
    try {
      if (!tableHeaderId) {
        return;
      }
      const response = await toResetTableHeaderColumns({ id: tableHeaderId });
      if (response?.status === 'success') {
        setResetTableHeaderStatus((prev: any) => !prev);
        setTableKey((prev: number) => prev + 1);
        toast.success(response.message || 'Reset successful', {
          position: toast.POSITION.TOP_CENTER,
          className: "toast-font-size",
        });
      }
    } catch (error) {
      console.error('Error resetting table header:', error);
    }
  }


  const header = headerNewFn({ selectedRows, modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter, setSelectedOption, selectedOption, editViewFooterTemplate, setCreateRateQuoteModalStatus, createRateQuoteModalStatus, setCreateQuoteTableModalStatus, clearResetOrder});

  const onPageChange = (event: any) => {
    let perpage = event.page + 1;
    setFirst(event.first);
    setRows(event.rows);
    setSortField(null);
    setSortOrder(null);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, perpage, query, event.rows);
  };

  const requestdatehandler = (date: string | number | ((prevState: null) => null) | Date | moment.Moment | (string | number)[] | moment.MomentInputObject | null | undefined) => {
    setrequestdateFiltervalue(date);
    let request_date = date ? moment(date)?.format(DATE_FORMAT) : "";
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query, rows);
  };

  const spacehandler = (event: { which: number; target: { value: string; }; preventDefault: () => void; }) => {
    if (event.which === 32 && event.target.value.trim() === "") {
      event.preventDefault();
    }
  };

  const euipmentLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    const euipmentLeadValue = e.target.value;
    setequipmentFilterValue(e.target.value);
    if (euipmentLeadValue.length === 0 || euipmentLeadValue.length > 2) {
      const query = {
        start_date: startdate,
        end_date: enddate,
        equipment: e.target.value,
        quote: quoteFilterValue,
        customer_lead: customerLeadFilterValue,
        request_date: request_date_filter,
        type: typeFilterValue,
        size: sizeFilterValue,
        port: portnameFilterValue,
        distance_from_origin_destination: distanceorigindestinationFilterValue,
        linehaul_fsc_total: fsctotalFilterValue,
        city: origindestinationFilterValue,
        miles_start_range: minValue,
        miles_end_range: maxValue,
        linehaul_fsc_total_start_range: fscminValue,
        linehaul_fsc_total_end_range: fscmaxValue,
        sales_rep: salesrepFilterValue,
        provided_by: dispatcherFilterValue,
        status:StatusLeadFilterValue,
        rate_count:EngagementFilterValue
      };
      rateQuotesDataGet(token, 1, query, rows);
    }
  };

  const quoteLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setquoteFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: e.target.value,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query, rows);
  };

  const customerLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    const customerLeadValue = e.target.value;
    setcustomerLeadFilterValue(e.target.value);
    if (customerLeadValue.length === 0 || customerLeadValue.length > 2) {
      const query = {
        start_date: startdate,
        end_date: enddate,
        equipment: equipmentFilterValue,
        quote: quoteFilterValue,
        customer_lead: encodeURIComponent(e.target.value),
        request_date: request_date_filter,
        type: typeFilterValue,
        size: sizeFilterValue,
        port: portnameFilterValue,
        distance_from_origin_destination: distanceorigindestinationFilterValue,
        linehaul_fsc_total: fsctotalFilterValue,
        city: origindestinationFilterValue,
        miles_start_range: minValue,
        miles_end_range: maxValue,
        linehaul_fsc_total_start_range: fscminValue,
        linehaul_fsc_total_end_range: fscmaxValue,
        sales_rep: salesrepFilterValue,
        provided_by: dispatcherFilterValue,
        status:StatusLeadFilterValue,
        rate_count:EngagementFilterValue
  
      };
      rateQuotesDataGet(token, 1, query, rows);
    }
  };
  const StatusLeadFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setStatusLeadFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:e.target.value,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query, rows);
  };
  const typeFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    settypeFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: e.target.value,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query, rows);
  };

  const sizeFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    if(e.target.value.length>2){
      return
    }
    setsizeFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: e.target.value,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query, rows);
  };

  const portnameFilterChange = (selectedValue: any) => {
    const portValue = selectedValue?.market;
    setSelectedOption(selectedValue);
    setportnameFilterValue(portValue);
    if (portValue === undefined || portValue?.length === 0 || portValue?.length > 2) {
      const query = {
        start_date: startdate,
        end_date: enddate,
        equipment: equipmentFilterValue,
        quote: quoteFilterValue,
        customer_lead: customerLeadFilterValue,
        request_date: request_date_filter,
        type: typeFilterValue,
        size: sizeFilterValue,
        port: portValue,
        distance_from_origin_destination: distanceorigindestinationFilterValue,
        linehaul_fsc_total: fsctotalFilterValue,
        city: origindestinationFilterValue,
        miles_start_range: minValue,
        miles_end_range: maxValue,
        linehaul_fsc_total_start_range: fscminValue,
        linehaul_fsc_total_end_range: fscmaxValue,
        sales_rep: salesrepFilterValue,
        provided_by: dispatcherFilterValue,
        status:StatusLeadFilterValue,
        rate_count:EngagementFilterValue
      };
      rateQuotesDataGet(token, 1, query, rows);
    }
  };

  const origindestinationFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    const origindestinationValue = e.target.value;
    setorigindestinationFilterValue(e.target.value);
    if (origindestinationValue.length === 0 ||  origindestinationValue.length > 2) {
      const query = {
        start_date: startdate,
        end_date: enddate,
        equipment: equipmentFilterValue,
        quote: quoteFilterValue,
        customer_lead: customerLeadFilterValue,
        request_date: request_date_filter,
        type: typeFilterValue,
        size: sizeFilterValue,
        port: portnameFilterValue,
        distance_from_origin_destination: distanceorigindestinationFilterValue,
        linehaul_fsc_total: fsctotalFilterValue,
        city: e.target.value,
        miles_start_range: minValue,
        miles_end_range: maxValue,
        linehaul_fsc_total_start_range: fscminValue,
        linehaul_fsc_total_end_range: fscmaxValue,
        sales_rep: salesrepFilterValue,
        provided_by: dispatcherFilterValue,
        status:StatusLeadFilterValue,
        rate_count:EngagementFilterValue
      };
      rateQuotesDataGet(token, 1, query, rows);
    }
  };

  const dispatcherFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setdispatcherFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      provided_by: dispatcherFilterValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue,
      rate_count:EngagementFilterValue
    };

    rateQuotesDataGet(token, 1, query, rows);
  };

  const salesrepFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    const salesrepValue = e.target.value;
    setsalesrepFilterValue(e.target.value);
    if (salesrepValue.length === 0 || salesrepValue.length > 2) {
      const query = {
        start_date: startdate,
        end_date: enddate,
        equipment: equipmentFilterValue,
        quote: quoteFilterValue,
        customer_lead: customerLeadFilterValue,
        request_date: request_date_filter,
        type: typeFilterValue,
        size: sizeFilterValue,
        port: portnameFilterValue,
        distance_from_origin_destination: distanceorigindestinationFilterValue,
        linehaul_fsc_total: fsctotalFilterValue,
        city: origindestinationFilterValue,
        miles_start_range: minValue,
        miles_end_range: maxValue,
        linehaul_fsc_total_start_range: fscminValue,
        linehaul_fsc_total_end_range: fscmaxValue,
        sales_rep: e?.target?.value,
        status:StatusLeadFilterValue
        ,
        rate_count:EngagementFilterValue
      };
      rateQuotesDataGet(token, 1, query, rows);
    }
  };

  const customerLeadFilter = (
    <>
      <InputText
        className='form-control w130'
        value={customerLeadFilterValue}
        onChange={customerLeadFilterChange}
        placeholder='Customer Lead'
        onKeyDown={spacehandler}
      />
    </>
  );

  const typevsalue = [
    { name: "Select", value: "" },
    { name: "Rated", value: "Rated" },
    { name: "Open", value: "Open" },
    { name: "Quoted", value: "Quoted" },
  ];

  
  const statusFilter = (
    <>
    <Dropdown
     value={StatusLeadFilterValue}
     onChange={StatusLeadFilterChange}
      options={typevsalue}
      optionLabel='name'
       placeholder='Status'
      className='form-control max-size'
    />
     
    </>
  );

  const formattedEquipments = equipments
    .map(({ name }) => ({
      name: name,
      value: name,
    }));

  const equipmentValue = [{
    name: "Select",
    value: "",
    disabled: true,
  }, ...formattedEquipments];

  const equipmentFilter = (
    <Dropdown
      value={equipmentFilterValue}
      onChange={euipmentLeadFilterChange}
      options={equipmentValue}
      optionLabel='name'
      placeholder='Equipment'
      className='form-control max-size'
    />
  );

  const quoteFilter = (
    <>
      <InputText
        keyfilter='int'
        className='form-control max-size1'
        value={quoteFilterValue}
        onChange={quoteLeadFilterChange}
        placeholder='Quote Id'
        onKeyDown={spacehandler}
      />
    </>
  );
  const typevalue = [
    { name: "Select", value: "" },
    { name: "Export", value: "export" },
    { name: "Import", value: "import" },
  ];

  const TypeFilter = (
    <Dropdown
      value={typeFilterValue}
      onChange={typeFilterChange}
      options={typevalue}
      optionLabel='name'
      placeholder='Type'
      className='form-control max-size'
    />
  );

  const sizeValue = [{
    name: "Select",
    value: "",
    disabled: true,
  }, ...sizes];

  const SizeFilter = (
    <Dropdown
      value={sizeFilterValue}
      onChange={sizeFilterChange}
      options={sizeValue}
      optionLabel='name'
      placeholder='Size'
      className='form-control max-size'
    />
  );

  const filterMarketOption = (option: { data: { market: string; }; }, inputValue: string) => {
    return option.data.market.toLowerCase().includes(inputValue.toLowerCase());
  }

  const portnameFilter = (
    <div style={{minWidth: '180px', fontWeight: '100'}} id="rateQuoteMarketFilter">
      <Select
        placeholder="Select Market"
        isClearable={true}
        value={selectedOption}
        options={togetMarketList}
        onChange={portnameFilterChange}
        getOptionLabel={e => (
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ marginLeft: 5 }}>{e.market}</span>
          </div>
        )}
        filterOption={filterMarketOption}
      />
    </div>
  );

  const origindestinationFilter = (
    <InputText
      type='text'
      className='form-control max-size'
      value={origindestinationFilterValue}
      onChange={origindestinationFilterChange}
      placeholder='Origin/Destination'
      onKeyDown={spacehandler}
    />
  );

  const onSubmit = (formdata: any) => {
    setMinValue(formdata.minValue);
    setMaxValue(formdata.maxValue);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: formdata.minValue,
      miles_end_range: formdata.maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      status:StatusLeadFilterValue
      ,
      rate_count:EngagementFilterValue
    };
    rateQuotesDataGet(token, 1, query, rows);
  };

  const renderInputField = (name: string, placeholder: string | undefined, initialValue: string | number | string[] | null | undefined) => (
    <Controller
      name={name}
      control={controlDFOD}
      render={({ field }) => (
        <InputGroup>
          <InputNumber
          className="max-size"
            placeholder={placeholder}
            {...field}
            value={field.value}
            defaultValue={initialValue}
            onChange={(value) => field.onChange(value)}
          />
        </InputGroup>
      )}
    />
  );
  const RangeInputDFODfilterReset = () => {
    rateQuotesDataGet(token);
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setMinValue("");
    setMaxValue("");
    setFirst(1);
  };

  const RangeInputFSCfilterReset = () => {
    rateQuotesDataGet(token);
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setfscminValue("");
    setfscmaxValue("");
    setFirst(1);
  };

  const distanceorigindestinationFilter = (
    <>
      <div style={{ display: "flex", gap: "5px" }}>
        <form onSubmit={handleSubmitDFOD(onSubmit)}>
          <div style={{ minWidth: "305px", display: "flex", gap: "5px" }} className="range-box">
            {renderInputField("minValue", "Min Range", formData?.min)}
            <InputGroup.Addon>to</InputGroup.Addon>
            {renderInputField("maxValue", "Max Range", formData?.max)}

            <div className='minerror'>
              {errorsDFOD.minValue && (
                <p style={{ fontSize: "12px", color: "red" }}>
                  {errorsDFOD.minValue.message}
                </p>
              )}
            </div>
            <div className='maxerror'>
              {errorsDFOD.maxValue && (
                <p style={{ fontSize: "12px", color: "red" }}>
                  {errorsDFOD.maxValue.message}
                </p>
              )}
            </div>
            <button
              title='filter'
              className='filterbtn btn btn-primary btn-sm'
              type='submit'
            >
              <i className='pi pi-search'></i>
            </button>
          </div>
        </form>

        <button
          title='reset'
          onClick={RangeInputDFODfilterReset}
          className='filterbtn btn btn-primary btn-sm'
          type='submit'
        >
          <i className='pi pi- pi-sync'></i>
        </button>
      </div>
    </>
  );

  const onSubmitFSC = onSubmitFSCNew({ rows, setfscminValue, setfscmaxValue, startdate, enddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue });

  const fsctotalFilter = (
    <div style={{ display: "flex", gap: "5px" }}>
      <form onSubmit={handleSubmitFSC(onSubmitFSC)}>
        <div style={{ minWidth: "305px", display: "flex", gap: "5px" }} className="range-box">
          <InputGroup>
            <Controller
              name='fscminValue'
              control={controlFSC}
              render={({ field }) => (
                <InputNumber
                  className="max-size"
                  placeholder='Min Range'
                  {...field}
                  value={field.value || ""}
                  onChange={(value) => field.onChange(value)}
                />
              )}
            />

            <InputGroup.Addon>to</InputGroup.Addon>

            <Controller
              name='fscmaxValue'
              control={controlFSC}
              render={({ field }) => (
                <InputNumber
                className="max-size"
                  placeholder='Max Range'
                  {...field}
                  value={field.value || ""}
                  onChange={(value) => field.onChange(value)}
                />
              )}
            />
          </InputGroup>
          <div className='minerror'>
            {errorsFSC.fscminValue && (
              <p style={{ fontSize: "12px", color: "red" }}>
                {errorsFSC.fscminValue.message}
              </p>
            )}
          </div>
          <div className='maxerror'>
            {errorsFSC.fscmaxValue && (
              <p style={{ fontSize: "12px", color: "red" }}>
                {errorsFSC.fscmaxValue.message}
              </p>
            )}
          </div>
          <button className='btn btn-primary btn-sm' type='submit'>
            <i
              className='pi pi-search
'
            ></i>
          </button>
        </div>
      </form>
      <button
        title='reset'
        onClick={RangeInputFSCfilterReset}
        className='filterbtn btn btn-primary btn-sm'
        type='submit'
      >
        <i className='pi pi- pi-sync'></i>
      </button>
    </div>
  );

  const dispatcherFilter = (
    <input
      type='text'
      className='form-control w130'
      value={dispatcherFilterValue}
      onChange={dispatcherFilterChange}
      placeholder='Provided By'
      onKeyDown={spacehandler}
    />
  );

  const salesrepFilter = (
    <InputText
      keyfilter="alpha"
      type='text'
      className='form-control max-size'
      value={salesrepFilterValue}
      onChange={salesrepFilterChange}
      placeholder='Requested By'
      onKeyDown={spacehandler}
    />
  );
  const EngagementFilterChange = (e: { target: { value: SetStateAction<string>; }; }) => {
    setEngagementFilterValue(e.target.value);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      sales_rep: salesrepFilterValue,
      status:StatusLeadFilterValue,
      rate_count:e?.target?.value
    };
    rateQuotesDataGet(token, 1, query, rows);
  };
  const engagementtypevalue = [
    { name: "Select", value: "" },
    { name: " Low Engagement", value: "normal" },
    { name: "Moderate Engagement", value: "pro" },
    { name: "High Engagement", value: "premium" },
  ];
  const engagementsFilter = (
  
    <Dropdown
     value={EngagementFilterValue}
     onChange={EngagementFilterChange}
     options={engagementtypevalue}
     optionLabel='name'
     placeholder='Engagement'
     className='form-control max-size'
   />
 );
  const dateFilter = (
    <DatePicker
      format='MM-dd-yyyy'
      onClose={handleDatePickerClose}
      onKeyDown={handleKeyDown}
      onChange={requestdatehandler}
      value={requestdateFiltervalue}
      disabledDate={isDateDisabled}
       className='form-control-range max-size'
      placeholder='MM-DD-YYYY'
      
    />
  );

  const SalesRepBodyTemplate = (rowData: { sales_rep: any; is_gray: number; }) => {
    if (rowData.sales_rep === undefined || rowData.sales_rep === null) {
      return <p>N/A</p>;
    } else {
      return <p>

        {rowData?.is_gray === 0 && data?.user?.group_type === "carriers" && data?.user?.is_premium === 0 && rowData.sales_rep !== "N/A" ? rowData.sales_rep.charAt(0) + "*****" : rowData.sales_rep}
      </p>;
    }
  };
  const SizeRepBodyTemplate = (rowData: { size: any;  })=>{
    if (rowData.size === undefined || rowData.size === null) {
      return <p>N/A</p>;
    } else {
      return <p>
       {rowData?.size}
      </p>;
    }
  }
  const EquipmentRepBodyTemplate = (rowData: { equipment: any;  })=>{
    if (rowData.equipment === undefined || rowData.equipment === null) {
      return <p>N/A</p>;
    } else {
      return <p>
       {rowData?.equipment}
      </p>;
    }
  }
  const PortnameRepBodyTemplate = (rowData: { port_name: any;  })=>{
    if (rowData.port_name === undefined || rowData.port_name === null) {
      return <p>N/A</p>;
    } else {
      return <p>
       {rowData?.port_name}
      </p>;
    }
  }
  const OrigindestinationRepBodyTemplate = (rowData: { origin_destination: any;  })=>{
    if (rowData.origin_destination === undefined || rowData.origin_destination === null) {
      return <p>N/A</p>;
    } else {
      return <p>
       {rowData?.origin_destination}
      </p>;
    }
  }

  const TypeRepBodyTemplate = TypeRepBodyTemplateNewFn();

  const customerleadRepBodyTemplate = customerleadRepBodyTemplateNewFn(data);
  const statusTemplate = statusTempFun(data)
  const FscTotalBodyTemplate = FscTotalBodyTemplateNewFn(data);

  const RequestdateBodyTemplate = RequestdateBodyTemplateNewFn();
  const EngagementsBodyTemplate = EngagementsBodyTemplateNewFn(data, setModalStatus)
  const Bodydistance_from_origin_destination = Bodydistance_from_origin_destinationNew();

  const DispatcherBodyTemplate = DispatcherBodyTemplateNew();
  const onSortChange = (e: any) => {
    onSortChangeScope(setSortField, e, setSortOrder, customSort);
  };

  const customSort = (field: any, order: any) => {
    if(field === 'fsc_total'){
      field = 'linehaul_fsc_total';
    }
    customSortJsx(rateQuotesdata, order, field, setRateQuotesdata);
  };

  const rowClass = (userPremium: any) => {

    if (
      data?.user?.group_type === "super_admin" ||
      data?.user?.group_type === "carriers"
    ) {
      return {
        "bg-danger4": userPremium.is_premium_quote === 1,
        "bg-gray4":
          data?.user?.group_type === "carriers"
            ? userPremium.is_gray === 0 && data?.user?.is_premium === 0
            : "",
      };
    } else {
      return null;
    }
  };
  const { isCollapsed } = useCollapsed();
  
  const handleReorderTableColumn = async (event: any) => {
    const dataObj: any = {
      intialTableColumn: columns,
      updatedTableColumn: event,
      requestType: 'rate_quotes',
      visibleColumns: visibleColumns,
      setVisibleColumns: setVisibleColumns
    };
    try {
      const responceData = await toUpdateTableColumn(dataObj);
      if (responceData === true) {
        setColumnsUpdateStatusCount(columnsUpdateStatusCount+1);
      } else {
        console.warn("Reorder update failed or unchanged");
        setColumnsUpdateStatusCount(0);
      }
    } catch (err) {
      console.error("Error during reorder update", err);
      setColumnsUpdateStatusCount(0);
    }
  };

  return (
    <Layout>
      <ToastContainer />
      <Head>
        <title>Rate-Quotes - Draydex</title>
      </Head>
      <div className={` ${isCollapsed ? 'collapsed-body' : 'content-body rate_page'}`} >
        <div className='row page-titles mx-0'>
          <div className='col p-md-0'>
            <Breadcrumb breadcrumbs={props.breadcrumbs} />
          </div>
        </div>
        <div className='row'>
          <div className='col-12'>
            <>
              <div>
                <div className='userManaagementheader'>
                  <div className='form-group secDiv'>
                    {isloading && (
                      <div id='loader_table'>
                        <ScaleLoader color='#3180f3' className='table_loader' />
                      </div>
                    )}
                    <>
                      <div className='datatable-filter-demo'>
                        <div className='card table_height'>
                          <DataTable
                            key={tableKey}
                            onRowSelect={() => {}}
                            onAbort={() => {}}
                            rowClassName={rowClass}
                            lazy
                            filterDisplay='row'
                            ref={dt}
                            header={header}
                            value={rateQuotesdata}
                            paginatorTemplate='FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport'
                            first={first}
                            rows={5}
                            sortField={sortField}
                            sortOrder={sortOrder}
                            onSort={onSortChange}
                            selection={selectedRows}
                            onSelectionChange={(e) => {setSelectedRows(e.value);}} 
                            dataKey='quote_id'
                            onPage={(e) => {
                              onPageChange(e);
                            }}
                            totalRecords={totalRecords}
                            className='p-datatable-customers'
                            emptyMessage='No record found.'
                            reorderableColumns
                            onColReorder={(e) => handleReorderTableColumn(e.columns)}
                          >
                            <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
                          {visibleColumns.map((col) => {
  // Filter and body template maps
  const filterElementMap = {
    quote_id: quoteFilter,
    customer_lead: customerLeadFilter,
    status: statusFilter,
    size: SizeFilter,
    request_date: dateFilter,
    type: TypeFilter,
    equipment: equipmentFilter,
    port_name: portnameFilter,
    origin_destination: origindestinationFilter,
    distance_from_origin_destination: distanceorigindestinationFilter,
    fsc_total: fsctotalFilter,
    dispatcher: dispatcherFilter,
    sales_rep: salesrepFilter,
    rate_count: userType?.group_type !== "carriers" ? engagementsFilter : undefined, // Conditional inclusion
  };

  const bodyTemplateMap = {
    quote_id: QuoteBodyTemplate,
    customer_lead: customerleadRepBodyTemplate,
    status: statusTemplate,
    type: TypeRepBodyTemplate,
    size: SizeRepBodyTemplate,
    equipment: EquipmentRepBodyTemplate,
    port_name: PortnameRepBodyTemplate,
    origin_destination: OrigindestinationRepBodyTemplate,
    sales_rep: SalesRepBodyTemplate,
    dispatcher: DispatcherBodyTemplate,
    fsc_total: FscTotalBodyTemplate,
    request_date: RequestdateBodyTemplate,
    rate_count: userType?.group_type !== "carriers" ? EngagementsBodyTemplate : undefined, // Conditional inclusion
    distance_from_origin_destination: Bodydistance_from_origin_destination,
  };

  // Dynamically render columns
  return (
    filterElementMap[col.field] !== undefined && bodyTemplateMap[col.field] !== undefined && ( // Check if mapping exists
      <Column
        sortable
        key={col.field}
        field={col.field}
        header={col.header}
        filter
        filterElement={filterElementMap[col.field]}
        body={bodyTemplateMap[col.field]}
        columnKey={col.field}
        className={
          col.field === 'quote_id' ? 'title_heading' : ''
        }
      />
    )
  );
})}



                          </DataTable>
                          <div className="pagination_footer">
                            <PaginationTitle first={first} totalRecords={totalRecords} perPageData={perPageDataShow}/>
                            <Paginator
                              rows={rows}
                              first={first}
                              totalRecords={totalRecords}
                              onPageChange={onPageChange}
                              rowsPerPageOptions={[10, 20, 30, 50, 100]}
                            />
                          </div>
                        </div>
                      </div>
                    </>
                  </div>
                </div>
              </div>
            </>
          </div>
        </div>
      </div>
    </Layout>
  );
}
function resultChassisnewFunction(quickNote: undefined, quotesRateDetails: any, isFiltered: boolean) {
  let resultAvgMin: string = resultAvgMinnewFunction(quickNote, quotesRateDetails, isFiltered);



  // Get the fallback chasis per day if available
  const fallbackChasisPerDay = quickNote?.fallback_table_data?.chasis_per_day;

  // Get the average chasis rate from quotesRateDetails
  const avgChasis = quotesRateDetails?.avg_chasis;



  let resultChassis: string;

  // Check if filtering is applied
  if (isFiltered) {
    // Check if fallbackChasisPerDay has a valid value
    if (fallbackChasisPerDay !== undefined && fallbackChasisPerDay !== null) {
      resultChassis = `$${fallbackChasisPerDay}`;
    } else {
      // Check if avgChasis has a valid value
      if (avgChasis !== undefined && avgChasis !== null) {
        resultChassis = `$${avgChasis}`;
      } else {
        resultChassis = 'N/A';
      }
    }
  } else {
    resultChassis = 'N/A';
  }
  return { resultAvgMin, resultChassis };
}

function resultAvgMinnewFunction(quickNote: undefined, quotesRateDetails: any, isFiltered: boolean) {
  const fallbackData = quickNote?.fallback_table_data?.base_linehaul_min;
  const minRate = quotesRateDetails?.min_rate;

  let resultAvgMin: string;

  if (isFiltered) {
    if (fallbackData !== undefined && fallbackData !== null) {
      resultAvgMin = `$${fallbackData}`;
    } else if (minRate !== undefined && minRate !== null) {
      resultAvgMin = `$${minRate}`;
    } else {
      resultAvgMin = 'N/A';
    }
  } else {
    resultAvgMin = 'N/A';
  }
  return resultAvgMin;
}

function resultMaxRatenewFunction(isFiltered: boolean, fallbackTableData: any, fallbackMaxLinehaul: any, quickNoteMaxRate: any) {
  let resultMaxRate: string;

  // Check if the filtering condition is applied
  if (isFiltered) {
    // Check if fallbackTableData is available
    if (fallbackTableData) {
      // Check if fallbackMaxLinehaul has a valid value
      if (fallbackMaxLinehaul !== undefined && fallbackMaxLinehaul !== null) {
        resultMaxRate = `$${fallbackMaxLinehaul}`;
      } else {
        resultMaxRate = 'N/A';
      }
    } else {
      // Check if quickNoteMaxRate has a valid value
      if (quickNoteMaxRate !== undefined && quickNoteMaxRate !== null) {
        resultMaxRate = `$${quickNoteMaxRate}`;
      } else {
        resultMaxRate = 'N/A';
      }
    }
  } else {
    resultMaxRate = 'N/A';
  }
  return resultMaxRate;
}

function QuoteRateDetailsnewFunction(userData: undefined, quickNote: undefined) {
  let quotesRateDetails: any;
  if (userData?.ViewRateQuoteAverages) {
    quotesRateDetails = {
      avg_rate: quickNote?.avg_rate,
      max_rate: quickNote?.max_rate,
      min_rate: quickNote?.min_rate,
      avg_chasis: quickNote?.avg_chasis,
      max_chasis: quickNote?.max_chasis,
      min_chasis: quickNote?.min_chasis,
      min_assosorial: quickNote?.min_assosorial,
      max_assosorial: quickNote?.max_assosorial,
      avg_assosorial: quickNote?.avg_assosorial,
      topThreeCommonAccessorial: quickNote?.topThreeCommonAccessorial,
    };
  } else {
    quotesRateDetails = {
      avg_rate: 0,
      max_rate: 0,
      min_rate: 0,
      avg_chasis: 0,
      max_chasis: 0,
      min_chasis: 0,
      min_assosorial: 0,
      max_assosorial: 0,
      avg_assosorial: 0,
      topThreeCommonAccessorial: [],
    };
  }
  return quotesRateDetails;
}

function handleKeyDownnewFunction() {
  return (e: { preventDefault: () => void; }) => {
    e.preventDefault();
  };
}

function handleDateRangeChangenewFunction({ rows, setDateRange, setstartdate, setenddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, minValue, maxValue, fscminValue, fscmaxValue, dispatcherFilterValue, rateQuotesDataGet, token ,StatusLeadFilterValue,EngagementFilterValue}: { rows: number, setDateRange: any; setstartdate: any; setenddate: any; equipmentFilterValue: string; quoteFilterValue: string; customerLeadFilterValue: string; request_date_filter: string; typeFilterValue: string; sizeFilterValue: string; portnameFilterValue: any; distanceorigindestinationFilterValue: string; fsctotalFilterValue: string; origindestinationFilterValue: string; minValue: any; maxValue: any; fscminValue: string; fscmaxValue: string; dispatcherFilterValue: string; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null) => void; token: any;StatusLeadFilterValue:any,EngagementFilterValue:any  }) {
  return (value: moment.MomentInput[]) => {
    setDateRange(value);

    let start_date = value && value[0] ? moment(value[0])?.format(DATE_FORMAT) : "";

    let end_date = value && value[1] ? moment(value[1])?.format(DATE_FORMAT) : "";
    setstartdate(start_date);
    setenddate(end_date);

    const query = {
      start_date: start_date,
      end_date: end_date,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: minValue,
      miles_end_range: maxValue,
      linehaul_fsc_total_start_range: fscminValue,
      linehaul_fsc_total_end_range: fscmaxValue,
      provided_by: dispatcherFilterValue,
      status:StatusLeadFilterValue
      ,
      rate_count:EngagementFilterValue
    };

    rateQuotesDataGet(token, 1, query, rows);
  };
}

function handleDateRangePickerClosenewFunction(setValueDFOD:any, setValueFSC:any, setMinValue:any, setMaxValue:any, setfscminValue: any, setfscmaxValue: any, setFirst:any) {
  return () => {
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setMinValue("");
    setMaxValue("");
    setfscminValue("");
    setfscmaxValue("");
    setFirst(1);
  };
}

function handleDatePickerClosenewFunction(setValueFSC, setValueDFOD, setMinValue: { (value: SetStateAction<string | string[] | undefined>): void; (arg0: string): void; }, setMaxValue: { (value: SetStateAction<string | string[] | undefined>): void; (arg0: string): void; }, setfscminValue: { (value: SetStateAction<string>): void; (arg0: string): void; }, setfscmaxValue: { (value: SetStateAction<string>): void; (arg0: string): void; }, setFirst: { (value: SetStateAction<number>): void; (arg0: number): void; }) {
  return () => {
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setfscminValue("");
    setfscmaxValue("");
    setFirst(1);
  };
}

function clearFilternewFunction({ formData, setcustomerLeadFilterValue, setrequestdateFiltervalue, setdispatcherFilterValue, setsalesrepFilterValue, setequipmentFilterValue, setquoteFilterValue, settypeFilterValue, setsizeFilterValue, setportnameFilterValue, setorigindestinationFilterValue, setfsctotalFilterValue, setdistanceorigindestinationFilterValue, setDateRange, setValueDFOD, setValueFSC, setMinValue, setMaxValue, setfscminValue, setfscmaxValue, setRows, setFirst, rateQuotesDataGet, token,setStatusLeadFilterValue,setEngagementFilterValue, setSelectedOption, setMarketOptionValue, Router, setSortField, setSortOrder, setSelectedRows, setVisibleColumns, columns}: { formData: ParsedUrlQuery; setcustomerLeadFilterValue: any; setrequestdateFiltervalue: any; setdispatcherFilterValue: any; setsalesrepFilterValue: any; setequipmentFilterValue: any; setquoteFilterValue: any; settypeFilterValue: any; setsizeFilterValue: any; setportnameFilterValue: any; setorigindestinationFilterValue: any; setfsctotalFilterValue: any; setdistanceorigindestinationFilterValue: any; setDateRange: any; setValueDFOD: any; setValueFSC: any; setMinValue: any; setMaxValue: any; setfscminValue: any; setfscmaxValue: any; setRows: any; setFirst: any; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null) => void; token: any;setStatusLeadFilterValue:any; setEngagementFilterValue:any; setSelectedOption: any; setMarketOptionValue: any; Router:any; setSortField: any; setSortOrder: any; setSelectedRows: any; setVisibleColumns: any; columns: any;}) {

  const [resetRouteValue, setResetRoutesValue] = useState(false);

  useEffect(() => {
    if (resetRouteValue) {
      formData.original_val = '';
      setcustomerLeadFilterValue("");
      setrequestdateFiltervalue(null);
      setdispatcherFilterValue("");
      setEngagementFilterValue("");
      setsalesrepFilterValue("");
      setequipmentFilterValue("");
      setquoteFilterValue("");
      setcustomerLeadFilterValue("");
      settypeFilterValue("");
      setStatusLeadFilterValue("");
      setsizeFilterValue("");
      setportnameFilterValue("");
      setorigindestinationFilterValue("");
      setfsctotalFilterValue("");
      setdistanceorigindestinationFilterValue("");
      setValueDFOD("minValue", "");
      setValueDFOD("maxValue", "");
      setValueFSC("fscminValue", "");
      setValueFSC("fscmaxValue", "");
      setMinValue("");
      setMaxValue("");
      setfscminValue("");
      setfscmaxValue("");
      setRows(10);
      setFirst(1);
      rateQuotesDataGet(token);
      formData.original_val = '';
      setSelectedOption("");
      setMarketOptionValue("");
      setResetRoutesValue(false);
      setSortField(null);
      setSortOrder(null);
      setSelectedRows([]);
      Router.push("/rate-quotes");
    }
  }, [resetRouteValue]); 
  return () => {
    formData.original_val = '';
    setcustomerLeadFilterValue("");
    setrequestdateFiltervalue(null);
    setdispatcherFilterValue("");
    setEngagementFilterValue("");
    setsalesrepFilterValue("");
    setequipmentFilterValue("");
    setquoteFilterValue("");
    setcustomerLeadFilterValue("");
    settypeFilterValue("");
    setStatusLeadFilterValue("");
    setsizeFilterValue("");
    setportnameFilterValue("");
    setorigindestinationFilterValue("");
    setfsctotalFilterValue("");
    setdistanceorigindestinationFilterValue("");
    setValueDFOD("minValue", "");
    setValueDFOD("maxValue", "");
    setValueFSC("fscminValue", "");
    setValueFSC("fscmaxValue", "");
    setMinValue("");
    setMaxValue("");
    setfscminValue("");
    setfscmaxValue("");
    setRows(10);
    setFirst(1);
    rateQuotesDataGet(token);
    formData.original_val = '';
    setSelectedOption("");
    setMarketOptionValue("");
    setSortField(null);
    setSortOrder(null);
    setResetRoutesValue(true);
    setSelectedRows([]);
  };
}


function useEffectRateQoutesNewFn({ formData, setValueDFOD, setportnameFilterValue, settypeFilterValue, setsizeFilterValue, setequipmentFilterValue, setMinValue, setMaxValue, minValue, maxValue, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, fscminValue, fscmaxValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue,EngagementFilterValue, marketOptionValue, setstartdate, setenddate, setDateRange, rows, createQuoteTableModalStatus}: { formData: ParsedUrlQuery; setValueDFOD: any; setportnameFilterValue: any; settypeFilterValue: any; setsizeFilterValue: any; setequipmentFilterValue: any; setMinValue: any; setMaxValue: any; minValue: any; maxValue: any; equipmentFilterValue: string; quoteFilterValue: string; customerLeadFilterValue: string; request_date_filter: string; typeFilterValue: string; sizeFilterValue: string; portnameFilterValue: any; distanceorigindestinationFilterValue: string; fsctotalFilterValue: string; origindestinationFilterValue: string; fscminValue: string; fscmaxValue: string; salesrepFilterValue: string; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null, rows?: number) => void; token: string | null | undefined;StatusLeadFilterValue:any; EngagementFilterValue:any;marketOptionValue: any; setstartdate: any; setenddate: any; setDateRange: any; rows: number; createQuoteTableModalStatus: any;}) {

  useEffect(() => {
    const filteredDateRangeData = () => {
      const startDate = getStartDate();
      const endDate = getEndDate();
      setstartdate(startDate);
      setenddate(endDate);
      setDateRange(dateRangeLogic());
      return { startDate, endDate };
    };
  
    const processQuery = () => {
      const { startDate, endDate } = filteredDateRangeData();
      if (formData?.min !== null && formData?.max !== undefined && formData?.port !== undefined) {
        const updatedState = {
          minValue: formData?.min,
          maxValue: formData?.max,
          port: formData?.port,
          type: formData?.type,
          size: formData?.size,
          equipment: formData?.equipment,
        };
  
        setValueDFOD("minValue", updatedState.minValue);
        setValueDFOD("maxValue", updatedState.maxValue);
        setportnameFilterValue(updatedState.port);
        setMinValue(updatedState.minValue);
        setMaxValue(updatedState.maxValue);
        settypeFilterValue(updatedState.type);
        setsizeFilterValue(updatedState.size);
        setequipmentFilterValue(updatedState.equipment);
  
        const query = {
          miles_start_range: updatedState.minValue,
          miles_end_range: updatedState.maxValue,
          start_date: startDate,
          end_date: endDate,
          equipment: updatedState.equipment,
          quote: quoteFilterValue,
          customer_lead: customerLeadFilterValue,
          request_date: request_date_filter,
          type: updatedState.type,
          size: updatedState.size,
          port: updatedState.port,
          distance_from_origin_destination: distanceorigindestinationFilterValue,
          linehaul_fsc_total: fsctotalFilterValue,
          city: origindestinationFilterValue,
          linehaul_fsc_total_start_range: fscminValue,
          linehaul_fsc_total_end_range: fscmaxValue,
          sales_rep: salesrepFilterValue,
          status: StatusLeadFilterValue,
          rate_count: EngagementFilterValue,
        };
  
        rateQuotesDataGet(token, 1, query, rows);
      } else {
        const query = {
          start_date: startDate,
          end_date: endDate,
          equipment: equipmentFilterValue,
          quote: quoteFilterValue,
          customer_lead: customerLeadFilterValue,
          request_date: request_date_filter,
          type: typeFilterValue,
          size: sizeFilterValue,
          port: portnameFilterValue,
          distance_from_origin_destination: distanceorigindestinationFilterValue,
          linehaul_fsc_total: fsctotalFilterValue,
          city: origindestinationFilterValue,
          miles_start_range: minValue,
          miles_end_range: maxValue,
          linehaul_fsc_total_start_range: fscminValue,
          linehaul_fsc_total_end_range: fscmaxValue,
          sales_rep: salesrepFilterValue,
          status: StatusLeadFilterValue,
          rate_count: EngagementFilterValue,
        };
  
        rateQuotesDataGet(token, 1, query, rows);
      }
    };
    processQuery();
  }, [formData, token, marketOptionValue, createQuoteTableModalStatus]);
}

function rateQuotesDataGetnewFunction(setIsloading: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }, formData: ParsedUrlQuery, setIsFiltered: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }, setQuickNotes: { (value: SetStateAction<undefined>): void; (arg0: any): void; }, setTotalRecords: { (value: SetStateAction<number>): void; (arg0: any): void; }, setRateQuotesdata: { (value: SetStateAction<undefined>): void; (arg0: any): void; }, setPerPageDataShow: any) {
  return (
    access_token: string | null = null,
    pageno: any = null,
    query: any  = null,
    rows?: number
  ) => {
    setIsloading(true);
    setQuickNotes("");
    setRateQuotesdata("");
    let Original = formData?.original_val;
    const queryparamdata = {
      paginate_count: rows || 10,
      start_date: query?.start_date,
      end_date: query?.end_date,
      equipment: query?.equipment,
      size: query?.size,
      distance_from_origin_destination: query?.distance_from_origin_destination,
      linehaul_fsc_total: query?.linehaul_fsc_total,
      type: query?.type,
      customer_lead: query?.customer_lead,
      quote: query?.quote,
      port_name: query?.port,
      request_date: query?.request_date,
      origin_destination: query?.city,
      miles_start_range: query?.miles_start_range,
      miles_end_range: query?.miles_end_range,
      linehaul_fsc_total_start_range: query?.linehaul_fsc_total_start_range,
      linehaul_fsc_total_end_range: query?.linehaul_fsc_total_end_range,
      sales_rep: query?.sales_rep,
      provided_by: query?.query,
      original_val: Original,
      status:query?.status,
      rate_count:query?.rate_count
    };

    const queryparm = Object.entries(queryparamdata)
      .map(([key, value]) => `${key}=${value || ""}`)
      .join("&");

    function isAllEmptyOrUndefined(obj: { [s: string]: unknown; } | ArrayLike<unknown>) {
      const values = Object.values(obj);
      const allEmpty = values.every(value => value === '' || value === null || value === undefined);
      return !allEmpty;
    }

    setIsFiltered(isAllEmptyOrUndefined(queryparamdata));

    CarrierTableAll(access_token, pageno, queryparm).then((response) => {
      if (response?.status === "success") {
        setQuickNotes(response?.quick_qoutes);
        setTotalRecords(response?.meta?.total);
        setPerPageDataShow(response?.meta?.per_page);
        const filteredData = response?.data?.filter(
          (item: { is_deleted: number; }) => item.is_deleted === 0
        );
        setRateQuotesdata(filteredData);
        setIsloading(false);
      } else {
        setIsloading(false);
      }
    });
  };
}

function JSxSCopeIndex(rowData: string, data: Session | null, handleQuoteHover: (quoteId: string) => void, handleQuoteLeave: () => void, hoveredQuoteId: string | null, setModalStatus: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }) {
  return <>
    {rowData.is_gray === 0 && data?.user?.group_type === "carriers" && data?.user?.is_premium === 0 ? (
      <div
        onMouseOver={() => handleQuoteHover(rowData.quote_id)}
        onMouseLeave={handleQuoteLeave}
        style={{ display: "inline-flex", position: "relative" }}
      >
        <p>{rowData?.quote_id}</p>
        {hoveredQuoteId === rowData.quote_id && data?.user?.is_child !== 1 && (
          <div
            className='hover-box'
            className='dropdown-menu show dropdown-menu-light-check available'
          >
            <a
              href='#'
              className='dropdown-item'
              role='button'
              tabIndex={0}
              onClick={() => setModalStatus(true)}
            >
              Available in Draydex Premium
            </a>
          </div>
        )}
      </div>
    ) : (
      <Link href={`rate-quotes/${rowData.quote_id}`}>
        {rowData?.quote_id}
      </Link>
    )}
    {rowData?.is_star === 1 && (
      <Image
        style={{ height: "21px", width: "39px" }}
        src={star}
        alt='Star' />
    )}
  </>;
}

function headerNewFn({ selectedRows, modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter, setSelectedOption, selectedOption, editViewFooterTemplate, setCreateRateQuoteModalStatus, createRateQuoteModalStatus, setCreateQuoteTableModalStatus, clearResetOrder}: { selectedRows: any[], modalStatus: boolean; setModalStatus: any; data: any; isFiltered: boolean; handlePlanLeaveEvent: (e: any) => void; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; resultChassis: string; quotesRateDetails: any; dateRange: null; handleDateRangePickerClose: () => void; isDateDisabled: (date: any) => boolean; handleKeyDown: (e: any) => void; handleDateRangeChange: (value: any) => void; columns: { field: string; header: string; }[]; onColumnToggle: (event: any) => void; visibleColumns: { field: string; header: string; }[]; clearFilter: () => void; setSelectedOption: any; selectedOption: any; editViewFooterTemplate:any; setCreateRateQuoteModalStatus: any; createRateQuoteModalStatus: any; setCreateQuoteTableModalStatus: any;tclearResetOrder: any;}) {
  return headerNewFnInnerFunction({ selectedRows, modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter, setSelectedOption, selectedOption, editViewFooterTemplate, setCreateRateQuoteModalStatus, createRateQuoteModalStatus, setCreateQuoteTableModalStatus, clearResetOrder});
}

function headerNewFnInnerFunction({ selectedRows, modalStatus, setModalStatus, data, isFiltered, handlePlanLeaveEvent, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, resultChassis, quotesRateDetails, dateRange, handleDateRangePickerClose, isDateDisabled, handleKeyDown, handleDateRangeChange, columns, onColumnToggle, visibleColumns, clearFilter, setSelectedOption, selectedOption, editViewFooterTemplate, setCreateRateQuoteModalStatus, createRateQuoteModalStatus, setCreateQuoteTableModalStatus, clearResetOrder}: { selectedRows: any[], modalStatus: boolean; setModalStatus: any; data: any; isFiltered: boolean; handlePlanLeaveEvent: (e: any) => void; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; resultChassis: string; quotesRateDetails: any; dateRange: null; handleDateRangePickerClose: () => void; isDateDisabled: (date: any) => boolean; handleKeyDown: (e: any) => void; handleDateRangeChange: (value: any) => void; columns: { field: string; header: string; }[]; onColumnToggle: (event: any) => void; visibleColumns: { field: string; header: string; }[]; clearFilter: () => void; setSelectedOption: any; selectedOption: any; editViewFooterTemplate: (e: any) => void; setCreateRateQuoteModalStatus:any; createRateQuoteModalStatus: any; setCreateQuoteTableModalStatus: any;clearResetOrder: any;}) {
  const handleCloseCreateQuoteModal = ()=>{
    setCreateRateQuoteModalStatus(false);
  }
  return (
    <div>
      <SubscriptionPlansModal
        modalStatus={modalStatus}
        SetModalStatus={setModalStatus}
        userDetails={data?.user} />
      <RunAnalysis setMarketOptionValue = {setSelectedOption} marketOptionValue = {selectedOption} SetCheckPlanModalStatus={setModalStatus} 
        selectedQuotes={selectedRows} />
      <Fragment key={Math.floor(Math.random()*10)}>
       {newFunctionInnerhandled({ handlePlanLeaveEvent, data, isFiltered, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, setModalStatus, resultChassis, quotesRateDetails })}
      </Fragment>

      {HeaderThirdInnerNewFn()}
      <CreateRateModal
        key={true} 
        handleClose={handleCloseCreateQuoteModal}
        isModalStatus={createRateQuoteModalStatus}
        setCreateRateQuoteModalStatus={setCreateRateQuoteModalStatus}
        setCreateQuoteTableModalStatus={setCreateQuoteTableModalStatus} 
      />
  </div>);

  function HeaderThirdInnerNewFn() {
    const onShow = () => {
      let selectAllCheckbox = document.querySelector(
        ".p-multiselect-header > .p-checkbox"
      );
      selectAllCheckbox.style.marginRight = "8px";
      selectAllCheckbox.after(" Select All");
    };
    const createRateModalOpenStatus = () => {
      setCreateRateQuoteModalStatus(true);
    }
    return <div className='table-header'>
      <h3>ACTIVE / RECENT SPOT QUOTES</h3>
      <div className='d-flex justify-content-between'>
        <div className='recent_quote'>
          <span className='p-input-icon-left'>
            <i className='pi pi-search' />
            <div className='custom-calendar-container'>
              <DateRangePicker
                format='MM/dd/yyyy'
                value={dateRange} 
                onClose={handleDateRangePickerClose}
                disabledDate={isDateDisabled}
                size='lg'
                // defaultValue={[new Date(), new Date()]}
                placeholder='Select Date Range'
                onKeyDown={handleKeyDown}
                onChange={handleDateRangeChange}
                className='datepickermultiselect' />
            </div>
          </span>
          <MultiSelect
            maxSelectedLabels={0}
            optionLabel='header'
            options={columns}
            placeholder='Edit View'
            selectedItemsLabel='Edit View'
            onChange={onColumnToggle}
            value={visibleColumns}
            onShow={onShow}
            panelFooterTemplate={editViewFooterTemplate}
            className={`${styles.MultiSelect} w-full sm:w-20rem divStylecss`} />
          <Button
           className="divStylecss-clear divStylecss-update"
            type='button'
            icon='pi pi-filter-slash'
            label='Clear'
            onClick={clearFilter} />
          <Button
            className="divStylecss-clear reset-order-button"
            type="button"
            label="Reset Order"
            onClick={()=>clearResetOrder()}
          />
        </div>
        {data?.user?.user_type !== 'carrier' && (
          <div>
            <Button 
              className="divStylecss-clear divStylecss-update"
              type='button'
              label='Create Quote'
              onClick={createRateModalOpenStatus}
            />
          </div>
        )}
      </div>
    </div>;
  }
}

function newFunctionInnerhandled({ handlePlanLeaveEvent, data, isFiltered, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, setModalStatus, resultChassis, quotesRateDetails }: { handlePlanLeaveEvent: (e: any) => void; data: any; isFiltered: boolean; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; setModalStatus: any; resultChassis: string; quotesRateDetails: any; }) {
  return <div onMouseLeave={() => handlePlanLeaveEvent()} className='border-box' style={{ justifyContent: 'space-between' }}>
    {ThirdInnerHandlednewFunction({ data, isFiltered, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, handlePlanLeaveEvent, setModalStatus })}

    {SecondInnerHandledNewFn({ data, handlePlanHover, resultChassis, isFiltered, quotesRateDetails, hoveredPlan, handlePlanLeaveEvent, setModalStatus })}

    {FirstInnderHandledNewFn(handlePlanHover, data, isFiltered, quotesRateDetails, hoveredPlan, handlePlanLeaveEvent, setModalStatus)}
  </div>;
}

function ThirdInnerHandlednewFunction({ data, isFiltered, quickNote, handlePlanHover, resultMaxRate, resultAvgMin, hoveredPlan, handlePlanLeaveEvent, setModalStatus }: { data: any; isFiltered: boolean; quickNote: undefined; handlePlanHover: (plan: any) => void; resultMaxRate: string; resultAvgMin: string; hoveredPlan: null; handlePlanLeaveEvent: (e: any) => void; setModalStatus: any; }) {
  let tooltipText;

  if (isFiltered) {
    if (quickNote?.avgCostText === "[] / 0") {
      tooltipText = "Record not found";
    } else {
      tooltipText = quickNote?.avgCostText;
    }
  } else {
    tooltipText = "N/A";
  }
  
 return <div>
    <div style={{ display: "flex", gap: '20px' }}>
      <h2 className='box-heading'>Avg. Spot Carrier Rate w/Fuel</h2>

      {data?.user?.is_super_admin === 1 && (
        <i
          style={{
            fontSize: '15px',
            position: 'relative',
            top: '10px',
            cursor: 'pointer',
            color: 'black',
            textShadow: '0.5px 0.5px 0 rgba(0,0,0,0.3), -0.5px -0.5px 0 rgba(0,0,0,0.3), 0.5px -0.5px 0 rgba(0,0,0,0.3), -0.5px 0.5px 0 rgba(0,0,0,0.3)'
          }}
          className="bi bi-info-circle"
          data-pr-tooltip={tooltipText} 
                   />
      )}

      <div><Tooltip target=".bi" /></div>
    </div>

    <div
      className={ModClass(data)}
      onMouseOver={() => handlePlanHover("avg_rate")}
    >
      <div>
        <div>
          <p className='box-head'>{isFiltered && quickNote?.fallback_avg_rate ? `$${quickNote?.fallback_avg_rate}` : 'N/A'}</p>
          <div>
            <p className='box-paragraph'>
              Max: {quickNote?.max_rate ?? 'N/A'}
            </p>
            <p className='box-paragraph'>
              Min: {quickNote?.min_rate ?? 'N/A'}
            </p>
          </div>
        </div>
      </div>
    </div>
    {hoveredPlan === "avg_rate" &&
      toCheckUserTypeSubscreption(data) && data?.user?.is_child !== 1 &&
      "free" && (
        <div
          onMouseLeave={() => handlePlanLeaveEvent()}
          className='hover-box '
          style={{ top: "70px" }}
          onClick={() => setModalStatus(true)}
          x-placement='bottom-start'
          aria-labelledby='nav-dropdown'
          className='dropdown-menu show dropdown-menu-light'
          data-popper-reference-hidden='false'
          data-popper-escaped='false'
          data-popper-placement='bottom-start'
          bis_skin_checked='1'
        >
          <a
            data-rr-ui-dropdown-item=''
            class='dropdown-item'
            role='button'
            tabindex='0'
            href='#'
          >
            Available in Draydex Premium
          </a>
        </div>
      )}
  </div>;
}

function SecondInnerHandledNewFn({ data, handlePlanHover, resultChassis, isFiltered, quotesRateDetails, hoveredPlan, handlePlanLeaveEvent, setModalStatus }: { data: any; handlePlanHover: (plan: any) => void; resultChassis: string; isFiltered: boolean; quotesRateDetails: any; hoveredPlan: null; handlePlanLeaveEvent: (e: any) => void; setModalStatus: any; }) {
  return <div>
    <h2 className='box-heading'>Avg. Spot Carrier Chassis $/day</h2>
    <div
      className={`gapping user_subscreption_${toCheckUserTypeSubscreption(data) && "free"}`}
    >
      <div onMouseOver={() => handlePlanHover("avg_chassis")}>
        <p className='box-head'>{resultChassis ?? 'N/A'}</p>
        <div>
          <p className='box-paragraph'>
            Max: {isFiltered && quotesRateDetails?.max_chasis ? `$${quotesRateDetails?.max_chasis}` : 'N/A'}
          </p>
          <p className='box-paragraph'>
            Min: {isFiltered && quotesRateDetails?.min_chasis ? `$${quotesRateDetails?.min_chasis}` : 'N/A'}
          </p>
        </div>
      </div>
    </div>
    {hoveredPlan === "avg_chassis" &&
      toCheckUserTypeSubscreption(data) && data?.user?.is_child !== 1 &&
      "free" && (
        <div
          onMouseLeave={() => handlePlanLeaveEvent()}
          className='hover-box'
          style={{ top: "70px" }}
          onClick={() => setModalStatus(true)}
          x-placement='bottom-start'
          aria-labelledby='nav-dropdown'
          className='dropdown-menu show dropdown-menu-light'
          data-popper-reference-hidden='false'
          data-popper-escaped='false'
          data-popper-placement='bottom-start'
          bis_skin_checked='1'
        >
          <a
            data-rr-ui-dropdown-item=''
            class='dropdown-item'
            role='button'
            tabindex='0'
            href='#'
          >
            Available in Draydex Premium
          </a>
        </div>
      )}
  </div>;
}

function FirstInnderHandledNewFn(handlePlanHover: (plan: any) => void, data: any, isFiltered: boolean, quotesRateDetails: any, hoveredPlan: null, handlePlanLeaveEvent: (e: any) => void, setModalStatus: any) {
  const commonAccessorialData = quotesRateDetails?.topThreeCommonAccessorial;
  return <div>
    <div className='right-column position-relative'>
      <h2 className='box-heading'>Common Accessorial Fee Averages</h2>

      <div
        onMouseOver={() => handlePlanHover("common_accessorial")}
        className={`box-heading user_subscreption_${toCheckUserTypeSubscreption(data) && "free"}`}
      >
        {commonAccessorialData?.length > 0 ? (
          commonAccessorialData.map((itemData: any) => (
            <p className='box-paragraph' key={itemData?.name}>
              <span style={{ textTransform: 'capitalize' }}>{itemData?.name.toLowerCase()}</span>: {` $${itemData?.avg}`}
            </p>
          ))
        ) : (<p className="box-head">N/A</p>)}
      </div>
      {hoveredPlan === "common_accessorial" &&
        toCheckUserTypeSubscreption(data) && data?.user?.is_child !== 1 &&
        "free" && (
          <div onMouseLeave={() => handlePlanLeaveEvent()}>
            <div
              onMouseLeave={() => handlePlanLeaveEvent()}
              className='hover-box'
              style={{ position: "relative" }}
              onClick={() => setModalStatus(true)}
              x-placement='bottom-start'
              aria-labelledby='nav-dropdown'
              className='dropdown-menu show dropdown-menu-light'
              data-popper-reference-hidden='false'
              data-popper-escaped='false'
              data-popper-placement='bottom-start'
              bis_skin_checked='1'
            >
              <a
                data-rr-ui-dropdown-item=''
                class='dropdown-item'
                role='button'
                tabindex='0'
                href='#'
              >
                Available in Draydex Premium
              </a>
            </div>
          </div>
        )}
    </div>
  </div>;
}

function TypeRepBodyTemplateNewFn() {
  return (rowData: any) => {
    if (rowData.type === undefined || rowData.type === null) {
      return <p>N/A</p>;
    } else {
      return <p className='TypeRepBodyTemplateCss'>{rowData.type}</p>;
    }
  };
}

function customerleadRepBodyTemplateNewFn(data: Session | null) {
  return (rowData: { customer_lead: string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<AwaitedReactNode> | null | undefined; is_gray: number; }) => {
    if (rowData.customer_lead === undefined || rowData.customer_lead === null) {
      return <p>Admin</p>;
    } else {
      return (

        <p className='TypeRepBodyTemplateCss'>
          {rowData?.is_gray === 0 && data?.user?.group_type === "carriers" && data?.user?.is_premium === 0 && rowData?.customer_lead !== "N/A" ? rowData.customer_lead.charAt(0) + "*****" : rowData.customer_lead}
        </p>
      );

    }
  };
}
function statusTempFun(data: Session | null) {
  return (rowData: { status: string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<AwaitedReactNode> | null | undefined; }) => {
    if (rowData.status === undefined || rowData.status === null) {
      return <p>N/A</p>;
    } else {
      let statusClass = ""; 

      // Determine the status class
      if (rowData?.status === "Rated") {
        statusClass = "common-yellow";
      } else if (rowData?.status === "Open") {
        statusClass = "status-red";
      }else{
        statusClass = "status-green";
      }

      return (
        <p className={`TypeRepBodyTemplateCss ${statusClass}`}>
          {rowData?.status}
        </p>
      );
    }
  };
}


function FscTotalBodyTemplateNewFn(data: Session | null) {
  return (rowData: { linehaul_fsc_total: string | null | undefined; is_gray: number; }) => {
    if (rowData?.linehaul_fsc_total === undefined ||
      rowData?.linehaul_fsc_total === null ||
      rowData?.linehaul_fsc_total === "N/A") {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      const fscTotal = parseFloat(rowData.linehaul_fsc_total).toFixed(2);
      return (
        <>
          <p>
            {rowData?.is_gray === 0 && data?.user?.group_type === "carriers" && fscTotal !== "N/A" && data?.user?.is_premium === 0
              ? "$" +
              fscTotal.replace(/\d/g, '*')
              : "$" + fscTotal}
          </p>
        </>
      );
    }

  };
}
function EngagementsBodyTemplateNewFn(data: Session | null,  setModalStatus: { (value: SetStateAction<boolean>): void; (arg0: boolean): void; }) {
  const [hoveredIndex, setHoveredIndex] = useState(null); // Track hovered row index

  return (rowData: { rate_count: any; }, rowIndex: { rowIndex: SetStateAction<null>; }) => {
    const rateCount = rowData?.rate_count;

    let colorClass = "";
    if (rateCount > 3) {
      colorClass = "green";
    } else if (rateCount >= 2 && rateCount <= 3) {
      colorClass = "engagement-yellow";
    } else if (rateCount < 2) {
      colorClass = "red";
    }

    const isBlurred =
      data?.user?.group_type === "customers" && data?.user?.is_premium === 0;
    return (
      <div
        style={{
          display: "inline-flex",
          position: "relative",
          cursor: isBlurred ? "pointer" : "default",
        }}
        onMouseOver={() => {
          if (isBlurred) {
            setHoveredIndex(rowIndex?.rowIndex); 
          }
        }}
      
      >
        <p className={`${colorClass} ${isBlurred ? "blurred" : ""}`}>
          {rateCount !== undefined && rateCount !== null ? rateCount : "N/A"}
        </p>
        {hoveredIndex === rowIndex?.rowIndex && data?.user?.is_child !== 1 && (
          <div
            onMouseLeave={() => {
              if (isBlurred) {
                setHoveredIndex(null);
              }
            }}
            className="hover-box dropdown-menu show dropdown-menu-light-check available"
          >
            <a
              href="#"
              className="dropdown-item"
              role="button"
              tabIndex={0}
              onClick={() => setModalStatus(true)}
            >
              Available in Draydex Premium
            </a>
          </div>
        )}
      </div>
    );
  };
}
function RequestdateBodyTemplateNewFn() {
  return (rowData: { request_date: moment.MomentInput; }) => {
    if (rowData?.request_date === undefined || rowData?.request_date === null) {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      return (
        <>
          <p>
            {rowData ? moment(rowData?.request_date)?.format("MM-DD-YYYY") : ""}
          </p>
        </>
      );
    }
  };
}

function Bodydistance_from_origin_destinationNew() {
  return (rowData: { distance_from_origin_destination: any; }) => {
    const distance = Number(rowData?.distance_from_origin_destination);

    if (isNaN(distance) || distance === null) {
      return <p>N/A</p>;
    } else {
      return <p>{distance.toFixed(2)}</p>;
    }
  };
}

function DispatcherBodyTemplateNew() {
  return (rowData: { dispatcher: string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<AwaitedReactNode> | null | undefined; }) => {
    if (rowData?.dispatcher === undefined || rowData?.dispatcher === null) {
      return (
        <>
          <p>N/A</p>
        </>
      );
    } else {
      return (
        <>
          <p>{rowData?.dispatcher}</p>
        </>
      );
    }
  };
}

function onSubmitFSCNew({ rows, setfscminValue, setfscmaxValue, startdate, enddate, equipmentFilterValue, quoteFilterValue, customerLeadFilterValue, request_date_filter, typeFilterValue, sizeFilterValue, portnameFilterValue, distanceorigindestinationFilterValue, fsctotalFilterValue, origindestinationFilterValue, salesrepFilterValue, rateQuotesDataGet, token,StatusLeadFilterValue }: { rows: number, setfscminValue: any; setfscmaxValue: any; startdate: string; enddate: string; equipmentFilterValue: string; quoteFilterValue: string; customerLeadFilterValue: string; request_date_filter: string; typeFilterValue: string; sizeFilterValue: string; portnameFilterValue: any; distanceorigindestinationFilterValue: string; fsctotalFilterValue: string; origindestinationFilterValue: string; salesrepFilterValue: string; rateQuotesDataGet: (access_token?: string | null, pageno?: any, query?: any | null, rows?: number) => void; token: any; StatusLeadFilterValue:any}) {
  return (datapayload: any) => {
    setfscminValue(datapayload.fscminValue);
    setfscmaxValue(datapayload.fscmaxValue);
    const query = {
      start_date: startdate,
      end_date: enddate,
      equipment: equipmentFilterValue,
      quote: quoteFilterValue,
      customer_lead: customerLeadFilterValue,
      request_date: request_date_filter,
      type: typeFilterValue,
      size: sizeFilterValue,
      port: portnameFilterValue,
      distance_from_origin_destination: distanceorigindestinationFilterValue,
      linehaul_fsc_total: fsctotalFilterValue,
      city: origindestinationFilterValue,
      miles_start_range: datapayload.minValue,
      miles_end_range: datapayload.maxValue,
      linehaul_fsc_total_start_range: datapayload.fscminValue,
      linehaul_fsc_total_end_range: datapayload.fscmaxValue,
      sales_rep: salesrepFilterValue,
      status:StatusLeadFilterValue
    };
    rateQuotesDataGet(token, 1, query, rows);
  };
}

function onSortChangeScope(setSortField: { (value: SetStateAction<null>): void; (arg0: any): void; }, e: any, setSortOrder: { (value: SetStateAction<null>): void; (arg0: any): void; }, customSort: (field: any, order: any) => void) {
  setSortField(e.sortField);
  setSortOrder(e.sortOrder);
  customSort(e.sortField, e.sortOrder);
}

function customSortJsx(rateQuotesdata: undefined, order: any, field: any, setRateQuotesdata: { (value: SetStateAction<undefined>): void; (arg0: any[]): void; }) {
  if (!rateQuotesdata) return;
  const sortedData = [...rateQuotesdata];
  const getValue = (value: any) => value === "N/A" || value == null ? -Infinity : parseFloat(value);
  sortedData.sort((a, b) => {
    if (field === "linehaul_fsc_total") {
      return (getValue(a[field]) - getValue(b[field])) * order;
    }
    return order * (a[field] > b[field] ? 1 : -1);
  });
  setRateQuotesdata(sortedData);
}

function ModClass(data: any): string | undefined {
  return `gapping user_subscreption_${toCheckUserTypeSubscreption(data) && "free"}`;
}

function request_date_filter_Mod(requestdateFiltervalue: null) {
  return requestdateFiltervalue
    ? moment(requestdateFiltervalue)?.format(DATE_FORMAT)
    : "";
}

export async function getServerSideProps(context: any) {
  const session = await getServerSession(context.req, context.res, authOptions);
  const [averagePortRamp] = await Promise.all([
    await getRateQuotess(session?.user?.image),
  ]);

  if (
    averagePortRamp.status === "error" ||
    averagePortRamp.status_code === 401
  ) {
    const { res } = context;
    res.writeHead(301, { Location: "/login" });
    res.end();
    return {
      props: {
        breadcrumbs: [],
        dataQuotes: [],
      },
    };
  }
  return {
    props: {
      breadcrumbs: [
        {
          title: "Dashboard",
          path: "/dashboard",
        },
        {
          title: "Rate Quotes",
          path: "/rate-quotes",
        },
      ],
      dataQuotes: averagePortRamp.data,
    },
  };
}

export default ProtectedRoute(Index as any);