import React, {
  useEffect,
  useState,
  useRef,
  useContext,
  useCallback,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Select, Tooltip } from 'antd';
import { Form, Input, Table } from 'antd';
import {
  EditFilled,
  DeleteFilled,
  ArrowRightOutlined,
} from '@ant-design/icons';
import {
  PutStockPrice,
  bulkPriceUpdate,
  getStockNames,
} from '../../Features/StockPriceUpdate/StockPriceUpdateMaster';
import {
  dateFormatChange,
  ExtractDateFormate,
  getSession,
} from '../../Services/Others';
import { DefaultModal } from '../../Components/Modal/DefaultModal';
import { Tables } from '../../Components/Tables/Table';
import Buttons from '../../Components/Forms/Buttons';
import { Messages } from '../../Components/Notifications/Messages';
import {
  changeBreadCrumb,
  getEmpAccess,
} from '../../Features/AppPage/CenterPage.js';
import FormHeader from '../PageComponents/FormHeader';
import Search from '../../Components/Forms/Search';
import { RadioGrpButton } from '../../Components/Forms/RadioGroup.jsx';
import { useAuth } from '../../AuthContext.jsx';
import '../../Styles/OverAllStyle/OverAllStyle.scss';
import './StockPriceUpdate.scss';
import { getPreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
import { DropDowns } from '../../Components/Forms/DropDown.jsx';
import { FiDelete, FiUploadCloud } from 'react-icons/fi';
import { CiExport } from 'react-icons/ci';
import Excelupldimg from '../../Images/Excel.png';
import {
  emptyExcelData,
  fileInputRefSelector,
} from '../../Features/ExcelUploadPage/ExcelUploadPage.js';
const subDirectory = import.meta.env.BASE_URL;
import ExcelJS from 'exceljs';
import { read, utils } from 'xlsx';
import { v4 as uuidv4 } from 'uuid';
import { InputField } from '../../Components/Forms/InputField.jsx';
import { MdOutlineAppRegistration } from 'react-icons/md';
import {
  getFieldSetupData,
  postFieldSetup,
} from '../../Features/ProductPage/ProductPage.js';
import {
  ApplicationPreferences,
  getCommonAppPreference,
} from '../../Features/BrachLogin/BranchLogin.js';
import { IoClose } from 'react-icons/io5';

const StockPriceUpdate = () => {
  const { SadminuserAccess } = useAuth();
  let SAAccessCommonMaster = SadminuserAccess?.find(
    (e) => e?.MenuName === 'Price Change'
  );

  const ApplicationPreferenceData = useSelector(ApplicationPreferences);
  const categoryId = ApplicationPreferenceData?.find(
    (p) => p?.PreferredCatName?.toLowerCase() === 'price change fields'
  )?.PreferredCatId;

  const excelCategoryId = ApplicationPreferenceData?.find(
    (p) => p?.PreferredCatName?.toLowerCase() === 'price change sheet fields'
  )?.PreferredCatId;

  const fileInputRef = useRef(fileInputRefSelector);
  const excelDataRef = useRef(null);
  const formRef = useRef(null);

  const allowedExcelTypes = [
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
    'application/vnd.ms-excel', // .xls
  ];

  const dispatch = useDispatch();
  const [selectedFields, setSelectedFields] = useState([]);
  const [selectedExcelFields, setSelectedExcelFields] = useState([]);
  const [tableFieldPreferences, setTableFieldPreferences] = useState([]);
  const [tableExcelFieldPreferences, setTableExcelFieldPreferences] = useState(
    []
  );
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [StockNames, setStockNames] = useState([]);
  const [ProductName, setProductName] = useState(null);

  const [fieldSetup, setFieldSetup] = useState(false);
  const [excelFieldSetup, setExcelFieldSetup] = useState(false);
  const [StockDetails, setStockDetails] = useState([]);
  const [dataSource, setDataSource] = useState([]);
  const [sortedInfo, setSortedInfo] = useState({});
  const [BulksortedInfo, setBulksortedInfo] = useState({});
  const [searchedText, setSearchedText] = useState('');
  const [BulksearchedText, setBulksearchedText] = useState('');
  const [filteredInfo, setFilteredInfo] = useState({});
  const [page, setpage] = useState(1);
  const [Bulkchangepage, setBulkchangepage] = useState(1);

  const [pageSize, setPageSize] = useState(10);
  const [openEditModal, setOpenEditModal] = useState(false);
  const [open, setOpen] = useState(false);
  const [excelModalOpen, setExcelModalOpen] = useState(false);
  const [priceChangeModalOpen, setPriceChangeModalOpen] = useState(false);
  const [stockVariantBased, setStockVariantBased] = useState('Yes');
  const [exportLoading, setExportLoading] = useState(false);
  const [fileLoading, setFileLoading] = useState(false);
  const [loading, setLoading] = useState(false);
  const [headers, setHeaders] = useState([]);
  console.log(headers, 'headers');
  const [uploadedData, setUploadedData] = useState([]);
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');
  const UserType = getSession('UserType');

  const [empData, setEmpData] = useState();
  const [addnewAccess, setaddnewAccess] = useState(true);
  const [RadioSelection, setRadioSelection] = useState('Single');
  const [BulkProductData, setBulkProductData] = useState([]);
  const [allowDecimal, setAllowDecimal] = useState(false);
  const hasFieldExists = (label) =>
    headers.some((h) => h.toLowerCase() === label.toLowerCase());
  const hasField = (label) =>
    tableFieldPreferences?.some((f) => f.label === label && f.access === 'Y');
  const hasExcelField = (label) =>
    tableExcelFieldPreferences?.some(
      (f) => f.label === label && f.access === 'Y'
    );

  const items = [
    {
      name: 'Home',
      link: `${subDirectory}app-page/home`,
    },
  ];

  const handleRemoveRecord = (index) => {
    setUploadedData((prev) => prev.filter((_, i) => i !== index));
  };
  console.log(uploadedData, 'uploadedData');
  const columns = [
    {
      title: 'Product Name',
      dataIndex: 'ProductName',
      key: 'ProductName',
      width: 180,
      render: (value, record, index) => (
        <p>
          {value}{' '}
          {record?.Size && `(${record?.Size || ''} ${record?.UOMName || ''})`}
        </p>
      ),
    },
    {
      title: 'Variant Name',
      dataIndex: 'VariantName',
      key: 'VariantName',
      width: 180,
    },
    {
      title: 'Batch No',
      dataIndex: 'BatchRef',
      key: 'BatchRef',
      width: 180,
    },
    ...(hasFieldExists('Stock')
      ? [
          {
            title: 'Stock',
            dataIndex: 'Stock',
            key: 'Stock',
            width: 80,
          },
        ]
      : []),
    ...(hasFieldExists('Stock Date')
      ? [
          {
            title: 'Stock Date',
            dataIndex: 'StockDate',
            key: 'StockDate',
            width: 80,
          },
        ]
      : []),
    ...(hasFieldExists('Old MRP')
      ? [
          {
            title: 'Old MRP',
            dataIndex: 'OldMRP',
            key: 'OldMRP',
            width: 100,
          },
        ]
      : []),
    ...(hasFieldExists('Old SP')
      ? [
          {
            title: 'Old SP',
            dataIndex: 'OldSP',
            key: 'OldSP',
            width: 100,
          },
        ]
      : []),
    ...(hasFieldExists('Old Wholesale Price')
      ? [
          {
            title: 'Old Wholesale Price',
            dataIndex: 'OldWholeSalePrice',
            key: 'OldWholeSalePrice',
            width: 140,
          },
        ]
      : []),

    // ✅ EDITABLE
    {
      title: 'New MRP',
      dataIndex: 'NewMRP',
      key: 'NewMRP',
      width: 120,
      render: (_, record, index) => (
        <Form.Item name={`NewMRP${record.localId}`}>
          <Input
            placeholder="New MRP"
            inputMode="decimal"
            onChange={(e) =>
              handlePriceChange(index, 'NewMRP', e.target.value, record.localId)
            }
            onInput={(e) => {
              let cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
              if (cleanedValue.startsWith('.')) {
                cleanedValue = '0' + cleanedValue;
              }
              const parts = cleanedValue.split('.');
              e.target.value =
                parts.length > 2
                  ? `${parts[0]}.${parts.slice(1).join('')}`
                  : cleanedValue;
            }}
          />
        </Form.Item>
      ),
    },
    {
      title: 'New SP',
      dataIndex: 'NewSellPrice',
      key: 'NewSellPrice',
      width: 120,
      render: (_, record, index) => (
        <Form.Item
          name={`NewSellPrice${record.localId}`}
          validateTrigger={['onChange', 'onBlur']}
          rules={[
            ({ getFieldValue }) => ({
              validator(_, value) {
                const mrp = getFieldValue(`NewMRP${record.localId}`);

                if (mrp === undefined || mrp === null || mrp === '') {
                  return Promise.resolve();
                }

                const numMRP = Number(mrp);
                const numSP =
                  value === undefined || value === null || value === ''
                    ? null
                    : Number(value);

                if (numSP === null) {
                  return Promise.reject(
                    new Error('New SP is required when New MRP is provided')
                  );
                }

                if (numSP > numMRP) {
                  return Promise.reject(
                    new Error('New SP cannot be greater than New MRP')
                  );
                }

                return Promise.resolve();
              },
            }),
          ]}
        >
          <Input
            placeholder="New SP"
            inputMode="decimal"
            onInput={(e) => {
              let cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
              const parts = cleanedValue.split('.');
              if (cleanedValue.startsWith('.')) {
                cleanedValue = '0' + cleanedValue;
              }
              e.target.value =
                parts.length > 2
                  ? `${parts[0]}.${parts.slice(1).join('')}`
                  : cleanedValue;
            }}
            onChange={(e) => {
              {
                handlePriceChange(
                  index,
                  'NewSellPrice',
                  e.target.value,
                  record.localId
                );
                excelDataRef.current
                  ?.validateFields([`NewSellPrice${record.localId}`])
                  .catch(() => {});
              }
            }}
          />
        </Form.Item>
      ),
    },
    ...(hasFieldExists('New Wholesale Price')
      ? [
          {
            title: 'New Wholesale Price',
            dataIndex: 'NewWholeSalePrice',
            key: 'NewWholeSalePrice',
            width: 160,
            render: (value, record, index) => (
              <Form.Item name={`NewWholeSalePrice${record?.localId}`}>
                <Input
                  onChange={(e) =>
                    handlePriceChange(
                      index,
                      'NewWholeSalePrice',
                      e.target.value,
                      record.localId
                    )
                  }
                  placeholder="New Wholesale"
                  inputMode="decimal"
                  onInput={(e) => {
                    let cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
                    const parts = cleanedValue.split('.');
                    if (cleanedValue.startsWith('.')) {
                      cleanedValue = '0' + cleanedValue;
                    }
                    e.target.value =
                      parts.length > 2
                        ? `${parts[0]}.${parts.slice(1).join('')}`
                        : cleanedValue;
                  }}
                />
              </Form.Item>
            ),
          },
        ]
      : []),
    {
      title: 'Action',
      key: 'action',
      width: 80,
      align: 'center',
      render: (_, record, index) => (
        <DeleteFilled
          style={{
            color: '#EF4443',
            cursor: 'pointer',
          }}
          onClick={() => handleRemoveRecord(index)}
        />
      ),
    },
  ];

  useEffect(() => {
    dispatch(changeBreadCrumb({ items: items }));
    getPreference();
    // if (UserType === "Employee") {
    //   fetchApi()
    // }
  }, []);
  useEffect(() => {
    dispatch(getCommonAppPreference(AppId));
  }, [AppId, dispatch]);
  useEffect(() => {
    if (UserType === 'Employee') {
      fetchApi();
    }
  }, [UserType]);

  useEffect(() => {
    getFieldSetup();
  }, [categoryId]);

  useEffect(() => {
    getExcelFieldSetup();
  }, [excelCategoryId]);

  const getFieldSetup = async () => {
    try {
      const response = await dispatch(
        getFieldSetupData({ AppId, CompId, BranchId, categoryId, Type: 'GB' })
      ).unwrap();
      if (response?.data?.statusCode === 1) {
        console.log(response?.data?.data?.[0]?.ConfigDtl, 'Field Setup Data');
        setSelectedFields(
          response?.data?.data?.[0]?.ConfigDtl?.filter(
            (c) => c.ConfigId && c.Access === 'Y'
          )?.map((c) => c.ConfigId) || []
        );
        setTableFieldPreferences(
          response?.data?.data?.[0]?.ConfigDtl?.map((c) => ({
            value: c.ConfigId,
            label: c.ConfigName,
            access: c.Access,
          })) || []
        );
      }
    } catch (error) {
      console.error('Error fetching field setup:', error);
    }
  };

  const getExcelFieldSetup = async () => {
    try {
      const response = await dispatch(
        getFieldSetupData({
          AppId,
          CompId,
          BranchId,
          categoryId: excelCategoryId,
          Type: 'GB',
        })
      ).unwrap();
      if (response?.data?.statusCode === 1) {
        console.log(response?.data?.data?.[0]?.ConfigDtl, 'Field Setup Data');
        setSelectedExcelFields(
          response?.data?.data?.[0]?.ConfigDtl?.filter(
            (c) => c.ConfigId && c.Access === 'Y'
          )?.map((c) => c.ConfigId) || []
        );
        setTableExcelFieldPreferences(
          response?.data?.data?.[0]?.ConfigDtl?.map((c) => ({
            value: c.ConfigId,
            label: c.ConfigName,
            access: c.Access,
          })) || []
        );
      }
    } catch (error) {
      console.error('Error fetching field setup:', error);
    }
  };

  useEffect(() => {
    let hasAccess = false;

    if (UserType === 'Admin' || UserType === 'Super Admin') {
      hasAccess = true;
    } else if (UserType === 'Employee') {
      hasAccess = empData?.AddAccess === 'Y';
    } else if (UserType === 'Super Admin User') {
      hasAccess = SAAccessCommonMaster?.AddAccess === 'Y';
    }

    setaddnewAccess(!hasAccess);
  }, [empData, SAAccessCommonMaster, UserType]);

  useEffect(() => {
    if (uploadedData?.length) {
      setFormValuesFromExtractedData(uploadedData);
    } else {
      excelDataRef?.current?.resetFields();
    }
  }, [uploadedData]);

  const fetchApi = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      EmpId: UserId,
    };
    let response = await dispatch(getEmpAccess(data)).unwrap();
    let datas = response?.data?.data?.[0]?.EmpAccessDetails?.filter(
      (item) => item.ConfigName === 'Price Change'
    );
    setEmpData(datas?.[0]);
  };

  const EditableContext = React.createContext(null);
  const EditableRow = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
      <Form form={form} component={false}>
        <EditableContext.Provider value={form}>
          <tr {...props} />
        </EditableContext.Provider>
      </Form>
    );
  };
  const BulkEditableRow = ({ index, ...props }) => {
    const [form] = Form.useForm();
    return (
      <Form form={form} component={false}>
        <EditableContext.Provider value={form}>
          <tr {...props} />
        </EditableContext.Provider>
      </Form>
    );
  };

  const EditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
  }) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(EditableContext);

    useEffect(() => {
      if (editing) {
        inputRef?.current?.focus();
      }
    }, [editing]);

    const toggleEdit = () => {
      setEditing(!editing);

      form.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    };

    const save = async () => {
      try {
        const values = await form.validateFields();
        toggleEdit();
        handleSave({
          ...record,
          ...values,
        });
      } catch (errInfo) {
        console.log('Save failed:', errInfo);
      }
    };

    let childNode = children;

    if (editable) {
      childNode = editing ? (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          rules={[
            {
              pattern: /^(?!0$)(\d+)(\.\d{1,2})?$/,
              message: 'Invalid format (Max 2 decimals, No zero)',
            },
            {
              validator: (_, value) =>
                value?.length > 10
                  ? Promise.reject('Max 10 characters allowed')
                  : Promise.resolve(),
            },
          ]}
        >
          <Input
            className="editable-table-input"
            ref={inputRef}
            onPressEnter={save}
            onBlur={save}
            // onMouseLeave={save}
            value={
              Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
            }
            inputMode="decimal"
            onInput={(e) => {
              const cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
              const parts = cleanedValue.split('.');
              e.target.value =
                parts.length > 2
                  ? `${parts[0]}.${parts.slice(1).join('')}`
                  : cleanedValue;
            }}
          />
        </Form.Item>
      ) : (
        <div className="editable-cell-value-wrap" onClick={toggleEdit}>
          {/* {dataIndex === 'CurrentAmt' && Array.isArray(record[dataIndex])
            ? record[dataIndex]?.map((item, index) => (
              <span key={index}>
                {item.CurrentAmt + '-' + item.CurrentAmt}
              </span>
            ))
            : children} */}

          <Input
            ref={inputRef}
            className="editable-table-input"
            onPressEnter={save}
            onBlur={save}
            value={
              Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
            }
          />
        </div>
      );
    }

    return <td {...restProps}>{childNode}</td>;
  };
  const BulkEditableCell = ({
    title,
    editable,
    children,
    dataIndex,
    record,
    handleSave,
    ...restProps
  }) => {
    const [editing, setEditing] = useState(false);
    const inputRef = useRef(null);
    const form = useContext(EditableContext);

    useEffect(() => {
      if (editing) {
        inputRef?.current?.focus();
      }
    }, [editing]);

    const toggleEdit = () => {
      setEditing(!editing);

      form.setFieldsValue({
        [dataIndex]: record[dataIndex],
      });
    };

    const Bulksave = async () => {
      try {
        const values = await form.validateFields();
        toggleEdit();
        handleBulkSave({
          ...record,
          ...values,
        });
      } catch (errInfo) {
        console.log('Save failed:', errInfo);
      }
    };

    let childNode = children;

    if (editable) {
      childNode = editing ? (
        <Form.Item
          style={{
            margin: 0,
          }}
          name={dataIndex}
          rules={[
            {
              pattern: /^(?!0$)(\d+)(\.\d{1,2})?$/,
              message: 'Invalid format (Max 2 decimals, No zero)',
            },
            {
              validator: (_, value) =>
                value?.length > 10
                  ? Promise.reject('Max 10 characters allowed')
                  : Promise.resolve(),
            },
          ]}
        >
          <Input
            ref={inputRef}
            onPressEnter={Bulksave}
            onBlur={Bulksave}
            // onMouseLeave={Bulksave}
            value={
              Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
            }
            inputMode="decimal"
            onInput={(e) => {
              const cleanedValue = e.target.value.replace(/[^0-9.]/g, '');
              const parts = cleanedValue.split('.');
              e.target.value =
                parts.length > 2
                  ? `${parts[0]}.${parts.slice(1).join('')}`
                  : cleanedValue;
            }}
          />
        </Form.Item>
      ) : (
        <div className="editable-cell-value-wrap" onClick={toggleEdit}>
          {/* {dataIndex === "CurrentAmt" && Array.isArray(record[dataIndex])
            ? record[dataIndex]?.map((item, index) => (
              <span key={index}>
                {item.CurrentAmt + "-" + item.CurrentAmt}
              </span>
            ))
            : children} */}
          <Input
            ref={inputRef}
            onPressEnter={Bulksave}
            onBlur={Bulksave}
            value={
              Array.isArray(record[dataIndex]) ? undefined : record[dataIndex]
            }
          />
        </div>
      );
    }

    return <td {...restProps}>{childNode}</td>;
  };
  useEffect(() => {
    fetchData();
  }, []);
  const getPreference = async () => {
    const data = { AppId: AppId, CompId: CompId, BranchId: BranchId };
    const { data: res } = await dispatch(getPreferenceData(data)).unwrap();
    const decimalSetting = res?.data?.[0]?.SettingDtlDetails?.find(
      (setting) =>
        setting?.SettingIdName?.toLowerCase() === 'decimal' &&
        setting?.SettingValue === 'Y'
    );
    if (decimalSetting) {
      setAllowDecimal(true);
    }
  };
  const fetchData = async () => {
    let data = {
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
    };

    let res = await dispatch(getStockNames(data)).unwrap();
    const stockNamesWithKeys = res?.data?.data?.map((stockName) => ({
      ...stockName,
      stockDetails: stockName?.stockDetails?.map((item, index) => ({
        ...item,
        key: `${stockName.ProdId}_${index}`,
      })),
    }));

    setStockNames(stockNamesWithKeys);
    const flattenedArray = res?.data?.data?.flatMap((product) =>
      product.stockDetails.map((detail) => ({
        ProdName: product.ProdName,
        InwardDtlId: detail.InwardDtlId,
        InwardDate: detail.InwardDate,
        ExpDate: detail.ExpDate,
        BalanceQty: detail.BalanceQty,
        MRP: detail.MRP,
        SellPrice: detail.SellPrice,
        ProdId: product.ProdId,
        Size: product.Size,
        StockAvailable: product.StockAvailable,
        CompId: product.CompId,
        BranchId: product.BranchId,
        AppId: product.AppId,
        UOM: product.UOM,
        UOMName: product.UOMName,
        WhSalePrice: detail?.WhSalePrice,
        ProdVariantName: detail?.ProdVariantName,
        BatchRef: detail?.BatchRef,
        key: `${product.ProdId}_${detail.InwardDtlId}`,
      }))
    );
    setBulkProductData(flattenedArray);
  };

  const actionsFormatter = async (row) => {
    setOpenEditModal(true);
    setDataSource([row]);
  };

  const handlePriceChange = (rowIndex, field, value, localId) => {
    const numValue = value ? parseFloat(value) : null;

    setUploadedData((prev) => {
      const updated = [...prev];
      const currentRow = { ...updated[rowIndex] };

      // If changing New MRP, clear New SP
      if (field === 'NewMRP') {
        currentRow.NewSellPrice = null;
        excelDataRef.current?.setFieldsValue({
          [`NewSellPrice${localId}`]: null,
        });
      }

      currentRow[field] = numValue;
      currentRow.isModified = true;
      updated[rowIndex] = currentRow;
      return updated;
    });

    // Validate New SP against New MRP
    if (field === 'NewSellPrice' && numValue) {
      const currentRow = uploadedData[rowIndex];
      const newMRP = currentRow?.NewMRP;

      if (newMRP && numValue > newMRP) {
        setMessageType('error');
        setMessageData('New SP cannot be greater than New MRP');
        return;
      }
    }

    excelDataRef.current?.setFieldsValue({
      [`${field}${localId}`]: numValue,
    });
  };

  const statusFormatter = async (row) => {
    const updatedData = StockDetails?.filter(
      (item) => item?.InwardDtlId !== row?.InwardDtlId
    );
    setStockDetails(updatedData);
  };

  let tableValue = StockNames?.[0]?.stockDetails;
  let DataSource = StockNames?.map((name, index) => ({
    value: index + 1,
    label: name?.ProdName + '(' + (name?.Size + ' ' + name?.UOMName) + ')',
    ProdId: name?.ProdId,
    stockDetails: name?.stockDetails,
    Quantity: name?.Size,
    QuantityName: name?.UOMName,
    ExpDate: name.stockDetails?.[0]?.ExpDate,
  }));

  useEffect(() => {
    setDataSource(tableValue);
  }, [tableValue]);

  const handleSave = (row) => {
    if (row?.CurrentAmt && row?.CurrentMRP) {
      if (parseFloat(row?.CurrentMRP) >= parseFloat(row?.CurrentAmt)) {
        const newData = StockDetails?.map((item) => {
          return item.key === row.key ? { ...item, ...row } : item;
        });
        const index = newData?.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData?.splice(index, 1, {
          ...item,
          ...row,
        });
        setStockDetails(newData);
      } else {
        setMessageType('error');
        setMessageData('MRP is must be greater than or equal to selling price');
      }
    } else {
      const newData = StockDetails?.map((item) => {
        return item.key === row.key ? { ...item, ...row } : item;
      });
      const index = newData?.findIndex((item) => row.key === item.key);
      const item = newData[index];
      newData?.splice(index, 1, {
        ...item,
        ...row,
      });
      setStockDetails(newData);
    }
  };
  const handleBulkSave = (row) => {
    if (row?.CurrentAmt && row?.CurrentMRP) {
      if (parseFloat(row?.CurrentMRP) >= parseFloat(row?.CurrentAmt)) {
        const newData = BulkProductData?.map((item) => {
          return item.key === row.key ? { ...item, ...row } : item;
        });
        const index = newData?.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData?.splice(index, 1, {
          ...item,
          ...row,
        });
        setBulkProductData(newData);
      } else {
        setMessageType('error');
        setMessageData(
          'MRP is must be greater than or equal  to selling price'
        );
      }
    } else {
      const newData = BulkProductData?.map((item) => {
        return item.key === row.key ? { ...item, ...row } : item;
      });
      const index = newData?.findIndex((item) => row.key === item.key);
      const item = newData[index];
      newData?.splice(index, 1, {
        ...item,
        ...row,
      });
      setBulkProductData(newData);
    }
  };
  const components = {
    body: {
      row: EditableRow,
      cell: EditableCell,
    },
  };
  const BulkComponents = {
    body: {
      row: BulkEditableRow,
      cell: BulkEditableCell,
    },
  };

  function safeRound(amountStr) {
    if (amountStr == null) return allowDecimal ? '0.00' : '0';

    const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
    const num = Number(cleaned);

    if (isNaN(num)) return allowDecimal ? '0.00' : '0';

    return allowDecimal ? num.toFixed(2) : Math.round(num).toString();
  }

  const columns2 = [
    {
      title: 'Sl.No',
      align: 'center',
      key: 'sno',
      width: '60px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>{index + 1}</a>
      ),
    },
    {
      title: 'Product Name',
      dataIndex: 'ProdName',
      key: 'ProdName',
      width: '20%',
      filteredValue: [searchedText],
      onFilter: (value, record) => {
        return String(record.ProdName)
          ?.toLowerCase()
          .includes(value?.toLowerCase());
      },
      sorter: (a, b) => a?.ProdName?.localeCompare(b.ProdName),
      sortOrder: sortedInfo.columnKey === 'ProdName' ? sortedInfo.order : null,
      ellipsis: true,

      render: (_, record) => (
        <span>
          {record.ProdName} ({record.UOM} {record.UOMName})
        </span>
      ),
    },
    {
      title: 'stock Date',
      dataIndex: 'InwardDate',
      key: 'InwardDate',
      align: 'right',
      width: '150px',
      render: (InwardDate) =>
        InwardDate !== null ? ExtractDateFormate(InwardDate) : '-',
    },
    {
      title: 'Old MRP',
      dataIndex: 'MRP',
      key: 'MRP',
      align: 'right',
      render: (MRP) => (safeRound(MRP) !== null ? safeRound(MRP) : '-'),
    },

    {
      title: 'Old Price',
      dataIndex: 'SellPrice',
      key: 'SellPrice',
      align: 'right',
      render: (SellPrice) =>
        safeRound(SellPrice) !== null ? safeRound(SellPrice) : '-',
    },
    {
      title: 'New MRP',
      dataIndex: 'CurrentMRP',
      key: 'CurrentMRP',
      align: 'right',
      editable: true,
      render: (text, record) => <p>{text ? text : 'Enter MRP'}</p>,
      width: 100,
    },
    {
      title: 'New SP',
      dataIndex: 'CurrentAmt',
      key: 'CurrentAmt',
      align: 'right',
      editable: true,
      render: (text, record) => <p>{text ? text : 'Enter Price'}</p>,
      width: 100,
    },

    {
      title: 'Action',
      dataIndex: 'SellPrice',
      key: 'SellPrice',
      align: 'center',
      width: '100px',
      render: (_, record, index) => (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            columnGap: '1rem',
          }}
        >
          <DeleteFilled
            style={{ color: '#FF4D4F' }}
            onClick={() => statusFormatter(record, index)}
          />
        </div>
      ),
    },
  ];
  const BulkPricechangeColumns = [
    {
      title: 'Sl.No',
      align: 'center',
      key: 'sno',
      width: '50px',
      render: (text, object, index) => (
        <a style={{ color: 'black' }}>
          {(Bulkchangepage - 1) * 10 + index + 1}
        </a>
      ),
    },
    {
      title: 'Name',
      dataIndex: 'ProdName',
      key: 'ProdName',
      width: 150,
      filteredValue: [BulksearchedText],
      onFilter: (value, record) => {
        return String(record.ProdName)
          ?.toLowerCase()
          .includes(value?.toLowerCase());
      },
      sorter: (a, b) => a?.ProdName?.localeCompare(b.ProdName),
      sortOrder:
        BulksortedInfo.columnKey === 'ProdName' ? BulksortedInfo.order : null,
      ellipsis: true,
      render: (_, record) => (
        <span>
          {record.ProdName} ({record.Size} {record.UOMName})
        </span>
      ),
    },
    {
      title: 'Variant Name',
      dataIndex: 'ProdVariantName',
      key: 'ProdVariantName',
      align: 'left',
      width: 120,
    },
    {
      title: 'Batch No',
      dataIndex: 'BatchRef',
      key: 'BatchRef',
      align: 'left',
      width: 120,
    },
    ...(hasField('Stock Date')
      ? [
          {
            title: 'stock Date',
            dataIndex: 'InwardDate',
            key: 'InwardDate',
            align: 'center',
            width: 120,
            render: (InwardDate) =>
              InwardDate !== null ? ExtractDateFormate(InwardDate) : '-',
          },
        ]
      : []),
    ...(hasField('Expiry Date')
      ? [
          {
            title: 'Exp date',
            dataIndex: 'ExpDate',
            key: 'ExpDate',
            align: 'center',
            width: 100,
            render: (ExpDate) =>
              ExpDate !== null ? ExtractDateFormate(ExpDate) : '-',
          },
        ]
      : []),
    ...(hasField('Stock')
      ? [
          {
            title: 'stock',
            dataIndex: 'BalanceQty',
            key: 'BalanceQty',
            align: 'right',
            width: '60px',
            render: (BalanceQty) => (BalanceQty !== null ? BalanceQty : '-'),
          },
        ]
      : []),
    ...(hasField('Old MRP')
      ? [
          {
            title: 'Old MRP',
            dataIndex: 'MRP',
            key: 'MRP',
            align: 'right',
            width: '70px',
            render: (MRP) => (safeRound(MRP) !== null ? safeRound(MRP) : '-'),
          },
        ]
      : []),
    ...(hasField('Old SP')
      ? [
          {
            title: 'Old SP',
            dataIndex: 'SellPrice',
            key: 'SellPrice',
            align: 'right',
            width: '70px',
            render: (SellPrice) =>
              safeRound(SellPrice) !== null ? safeRound(SellPrice) : '-',
          },
        ]
      : []),
    ...(hasField('Old Wholesale Price')
      ? [
          {
            title: 'Old Wholesale Price',
            dataIndex: 'WhSalePrice',
            key: 'WhSalePrice',
            align: 'right',
            width: '120px',
            render: (WhSalePrice) =>
              safeRound(WhSalePrice) !== null ? safeRound(WhSalePrice) : '-',
          },
        ]
      : []),
    {
      title: 'New MRP',
      dataIndex: 'CurrentMRP',
      key: 'CurrentMRP',
      align: 'center',
      with: '4rem',
      editable: true,
      render: (text, record) => <p>{text ? text : 'Enter MRP'}</p>,
      width: 100,
    },
    {
      title: 'New SP',
      dataIndex: 'CurrentAmt',
      key: 'CurrentAmt',
      align: 'center',
      with: '4rem',
      editable: true,
      render: (text, record) => <p>{text ? text : 'Enter Price'}</p>,
      width: 100,
    },
    ...(hasField('New Wholesale Price')
      ? [
          {
            title: 'New Wholesale Price',
            dataIndex: 'CurrentWhAmt',
            key: 'CurrentWhAmt',
            align: 'center',
            with: '4rem',
            editable: true,
            render: (text, record) => (
              <p>{text ? text : 'Enter Wholesale Price'}</p>
            ),
            width: 120,
          },
        ]
      : []),
  ];

  const HandleStockNames = (e, option) => {
    const newStockDetails = option?.stockDetails || [];
    // Check if any of the new products already exist in StockDetails
    setStockDetails((prevStockDetails) => {
      const existingInwardDtlIds = new Set(
        prevStockDetails?.map((item) => item.InwardDtlId)
      );

      const uniqueNewStockDetails = newStockDetails
        ?.filter((item) => !existingInwardDtlIds.has(item.InwardDtlId))
        ?.map((detail) => ({
          ...detail,
          UOMName: option?.QuantityName,
          UOM: option?.Quantity,
        }));

      return [...prevStockDetails, ...uniqueNewStockDetails];
    });

    setProductName(option?.label);
  };
  // const handleCancel = () => {
  //   setOpen(false);
  //   setOpenEditModal(false);
  // };
  // const HandleSubmit = () => {
  //   const newStockDetails = dataSource || [];
  //   const filteredCurrentAmtData = newStockDetails?.filter(
  //     (item) =>
  //       item.CurrentAmt !== undefined &&
  //       item.CurrentAmt !== null &&
  //       item.CurrentMRP !== undefined &&
  //       item.CurrentMRP !== null
  //   );
  //   if (filteredCurrentAmtData?.length > 0) {
  //     setStockDetails((prevStockDetails) => {
  //       const existingInwardDtlIds = new Set(
  //         prevStockDetails?.map((item) => item.InwardDtlId)
  //       );
  //       const uniqueNewStockDetails = filteredCurrentAmtData?.filter(
  //         (item) => !existingInwardDtlIds.has(item.InwardDtlId)
  //       );

  //       let beforeFinal = [...prevStockDetails, ...uniqueNewStockDetails];
  //       const existingInwardDtlIds2 = new Set(
  //         filteredCurrentAmtData?.map((item) => item.InwardDtlId)
  //       );
  //       const uniqueNewStockDetails2 = beforeFinal?.filter(
  //         (item) => !existingInwardDtlIds2.has(item.InwardDtlId)
  //       );
  //       return [...filteredCurrentAmtData, ...uniqueNewStockDetails2];
  //     });
  //     setOpen(false);
  //   } else {
  //     setMessageType('error');
  //     setMessageData('Please give all details');
  //   }
  // };

  const HandlePutData = async () => {
    if (RadioSelection == 'Bulk') {
      const filteredCurrentAmtData = BulkProductData?.filter(
        (item) =>
          (item.CurrentAmt !== undefined &&
            item.CurrentAmt !== null &&
            item.CurrentAmt !== '' &&
            item.CurrentMRP !== undefined &&
            item.CurrentMRP !== null &&
            item.CurrentMRP !== '') ||
          (item.CurrentWhAmt !== undefined &&
            item.CurrentWhAmt !== null &&
            item.CurrentWhAmt !== '')
      );
      const hasInvalidData = BulkProductData.every((item) => {
        const isAbsent = item.CurrentAmt == null && item.CurrentMRP == null;

        const isPresent = item.CurrentAmt != null && item.CurrentMRP != null;

        return isAbsent || isPresent;
      });

      if (filteredCurrentAmtData?.length > 0 && hasInvalidData) {
        let Postdata = {
          CompId: CompId,
          BranchId: BranchId,
          Type: 'Variant',
          ProductDetails: filteredCurrentAmtData?.map((item) => ({
            ProdId: item?.ProdId,
            NewMRP: item?.CurrentMRP,
            NewSellPrice: item?.CurrentAmt,
            AdjComment: 'string',
            InwardDtlId: item?.InwardDtlId,
            NewWholeSalePrice: item.CurrentWhAmt,
          })),
        };

        let response = await dispatch(bulkPriceUpdate(Postdata)).unwrap();

        if (response?.data?.statusCode == 1) {
          setProductName();
          setMessageType('success');
          setMessageData(response?.data?.response);
          fetchData();
          setBulksearchedText('');
          setStockDetails([]);
          setBulkProductData([]);
        } else {
          setMessageType('error');
          setMessageData(response?.data?.response);
        }
      } else {
        setMessageType('error');
        setMessageData('Please give all details');
      }
    } else {
      const filteredStockDetails = StockDetails?.filter(
        (item) =>
          item?.CurrentMRP &&
          item?.CurrentMRP !== '' &&
          item?.CurrentAmt &&
          item?.CurrentAmt !== ''
      );

      if (filteredStockDetails?.length === 0) {
        setMessageType('error');
        setMessageData('Please enter price details for at least one product');
        return;
      }

      let data = {
        CompId: CompId,
        BranchId: BranchId,
        ProductDetails: filteredStockDetails?.map((item) => ({
          ProdId: item?.ProdId,
          MRP: item?.CurrentMRP,
          SellPrice: item?.CurrentAmt,
          AdjComment: 'string',
          InwardDtlId: item?.InwardDtlId,
        })),
        UpdatedBy: 1,
        AppId: AppId,
      };

      let response = await dispatch(PutStockPrice(data)).unwrap();
      let res = await dispatch(getStockNames(data)).unwrap();
      setStockNames(res?.data?.data);
      if (response?.data?.statusCode == 1) {
        setProductName();
        setMessageType('success');
        setMessageData(response?.data?.response);
        fetchData();
      } else {
        setMessageType('error');
        setMessageData(response?.data?.response);
      }
      setStockDetails([]);
    }
  };

  // const HandleEditSubmit = () => {
  //   let newStockDetails = dataSource || [];

  //   let filteredInverd = StockDetails?.filter(
  //     (item) => item.InwardDtlId !== newStockDetails?.[0].InwardDtlId
  //   );
  //   filteredInverd.push(newStockDetails?.[0]);
  //   setStockDetails(filteredInverd);
  //   setOpenEditModal(false);
  // };

  // const columns = defaultColumns?.map((col) => {
  //   if (!col.editable) {
  //     return col;
  //   }
  //   return {
  //     ...col,
  //     onCell: (record) => ({
  //       record,
  //       editable: col.editable,
  //       dataIndex: col.dataIndex,
  //       title: col.title,
  //       handleSave,
  //     }),
  //   };
  // });

  const columns2WithEditable = columns2?.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });
  const BulkPriceColumns = BulkPricechangeColumns?.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        editable: col.editable,
        dataIndex: col.dataIndex,
        title: col.title,
        handleSave,
      }),
    };
  });

  const handlePageChange = (current) => {
    setpage(current);
  };
  const handlePageChangeBulk = (current) => {
    setBulkchangepage(current);

    setPageSize(pageSize);
  };
  const onComplete = useCallback(() => {
    setMessageData(null);
    setMessageType(null);
  }, []);

  const onSearch = (value) => {
    setSearchedText(value);
  };
  const onSearchBulk = (value) => {
    setBulksearchedText(value);
  };
  const onSearchChange = (e) => {
    setSearchedText(e?.target?.value);
  };
  const onSearchChangeBulk = (e) => {
    setBulksearchedText(e?.target?.value);
  };
  const handleChange = (pagination, filters, sorter) => {
    setFilteredInfo(filters);
    setSortedInfo(sorter);
  };
  const handleChangeBulk = (pagination, filters, sorter) => {
    setBulksortedInfo(sorter);
  };
  const onRadioChange = (data) => {
    setRadioSelection(data);
  };

  const handleUploadExcel = () => {
    setExcelModalOpen(true);
  };

  const handleFieldSetup = () => {
    setFieldSetup(true);
  };

  const handleExcelFieldSetup = () => {
    setExcelFieldSetup(true);
  };

  const showPriceChangeModal = () => {
    setPriceChangeModalOpen(true);
  };

  const handleExport = async (isStockVariantBased = 'Yes') => {
    setExportLoading(true);
    setPriceChangeModalOpen(false);

    const uniqueBulkProductData =
      isStockVariantBased === 'Yes'
        ? BulkProductData || []
        : (BulkProductData || [])?.filter(
            (item, index, self) =>
              index === self.findIndex((p) => p.ProdId === item.ProdId)
          );

    if (!uniqueBulkProductData?.length) {
      setMessageType('error');
      setMessageData('No data available to export');
      setExportLoading(false);
      return;
    }

    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet('Products');

    /* ---------------- COLUMN DEFINITIONS ---------------- */
    const columns = [
      { header: 'Product Name', key: 'ProdName', width: 20 },
      ...(isStockVariantBased === 'Yes'
        ? [{ header: 'Variant Name', key: 'ProdVariantName', width: 20 }]
        : []),
      ...(isStockVariantBased === 'Yes'
        ? [{ header: 'Batch No', key: 'BatchRef', width: 20 }]
        : []),
      ...(hasExcelField('Stock Date')
        ? [{ header: 'Stock Date', key: 'StockDate', width: 15 }]
        : []),
      ...(hasExcelField('Expiry Date')
        ? [{ header: 'Exp Date', key: 'ExpDate', width: 15 }]
        : []),
      ...(hasExcelField('Stock')
        ? [{ header: 'Stock', key: 'Stock', width: 10 }]
        : []),
      ...(hasExcelField('Old MRP')
        ? [{ header: 'Old MRP', key: 'OldMRP', width: 10 }]
        : []),
      ...(hasExcelField('Old SP')
        ? [{ header: 'Old SP', key: 'OldSP', width: 10 }]
        : []),
      ...(hasExcelField('Old Wholesale Price')
        ? [{ header: 'Old Wholesale Price', key: 'WhSalePrice', width: 14 }]
        : []),
      ...(hasExcelField('Size')
        ? [{ header: 'Size', key: 'Size', width: 10 }]
        : []),
      ...(hasExcelField('Stock Maintainence')
        ? [{ header: 'Stock Maintainence', key: 'StockAvailable', width: 18 }]
        : []),
      ...(hasExcelField('UOM Name')
        ? [{ header: 'UOMName', key: 'UOMName', width: 15 }]
        : []),
      // ...(hasExcelField("New MRP & New SP")
      //   ? [
      { header: 'New MRP', key: 'NewMRP', width: 12 },
      { header: 'New SP', key: 'NewSP', width: 12 },
      // ]
      // : []),

      ...(hasExcelField('New Wholesale Price')
        ? [{ header: 'New Wholesale Price', key: 'NewWhSalePrice', width: 14 }]
        : []),

      // --- Hidden system columns (always included) ---
      { header: 'ProdId', key: 'ProdId', width: 1 },

      ...(isStockVariantBased === 'Yes'
        ? [{ header: 'InwardDtlId', key: 'InwardDtlId', width: 1 }]
        : []),

      { header: 'key', key: 'key', width: 1 },
      { header: 'downloadType', key: 'downloadType', width: 1 },
    ];

    worksheet.columns = columns;

    worksheet.views = [{ state: 'frozen', xSplit: 1, ySplit: 1 }];

    const headerRow = worksheet.getRow(1);

    const newMRPCol = headerRow.values.indexOf('New MRP');
    const newSPCol = headerRow.values.indexOf('New SP');
    const hasNewMRPAndSP = newMRPCol > 0 && newSPCol > 0;

    /* ---------------- HEADER STYLE ---------------- */
    worksheet.getRow(1).eachCell((cell) => {
      const header = cell.value;

      const isHiddenCol =
        header === 'key' ||
        header === 'ProdId' ||
        header === 'InwardDtlId' ||
        header === 'downloadType';

      cell.font = {
        bold: true,
        size: isHiddenCol ? 1 : 11,
        color: { argb: isHiddenCol ? 'FFFFFFFF' : 'FF000000' },
      };

      cell.alignment = {
        horizontal: 'center',
        vertical: 'middle',
        wrapText: true, // ✅ prevents overflow in header
      };

      cell.fill = {
        type: 'pattern',
        pattern: 'solid',
        fgColor: {
          argb: isHiddenCol ? 'FFFFFFFF' : 'FF52C41A',
        },
      };

      cell.border = isHiddenCol
        ? undefined
        : {
            right: { style: 'thin', color: { argb: 'FF000000' } },
            bottom: { style: 'thin', color: { argb: 'FF000000' } },
          };
    });

    /* ---------------- ADD DATA ---------------- */
    uniqueBulkProductData.forEach((product) => {
      worksheet.addRow({
        ProdName: product?.ProdName,
        ProdVariantName: product?.ProdVariantName,
        BatchRef: product?.BatchRef,
        StockDate: product?.InwardDate,
        ExpDate: product?.ExpDate || '-',
        Stock: product?.BalanceQty,
        OldMRP: product?.MRP,
        OldSP: product?.SellPrice,
        WhSalePrice: product?.WhSalePrice,
        Size: product?.Size,
        StockAvailable: product?.StockAvailable,
        UOMName: product?.UOMName,
        key: product?.key,
        downloadType: isStockVariantBased === 'Yes' ? 'Variant' : 'Product',
        NewMRP: '',
        NewSP: '',
        NewWhSalePrice: '',
        ProdId: product?.ProdId,
        InwardDtlId:
          isStockVariantBased === 'Yes' ? product?.InwardDtlId : undefined,
      });
    });

    // ---------------- VALIDATION: New SP <= New MRP ----------------
    if (hasNewMRPAndSP) {
      worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
        if (rowNumber === 1) return; // skip header

        const newMRPCell = row.getCell(newMRPCol);
        const newSPCell = row.getCell(newSPCol);

        newSPCell.dataValidation = {
          type: 'custom',
          allowBlank: true,
          formulae: [
            `IFERROR(VALUE(${newSPCell.address}),0) <= IFERROR(VALUE(${newMRPCell.address}),0)`,
          ],
          showErrorMessage: true,
          errorStyle: 'stop',
          errorTitle: 'Invalid Selling Price',
          error: 'New SP cannot be greater than New MRP',
        };
      });
    }

    /* ---------------- UNLOCK EVERYTHING ---------------- */
    worksheet.eachRow({ includeEmpty: true }, (row) => {
      row.eachCell({ includeEmpty: true }, (cell) => {
        cell.protection = { locked: false };
      });
    });

    /* ---------------- LOCK HEADER ---------------- */
    worksheet.getRow(1).eachCell((cell) => {
      cell.protection = { locked: true };
    });

    worksheet.getRow(1).height = 32;

    /* ---------------- LOCK ALL EXCEPT New MRP & New SP ---------------- */
    worksheet.eachRow({ includeEmpty: true }, (row, rowNumber) => {
      if (rowNumber === 1) return;

      row.eachCell((cell, colNumber) => {
        const header = worksheet.getRow(1).getCell(colNumber).value;

        const isHiddenCol =
          header === 'key' ||
          header === 'ProdId' ||
          header === 'InwardDtlId' ||
          header === 'downloadType';

        const isEditable =
          header === 'New MRP' ||
          header === 'New SP' ||
          header === 'New Wholesale Price';

        cell.protection = { locked: !isEditable };
        cell.alignment = {
          vertical: 'middle',
          wrapText: true,
        };
        if (isHiddenCol) {
          cell.font = {
            size: 1,
            color: { argb: 'FFFFFFFF' },
          };

          cell.fill = {
            type: 'pattern',
            pattern: 'solid',
            fgColor: { argb: 'FFFFFFFF' },
          };
        }
      });
    });

    /* ---------------- PROTECT SHEET ---------------- */
    await worksheet.protect('', {
      selectLockedCells: false,
      selectUnlockedCells: true,
      formatCells: false,
      formatColumns: false,
      insertRows: false,
      deleteRows: false,
    });

    /* ---------------- DOWNLOAD ---------------- */
    const buffer = await workbook.xlsx.writeBuffer();
    const blob = new Blob([buffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    });

    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'PriceChange_Data.xlsx';
    link.click();

    setExportLoading(false);
  };

  const handleClick = () => {
    fileInputRef.current.click();
  };

  const handleFileUpload = (e) => {
    setFileLoading(true);
    const file = e.target.files[0];

    if (!file) {
      dispatch(emptyExcelData());
      setFileLoading(false);
      return;
    }

    const isAllowed = allowedExcelTypes?.includes(file.type);
    if (!isAllowed) {
      Modal.error({
        title: 'Invalid File Type',
        content: 'Only Excel files (.xls, .xlsx) are allowed.',
      });
      handleCancelData();
      setFileLoading(false);
      return;
    }

    const reader = new FileReader();

    reader.onload = (event) => {
      const arrayBuffer = event.target.result;

      const extractedData = extractPriceChangeDataFromExcel(arrayBuffer);

      console.log(extractedData, 'extractedData');
      if ((extractedData || [])?.length === 0) {
        setMessageData('No Data Found in Uploaded Sheet');
        setMessageType('error');
        handleCancelData();
        setFileLoading(false);
        return;
      }

      // Compare and mark as Old/Modified
      const comparedData = extractedData
        .map((uploaded) => {
          const current = BulkProductData.find(
            (p) =>
              p.ProdId === uploaded.ProdId &&
              (!uploaded.InwardDtlId || p.InwardDtlId === uploaded.InwardDtlId)
          );

          if (current) {
            const isModified =
              Number(current.MRP) !== Number(uploaded.NewMRP) ||
              Number(current.SellPrice) !== Number(uploaded.NewSellPrice) ||
              Number(current.WhSalePrice || 0) !==
                Number(uploaded.NewWholeSalePrice || 0);

            return {
              ...uploaded,
              isModified,
              status: isModified ? 'Modified' : 'Old',
            };
          }

          return { ...uploaded, isModified: false, status: 'Old' };
        })
        .sort((a, b) => Number(b.isModified) - Number(a.isModified));
      setUploadedData(comparedData);
      setFileLoading(false);
      // setFormValuesFromExtractedData(extractedData);
    };

    reader.readAsArrayBuffer(file); // ✅ THIS IS REQUIRED
  };

  const setFormValuesFromExtractedData = (data) => {
    const formValues = {};

    data.forEach((item) => {
      const id = item.localId;

      if (item.NewMRP !== null && item.NewMRP !== undefined) {
        formValues[`NewMRP${id}`] = item.NewMRP;
      }

      if (item.NewSellPrice !== null && item.NewSellPrice !== undefined) {
        formValues[`NewSellPrice${id}`] = item.NewSellPrice;
      }

      if (
        item.NewWholeSalePrice !== null &&
        item.NewWholeSalePrice !== undefined
      ) {
        formValues[`NewWholeSalePrice${id}`] = item.NewWholeSalePrice;
      }
    });

    excelDataRef.current?.setFieldsValue(formValues);
  };

  const extractPriceChangeDataFromExcel = (arrayBuffer) => {
    const workbook = read(arrayBuffer, { type: 'array' });
    const worksheet = workbook.Sheets[workbook.SheetNames[0]];

    const rows = utils.sheet_to_json(worksheet, {
      header: 1,
      raw: false,
      defval: '',
    });

    if (!rows.length) return [];

    const header = rows[0];
    setHeaders(header);
    const dataRows = rows.slice(1);

    // Helper to safely get column value
    const getVal = (row, colName) => {
      const idx = header.indexOf(colName);
      return idx !== -1 ? row[idx] : '';
    };

    const result = dataRows
      .map((row) => {
        const prodId = getVal(row, 'ProdId')?.toString().trim();
        if (!prodId) return null;

        const newMRP =
          getVal(row, 'New MRP') !== '' ? Number(getVal(row, 'New MRP')) : null;

        const newSP =
          getVal(row, 'New SP') !== '' ? Number(getVal(row, 'New SP')) : null;

        const newWholesale =
          getVal(row, 'New Wholesale Price') !== ''
            ? Number(getVal(row, 'New Wholesale Price'))
            : null;

        // ❌ Must have at least one change
        if (newMRP === null && newSP === null && newWholesale === null) {
          return null;
        }

        return {
          // 🔹 Product identity
          localId: uuidv4(),
          ProdId: prodId,
          InwardDtlId: getVal(row, 'InwardDtlId')
            ? getVal(row, 'InwardDtlId').toString()
            : null,

          // 🔹 Product info
          VariantName: getVal(row, 'Variant Name') || null,
          BatchRef: getVal(row, 'Batch No') || null,
          ProductName: getVal(row, 'Product Name') || null,
          Size: getVal(row, 'Size') || null,
          UOMName: getVal(row, 'UOMName') || null,
          StockMaintainence: getVal(row, 'Stock Maintainence') || null,

          // 🔹 Stock / dates
          StockDate: getVal(row, 'Stock Date') || null,
          ExpDate: getVal(row, 'Exp Date') || null,
          downloadType: getVal(row, 'downloadType') || null,
          Stock:
            getVal(row, 'Stock') !== '' ? Number(getVal(row, 'Stock')) : null,

          // 🔹 Old prices
          OldMRP:
            getVal(row, 'Old MRP') !== ''
              ? Number(getVal(row, 'Old MRP'))
              : null,

          OldSP:
            getVal(row, 'Old SP') !== '' ? Number(getVal(row, 'Old SP')) : null,

          OldWholeSalePrice:
            getVal(row, 'Old Wholesale Price') !== ''
              ? Number(getVal(row, 'Old Wholesale Price'))
              : null,

          // 🔹 New prices (normalized)
          NewMRP: newMRP,
          NewSellPrice: newSP,
          NewWholeSalePrice: newWholesale,
        };
      })
      .filter(Boolean);

    return result;
  };

  const handleCancelData = () => {
    dispatch(emptyExcelData());
    if (fileInputRef.current) {
      fileInputRef.current.value = '';
    }
    setUploadedData([]);
  };

  const handleSubmit = async () => {
    try {
      setLoading(true);
      const formValues = excelDataRef.current?.getFieldsValue();

      // Validate all records
      for (let i = 0; i < uploadedData.length; i++) {
        const record = uploadedData[i];
        const newMRP = formValues[`NewMRP${record.localId}`];
        const newSP = formValues[`NewSellPrice${record.localId}`];

        // If MRP is present, SP must also be present
        if (newMRP && !newSP) {
          setMessageType('error');
          setMessageData(
            'If New MRP is provided, New SP must also be provided'
          );
          return;
        }

        // If SP is present, MRP must also be present
        if (newSP && !newMRP) {
          setMessageType('error');
          setMessageData(
            'If New SP is provided, New MRP must also be provided'
          );
          return;
        }

        // New SP cannot be greater than New MRP
        if (newMRP && newSP && parseFloat(newSP) > parseFloat(newMRP)) {
          setMessageType('error');
          setMessageData('New SP cannot be greater than New MRP');
          return;
        }
      }

      const updatedData = uploadedData
        ?.filter((data) => {
          const hasMRP = !!data?.NewMRP;
          const hasSell = !!data?.NewSellPrice;
          const hasWholesale = !!data?.NewWholeSalePrice;
          const isModified = data?.isModified === true;

          // valid cases
          if (hasMRP && hasSell && isModified) return true;

          // ✅ Case 2: Only Wholesale changed
          if (!hasMRP && !hasSell && hasWholesale && isModified) return true;

          return false;
        })
        ?.map((data) => ({
          ProdId: data?.ProdId,
          InwardDtlId: data?.InwardDtlId,
          NewSellPrice: data?.NewSellPrice,
          NewMRP: data?.NewMRP,
          NewWholeSalePrice: data?.NewWholeSalePrice,
          AdjComment: 'string',
        }));

      const putData = {
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
        Type: uploadedData?.[0]?.downloadType,
        ProductDetails: updatedData,
        CreatedBy: UserId,
      };

      if (!updatedData || updatedData.length === 0) {
        setMessageData('Minimum 1 product needs to be changed or added');
        setMessageType('error');
        return;
      }

      const res = await dispatch(bulkPriceUpdate(putData))?.unwrap();

      if (res?.data?.statusCode === 1) {
        setMessageData(res?.data?.response || 'Price Updated Successfully');
        setMessageType('success');
        setUploadedData([]);
        handleCancelData();
        setExcelModalOpen(false);
        await fetchData();
      } else {
        setMessageData(res?.data?.response);
        setMessageType('error');
      }

      // If validation passes, proceed with submission
      console.log('Form validation passed', updatedData);
    } catch (error) {
      setMessageType('error');
      setMessageData('Please check all fields and try again');
    } finally {
      setLoading(false);
    }
  };

  const handleFieldSetupSubmit = async () => {
    const postData = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      Type: 'GB',
      FormType: fieldSetup ? 'Price Change' : 'Price Change Sheet',
      TypeId: fieldSetup ? categoryId : excelCategoryId,
      ConfigDtl: (fieldSetup ? selectedFields : selectedExcelFields)?.map(
        (field) => ({
          ConfigId: field,
          Access: 'Y',
        })
      ),
      CreatedBy: UserId,
    };

    const response = await dispatch(postFieldSetup(postData))?.unwrap();

    if (response?.data?.statusCode === 1) {
      setMessageType('success');
      setMessageData(response?.data?.response);
      if (fieldSetup) {
        await getFieldSetup();
      } else {
        await getExcelFieldSetup();
      }
    } else {
      setMessageType('error');
      setMessageData('Failed to set up fields');
    }
  };

  const handleFieldSelect = (value) => {
    if (fieldSetup) {
      setSelectedFields((prev) => {
        if (prev.includes(value)) {
          return prev;
        }
        return [value, ...prev];
      });
    } else {
      setSelectedExcelFields((prev) => {
        if (prev.includes(value)) {
          return prev;
        }
        return [value, ...prev];
      });
    }
  };

  const handleFieldRemove = (id) => {
    if (fieldSetup) {
      setSelectedFields((prev) => prev.filter((field) => field !== id));
    } else {
      setSelectedExcelFields((prev) => prev.filter((field) => field !== id));
    }
  };

  return (
    <div className="userPageTable">
      <div className="userPageContent">
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />

        <div className="formAddNew" style={{ justifyContent: 'space-between' }}>
          <div>
            <FormHeader title={'Price Change'} />
          </div>
          <div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              justifyContent: 'space-between',
            }}
          >
            {RadioSelection == 'Bulk' && (
              <div className="PriChangeUpper">
                <div className="formSearch">
                  <Search
                    value={BulksearchedText}
                    placeholder="Search"
                    onSearch={onSearchBulk}
                    onSearchChange={onSearchChangeBulk}
                  />
                </div>
                <div className="uploadexcelBtn">
                  <Buttons
                    buttonText="Upload Excel"
                    className="tertiary_Button"
                    handleSubmit={handleUploadExcel}
                    disabled={addnewAccess}
                    icon={<FiUploadCloud size={18} />}
                  />
                </div>
                <Tooltip title="Field Setup">
                  <div className="btnbtninfo" onClick={handleFieldSetup}>
                    <MdOutlineAppRegistration size={19} />
                  </div>
                </Tooltip>
              </div>
            )}
          </div>
          {RadioSelection == 'Single' && (
            <div
              style={{ width: '100%', marginBottom: '0' }}
              className="searchAddDiv"
            >
              <div style={{ width: '100%' }} className="formSearch">
                <div
                  style={{
                    display: 'flex',
                    gap: '1rem',
                    flexWrap: 'wrap',
                    rowGap: '1.5rem',
                    marginBottom: '0.5rem',
                    // justifyContent: 'space-between',
                    width: '100%',
                  }}
                  className="PricePrice-input"
                >
                  <DropDowns
                    label="Select Product"
                    valueData={ProductName}
                    showSearch
                    onChangeFunction={(value, option) =>
                      HandleStockNames(value, option)
                    }
                    style={{ width: '240px' }}
                    options={DataSource}
                    isOnchanges={ProductName ? true : false}
                  />
                  <div className="formSearch">
                    <Search
                      placeholder="Search"
                      onSearch={onSearch}
                      onSearchChange={onSearchChange}
                    />
                  </div>
                </div>
              </div>
            </div>
          )}
          {/* {RadioSelection == "Bulk" &&
              <div style={{ padding: "5px 5px" }}>
                <Search
                  value={BulksearchedText}
                  placeholder="Search"
                  onSearch={onSearchBulk}
                  onSearchChange={onSearchChangeBulk}
                />
              </div>
            } */}
        </div>

        <div
          style={{
            display: 'flex',
            gap: '1rem',
            alignItems: 'center',
            justifyContent: 'space-between',
          }}
        >
          <div>
            <RadioGrpButton
              content={[
                { value: 'Single', label: 'Single Product' },
                { value: 'Bulk', label: 'Bulk Product' },
              ]}
              fieldState={true}
              defaultSelect={RadioSelection}
              onSelectFuntion={(e) => onRadioChange(e)}
            />
          </div>

          <div>
            {(RadioSelection == 'Bulk' ||
              (RadioSelection == 'Single' && StockDetails.length > 0)) && (
              <div className="samplereportTableButton">
                <Buttons
                  buttonText="Submit"
                  color="901D77"
                  palcement={'right'}
                  handleSubmit={HandlePutData}
                  icon={<ArrowRightOutlined />}
                  disabled={addnewAccess}
                ></Buttons>
              </div>
            )}
          </div>
        </div>
        {RadioSelection == 'Single' && (
          <div
            className="samplereportTable reportTable pricechangeTable"
            style={{ height: '61vh !important' }}
          >
            <Table
              columns={columns2WithEditable}
              components={components}
              bordered
              dataSource={StockDetails}
              data={StockDetails}
              pagination={
                StockDetails?.length < 11
                  ? false
                  : {
                      current: page,
                      pageSize: pageSize,
                      onChange: handlePageChange,
                    }
              }
              onChange={handleChange}
            ></Table>
          </div>
        )}
        {RadioSelection == 'Bulk' && (
          <div className="bulkChangePriceTable">
            <Table
              columns={BulkPriceColumns}
              components={BulkComponents}
              data={BulkProductData}
              dataSource={BulkProductData}
              onChange={handleChangeBulk}
              pagination={{
                current: Bulkchangepage,
                pageSize: pageSize,
                pageSizeOptions: ['10', '20', '30'],
                onChange: handlePageChangeBulk,
                showSizeChanger: false,
              }}
            ></Table>
          </div>
        )}
      </div>
      <DefaultModal
        open={excelModalOpen}
        title="Bulk Upload"
        footer={false}
        className={'bulkuploadmodal padding-less-modal'}
        handleCancel={() => {
          setExcelModalOpen(false);
          handleCancelData();
        }}
        width={uploadedData?.length > 0 ? 1200 : 600}
        children={
          <>
            {uploadedData?.length === 0 && (
              <div
                style={{
                  width: '100%',
                  display: 'flex',
                  justifyContent: 'flex-end',
                  marginBottom: '1rem',
                  gap: '0.5rem',
                }}
              >
                <Tooltip title="Field Setup">
                  <div
                    className="btn btn--info"
                    style={{
                      background: '#00694aff',
                      color: '#fff',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      padding: '5px 12px',
                      borderRadius: '4px',
                    }}
                    onClick={handleExcelFieldSetup}
                  >
                    <MdOutlineAppRegistration size={19} />
                  </div>
                </Tooltip>
                <div
                  className={`export-excel-div ${exportLoading ? 'is-loading' : ''}`}
                  onClick={
                    exportLoading ? () => {} : () => showPriceChangeModal()
                  }
                >
                  <div>
                    <CiExport size={20} strokeWidth={1} />
                  </div>
                  <div style={{ fontSize: '14px', letterSpacing: '0.2px' }}>
                    Export Excel
                  </div>
                </div>
              </div>
            )}
            {(!uploadedData || uploadedData?.length === 0) && (
              <>
                {!fileLoading && (
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      border: '1px dashed #000',
                      width: 'max-content',
                      padding: '10px',
                      borderRadius: '6px',
                    }}
                  >
                    <div
                      style={{ position: 'relative', display: 'inline-block' }}
                    >
                      {/* <Imageupload  size="2x" /> */}
                      <div
                        style={{
                          display: 'flex',
                          flexDirection: 'column',
                          alignItems: 'center',
                        }}
                      >
                        <img
                          src={Excelupldimg}
                          width={'80px'}
                          style={{ cursor: 'pointer', margin: '0 0 1rem 0' }}
                          onClick={handleClick}
                        />
                        <input
                          type="file"
                          className="form-control"
                          onChange={handleFileUpload}
                          ref={fileInputRef}
                          style={{
                            position: 'absolute',
                            top: 0,
                            left: 0,
                            width: '100%',
                            height: '100%',
                            opacity: 0,
                            cursor: 'pointer',
                          }}
                        />
                        <a style={{ color: '#000', fontSize: '12px' }}>
                          {' '}
                          Upload Sheet{' '}
                        </a>
                      </div>
                    </div>
                  </div>
                )}
                {fileLoading && (
                  <div style={{ textAlign: 'center', marginTop: '1rem' }}>
                    <div
                      style={{
                        border: '4px solid #f3f3f3',
                        borderTop: '4px solid #3498db',
                        borderRadius: '50%',
                        width: '40px',
                        height: '40px',
                        animation: 'spin 2s linear infinite',
                        margin: '0 auto',
                      }}
                    ></div>
                    <p style={{ marginTop: '0.5rem', color: '#666' }}>
                      Processing file...
                    </p>
                    <style>{`
                    @keyframes spin {
                      0% { transform: rotate(0deg); }
                      100% { transform: rotate(360deg); }
                    }
                  `}</style>
                  </div>
                )}
              </>
            )}
            {uploadedData && uploadedData?.length > 0 && !loading ? (
              <div
                className="viewerExcelupload"
                style={{ maxHeight: '90vh', overflowX: 'auto' }}
              >
                <Form ref={excelDataRef} onFinish={handleSubmit}>
                  <div className="pricechangedata">
                    <Table
                      columns={columns}
                      rowKey={(record) => record.localId}
                      dataSource={uploadedData}
                      className="price-change-data"
                      rowClassName={(record) =>
                        record.isModified ? 'modified-row' : 'old-row'
                      }
                    />
                  </div>
                  <div className="legend-container">
                    <div className="legend-item">
                      <div className="legend-box old-box"></div>
                      <span className="legend-text">Old</span>
                    </div>
                    <div className="legend-item">
                      <div className="legend-box modified-box"></div>
                      <span className="legend-text">Modified</span>
                    </div>
                  </div>

                  <div
                    className="cancel-link"
                    onClick={handleCancelData}
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '.5rem',
                      padding: '0.3rem 0.4rem',
                      borderRadius: '6px',
                      backgroundColor: 'ghostwhite',
                      width: 'max-content',
                    }}
                  >
                    <FiDelete style={{ fontSize: '20px', color: '#1292EE' }} />
                    <a style={{ color: '#000' }}> Remove File</a>
                  </div>
                  <div
                    style={{
                      display: 'flex',
                      justifyContent: 'flex-end',
                      gap: '1rem',
                      marginTop: '1rem',
                    }}
                  >
                    <Buttons
                      buttonText="Submit"
                      color="901D77"
                      placement={'right'}
                      icon={<ArrowRightOutlined />}
                      disabled={addnewAccess}
                    />
                  </div>
                </Form>
              </div>
            ) : (
              <p></p>
            )}
            {loading && (
              <div style={{ textAlign: 'center', marginTop: '1rem' }}>
                <div
                  style={{
                    border: '4px solid #f3f3f3',
                    borderTop: '4px solid #3498db',
                    borderRadius: '50%',
                    width: '40px',
                    height: '40px',
                    animation: 'spin 2s linear infinite',
                    margin: '0 auto',
                  }}
                ></div>
                <p style={{ marginTop: '0.5rem', color: '#666' }}>
                  Submitting...
                </p>
                <style>{`
                    @keyframes spin {
                      0% { transform: rotate(0deg); }
                      100% { transform: rotate(360deg); }
                    }
                  `}</style>
              </div>
            )}
            <DefaultModal
              open={excelFieldSetup}
              handleCancel={() => setExcelFieldSetup(false)}
              footer={false}
              title={'Select the columns you want to include in the sheet'}
              children={
                <div className="field-setup-container">
                  {/* <div className="field-setup-header">
                                <FormHeader title={'Select the fields you want to include in the table'} />
                              </div> */}
                  <div className="field-setup-content">
                    <Form onFinish={handleFieldSetupSubmit} ref={formRef}>
                      <Form.Item name="fields">
                        <DropDowns
                          label="Select fields"
                          // valueData={selectedFields}
                          onChangeFunction={handleFieldSelect}
                          options={tableExcelFieldPreferences?.filter(
                            (p) =>
                              !selectedExcelFields?.some((s) => s === p.value)
                          )}
                        />
                      </Form.Item>
                      <div className="field-setup-selected-fields">
                        {selectedExcelFields
                          ?.map((id) =>
                            tableExcelFieldPreferences?.find(
                              (p) => p.value === id
                            )
                          )
                          .filter(Boolean)
                          .map((field) => (
                            <div className="selected-field" key={field.value}>
                              <div>{field.label}</div>
                              <div
                                className="close-icon"
                                onClick={() => handleFieldRemove(field.value)}
                              >
                                <IoClose size={15} />
                              </div>
                            </div>
                          ))}
                      </div>
                      <div
                        style={{ display: 'flex', justifyContent: 'flex-end' }}
                      >
                        <Buttons
                          buttonText="SUBMIT"
                          color="901D77"
                          icon={<ArrowRightOutlined />}
                          htmlType={true}
                        />
                      </div>
                    </Form>
                  </div>
                </div>
              }
            />
          </>
        }
      />
      <DefaultModal
        open={priceChangeModalOpen}
        title={
          <p style={{ fontSize: '18px' }}>Stock/Variant Based Price Change?</p>
        }
        footer={true}
        width={500}
        handleCancel={() => setPriceChangeModalOpen(false)}
        handleSubmit={() => handleExport(stockVariantBased)}
        children={
          <div style={{ padding: '0.1rem 0' }}>
            <RadioGrpButton
              content={[
                { value: 'Yes', label: 'Yes' },
                { value: 'No', label: 'No' },
              ]}
              fieldState={true}
              defaultSelect={stockVariantBased}
              onSelectFuntion={(e) => setStockVariantBased(e)}
            />
          </div>
        }
      />
      <DefaultModal
        open={fieldSetup}
        handleCancel={() => setFieldSetup(false)}
        footer={false}
        title={'Select the fields you want to include in the table'}
        children={
          <div className="field-setup-container">
            {/* <div className="field-setup-header">
                    <FormHeader title={'Select the fields you want to include in the table'} />
                  </div> */}
            <div className="field-setup-content">
              <Form onFinish={handleFieldSetupSubmit} ref={formRef}>
                <Form.Item name="fields">
                  <DropDowns
                    label="Select fields"
                    // valueData={selectedFields}
                    onChangeFunction={handleFieldSelect}
                    options={tableFieldPreferences?.filter(
                      (p) => !selectedFields?.some((s) => s === p.value)
                    )}
                  />
                </Form.Item>
                <div className="field-setup-selected-fields">
                  {selectedFields
                    ?.map((id) =>
                      tableFieldPreferences?.find((p) => p.value === id)
                    )
                    .filter(Boolean)
                    .map((field) => (
                      <div className="selected-field" key={field.value}>
                        <div>{field.label}</div>
                        <div
                          className="close-icon"
                          onClick={() => handleFieldRemove(field.value)}
                        >
                          <IoClose size={15} />
                        </div>
                      </div>
                    ))}
                </div>
                <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                  <Buttons
                    buttonText="SUBMIT"
                    color="901D77"
                    icon={<ArrowRightOutlined />}
                    htmlType={true}
                  />
                </div>
              </Form>
            </div>
          </div>
        }
      />
    </div>
  );
};

export default StockPriceUpdate;
