import React, { useState, useEffect, useRef, useCallback } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { IoBagRemove } from 'react-icons/io5';
import { useDispatch } from 'react-redux';
import {
  ArrowRightOutlined,
  PlusCircleOutlined,
  EditFilled,
} from '@ant-design/icons';
import { Form, Tooltip, Table, Input, Collapse, Select } from 'antd';
import { IoAddCircleSharp } from 'react-icons/io5';
import { InputField } from '../../Components/Forms/InputField.jsx';
import Buttons from '../../Components/Forms/Buttons.jsx';
import { Messages } from '../../Components/Notifications/Messages.jsx';
import { DeleteFilled } from '@ant-design/icons';
import { changeBreadCrumb } from '../../Features/AppPage/CenterPage.js';
import FormHeader from '../PageComponents/FormHeader.jsx';
import { DefaultModal } from '../../Components/Modal/DefaultModal.jsx';
import { getSession } from '../../Services/Others.js';
import { DatePicProd } from '../../Components/Forms/DatePickerProduct.jsx';
import moment from 'moment';
import './openingStockForm.scss';
import {
  getProductStockDetails,
  postOpeningStock,
} from '../../Features/PurchaseOrder/PurchaseOrder.js';

const subDirectory = import.meta.env.BASE_URL;
const openingStockForm = () => {
  const { Panel } = Collapse;
  const formRef = useRef(null);
  const productAddInfoRef = useRef(null);

  const dispatch = useDispatch();
  const navigate = useNavigate();
  const location = useLocation();
  const [form] = Form.useForm();
  const [editingKey, setEditingKey] = useState('');
  const [index, setindex] = useState();
  const state = location?.state;
  const editstate = state?.editstate;
  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');

  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);

  const [PurchaseData, setPurchaseData] = useState([]);
  const [additionalInfoModal, setAdditionalInfoModal] = useState(false);
  const [selectedRowRecord, setSelectedRowRecord] = useState({});

  console.log(selectedRowRecord, 'selectedRowRecord');
  const [Delete, setDelete] = useState(false);
  const [ProductStockData, seProductStockData] = useState([]);
  const [filteredProductStockData, setFilteredProductStockData] = useState([]);
  const [eliminatedProducts, setEliminatedProducts] = useState([]);
  const [eliminateModal, setEliminateModal] = useState(false);
  const [additionalStockEntries, setAdditionalStockEntries] = useState([]);
  const [searchText, setSearchText] = useState('');
  const [activeAccordionKeys, setActiveAccordionKeys] = useState(['1']);
  const [hasInitializedEditing, setHasInitializedEditing] = useState(false);
  console.log(additionalStockEntries, 'additionalStockEntries');
  console.log(filteredProductStockData, 'filteredProductStockData');
  const items = [
    {
      name: 'Home',
      link: `${subDirectory}app-page/home`,
    },

    {
      name: 'Opening Stock',
      link: `${subDirectory}setting/opening-stock`,
    },
    {
      name: 'New',
      link: null,
    },
  ];
  useEffect(() => {
    dispatch(changeBreadCrumb({ items: items }));

    ProductStockFun();
  }, []);

  const ProductStockFun = async () => {
    try {
      const Data = { AppId, CompId, BranchId, type: 'A' };
      let response = await dispatch(getProductStockDetails(Data)).unwrap();
      if (response?.data?.statusCode === 1) {
        seProductStockData(response?.data?.data);
        setFilteredProductStockData(response?.data?.data);
      }
    } catch (err) {
      console.error('Error fetching stock details:', err);
    }
  };

  const isEditing = (record, index) => index === editingKey;

  const edit = (record, index) => {
    form.setFieldsValue({ ...record });

    setEditingKey(index);
    setindex(index);

    if (Delete) {
      form.setFieldsValue({
        TotalQty: { [index]: undefined },
        TotalPiece: { [index]: undefined },
      });
      setDelete(false);
    } else {
      form.setFieldsValue({
        TotalQty: { [index]: record?.TotalQty },
        TotalPiece: { [index]: record?.TotalPiece },
      });
    }
  };

  useEffect(() => {
    if (!hasInitializedEditing && filteredProductStockData?.length > 0) {
      edit(filteredProductStockData[0], 0);
      setHasInitializedEditing(true);
    }
  }, [filteredProductStockData, hasInitializedEditing]);

  const save = async (index) => {
    try {
      const row = await form?.validateFields();

      const modifiedObject = {};
      for (const key in row) {
        const newKey = key.slice(0, -1); // Remove the last character ("0") from the key
        modifiedObject[newKey] = row[key];
      }

      const newData = [...filteredProductStockData];
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, { ...item, ...modifiedObject });
        setFilteredProductStockData(newData);
        setEditingKey('');
      }
    } catch (err) {
      console.error('Save failed:', err);
    }
  };

  const handleKeyPress = async (e, record, index) => {
    if (e.key === 'Enter') {
      try {
        await form.validateFields();
        save(index);
      } catch (error) {
        console.error('Save failed:', error);
      }
    }
  };

  const openAdditionalInfoModal = (record, index) => {
    console.log(record, 'recordrecord');

    if (
      !record?.TotalQty ||
      record?.TotalQty === '' ||
      record?.TotalQty === 0
    ) {
      setMessageType('error');
      setMessageData('Please enter Total Qty first');
      return;
    }

    // if (!record?.TotalPiece || record?.TotalPiece === "" || record?.TotalPiece === 0) {
    //     setMessageType("error")
    //     setMessageData("Please enter Total Pieces first")
    //     return
    // }

    setSelectedRowRecord(record);

    // Load existing modal details for this product
    if (record.modalDetails && record.modalDetails.length > 0) {
      setAdditionalStockEntries(record.modalDetails);
    } else {
      setAdditionalStockEntries([]);
    }

    setAdditionalInfoModal(true);
  };

  const columns = [
    {
      title: 'SI.NO',
      align: 'center',
      key: 'sno',
      render: (text, object, index) => (
        <a className="openingStock-sno-link">{index + 1}</a>
      ),
    },
    {
      title: 'Product Name',
      dataIndex: 'ProdName',
      key: 'ProdName',
      align: 'left',
      render: (text, record, index) => (
        <a className="openingStock-product-name-link">
          {record?.ProdName + '(' + record?.ProdVariantName + ')'}
        </a>
      ),
    },
    // {
    //     title: 'Uom',
    //     dataIndex: 'UomName',
    //     key: 'UOMName',
    // },
    {
      title: 'Total Qty',
      dataIndex: 'TotalQty',
      key: 'TotalQty',
      editable: true,
      render: (text, record, index) => {
        return isEditing(record, index) ? (
          <Form.Item
            name={'TotalQty' + index}
            rules={[
              {
                required: true,
                pattern: /^(?!0+$)(?!0+\.0*$)\d*\.?\d+$/,
                message: 'Please enter valid quantity',
              },
              {
                validator: (_, value) => {
                  if (value && value.toString().length > 10) {
                    return Promise.reject(
                      'Quantity cannot exceed 10 characters'
                    );
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <Input
              onPressEnter={(e) => handleKeyPress(e, record, index)}
              onBlur={(e) => handleQtyChange(e, record)}
              onChange={(e) => handleQtyChange(e, record, index)}
              inputMode="decimal"
              onInput={(e) => {
                let value = e.target.value.replace(/[^0-9.]/g, '');

                if (value.startsWith('.')) {
                  value = '0' + value;
                }

                const dotCount = (value.match(/\./g) || []).length;
                if (dotCount > 1) {
                  const firstDotIndex = value.indexOf('.');
                  value =
                    value.substring(0, firstDotIndex + 1) +
                    value.substring(firstDotIndex + 1).replace(/\./g, '');
                }

                e.target.value = value;
              }}
            />
          </Form.Item>
        ) : (
          text
        );
      },
    },
    {
      title: 'Enter The Pieces',
      dataIndex: 'TotalPiece',
      key: 'TotalPiece',
      editable: true,
      render: (text, record, index) => {
        return isEditing(record, index) ? (
          <Form.Item
            name={'TotalPiece' + index}
            rules={[
              {
                required: true,
                pattern: /^(?!0+$)(?!0+\.0*$)\d*\.?\d+$/,
                message: 'Please enter valid quantity',
              },
              {
                validator: (_, value) => {
                  if (value && value.toString().length > 10) {
                    return Promise.reject(
                      'Quantity cannot exceed 10 characters'
                    );
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            <Input
              onPressEnter={(e) => handleKeyPress(e, record, index)}
              onBlur={(e) => handleTotalPieceChange(e, record)}
              onChange={(e) => handleTotalPieceChange(e, record, index)}
              inputMode="decimal"
              onInput={(e) => {
                let value = e.target.value.replace(/[^0-9.]/g, '');

                if (value.startsWith('.')) {
                  value = '0' + value;
                }

                const dotCount = (value.match(/\./g) || []).length;
                if (dotCount > 1) {
                  const firstDotIndex = value.indexOf('.');
                  value =
                    value.substring(0, firstDotIndex + 1) +
                    value.substring(firstDotIndex + 1).replace(/\./g, '');
                }

                e.target.value = value;
              }}
            />
          </Form.Item>
        ) : (
          text
        );
      },
    },

    // {
    //     title: 'Amount',
    //     dataIndex: 'Amount',
    //     key: 'Amount',
    //     editable: true,
    // },
    {
      title: 'Additional Info',
      dataIndex: 'AdditionalInfo',
      key: 'AdditionalInfo',
      width: 120,
      align: 'center',
      render: (text, record, index) => {
        return (
          <>
            {' '}
            <IoAddCircleSharp
              className="openingStock-additional-info-icon shape-preview"
              onClick={() => openAdditionalInfoModal(record, index)}
            />
          </>
        );
      },
    },
    // {
    //     title: "Action",
    //     dataIndex: "Action",
    //     key: "Action",
    //     align: "center",
    //     render: (_, record, index) => (
    //         <a
    //             onClick={(e) => {
    //                 e.stopPropagation();
    //             }}
    //         >
    //             <DeleteFilled
    //                 style={{
    //                     color: "#FF4D4F",
    //                 }}
    //                 onClick={() => statusFormatters(record, index)}
    //             />

    //         </a>
    //     ),
    // },
  ];

  const statusFormatters = (record, index) => {
    const Data = PurchaseData.filter((_, i) => i !== index);
    setDelete(true);
    form.setFieldsValue({
      [`TotalQty${index}`]: undefined,
      [`ReceivedQty${index}`]: undefined,
      // [`AcceptedQty${index}`]: undefined,
      // [`RejectedQty${index}`]: undefined,
      // [`Amount${index}`]: undefined,
      // [`FreeQty${index}`]: undefined,
      // [`InwardPrice${index}`]: undefined,
      // [`MRP${index}`]: undefined,
      // [`PurcDisc${index}`]: undefined,
      // [`SellPrice${index}`]: undefined,
      // [`WhSalePrice${index}`]: undefined,
      // [`offerSalePrice${index}`]: undefined,
      // [`splSalePrice${index}`]: undefined
    });

    setPurchaseData(Data);

    formRef?.current?.setFieldsValue({ ProdId: null });
  };

  const handleQtyChange = (e, record, index) => {
    const inputValue = e.target.value;

    // if (!inputValue) return;

    if (!/^\d*\.?\d*$/.test(inputValue)) {
      setMessageType('error');
      setMessageData('Only numeric values are allowed');
      return;
    }

    const qty = inputValue;

    // Update the specific product by ProdId to avoid index mismatches when the
    // displayed list is filtered (search). Using index from the filtered map
    // can point to the wrong item in the underlying array.
    const newData = filteredProductStockData.map((item) => {
      if (
        item?.ProdId === record?.ProdId &&
        item?.ProdVariantName === record?.ProdVariantName
      ) {
        const { modalDetails, ...rest } = item;
        return {
          ...rest,
          TotalQty: qty,
        };
      }
      return item;
    });

    setFilteredProductStockData(newData);
    // seProductStockData(newData);
  };

  const handleTotalPieceChange = (e, record, index) => {
    if (record?.OnePcsAvailable !== 'Y') {
      e.target.value = record?.TotalPiece ?? '';
      return;
    }

    const inputValue = e.target.value;

    if (!inputValue) return;

    if (record?.OnePcsAvailable === 'N') {
      setMessageType('error');
      setMessageData('Total Piece entry not allowed when OnePcsAvailable is N');
      return;
    }

    if (!/^\d*\.?\d*$/.test(inputValue)) {
      setMessageType('error');
      setMessageData('Only numeric values are allowed');
      return;
    }

    const qty = inputValue;

    // Update by ProdId instead of using the index from the filtered view.
    const newData = filteredProductStockData.map((item) => {
      if (
        item?.ProdId === record?.ProdId &&
        item?.ProdVariantName === record?.ProdVariantName
      ) {
        return {
          ...item,
          TotalPiece: qty,
        };
      }
      return item;
    });

    setFilteredProductStockData(newData);
  };

  const onFinish = async () => {
    let ProductDetails = filteredProductStockData
      ?.filter((item) => item?.TotalQty > 0 || item?.TotalPiece > 0)
      ?.map((item) => {
        return {
          ProdId: item?.ProdId,
          ProdVariantName: item?.ProdVariantName,
          OnePcsAvailable: item?.OnePcsAvailable || 'N',
          TotalQty: item?.TotalQty,
          TotalPcs: item?.TotalPiece || 0,
          CreatedBy: UserId,
          InwardDetails: item?.modalDetails
            ? item?.modalDetails?.map((item1) => {
                return {
                  BatchRef: item1?.BatchRef,
                  AcceptedQty: item1?.Qty,
                  BalanceQty: item1?.Qty,
                  InwardPrice: item1?.SellPrice || 0,
                  MRP: item1?.MRP || 0,
                  SellPrice: item1?.SellPrice || 0,
                  WhSalePrice: item1?.WhSalePrice || 0,
                  OfferPrice: item1?.OfferPrice || 0,
                  SpecialPrice: item1?.SpecialPrice || 0,
                  InwardDate: item1?.ManufDate?.toISOString(),
                  ProdVariantName: item?.ProdVariantName,
                  OnePcsPrice: item1?.AmountPerPiece || 0,
                  NoOfPcs: item1?.OnePieceQty || 0,
                  ModelNumber: item1?.ModelNumber,
                  OnePcsAvailable: item?.OnePcsAvailable || 'N',
                };
              })
            : [],
        };
      });
    let PostData = {
      AppId: AppId,
      CompId: CompId,
      BranchId: BranchId,
      ProductDetails: ProductDetails,
    };
    try {
      let Response = await dispatch(postOpeningStock(PostData))?.unwrap();
      if (Response?.data?.statusCode === 1) {
        setMessageType('success');
        setMessageData('Stock added successfully');
        navigate(`${subDirectory}setting/opening-stock/`, {
          state: {
            Notiffy: {
              messageType: 'success',
              messageData: 'Stock added successfully',
            },
          },
        });
      } else {
        setMessageType('error');
        setMessageData(
          Response?.data?.message || 'Failed to add opening stock'
        );
      }
    } catch (error) {
      console.log(error, 'error');
    }
  };

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

  useEffect(() => {
    if (additionalInfoModal) {
      productAddInfoRef?.current?.setFieldsValue({
        ReceivedQty: selectedRowRecord?.ReceivedQty,
        RejectedQty: selectedRowRecord?.RejectedQty,
        AcceptedQty: selectedRowRecord?.AcceptedQty,
        FreeItem: selectedRowRecord?.FreeItem,
        OfferPrice: selectedRowRecord?.OfferPrice,
        WhSalePrice: selectedRowRecord?.WhSalePrice,
        SpecialPrice: selectedRowRecord?.SpecialPrice,
        MRP: selectedRowRecord?.MRP,
        SellPrice: selectedRowRecord?.SellPrice,
        AmountPerPiece: selectedRowRecord?.AmountPerPiece,
        NumberofPieceinside: selectedRowRecord?.NumberofPieceinside,
      });
    }
  }, [additionalInfoModal]);

  const handleMRPChange = (e) => {
    let value = e?.target?.value === '' ? 0 : parseFloat(e?.target?.value);
    productAddInfoRef?.current?.setFieldsValue({ SellPrice: null, MRP: value });
    setSelectedRowRecord((prev) => ({ ...prev, SellPrice: null, MRP: value }));
    productAddInfoRef?.current?.validateFields();
  };

  const handleAmountPerPiecechange = (e) => {
    const inputValue = e?.target?.value;

    const amountPerPiece = inputValue === '' ? '' : parseFloat(inputValue);

    if (selectedRowRecord?.OnePcsAvailable === 'Y') {
      setSelectedRowRecord((prev) => ({
        ...prev,
        AmountPerPiece: amountPerPiece,
      }));
    }
  };

  const handleNumberofPieceinsidechange = (e) => {
    const inputValue = e?.target?.value;

    const numberOfPieceInside = inputValue === '' ? '' : parseFloat(inputValue);

    if (selectedRowRecord?.OnePcsAvailable === 'Y') {
      setSelectedRowRecord((prev) => ({
        ...prev,
        NumberofPieceinside: numberOfPieceInside,
      }));
    }
  };

  const handleManufactureDate = (date, dateString) => {
    const formattedDate =
      dateString === ''
        ? undefined
        : moment(dateString, ['DD-MM-YYYY']).format('YYYY-MM-DDTHH:mm:ss');
    productAddInfoRef?.current?.setFieldsValue({
      ManufDate: date,
    });
    setSelectedRowRecord((prev) => ({ ...prev, ManufDate: formattedDate }));
  };

  const handleBatchRefChange = (e) => {
    const value = parseInt(e?.target?.value);
    if (!/^\d*\.?\d*$/.test(value)) {
      return;
    }
    productAddInfoRef?.current?.setFieldsValue({
      BatchRef: value,
    });
    setSelectedRowRecord((prev) => ({ ...prev, BatchRef: value }));
  };

  const handleModelNoChange = (e) => {
    const value = parseInt(e?.target?.value);
    if (!/^\d*\.?\d*$/.test(value)) {
      return;
    }
    productAddInfoRef?.current?.setFieldsValue({
      ModelNumber: value,
    });
    setSelectedRowRecord((prev) => ({ ...prev, ModelNumber: value }));
  };

  const handleAddtnlDtlsSubmit = async (values) => {
    const totalQty = parseFloat(selectedRowRecord?.TotalQty) || 0;
    const currentQty = parseFloat(values?.Qty) || 0;
    const existingQtySum = additionalStockEntries.reduce(
      (sum, entry) => sum + (parseFloat(entry.Qty) || 0),
      0
    );
    const totalUsedQty = existingQtySum + currentQty;

    if (totalUsedQty !== totalQty) {
      setMessageType('error');
      setMessageData(
        `Total quantity must equal ${totalQty}. Current total: ${totalUsedQty}`
      );
      return;
    }

    const newData = { ...values };
    setAdditionalStockEntries((prev) => [...prev, newData]);

    const updatedProductStockData = filteredProductStockData.map((product) => {
      if (
        product.ProdId === selectedRowRecord.ProdId &&
        product.ProdVariantName === selectedRowRecord.ProdVariantName
      ) {
        const details = [];

        if (
          Array.isArray(additionalStockEntries) &&
          additionalStockEntries.length > 0
        ) {
          details.push(...additionalStockEntries);
        }

        if (newData?.Qty) {
          details.push(newData);
        }

        if (details.length > 0) {
          return {
            ...product,
            modalDetails: details,
          };
        }
      }
      return product;
    });
    setFilteredProductStockData(updatedProductStockData);
    setAdditionalInfoModal(false);
    setSelectedRowRecord({});
    setActiveAccordionKeys([]);
    await productAddInfoRef?.current?.resetFields();
    // await handleAdditionalInfoClose();
  };

  const handleAdditionalInfoClose = async () => {
    setAdditionalInfoModal(false);
    setSelectedRowRecord({});
    await productAddInfoRef?.current?.resetFields();
  };

  const handleAddNew = async () => {
    try {
      const values = await productAddInfoRef?.current?.validateFields();
      if (!values?.Qty) {
        setMessageType('error');
        setMessageData('Please enter Qty before adding new entry');
        return;
      }
      if (!values?.MRP) {
        setMessageType('error');
        setMessageData('Please enter MRP before adding new entry');
        return;
      }
      if (!values?.SellPrice) {
        setMessageType('error');
        setMessageData('Please enter Selling Price before adding new entry');
        return;
      }
      const newData = { ...selectedRowRecord, ...values };

      const updatedEntries = [...additionalStockEntries, newData];
      setAdditionalStockEntries(updatedEntries);

      // Update ProductStockData with modal details
      const updatedProductStockData = filteredProductStockData.map(
        (product) => {
          if (
            product.ProdId === selectedRowRecord.ProdId &&
            product.ProdVariantName === selectedRowRecord.ProdVariantName
          ) {
            return {
              ...product,
              modalDetails: updatedEntries,
            };
          }
          return product;
        }
      );
      seProductStockData(updatedProductStockData);
      setFilteredProductStockData(
        updatedProductStockData.filter(
          (item) => !eliminatedProducts.includes(item.ProdId)
        )
      );

      // Reset form for new entry
      setSelectedRowRecord({
        ...selectedRowRecord,
        Qty: '',
        OnePieceQty: '',
        MRP: '',
        SellPrice: '',
        BatchRef: '',
        ModelNumber: '',
        ManufDate: '',
        AmountPerPiece: '',
        NumberofPieceinside: '',
      });

      await productAddInfoRef?.current?.resetFields();

      // Close all accordions after adding new entry
      setActiveAccordionKeys([]);
    } catch (error) {
      console.error('Validation failed:', error);
    }
  };

  const handleEditEntry = (index) => {
    const entryToEdit = additionalStockEntries[index];
    setSelectedRowRecord((prev) => ({ ...prev, ...entryToEdit }));
    productAddInfoRef?.current?.setFieldsValue(entryToEdit);

    setAdditionalStockEntries((prev) => prev.filter((_, i) => i !== index));
  };

  const handleDeleteEntry = (index) => {
    setAdditionalStockEntries((prev) => prev.filter((_, i) => i !== index));
  };

  return (
    <div className="pageOverAll">
      <div className="userPage">
        <div className="userPageContent">
          <Messages
            messageType={messageType}
            messageData={messageData}
            onComplete={onComplete}
          />
          <div className="purchase-entry-fh">
            <div className="formName">
              <FormHeader title={'Opening Stock Entry'} />
              {/* <div className="productMaster-input">
                                <Buttons
                                    buttonText={ "Add New"}
                                    handleSubmit={() => handelAddButton()}
                                    color="901D77"
                                    icon={<PlusOutlined />}
                                />
                            </div> */}
              {/* <div className="uploadexcelBtn">
                                <Buttons
                                    buttonText="Upload Excel"
                                    className="tertiary_Button"
                                    handleSubmit={openModal}
                                    disabled={false}
                                    icon={<FiUploadCloud size={18} />}
                                />
                            </div> */}
              <Tooltip title="Ignore Products">
                <button
                  onClick={() => setEliminateModal(true)}
                  className="openingStock-ignoreProductBTN"
                >
                  <IoBagRemove />
                  {/* Ignore Products */}
                </button>
              </Tooltip>

              {/* <div
                                style={{
                                    display: 'flex',
                                    alignItems: 'center',
                                    gap: '7px',
                                    padding: '6px 12px',
                                    backgroundColor: '#059645',
                                    borderRadius: '8px',
                                    color: 'white',
                                    cursor: 'pointer',
                                    fontFamily: 'Poopies',
                                    fontWeight: '400',
                                    whiteSpace: "nowrap",
                                    fontSize: "15px"

                                }}
                                onClick={() => navigate(`${subDirectory}setting/purchase-entry`)}
                            >
                                <FaEye /> <p> View Entry List</p>
                            </div> */}
            </div>
          </div>

          <div className="formDiv">
            <Form
              ref={formRef}
              initialValues={editstate}
              className="formDivAnt"
              onFinish={onFinish}
            >
              <div className="purchase-entry-form">
                <div className="formDivS">
                  <div className="inputForm">
                    <div className="openingStock-search-input">
                      <Input
                        placeholder="Search products..."
                        value={searchText}
                        onChange={(e) => setSearchText(e.target.value)}
                        className="openingStock-search-input-field"
                        allowClear
                      />
                    </div>

                    <div className="Product-table openingStock-product-table">
                      <style>
                        {`
                                                .Product-table .ant-form-item-explain-error {
                                                    display: none !important;
                                                }
                                                .Product-table .ant-form-item {
                                                    margin-bottom: 0 !important;
                                                }
                                                `}
                      </style>
                      <Form form={form} component={false}>
                        <table className="openingStock-table-wrapper">
                          <thead className="openingStock-table-header">
                            <tr className="openingStock-table-header-row">
                              <th
                                className="openingStock-table-header-cell"
                                style={{ width: '20px' }}
                              >
                                S.NO
                              </th>
                              <th className="openingStock-table-header-cell-left">
                                Product Name
                              </th>
                              <th className="openingStock-table-header-cell">
                                Total Qty
                              </th>
                              <th className="openingStock-table-header-cell">
                                Total Pieces
                              </th>
                              <th className="openingStock-table-header-cell">
                                Additional Info
                              </th>
                            </tr>
                          </thead>
                          <tbody>
                            {filteredProductStockData
                              .filter(
                                (record) =>
                                  record.ProdName.toLowerCase().includes(
                                    searchText.toLowerCase()
                                  ) ||
                                  record.ProdVariantName.toLowerCase().includes(
                                    searchText.toLowerCase()
                                  )
                              )
                              .map((record, index) => (
                                <tr
                                  key={index}
                                  className="openingStock-table-row"
                                >
                                  <td className="openingStock-table-cell">
                                    {index + 1}
                                  </td>
                                  <td className="openingStock-table-cell-left">
                                    {record?.ProdName} (
                                    {record?.ProdVariantName})
                                  </td>
                                  <td className="openingStock-table-cell-input">
                                    <Input
                                      className="openingStock-input-field"
                                      value={record?.TotalQty ?? ''}
                                      onChange={(e) =>
                                        handleQtyChange(e, record, index)
                                      }
                                      inputMode="decimal"
                                      onBlur={(e) =>
                                        handleQtyChange(e, record, index)
                                      }
                                      onInput={(e) => {
                                        let value = e.target.value.replace(
                                          /[^0-9.]/g,
                                          ''
                                        );
                                        if (value.startsWith('.'))
                                          value = '0' + value;
                                        const dotCount = (
                                          value.match(/\./g) || []
                                        ).length;
                                        if (dotCount > 1) {
                                          const firstDotIndex =
                                            value.indexOf('.');
                                          value =
                                            value.substring(
                                              0,
                                              firstDotIndex + 1
                                            ) +
                                            value
                                              .substring(firstDotIndex + 1)
                                              .replace(/\./g, '');
                                        }
                                        e.target.value = value;
                                      }}
                                    />
                                  </td>
                                  <td className="openingStock-table-cell-input">
                                    <Input
                                      className="openingStock-input-field"
                                      value={record?.TotalPiece ?? ''}
                                      onChange={(e) =>
                                        handleTotalPieceChange(e, record, index)
                                      }
                                      inputMode="decimal"
                                      onBlur={(e) =>
                                        handleTotalPieceChange(e, record, index)
                                      }
                                      disabled={record?.OnePcsAvailable !== 'Y'}
                                      onInput={(e) => {
                                        let value = e.target.value.replace(
                                          /[^0-9.]/g,
                                          ''
                                        );
                                        if (value.startsWith('.'))
                                          value = '0' + value;
                                        const dotCount = (
                                          value.match(/\./g) || []
                                        ).length;
                                        if (dotCount > 1) {
                                          const firstDotIndex =
                                            value.indexOf('.');
                                          value =
                                            value.substring(
                                              0,
                                              firstDotIndex + 1
                                            ) +
                                            value
                                              .substring(firstDotIndex + 1)
                                              .replace(/\./g, '');
                                        }
                                        e.target.value = value;
                                      }}
                                    />
                                  </td>
                                  <td className="openingStock-table-cell">
                                    <IoAddCircleSharp
                                      className="openingStock-add-icon"
                                      onClick={(e) => {
                                        e.stopPropagation();
                                        openAdditionalInfoModal(record, index);
                                      }}
                                    />
                                  </td>
                                </tr>
                              ))}
                          </tbody>
                        </table>
                      </Form>
                    </div>
                    {/* {
                                            PurchaseData?.length > 0 && <div className="purchase-status-data">
                                                <div className="total-purchase-amnt">
                                                    <label>Total Amount:&nbsp;</label>
                                                    <div>{PurchaseData.reduce((acc, data) => acc + data?.Amount, 0)}</div>
                                                </div>
                                                {!orderType &&
                                                    <div className="purchase-status">
                                                        <RadioGrpButton
                                                            content={[
                                                                { value: "P", label: "Pending" },
                                                                { value: "C", label: "Completed" },
                                                            ]}
                                                            Header={"Purchase Status"}
                                                            defaultSelect={purchaseStatus}
                                                            onSelectFuntion={purchaseStatusChange}
                                                        />
                                                    </div>}
                                            </div>
                                        } */}
                  </div>
                </div>
              </div>
            </Form>
          </div>
          <Form
            ref={formRef}
            initialValues={editstate}
            className="formDivAnt"
            onFinish={onFinish}
          >
            <div className="openingStock-submitButton">
              <Buttons
                buttonText="SUBMIT"
                color="901D77"
                icon={<ArrowRightOutlined />}
              />
            </div>
          </Form>
        </div>

        <div>
          <DefaultModal
            open={additionalInfoModal}
            className={'additional-dtls-modal'}
            footer={false}
            children={
              <>
                <div className="openingStock-modal-header">
                  <h3>{`${selectedRowRecord?.ProdName} (${selectedRowRecord?.ProdVariantName})`}</h3>
                  <button
                    onClick={handleAddNew}
                    className="openingStock-add-new-btn"
                  >
                    <PlusCircleOutlined />
                    Add New
                  </button>
                </div>

                <Form ref={productAddInfoRef} onFinish={handleAddtnlDtlsSubmit}>
                  <div className="collapse-data">
                    <div className="pricing-dtls">
                      <Collapse
                        activeKey={activeAccordionKeys}
                        onChange={setActiveAccordionKeys}
                      >
                        <Panel header="Pricing Details" key="1">
                          <div className="pricing-dtl-fields">
                            <Form.Item name="Qty">
                              <InputField
                                autoComplete="off"
                                label={
                                  <label className="required">
                                    Qty (Available:{' '}
                                    {(() => {
                                      const totalQty =
                                        parseFloat(
                                          selectedRowRecord?.TotalQty
                                        ) || 0;
                                      const usedQty =
                                        additionalStockEntries.reduce(
                                          (sum, entry) =>
                                            sum + (parseFloat(entry.Qty) || 0),
                                          0
                                        );
                                      return totalQty - usedQty;
                                    })()}
                                    )
                                  </label>
                                }
                                isOnChange={
                                  selectedRowRecord?.Qty ? true : false
                                }
                                value={selectedRowRecord?.Qty}
                                onChange={(e) => {
                                  const val = e?.target?.value;
                                  setSelectedRowRecord((prev) => ({
                                    ...prev,
                                    Qty: val,
                                  }));
                                }}
                                inputMode="decimal"
                                onInput={(e) => {
                                  let value = e.target.value.replace(
                                    /[^0-9.]/g,
                                    ''
                                  );

                                  if (value.startsWith('.')) {
                                    value = '0' + value;
                                  }

                                  const dotCount = (value.match(/\./g) || [])
                                    .length;
                                  if (dotCount > 1) {
                                    const firstDotIndex = value.indexOf('.');
                                    value =
                                      value.substring(0, firstDotIndex + 1) +
                                      value
                                        .substring(firstDotIndex + 1)
                                        .replace(/\./g, '');
                                  }

                                  e.target.value = value;
                                }}
                              />
                            </Form.Item>
                            <Form.Item name="MRP">
                              <InputField
                                autoComplete="off"
                                label={<label>MRP</label>}
                                isOnChange={
                                  selectedRowRecord?.MRP !== '' &&
                                  selectedRowRecord.hasOwnProperty('MRP')
                                    ? true
                                    : false
                                }
                                value={selectedRowRecord?.MRP}
                                onChange={handleMRPChange}
                              />
                            </Form.Item>
                            <Form.Item name="SellPrice">
                              <InputField
                                autoComplete="off"
                                label={<label>Sales Price</label>}
                                isOnChange={
                                  selectedRowRecord?.SellPrice !== '' &&
                                  selectedRowRecord.hasOwnProperty('SellPrice')
                                    ? true
                                    : false
                                }
                                value={selectedRowRecord?.SellPrice}
                                onChange={(e) => {
                                  const val =
                                    e?.target?.value === ''
                                      ? 0
                                      : parseFloat(e?.target?.value);
                                  setSelectedRowRecord((prev) => ({
                                    ...prev,
                                    SellPrice: val,
                                  }));
                                }}
                              />
                            </Form.Item>
                            {/* {selectedRowRecord?.OnePcsAvailable === "Y" && (
                                                            <Form.Item name="OnePieceQty">
                                                                <InputField
                                                                    autoComplete="off"
                                                                    label={<label>One Piece Qty</label>}
                                                                    isOnChange={
                                                                        selectedRowRecord?.OnePieceQty
                                                                            ? true
                                                                            : false
                                                                    }
                                                                    value={selectedRowRecord?.OnePieceQty}
                                                                    onChange={(e) => {
                                                                        const val = e?.target?.value;
                                                                        setSelectedRowRecord((prev) => ({
                                                                            ...prev,
                                                                            OnePieceQty: val,
                                                                        }));
                                                                    }}
                                                                    inputMode="decimal"
                                                                    onInput={(e) => {
                                                                        let value = e.target.value.replace(
                                                                            /[^0-9.]/g,
                                                                            "",
                                                                        );
                                                                        if (value.startsWith("."))
                                                                            value = "0" + value;
                                                                        const dotCount = (value.match(/\./g) || [])
                                                                            .length;
                                                                        if (dotCount > 1) {
                                                                            const firstDotIndex = value.indexOf(".");
                                                                            value =
                                                                                value.substring(0, firstDotIndex + 1) +
                                                                                value
                                                                                    .substring(firstDotIndex + 1)
                                                                                    .replace(/\./g, "");
                                                                        }
                                                                        e.target.value = value;
                                                                    }}
                                                                />
                                                            </Form.Item>
                                                        )} */}
                            {selectedRowRecord?.OnePcsAvailable === 'Y' && (
                              <>
                                <Form.Item name="NumberofPieceinside">
                                  <InputField
                                    autoComplete="off"
                                    label={
                                      <label>Number of Piece Inside</label>
                                    }
                                    onChange={(e) =>
                                      handleNumberofPieceinsidechange(e)
                                    }
                                    isOnChange={false}
                                    value={
                                      selectedRowRecord?.NumberofPieceinside
                                    }
                                  />
                                </Form.Item>
                                <Form.Item name="AmountPerPiece">
                                  <InputField
                                    autoComplete="off"
                                    label={<label>Amount / Piece</label>}
                                    onChange={(e) =>
                                      handleAmountPerPiecechange(e)
                                    }
                                    isOnChange={false}
                                    value={selectedRowRecord?.AmountPerPiece}
                                  />
                                </Form.Item>
                              </>
                            )}
                          </div>
                        </Panel>
                      </Collapse>
                    </div>
                    {true && (
                      <div className="pricing-dtls">
                        <Collapse
                          activeKey={
                            activeAccordionKeys.includes('2') ? ['2'] : []
                          }
                          onChange={(keys) =>
                            setActiveAccordionKeys((prev) =>
                              keys.length > 0
                                ? [...prev.filter((k) => k !== '2'), '2']
                                : prev.filter((k) => k !== '2')
                            )
                          }
                        >
                          <Panel header="Dates" key="2">
                            <div className="pricing-dtl-fields">
                              <Form.Item name="ManufDate">
                                <div className="dates-and-expiry">
                                  <label>Entry Date</label>
                                  <DatePicProd
                                    canSelectPast={true}
                                    onPressEnter={(e) =>
                                      handleKeyPress(e, record, index)
                                    }
                                    onChange={handleManufactureDate}
                                    valueData={selectedRowRecord?.ManufDate}
                                  />
                                </div>
                              </Form.Item>
                              {/* <Form.Item name="ExpDate">
                                                        <div className="dates-and-expiry">
                                                            <label>Expire Date</label>
                                                            <DatePicProd
                                                                canSelectPast={false}
                                                                onPressEnter={(e) => handleKeyPress(e, record, index)}
                                                                onChange={handleExpireDate}
                                                                valueData={selectedRowRecord?.ExpDate}
                                                            />
                                                        </div>
                                                    </Form.Item> */}
                            </div>
                          </Panel>
                        </Collapse>
                      </div>
                    )}
                    {true && (
                      <div className="pricing-dtls">
                        <Collapse
                          activeKey={
                            activeAccordionKeys.includes('3') ? ['3'] : []
                          }
                          onChange={(keys) =>
                            setActiveAccordionKeys((prev) =>
                              keys.length > 0
                                ? [...prev.filter((k) => k !== '3'), '3']
                                : prev.filter((k) => k !== '3')
                            )
                          }
                        >
                          <Panel header="Batch & Model Details" key="3">
                            <div className="pricing-dtl-fields">
                              <Form.Item name="BatchRef">
                                <InputField
                                  autoComplete="off"
                                  isOnChange={
                                    selectedRowRecord?.BatchRef &&
                                    selectedRowRecord?.BatchRef !== ''
                                      ? true
                                      : false
                                  }
                                  value={selectedRowRecord?.BatchRef}
                                  label={'Batch No.'}
                                  onChange={handleBatchRefChange}
                                />
                              </Form.Item>
                              <Form.Item name="ModelNumber">
                                <InputField
                                  autoComplete="off"
                                  isOnChange={
                                    selectedRowRecord?.ModelNumber &&
                                    selectedRowRecord?.ModelNumber !== ''
                                      ? true
                                      : false
                                  }
                                  value={selectedRowRecord?.ModelNumber}
                                  label={'Model No.'}
                                  onChange={handleModelNoChange}
                                />
                              </Form.Item>
                              {/* <div className="model-data-add" onClick={handleModelDataOpen}>
                                                        <IoAddCircleSharp size={18} />
                                                        <span>Add Model Data</span>
                                                    </div> */}
                            </div>
                          </Panel>
                        </Collapse>
                      </div>
                    )}
                    {additionalStockEntries.length > 0 && (
                      <div className="openingStock-entries-table">
                        <h4>Added Entries:</h4>
                        <Table
                          size="small"
                          dataSource={additionalStockEntries.map(
                            (item, index) => ({ ...item, key: index })
                          )}
                          pagination={false}
                          columns={[
                            { title: 'Qty', dataIndex: 'Qty', key: 'Qty' },
                            {
                              title: 'One Piece Qty',
                              dataIndex: 'OnePieceQty',
                              key: 'OnePieceQty',
                              render: (value) => value || '-',
                            },
                            { title: 'MRP', dataIndex: 'MRP', key: 'MRP' },
                            {
                              title: 'Sales Price',
                              dataIndex: 'SellPrice',
                              key: 'SellPrice',
                            },
                            {
                              title: 'Batch No.',
                              dataIndex: 'BatchRef',
                              key: 'BatchRef',
                              render: (value) => value || '-',
                            },
                            {
                              title: 'Model No.',
                              dataIndex: 'ModelNumber',
                              key: 'ModelNumber',
                              render: (value) => value || '-',
                            },
                            {
                              title: 'Entry Date',
                              dataIndex: 'ManufDate',
                              key: 'ManufDate',
                              render: (date) =>
                                date ? date.format('DD-MM-YYYY') : '-',
                            },
                            {
                              title: 'Action',
                              key: 'action',
                              render: (_, record, index) => (
                                <div className="openingStock-entries-table-actions">
                                  <a>
                                    <EditFilled
                                      className="openingStock-edit-icon"
                                      onClick={() => {
                                        handleEditEntry(index);
                                        setActiveAccordionKeys(['1']);
                                      }}
                                    />
                                  </a>
                                  <a
                                    onClick={(e) => {
                                      e.stopPropagation();
                                    }}
                                  >
                                    <DeleteFilled
                                      className="openingStock-delete-icon"
                                      onClick={() => handleDeleteEntry(index)}
                                    />
                                  </a>
                                </div>
                              ),
                            },
                          ]}
                        />
                      </div>
                    )}
                    <div className="submitButton">
                      <Buttons
                        buttonText="SUBMIT"
                        color="901D77"
                        icon={<ArrowRightOutlined />}
                      />
                    </div>
                  </div>
                </Form>
              </>
            }
            handleCancel={handleAdditionalInfoClose}
            buttonText="Submit"
          />

          <DefaultModal
            open={eliminateModal}
            title="Ignore Products"
            footer={false}
            children={
              <div>
                <div className="openingStock-modal-section">
                  <label className="openingStock-modal-label">
                    Select Products to Ignore:
                  </label>
                  <Select
                    mode="multiple"
                    placeholder="Choose products to ignore"
                    className="openingStock-select-full-width"
                    value={[]}
                    onChange={(selectedIds) => {
                      const newEliminated = [
                        ...eliminatedProducts,
                        ...selectedIds,
                      ];
                      setEliminatedProducts(newEliminated);
                      setFilteredProductStockData(
                        ProductStockData.filter(
                          (item) => !newEliminated.includes(item.ProdId)
                        )
                      );
                    }}
                    options={ProductStockData.filter(
                      (product) => !eliminatedProducts.includes(product.ProdId)
                    ).map((product) => ({
                      value: product.ProdId,
                      label: `${product.ProdName} (${product.ProdVariantName})`,
                    }))}
                    showSearch
                    filterOption={(input, option) =>
                      option.label.toLowerCase().includes(input.toLowerCase())
                    }
                    maxTagCount={3}
                    maxTagTextLength={30}
                  />
                </div>

                {eliminatedProducts.length > 0 && (
                  <div className="openingStock-ignored-products-section">
                    <h4>Ignored Products ({eliminatedProducts.length}):</h4>
                    <div className="openingStock-ignored-products-container">
                      {eliminatedProducts.map((prodId, index) => {
                        const product = ProductStockData.find(
                          (p) => p.ProdId === prodId
                        );
                        return (
                          <div
                            key={index}
                            className="openingStock-ignored-product-tag"
                          >
                            <span className="openingStock-ignored-product-name">
                              {product?.ProdName}
                            </span>
                            <span
                              onClick={() => {
                                const updatedEliminated =
                                  eliminatedProducts.filter(
                                    (id) => id !== prodId
                                  );
                                setEliminatedProducts(updatedEliminated);
                                setFilteredProductStockData(
                                  ProductStockData.filter(
                                    (item) =>
                                      !updatedEliminated.includes(item.ProdId)
                                  )
                                );
                              }}
                              className="openingStock-ignored-product-remove"
                            >
                              ×
                            </span>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                )}

                <div className="openingStock-modal-footer">
                  <button
                    onClick={() => setEliminateModal(false)}
                    className="openingStock-close-btn"
                  >
                    Close
                  </button>
                </div>
              </div>
            }
            handleCancel={() => setEliminateModal(false)}
          />
        </div>
      </div>
    </div>
  );
};

export default openingStockForm;