import { useState, useRef, useEffect, useMemo, useCallback } from "react";
import { Trash2, Plus, RotateCcw, Search, Save } from "lucide-react";
import { useDispatch, useSelector } from "react-redux";
import "../../Styles/Product/TurboAddForm.scss";
import { getAdmin, taxSelector } from "../../Features/Tax/Tax.js";
import { getSession } from "../../Services/Others.js";
import { isMobile } from 'react-device-detect';
import { ApplicationPreferences, getCommonAppPreference } from "../../Features/BrachLogin/BranchLogin.js";
import {
  bulkpostdata,
  getBrandData,
  getFieldSetupData,
  getHsnData,
  getProdCatData,
  getProdSubCatData,
  getProductTypeData,
  getQrcodeData,
  getUomData,
  onlineimages,
  postFieldSetup,
  prodCatDataSelector,
  prodSubCatDataSelector,
  productTypeDataSelector,
  putProductData,
  uomDataSelector,
} from "../../Features/ProductPage/ProductPage.js";
import { Messages } from "../../Components/Notifications/Messages.jsx";
import { changeSearchedData, getLayoutsearch, GlobalSearchData } from "../../Features/BookingScreen/BookingData/BookingData.js";
import debounce from 'lodash.debounce';
import { MdOutlineAppRegistration } from "react-icons/md";
import { IoClose } from "react-icons/io5";

import { Form, Radio, Tooltip } from "antd";
import { DatePicker, TimePicker } from "antd";
import { DefaultModal } from "../../Components/Modal/DefaultModal.jsx";
import FormHeader from "../PageComponents/FormHeader.jsx";
import { DropDowns } from "../../Components/Forms/DropDown.jsx";
import Buttons from "../../Components/Forms/Buttons.jsx";
import { ArrowRightOutlined } from '@ant-design/icons';
import DefaultSettingPopover from "./Utils/DefaultSettingPopover.jsx";
import CellSelect from "./Utils/CellSelect.jsx";
import CellInput from "./Utils/CellInput.jsx";
import dayjs from "dayjs";
import EnhancedVoiceForm from "./Utils/EnhancedVoiceForm.jsx";
import CropUpload from '../../Components/Forms/CropUpload.jsx';
import { uploadImage } from "../../Features/upload/upload.js";
import { FaRegEye } from "react-icons/fa";
import { changeBreadCrumb } from "../../Features/AppPage/CenterPage.js";
import { BiBarcodeReader } from "react-icons/bi";
import BarcodeScanner from "../BookingScreen/Components/UtillComponents/BarcodeScanner.jsx";
import BarcodeScannerTurbo from "../BookingScreen/Components/UtillComponents/BarcodeScannerTurbo.jsx";

const subDirectory = import.meta.env.ENV_BASE_URL;
const items = [
  {
    name: 'Home',
    link: `${subDirectory}app-page/home`,
  },

  {
    name: 'Product',
    link: `${subDirectory}setting/product-master`,
  },
  {
    name: 'Turbo Add',
    link: `${subDirectory}setting/product-master/turbo-add`,
  },
];

// --- Constants ---
const FIELD_NAMES = {
  productName: "Product Name",
  uom: "UOM",
  nou: "No. of. Units",
  mrp: "MRP",
  salePrice: "Sale Price",
  category: "Category",
  subCategory: "Sub-Category",
  tax: "Tax",
};
const REQUIRED_FIELDS = ["productName", "uom", "nou", "mrp", "salePrice", "category", "tax"];
const TOTAL_COLS = 8;

// --- Validation ---
const createValidationRules = (products) => ({
  productName: (v, row) => {
    if (!v?.trim()) return "Product Name is required";
    // Duplicate check: productName + uom + nou
    const isDuplicate = products?.some(
      p =>
        p.id !== row.id &&
        p.productName?.trim().toLowerCase() === v.trim().toLowerCase() &&
        p.uom === row.uom &&
        p.nou === row.nou &&
        p.category === row.category &&
        p.subCategory === row.subCategory
    );
    if (isDuplicate) return "Product already exists";
    return "";
  },
  uom: v => !v ? "UOM is required" : "",
  nou: v => {
    if (!v || v.toString().trim() === "") return "No. of. Units is required";
    const num = parseFloat(v);
    return num < 0 ? "No. of. Units cannot be negative" : "";
  },
  mrp: v => {
    if (!v || v.toString().trim() === "") return "MRP is required";
    const num = parseFloat(v);
    return num < 0 ? "MRP cannot be negative" : "";
  },
  salePrice: (v, row) => {
    if (!v || v.toString().trim() === "") return "Sale Price is required";
    const num = parseFloat(v);
    if (num < 0) return "Sale Price cannot be negative";
    if (row?.mrp && num > parseFloat(row.mrp)) return "Sale Price cannot be greater than MRP";
    return "";
  },
  discountLimit: (v, row) => {
    const num = parseFloat(v);
    if (row.discountType === "P" && num >= 100) return "Percentage must be less than 100";
    if (row.discountType === "F" && num >= parseFloat(row.salePrice || 0)) return "Fixed must be less than Sale Price";
    return "";
  },
  imei1: v => v && !/^\d{15}$/.test(v) ? "IMEI must be 15 digits" : "",
  imei2: v => v && !/^\d{15}$/.test(v) ? "IMEI must be 15 digits" : "",
  macId: v => v && !/^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/.test(v) ? "Invalid MacId" : "",
});

// --- Main Form ---
const TurboAddForm = () => {
  const dispatch = useDispatch();
  // Redux selectors
  const taxData = useSelector(taxSelector);
  const scannerRef = useRef();
  console.log(taxData, "taxData")
  const UomData = useSelector(uomDataSelector);
  const productTypeData = useSelector(productTypeDataSelector);
  const ApplicationPreferenceData = useSelector(ApplicationPreferences);
  const categoryId = ApplicationPreferenceData?.find(
    p => p?.PreferredCatName?.toLowerCase() === "product form fields"
  )?.PreferredCatId;
  const prodCategories = useSelector(prodCatDataSelector);
  const prodSubCategories = useSelector(prodSubCatDataSelector);
  const searchText = useSelector(GlobalSearchData);

  // Session data
  const AppId = useMemo(() => getSession("AppId"), []);
  const CompId = useMemo(() => getSession("CompId"), []);
  const BranchId = useMemo(() => getSession("BranchId"), []);
  const UserId = useMemo(() => getSession("UserId"), []);

  // State
  const [voiceData, setVoiceData] = useState(null);
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [products, setProducts] = useState([]);
  const [selectedCell, setSelectedCell] = useState(null);
  const [searchTerm, setSearchTerm] = useState("");
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [fieldSetup, setFieldSetup] = useState(false);
  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
  const [selectedFields, setSelectedFields] = useState([]);
  const [defaultCategories, setDefaultCategories] = useState([]);
  const [selectedDefaultCategory, setSelectedDefaultCategory] = useState(null);
  const [defaultSubCategories, setDefaultSubCategories] = useState([]);
  const [selectedDefaultSubCategory, setSelectedDefaultSubCategory] = useState(null);
  const [defaultBrands, setDefaultBrands] = useState([]);
  const [selectedDefaultBrand, setSelectedDefaultBrand] = useState(null);
  const [tableFieldPreferences, setTableFieldPreferences] = useState([]);
  const [hsnDetails, setHsnDetails] = useState([]);
  const [selectedHsn, setSelectedHsn] = useState("");
  const [selectedImage, setSelectedImage] = useState(null);
  const [onlineImage, setOnlineImage] = useState("");
  const [imageModal, setImageModal] = useState(false);
  const [uploadImageModal, setUploadImageModal] = useState(false);
  const [onlineImageData, setOnlineImageData] = useState([]);
  const [imageModalRowIndex, setImageModalRowIndex] = useState(null);
  const [openScanner, setOpenScanner] = useState(false);

  console.log(imageModalRowIndex, "onlineImage")

  const hasField = label =>
    tableFieldPreferences?.some(f => f.label === label && f.access === "Y");


  // Defaults
  const [defaults, setDefaults] = useState({
    category: null,
    subCategory: null,
    brand: null,
    tax: null,
    uom: null,
    availableSubCategories: null,
    availableBrands: null,
  });

  const debouncedProductLookup = useRef();
  const debouncedHSNLookup = useRef();
  const formRef = useRef(null);
  const defaultsSetRef = useRef({ category: false, subCategory: false, tax: false, uom: false });
  const tableRef = useRef(null);
  const validationRules = useMemo(() => createValidationRules(products), [products]);


  // Memoized UOM preference
  const {
    UomPreference,
    fieldPreferences,
    productDtlsFields,
    qrAndTokenDtlsFields,
    priceDtlsFields,
    hsnAndMoreDtlsFields,
    dateAndTimeDtlsFields
  } = useMemo(() => {
    // UOM Preference
    const uomPref = ApplicationPreferenceData?.find(
      p => p?.PreferredCatName === "Product Uom"
    )?.PreferenceCatDetails;

    // Field Preferences
    const fieldsPref = ApplicationPreferenceData?.find(
      p => p?.PreferredCatName?.toLowerCase() === "product form fields"
    )?.PreferenceCatDetails;

    const UomPreference = UomData?.filter(item =>
      uomPref?.some?.(
        e =>
          e?.PreferredSubCatName?.toLowerCase() === item?.ConfigName?.toLowerCase() &&
          e?.PreferredStatus === "Y"
      )
    );

    const fieldPreferences = fieldsPref?.filter(e => e?.PreferredStatus === "Y");
    // Category mapping
    const categoryMap = {
      productDtls: [
        'Sub Category', 'Brand', 'Product Image', 'EMI Allowed', 'WholeSale Price'
      ],
      qrAndTokenDtls: [
        'Auto Generate QRCode', 'Stock Maintenance', 'Token Maintenance', 'Amount Per Piece'
      ],
      priceDtls: [
        'Product Type', 'Tax', 'Cess', 'Discount Type', 'Discount Limit', 'Add Variant'
      ],
      hsnAndMoreDtls: [
        'HSN', 'Part Number', 'Rack', 'Batch Number', 'Model Number', 'IMEI 1', 'IMEI 2', 'Serial Number', 'MacId'
      ],
      dateAndTimeDtls: [
        'Manufacture Date', 'Expire Date', 'Expiry Notification Days', 'Available From', 'Available To'
      ]
    };

    // Build reverse map
    const reverseMap = Object.entries(categoryMap).reduce((acc, [key, values]) => {
      values.forEach(val => { acc[val] = key; });
      return acc;
    }, {});

    // Build result fields
    const result = {
      productDtlsFields: [],
      qrAndTokenDtlsFields: [],
      priceDtlsFields: [],
      hsnAndMoreDtlsFields: [],
      dateAndTimeDtlsFields: [],
    };

    fieldPreferences?.forEach(field => {
      const key = reverseMap[field?.PreferredSubCatName];
      if (key) {
        result[key + 'Fields'].push(field.PreferredSubCatName);
      }
    });

    return {
      UomPreference,
      fieldPreferences,
      ...result
    };
  }, [ApplicationPreferenceData, UomData]);

  // Memoized select options
  const selectOptions = useMemo(() => ({
    uom: UomPreference?.map(uom => ({ label: uom?.ConfigName, value: uom?.ConfigId })) || [],
    tax: taxData?.map(tax => ({
      label: `${tax?.TaxIdName} - ${tax?.TaxPercentage}%`,
      value: tax?.TaxId,
      name: tax?.TaxIdName,
      percentage: tax?.TaxPercentage,
    })) || [],
    categories: prodCategories?.map(cat => ({ label: cat?.ConfigName, value: cat?.ConfigId })) || [],
    subCategories: prodSubCategories?.map(subCat => ({
      label: subCat?.ConfigName,
      value: subCat?.ConfigId,
    })).filter(item => item.label) || [],
  }), [UomPreference, taxData, prodCategories, prodSubCategories]);

  // Filtered products for search
  const filteredProducts = useMemo(() => {
    if (!searchTerm.trim()) return products;
    const term = searchTerm.toLowerCase();
    return products.filter(p =>
      p?.productName?.toLowerCase()?.includes(term) ||
      p?.barcode?.toLowerCase()?.includes(term)
    );
  }, [products, searchTerm]);

  console.log(productTypeData?.filter(pt => pt?.ConfigName !== 'Others')?.map(pt => ({ label: pt.ConfigName, value: pt.ConfigId })), "productTypeData")

  // --- Effects: Data fetching and defaults ---
  useEffect(() => {
    dispatch(getUomData());
    dispatch(getAdmin({ AppId, CompId }));
    dispatch(getProdCatData({ AppId }));
    dispatch(getProductTypeData());
    dispatch(getCommonAppPreference(AppId));
  }, [AppId, CompId, dispatch]);

  useEffect(() => {
    const setGeneralDefaults = async () => {
      setDefaultCategories(prodCategories?.map(cat => ({ label: cat?.ConfigName, value: cat?.ConfigId })) || []);
      if (prodCategories?.length > 0 && !defaultsSetRef.current.category) {
        const generalCat = prodCategories.find(
          c => c?.ConfigName?.toLowerCase() === "general"
        );

        if (generalCat) {
          defaultsSetRef.current.category = true;

          try {
            const response = await dispatch(
              getProdSubCatData({ ConfigId: generalCat.ConfigId })
            ).unwrap();

            const subCategories = response?.data?.data || [];
            const generalSubCat = subCategories.find(
              s => s?.ConfigName?.toLowerCase() === "general"
            );

            let availableBrands = [];
            if (generalSubCat?.ConfigId) {
              const brandResponse = await dispatch(
                getBrandData({ ConfigId: generalSubCat.ConfigId })
              ).unwrap();
              availableBrands = brandResponse?.data?.data || [];
            }

            setDefaults(prev => ({
              ...prev,
              category: generalCat.ConfigId,
              subCategory: generalSubCat?.ConfigId || null,
              availableSubCategories: subCategories
                .filter(
                  subCat =>
                    subCat.NumFId === parseInt(generalCat.ConfigId) &&
                    !!subCat?.ConfigName
                )
                .map(subCat => ({
                  label: subCat?.ConfigName,
                  value: subCat.ConfigId,
                })),
              availableBrands: availableBrands.filter(
                brand =>
                  brand.NumFId === parseInt(generalSubCat.ConfigId) &&
                  !!brand?.ConfigName
              ).map(brand => ({
                label: brand?.ConfigName,
                value: brand.ConfigId,
              })),
            }));
          } catch (error) {
            console.error("Failed to set defaults", error);
          }
        }
      }
    };

    setGeneralDefaults();
  }, [prodCategories, dispatch]);

  useEffect(() => {
    if (taxData?.length > 0 && !defaultsSetRef.current.tax) {
      const nilTax = taxData.find(t => t?.TaxPercentage === 0 && t?.TaxIdName === "NIL");
      if (nilTax) {
        setDefaults(prev => ({ ...prev, tax: nilTax?.TaxId }));
        defaultsSetRef.current.tax = true;
      }
    }
  }, [taxData]);

  useEffect(() => {
    if (UomPreference?.length > 0 && !defaultsSetRef.current.uom) {
      const pcsDt = UomPreference.find(u => u?.ConfigName === "PCS");
      if (pcsDt) {
        setDefaults(prev => ({ ...prev, uom: pcsDt?.ConfigId }));
        defaultsSetRef.current.uom = true;
      }
    }
  }, [UomPreference]);

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

  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);
    }
  };

  // --- Validation ---
  const validateField = useCallback((id, field, value, rowData = {}) => {
    const validator = validationRules[field];
    const error = validator ? validator(value, rowData) : "";
    setErrors(prev => ({ ...prev, [`${id}-${field}`]: error }));
    return !error;
  }, [validationRules]);

  const validateRow = useCallback(rowData => {
    const rowErrors = {};
    let isValid = true;
    REQUIRED_FIELDS.forEach(field => {
      const error = validationRules[field]?.(rowData[field], rowData) || "";
      if (error) {
        rowErrors[`${rowData.id}-${field}`] = error;
        isValid = false;
      }
    });
    setErrors(prev => ({ ...prev, ...rowErrors }));
    return isValid;
  }, [validationRules]);

  // --- Default Setting Handler ---
  const handleDefaultSetting = useCallback(async (field, selectedValue, applyToAll) => {
    // Step 1: Always update raw default field immediately
    setDefaults(prev => ({ ...prev, [field]: selectedValue }));

    let newDefaults = { ...defaults, [field]: selectedValue };
    let updatedProducts = products;

    // Base update when applyToAll is true
    if (applyToAll && products?.length > 0) {
      updatedProducts = products?.map(product => {
        if (field === 'subCategory' && product.category !== selectedDefaultCategory) return product;
        if (field === 'brand' && product.subCategory !== selectedDefaultSubCategory) return product;
        const updatedProduct = { ...product, [field]: selectedValue };

        switch (field) {
          case "uom": {
            const u = selectOptions.uom.find(x => x.value === selectedValue);
            updatedProduct.uomName = u?.label || "";
            break;
          }
          case "category": {
            const c = selectOptions.categories.find(x => x.value === selectedValue);
            updatedProduct.categoryName = c?.label || "";
            updatedProduct.subCategory = "";
            updatedProduct.subCategoryName = "";
            updatedProduct.brand = "";
            updatedProduct.brandName = "";
            break;
          }
          case "subCategory": {
            const sc = product.availableSubCategories?.find(x => x.value === selectedValue);
            updatedProduct.subCategoryName = sc?.label || "";
            updatedProduct.brand = "";
            updatedProduct.brandName = "";
            break;
          }
          case "brand": {
            const b = product.availableBrands?.find(x => x.value === selectedValue);
            updatedProduct.brandName = b?.label || "";
            break;
          }
          case "tax": {
            const t = selectOptions.tax.find(x => x.value === selectedValue);
            updatedProduct.taxName = t?.label || "";
            break;
          }
          default:
            break;
        }
        return updatedProduct;
      });
    }

    // Helper: fetch subcategories
    const fetchSubCategories = async (categoryId) => {
      try {
        const response = await dispatch(getProdSubCatData({ ConfigId: categoryId })).unwrap();
        if (response?.status !== 200) return { availableSubCategories: [], generalSubCat: null };

        const subCategories = response?.data?.data || [];
        const availableSubCategories = subCategories
          .filter(s => s.NumFId === parseInt(categoryId) && !!s?.ConfigName)
          .map(s => ({ label: s.ConfigName, value: s.ConfigId }));

        const generalSubCat = availableSubCategories.find(s => s.label?.toLowerCase() === "general");
        return { availableSubCategories, generalSubCat };
      } catch (err) {
        console.error("Error fetching subcategories:", err);
        return { availableSubCategories: [], generalSubCat: null };
      }
    };

    // Helper: fetch brands
    const fetchBrands = async (subCategoryId) => {
      try {
        const response = await dispatch(getBrandData({ ConfigId: subCategoryId })).unwrap();
        if (response?.status !== 200) return [];

        return response?.data?.data
          ?.filter(b => b.NumFId === parseInt(subCategoryId) && !!b?.ConfigName)
          ?.map(b => ({ label: b?.ConfigName, value: b.ConfigId })) || [];
      } catch (err) {
        console.error("Error fetching brands:", err);
        return [];
      }
    };

    // Handle CATEGORY change → fetch subcategories (+auto "General")
    if (field === "category" && selectedValue) {
      const { availableSubCategories, generalSubCat } = await fetchSubCategories(selectedValue);
      let availableBrands = [];

      if (generalSubCat) {
        availableBrands = await fetchBrands(generalSubCat.value);
      }

      newDefaults = {
        ...newDefaults,
        availableSubCategories,
        subCategory: generalSubCat?.value || null,
        availableBrands,
        brand: null
      };

      if (applyToAll) {
        updatedProducts = updatedProducts.map(p => ({
          ...p,
          availableSubCategories,
          subCategory: generalSubCat?.value || "",
          subCategoryName: generalSubCat?.label || "",
          availableBrands,
          brand: "",
          brandName: ""
        }));
      }
      handleDefaultCategoryChange(selectedValue)
    }

    // Handle SUBCATEGORY change → fetch brands
    if (field === "subCategory" && selectedValue) {

      const availableBrands = await fetchBrands(selectedValue);

      newDefaults = {
        ...newDefaults,
        availableBrands,
        brand: null
      };

      if (applyToAll) {
        updatedProducts = updatedProducts.map(p => {
          if (field === 'subCategory' && p.category !== selectedDefaultCategory) return p;
          return {
            ...p,
            availableBrands,
            brand: "",
            brandName: ""
          }
        });
      }
      handleDefaultSubCategoryChange(selectedValue)
    }

    if (field === "brand" && selectedValue) setSelectedDefaultBrand(selectedValue);

    // Final state updates
    if (applyToAll) setProducts(updatedProducts);
    setDefaults(newDefaults);

    setMessageType("success");
    setMessageData(`Default ${field.toUpperCase()} set successfully${applyToAll ? " and applied to all rows" : ""}`);
  }, [products, selectOptions, dispatch, defaults]);

  const handleDefaultCategoryChange = async (selectedCategory) => {
    setSelectedDefaultCategory(selectedCategory);
    setSelectedDefaultSubCategory(null);
    setSelectedDefaultBrand(null);
    const subCategoryResponse = await dispatch(getProdSubCatData({ ConfigId: selectedCategory }))?.unwrap();
    setDefaultSubCategories(subCategoryResponse?.data?.data
      ?.filter(sub => sub.NumFId === selectedCategory && !!sub.ConfigName)
      ?.map(sub => ({ label: sub.ConfigName, value: sub.ConfigId })));
  };

  const handleDefaultSubCategoryChange = async (selectedSubCategory) => {
    setSelectedDefaultSubCategory(selectedSubCategory);
    setSelectedDefaultBrand(null);
    const brandResponse = await dispatch(getBrandData({ ConfigId: selectedSubCategory }))?.unwrap();
    setDefaultBrands(brandResponse?.data?.data
      ?.filter(brand => brand.NumFId === selectedSubCategory && !!brand.ConfigName)
      ?.map(brand => ({ label: brand.ConfigName, value: brand.ConfigId })));
  };

  // --- Handlers ---
  const handleInputChange = useCallback((id, field, value) => {
    setProducts(prev =>
      prev.map(p => {
        if (p.id !== id) return p;
        let updatedRow = { ...p, [field]: value };
        // Update label fields
        if (field === "uom") {
          const selectedUOM = selectOptions.uom.find(u => u.value === value);
          updatedRow.uomName = selectedUOM?.label || "";
        } else if (field === "category") {
          const selectedCategory = selectOptions.categories.find(c => c.value === value);
          updatedRow.categoryName = selectedCategory?.label || "";
        } else if (field === "subCategory") {
          const selectedSubCategory = p.availableSubCategories?.find(s => s.value === value);
          updatedRow.subCategoryName = selectedSubCategory?.label || "";
        } else if (field === "tax") {
          const selectedTax = selectOptions.tax.find(t => t.value === value);
          updatedRow.taxName = selectedTax?.label || "";
        } else if (field === "mrp") {
          updatedRow.salePrice = "";
          setErrors(prevErrors => {
            const { [`${id}-salePrice`]: _, ...rest } = prevErrors;
            return rest;
          });
        }

        // Duplicate check for productName, uom, nou
        if (["productName", "uom", "nou", "category", "subCategory"].includes(field)) {
          const trimmedName = field === "productName" ? value?.trim().toLowerCase() : updatedRow.productName?.trim().toLowerCase();
          const uomValue = field === "uom" ? value : updatedRow.uom;
          const nouValue = field === "nou" ? value : updatedRow.nou;
          const categoryValue = field === "category" ? value : updatedRow.category;
          const subCategoryValue = field === "subCategory" ? value : updatedRow.subCategory;

          const duplicate = products.some(prod =>
            prod.id !== id &&
            prod.productName?.trim().toLowerCase() === trimmedName &&
            prod.uom === uomValue &&
            prod.nou === nouValue &&
            prod.category === categoryValue &&
            prod.subCategory === subCategoryValue
          );

          if (duplicate && trimmedName) {
            setErrors(prev => ({
              ...prev,
              [`${id}-productName`]: "Product already exists"
            }));
          } else {
            setErrors(prev => {
              const { [`${id}-productName`]: _, ...rest } = prev;
              return rest;
            });
          }
        }

        setTimeout(() => validateField(id, field, value, updatedRow), 0);
        if (["category", "subCategory"].includes(field)) {
          setTimeout(() => validateField(id, "productName", updatedRow.productName, updatedRow), 0);
        }
        return updatedRow;
      })
    );
  }, [validateField, selectOptions.uom, selectOptions.categories, selectOptions.tax, products]);

  const handleCategoryChange = useCallback(async (productId, categoryId) => {
    const selectedCategory = selectOptions.categories.find(c => c.value === categoryId);

    // Reset product fields
    handleInputChange(productId, "category", categoryId);
    handleInputChange(productId, "categoryName", selectedCategory?.label || "");
    handleInputChange(productId, "subCategory", "");
    handleInputChange(productId, "subCategoryName", "");
    handleInputChange(productId, "brand", "");
    handleInputChange(productId, "brandName", "");
    handleInputChange(productId, "availableBrands", []);

    if (!categoryId) return;

    try {
      const response = await dispatch(getProdSubCatData({ ConfigId: categoryId })).unwrap();
      if (response?.status !== 200) return;

      const allSubCats = response?.data?.data || [];
      const availableSubCategories = allSubCats
        .filter(subCat => subCat.NumFId === parseInt(categoryId) && !!subCat?.ConfigName)
        .map(subCat => ({ label: subCat.ConfigName, value: subCat.ConfigId }));

      let subCategoryId = "";
      let subCategoryName = "";
      let availableBrands = [];

      // ✅ If selected category is "general", try to auto-select "general" subCategory + fetch brands
      const isGeneralCategory = prodCategories.some(
        cat => cat.ConfigId === parseInt(categoryId) && cat.ConfigName?.toLowerCase() === "general"
      );

      if (isGeneralCategory) {
        const generalSubCat = availableSubCategories.find(
          subCat => subCat.label?.toLowerCase() === "general"
        );

        if (generalSubCat) {
          subCategoryId = generalSubCat.value;
          subCategoryName = generalSubCat.label;

          try {
            const brandResponse = await dispatch(getBrandData({ ConfigId: generalSubCat.value })).unwrap();
            availableBrands =
              brandResponse?.data?.data
                ?.filter(b => b.NumFId === parseInt(generalSubCat.value) && !!b?.ConfigName)
                ?.map(b => ({ label: b.ConfigName, value: b.ConfigId })) || [];
          } catch (err) {
            console.error("Error fetching brands:", err);
          }
        }
      }

      // ✅ Apply updates in one go (no async inside setProducts)
      setProducts(prev =>
        prev.map(p =>
          p.id === productId
            ? {
              ...p,
              availableSubCategories,
              subCategory: subCategoryId,
              subCategoryName,
              availableBrands,
              brand: "",
              brandName: "",
            }
            : p
        )
      );

      handleInputChange(productId, "subCategory", subCategoryId);

    } catch (error) {
      console.error("Error fetching subcategories:", error);
    }
  }, [handleInputChange, dispatch, prodCategories, selectOptions.categories]);

  const handleSubCategoryChange = useCallback(async (productId, subCategoryId) => {
    const selectedSubCategory = selectOptions.subCategories.find(s => s.value === subCategoryId);
    handleInputChange(productId, "subCategory", subCategoryId);
    handleInputChange(productId, "subCategoryName", selectedSubCategory?.label || "");
    handleInputChange(productId, "brand", "");
    handleInputChange(productId, "brandName", "");
    if (subCategoryId) {
      try {
        const response = await dispatch(getBrandData({ ConfigId: subCategoryId })).unwrap();
        setProducts(prev => {
          return prev.map(p => {
            if (p.id === productId) {
              return {
                ...p,
                availableBrands: response?.data?.data
                  ?.filter(brand => brand.NumFId === parseInt(subCategoryId) && !!brand?.ConfigName)
                  ?.map(brand => ({ label: brand.ConfigName, value: brand.ConfigId })),
                brand: "",
                brandName: "",
              };
            }
            return p;
          });
        });
      } catch (error) {

      }
    }
  }, [handleInputChange, selectOptions.subCategories]);

  // --- Row operations ---
  const createNewRow = useCallback((overrides = {}) => {
    const newId = Math.max(0, ...products.map(p => p.id), 0) + 1;
    const defaultUOM = selectOptions.uom.find(u => u.value === defaults.uom);
    const defaultCategory = selectOptions.categories.find(c => c.value === defaults.category);
    const defaultSubCategory = defaults.availableSubCategories?.find(s => s.value === defaults.subCategory);
    const defaultTax = selectOptions.tax.find(t => t.value === defaults.tax);

    // Clean overrides: drop null/undefined so defaults are preserved
    const cleanedOverrides = Object.fromEntries(
      Object.entries(overrides).filter(([_, v]) => v !== null && v !== undefined && v !== "")
    );


    return {
      id: newId,
      productName: "",
      uom: defaults.uom || "",
      uomName: defaultUOM?.label || "",
      nou: "1",
      mrp: "",
      salePrice: "",
      category: defaults.category,
      categoryName: defaultCategory?.label || "",
      subCategory: defaults.subCategory,
      subCategoryName: defaultSubCategory?.label || "",
      tax: defaults.tax,
      taxName: defaultTax?.label || "",
      barcode: "",
      availableSubCategories: defaults.availableSubCategories,
      availableBrands: defaults.availableBrands,
      emiAllowed: 'No',
      autoGenerateQrcode: 'No',
      stockMaintenance: 'No',
      tokenMaintenance: 'No',
      amountPerPiece: 'No',
      autoGenerateOnePcQrcode: 'No',
      productType: productTypeData?.find(pt => pt?.ConfigName === "Product")?.ConfigId,
      cess: "",
      discountType: "F",
      discountLimit: "",
      hsnCode: "",
      partNumber: "",
      batchNumber: "",
      modelNumber: "",
      rack: "",
      imei1: "",
      imei2: "",
      serialNumber: "",
      macId: "",
      manufactureDate: null,
      expireDate: null,
      expiryNotificationDays: 0,
      availableFrom: null,
      availableTo: null,
      productImage: "",
      ...cleanedOverrides,
    };
  }, [products, defaults, selectOptions.uom, selectOptions.categories, selectOptions.tax]);

  useEffect(() => {
    // Only add if products is empty and defaults are available
    if (
      products?.length === 0 &&
      defaults.uom &&
      defaults.category &&
      defaults.subCategory &&
      defaults.tax
    ) {
      setProducts([createNewRow()]);
    }
  }, [defaults.uom, defaults.category, defaults.subCategory, defaults.tax, products?.length, createNewRow]);

  const addNewRow = useCallback(() => {
    // Fields to check
    const requiredFields = ["productName", "nou", "uom"];
    // Find the first incomplete row
    const incompleteIndex = products.findIndex(row =>
      requiredFields.some(field => row[field] === null || row[field] === undefined || row[field] === "")
    );
    if (incompleteIndex !== -1) {
      // Move the incomplete row to the top
      setProducts(prev => {
        const newProducts = [...prev];
        const [incompleteRow] = newProducts.splice(incompleteIndex, 1);
        newProducts.unshift(incompleteRow);
        return newProducts;
      });
      setMessageType("error");
      setMessageData("Please fill all required fields in the highlighted row before adding a new row.");
      return;
    }
    setProducts(prev => [createNewRow(), ...prev]);
  }, [products, createNewRow]);

  const insertRowAbove = useCallback(targetIndex => {
    const newRow = createNewRow();
    setProducts(prev => {
      const newProducts = [...prev];
      newProducts.splice(targetIndex, 0, newRow);
      return newProducts;
    });
  }, [createNewRow]);

  const deleteRow = useCallback(id => {
    setProducts(prev => prev.filter(p => p.id !== id));
    setErrors(prev => {
      const newErrors = { ...prev };
      Object.keys(newErrors).forEach(key => { if (key.startsWith(`${id}-`)) delete newErrors[key]; });
      return newErrors;
    });
  }, []);

  const resetAll = useCallback(() => {
    setProducts([]);
    setSearchTerm("");
    setSelectedCell(null);
    setErrors({});
  }, []);

  // --- Submit handler ---
  const handleSubmit = useCallback(async () => {
    if (products?.length === 0) {
      setMessageType("error");
      setMessageData("Please add at least one product before submitting.");
      return;
    }
    // Duplicate check: productName + uom + nou
    let duplicateError = {};
    products.forEach((product, idx) => {
      const isDuplicate = products?.some((p, i) =>
        i !== idx &&
        p.productName?.trim().toLowerCase() === product.productName?.trim().toLowerCase() &&
        p.uom === product.uom &&
        p.nou === product.nou &&
        p?.category === product?.category &&
        p?.subCategory === product?.subCategory
      );
      if (isDuplicate && product.productName?.trim()) {
        duplicateError[`${product.id}-productName`] = "Product already exists";
      }
    });
    if (Object.keys(duplicateError)?.length > 0) {
      setErrors(prev => ({ ...prev, ...duplicateError }));
      setMessageType("error");
      setMessageData("Duplicate products found. Please fix before submitting.");
      return;
    }
    setIsSubmitting(true);
    try {
      let hasErrors = false;
      const allErrors = {};
      products.forEach(product => {
        REQUIRED_FIELDS.forEach(field => {
          const error = validationRules[field]?.(product[field], product) || "";
          if (error) {
            allErrors[`${product.id}-${field}`] = error;
            hasErrors = true;
          }
        });
      });

      if (hasErrors) {
        setErrors(allErrors);
        setMessageType("error");
        setMessageData("Please fix all validation errors before submitting.");
        return;
      }

      const postData = products.map(product => ({
        AppId: AppId || 0,
        CompId: CompId || "",
        BranchId: BranchId || "",
        CreatedBy: UserId || 0,
        ProdName: product.productName?.trim() || "",
        ProdVariantName: product.prodVariantName || "",
        Size: parseFloat(product.nou) || "",
        UOM: product.uomName || "",
        MRP: parseFloat(product.mrp) || 0,
        WhSalePrice: parseFloat(product.whSalePrice) || 0,
        SellPrice: parseFloat(product.salePrice) || 0,
        ProdCat: product.categoryName || "",
        ProdSubCat: product.subCategoryName || "",
        Brand: product.brandName || product.brand || "",
        AutoGenerateQr: product.autoGenerateQrcode || "",
        QRCode: product.barcode || product.qrcode || "",
        StockAvailable: product.stockAvailable || "N",
        TaxId: product.taxName || product.tax || "",
        HSNCode: product.hsnCode || "",
        PartNumber: product.partNumber || "",
        Rack: product.rack ? parseInt(product.rack) : 0,
        ManufDate: product.manufactureDate || "",
        ExpDate: product.expireDate || "",
        AvailableFrom: product.availableFrom || "",
        AvailableTo: product.availableTo || "",
        ProdLogo: product.productImage || "",
        OnePcsAvailable: product.onePcsAvailable || "No",
        AutoGenerateSingleQr: product.autoGenerateOnePcQrcode || "N",
        OnePcQR: product.onePcQrcode || "",
        TokenAvailable: product.tokenAvailable || product.tokenMaintenance || "N",
        OpeningQty: product.openingQty ? parseFloat(product.openingQty) : 0,
        QtyBasedPrice: product.qtyBasedPrice || "",
        InwardDate: product.inwardDate || "",
        SuppId: product.suppId || "",
        Reference: product.reference || "",
        ReceivedQty: product.receivedQty ? parseFloat(product.receivedQty) : 0,
        AcceptedQty: product.acceptedQty ? parseFloat(product.acceptedQty) : 0,
        RejectedQty: product.rejectedQty ? parseFloat(product.rejectedQty) : 0,
        RejectionReason: product.rejectionReason || "",
        IssuedQty: product.issuedQty ? parseFloat(product.issuedQty) : 0,
        BalanceQty: product.balanceQty ? parseFloat(product.balanceQty) : 0,
        InwardPrice: product.inwardPrice ? parseFloat(product.inwardPrice) : 0,
        OfferPrice: product.offerPrice ? parseFloat(product.offerPrice) : 0,
        SpecialPrice: product.specialPrice ? parseFloat(product.specialPrice) : 0,
        Cess: product.cess ? parseFloat(product.cess) : 0,
      }));

      await dispatch(bulkpostdata({ ProdDetails: postData })).unwrap();
      setMessageType("success");
      setMessageData(`Successfully added ${postData?.length > 1 ? `${postData?.length} products` : "1 product"}`);
      resetAll();
    } catch (error) {
      console.error("Bulk product submit error:", error);
      setMessageType("error");
      setMessageData("Failed to add products. Please try again.");
    } finally {
      setIsSubmitting(false);
    }
  }, [products, validationRules, AppId, CompId, resetAll, dispatch, UserId, BranchId]);

  const buildColumnMapping = useCallback(() => {
    const columns = [
      { id: 'productName', index: 0 },
      { id: 'uom', index: 1 },
      { id: 'nou', index: 2 },
      { id: 'mrp', index: 3 },
      { id: 'salePrice', index: 4 },
      { id: 'category', index: 5 },
    ];

    // Add conditional columns based on field visibility
    if (hasField('Sub Category')) {
      columns.push({ id: 'subCategory', index: 6 });
    }

    if (hasField('Sub Category') && hasField('Brand')) {
      columns.push({ id: 'brand', index: 'brand' });
    }

    if (hasField('WholeSale Price')) {
      columns?.push({ id: 'whSalePrice', index: 'whSalePrice' })
    }

    if (hasField('EMI Allowed')) {
      columns.push({ id: 'emiAllowed', index: 'emiAllowed' });
    }

    if (hasField('Auto Generate QRCode')) {
      columns.push({ id: 'autoGenerateQrcode', index: 'autoGenerateQrcode' });
      columns.push({ id: 'qrcode', index: 'qrcode' });
    }

    if (hasField('Stock Maintenance')) {
      columns.push({ id: 'stockMaintenance', index: 'stockMaintenance' });
      columns.push({ id: 'lowStockCount', index: 'lowStockCount' });
    }

    if (hasField('Token Maintenance')) {
      columns.push({ id: 'tokenMaintenance', index: 'tokenMaintenance' });
    }

    if (hasField('Amount Per Piece')) {
      columns.push({ id: 'amountPerPiece', index: 'amountPerPiece' });
      columns.push({ id: 'perPieceAmount', index: 'perPieceAmount' });
      columns.push({ id: 'autoGenerateOnePcQrcode', index: 'autoGenerateOnePcQrcode' });
      columns.push({ id: 'onePcQrcode', index: 'onePcQrcode' });
      columns.push({ id: 'noOfPieceInside', index: 'noOfPieceInside' });
    }

    if (hasField('Product Type')) {
      columns.push({ id: 'productType', index: 'productType' });
    }

    if (hasField('Tax')) {
      columns.push({ id: 'tax', index: 7 });
    }

    if (hasField('Cess')) {
      columns.push({ id: 'cess', index: 'cess' });
    }

    if (hasField('Discount Type')) {
      columns.push({ id: 'discountType', index: 'discountType' });
    }

    if (hasField('Discount Limit')) {
      columns.push({ id: 'discountLimit', index: 'discountLimit' });
    }

    if (hasField('HSN')) {
      columns.push({ id: 'hsnCode', index: 'hsnCode' });
    }

    if (hasField('Part Number')) {
      columns.push({ id: 'partNumber', index: 'partNumber' });
    }

    if (hasField('Rack')) {
      columns.push({ id: 'rack', index: 'rack' });
    }

    if (hasField('Batch Number')) {
      columns.push({ id: 'batchNumber', index: 'batchNumber' });
    }

    if (hasField('Model Number')) {
      columns.push({ id: 'modelNumber', index: 'modelNumber' });
    }

    if (hasField('IMEI 1')) {
      columns.push({ id: 'imei1', index: 'imei1' });
    }

    if (hasField('IMEI 2')) {
      columns.push({ id: 'imei2', index: 'imei2' });
    }

    if (hasField('Serial Number')) {
      columns.push({ id: 'serialNumber', index: 'serialNumber' });
    }

    if (hasField('MacId')) {
      columns.push({ id: 'macId', index: 'macId' });
    }

    if (hasField('Manufacture Date')) {
      columns.push({ id: 'manufactureDate', index: 'manufactureDate' });
    }

    if (hasField('Expire Date')) {
      columns.push({ id: 'expireDate', index: 'expireDate' });
    }

    if (hasField('Expiry Notification Days')) {
      columns.push({ id: 'expiryNotificationDays', index: 'expiryNotificationDays' });
    }

    if (hasField('Available From')) {
      columns.push({ id: 'availableFrom', index: 'availableFrom' });
    }

    if (hasField('Available To')) {
      columns.push({ id: 'availableTo', index: 'availableTo' });
    }

    return columns;
  }, [hasField]);

  // Memoize the column mapping
  const columnMapping = useMemo(() => buildColumnMapping(), [buildColumnMapping]);

  // Helper function to get current column position
  const getCurrentColumnIndex = useCallback((cellId) => {
    // Extract field name from cellId (e.g., "0-brand" -> "brand", "0-1" -> find by index 1)
    const [rowStr, fieldStr] = cellId?.split('-');

    if (isNaN(fieldStr)) {
      // It's a field name like "brand"
      return columnMapping.findIndex(col => col.id === fieldStr);
    } else {
      // It's a numeric index
      const numericIndex = parseInt(fieldStr);
      return columnMapping.findIndex(col => col.index === numericIndex);
    }
  }, [columnMapping]);

  // Helper function to build cell ID
  const buildCellId = useCallback((rowIndex, columnIndex) => {
    const column = columnMapping[columnIndex];
    if (!column) return null;

    return `${rowIndex}-${column.index}`;
  }, [columnMapping]);

  // Updated handleKeyDown function
  const handleKeyDown = useCallback(async (e, rowIndex, currentCellId) => {
    const totalRows = products?.length;
    const totalCols = columnMapping?.length;

    // Get current column index
    const currentColIndex = getCurrentColumnIndex(currentCellId);

    const moveCell = (r, c) => {
      const cellId = buildCellId(r, c);
      if (cellId) {
        setSelectedCell(cellId);
      }
    };

    switch (e.key) {
      case "Tab":
        e.preventDefault();
        if (currentColIndex < totalCols - 1) {
          moveCell(rowIndex, currentColIndex + 1);
        } else if (rowIndex < totalRows - 1) {
          moveCell(rowIndex + 1, 0);
        } else {
          addNewRow();
          setTimeout(() => moveCell(totalRows, 0), 0);
        }
        break;

      case "Enter":
        e.preventDefault();
        const prodName = products?.find((p, idx) => idx === rowIndex)?.productName;
        if (prodName) {
          const qrResponse = await dispatch(getQrcodeData({ QRCode: prodName })).unwrap();
          if (qrResponse?.data?.statusCode === 1 && qrResponse?.data?.data?.filter((item) => item?.AppId === AppId && item?.CompId === CompId && item?.BranchId === BranchId)?.length > 0) {
            setMessageType("error");
            setMessageData("Barcode already exists");
            return;
          }
        }
        if (rowIndex > 0) {
          moveCell(rowIndex - 1, currentColIndex);
        } else {
          addNewRow();
          setSelectedCell(null);
          setTimeout(() => moveCell(rowIndex, currentColIndex), 0);
        }
        break;

      case "ArrowUp":
        if (rowIndex > 0) {
          moveCell(rowIndex - 1, currentColIndex);
        } else {
          addNewRow();
          setSelectedCell(null);
          setTimeout(() => moveCell(rowIndex, currentColIndex), 0);
        }
        break;
      case "ArrowDown":
        if (rowIndex < totalRows - 1) {
          moveCell(rowIndex + 1, currentColIndex);
        }
        break;

      // case "ArrowLeft":
      //   if (currentColIndex > 0) {
      //     moveCell(rowIndex, currentColIndex - 1);
      //   }
      //   break;

      // case "ArrowRight":
      //   if (currentColIndex < totalCols - 1) {
      //     moveCell(rowIndex, currentColIndex + 1);
      //   }
      //   break;

      default:
        break;
    }
  }, [products?.length, addNewRow, columnMapping, getCurrentColumnIndex, buildCellId, dispatch, AppId, CompId, BranchId, setMessageType, setMessageData]);

  // --- Focus management ---
  useEffect(() => {
    if (selectedCell) {
      const el = document.querySelector(`[data-cell="${selectedCell}"]`);
      el?.focus();
    }
  }, [selectedCell]);

  useEffect(() => {
    debouncedProductLookup.current = debounce(async (enteredValue, rowIndex) => {
      // Use refs or stable values for dispatch, AppId, etc.
      if (enteredValue && enteredValue?.length >= 6) {
        try {
          const response = await dispatch(
            getLayoutsearch({
              AppId,
              CompId,
              BranchId,
              ProdName: enteredValue,
            })
          ).unwrap();

          const found = response?.data?.data?.[0];
          if (response?.data?.statusCode === 1 && found?.ProdName && found?.QrBasedSearch === null && found?.SearchType === 'N') {
            setProducts(prev =>
              prev.map((p, idx) => {
                const index = rowIndex === 0 && !isMobile ? rowIndex + 1 : rowIndex;
                return idx === index
                  ? {
                    ...p,
                    productName: found.ProdName,
                    barcode: enteredValue,
                    productImage: found.ImageUrl,
                  }
                  : p
              })
            );
            // setRowToSubmit(rowIndex);
          } else if (response?.data?.statusCode === 1 && found?.ProdName && found?.QrBasedSearch === 'Y' && found?.SearchType === 'Y') {
            setProducts(prev =>
              prev.map((p, idx) =>
                idx === rowIndex ? { ...p, productName: "" } : p
              )
            );
            setMessageType("error");
            setMessageData("Product Already Exists");
          }
          // setTimeout(() => validateField(id, field, value, updatedRow), 0);
          // else {
          //   setProducts(prev =>
          //     prev.map((p, idx) =>
          //       idx === rowIndex ? { ...p, productName: "" } : p
          //     )
          //   );
          //   setMessageType("error");
          //   setMessageData("Product Details not found");
          // }    
        } catch {
          setProducts(prev =>
            prev.map((p, idx) =>
              idx === rowIndex ? { ...p, productName: "" } : p
            )
          );
          setMessageType("error");
          setMessageData("Product Details not found");
        }
      }
    }, 300);
    try {
      dispatch(changeBreadCrumb({ items: items }));
    } catch (err) {
      console.log(err, 'err');
    }
  }, []);

  useEffect(() => {
    if (!voiceData) return;

    // Extract UOM once
    const matchedUom = selectOptions.uom?.find(
      (u) => u.label?.toLowerCase() === voiceData.uom?.toLowerCase()
    );

    const baseData = {
      productName: voiceData.product,
      nou: voiceData.qty || "1",
      uom: matchedUom?.value,
      uomName: matchedUom?.label,
      mrp: voiceData.price,
      salePrice: voiceData.price,
    };

    // Check for duplicate
    const duplicateExists = products.some(row =>
      row.productName?.trim().toLowerCase() === baseData.productName?.trim().toLowerCase() &&
      row.nou === baseData.nou &&
      row.uom === baseData.uom
    );

    if (duplicateExists) {
      setMessageType("error");
      setMessageData("Product Already exists");
      setVoiceData(null);
      return;
    }

    setProducts((prev) => {
      // Find the first row with an empty product name (if any)
      const firstEmptyRowIndex = prev.findIndex(
        (row) => !row.productName || row.productName.trim() === ""
      );

      if (firstEmptyRowIndex !== -1) {
        // Update existing row
        const updatedProducts = [...prev];
        const rowToUpdate = { ...updatedProducts[firstEmptyRowIndex], ...baseData };

        // Move updated row to top
        updatedProducts.splice(firstEmptyRowIndex, 1);
        return [rowToUpdate, ...updatedProducts];
      } else {
        // Create a new row at the top
        const newRow = createNewRow(baseData);
        return [newRow, ...prev];
      }
    });

    // Clear the voiceData after processing
    setVoiceData(null);
  }, [voiceData, createNewRow, selectOptions.uom, products]);

  useEffect(() => {
    if (searchText !== "" && searchText !== null && searchText?.length !== 0 && searchText !== undefined) {
      handleQrScan(searchText);
    }
  }, [searchText])

  console.log(products, 'productsproducts')


  useEffect(() => {
    debouncedHSNLookup.current = debounce(async (value) => {
      if (!value) {
        setHsnDetails([]);
        return;
      }
      try {
        const response = await dispatch(getHsnData(value)).unwrap();
        if (response?.data?.statusCode === 1) {
          setHsnDetails(response?.data?.data || []);
        } else {
          setHsnDetails([]);
        }
      } catch {
        setHsnDetails([]);
      }
    }, 400);
  }, [dispatch]);

  // --- Error helper ---
  const getError = useCallback((id, field) => errors[`${id}-${field}`], [errors]);

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

  const handleQrScan = async (value) => {
    const barcodeExists = products.some(
      p => p.barcode && p.barcode.toLowerCase() === value?.toLowerCase()
    );

    if (barcodeExists) {
      setMessageType("error");
      setMessageData("Barcode Already Exists");
      stopScannerFromParent();
      return;
    }

    const firstEmptyRowIndex = products?.findIndex(
      (row) => !row.productName || row.productName.trim() === ""
    );

    if (firstEmptyRowIndex === -1) {
      addNewRow();
      debouncedProductLookup.current(value, 0);
    } else {
      debouncedProductLookup.current(value, firstEmptyRowIndex);
    }

    dispatch(changeSearchedData(null));
    stopScannerFromParent();
  };

  const handleFieldSetupSubmit = async () => {

    const postData = {
      "AppId": AppId,
      "CompId": CompId,
      "BranchId": BranchId,
      "Type": "GB",
      "FormType": "Product",
      "TypeId": categoryId,
      "ConfigDtl": selectedFields?.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);
      await getFieldSetup();
    } else {
      setMessageType("error");
      setMessageData("Failed to set up fields");
    }
  }

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

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

  const handleHSNChange = (id, value) => {
    handleInputChange(id, "hsnCode", value);
    setSelectedHsn(value);
    debouncedHSNLookup.current(value);
  };

  const handleBrowseImages = async (productName, rowIndex) => {
    if (productName) {
      let response = await dispatch(onlineimages(productName)).unwrap();
      setImageModal(true);
      setOnlineImageData(response?.data?.data);
      setImageModalRowIndex(rowIndex);
      setSelectedImage(null);
    }
  };

  const handleOnlineImageModalClose = () => {
    setImageModal(false);
    setOnlineImage(null);
  };

  const handleSubmitImage = async () => {
    let response = await fetch(selectedImage.image);
    let data = await response?.blob();
    let metadata = { type: 'image/jpeg' };
    let file = new File([data], 'image.jpg', metadata);
    let uploadImgData = await dispatch(uploadImage(file)).unwrap();
    if (uploadImgData?.data?.status) {
      setOnlineImage(uploadImgData?.data?.image);
    }
    setProducts(prev =>
      prev.map((p, idx) =>
        idx === imageModalRowIndex
          ? { ...p, productImage: uploadImgData?.data?.image }
          : p
      )
    );
    setImageModal(false);
  };
  const handleQrcode = useCallback(() => {
    setOpenScanner(true); // directly open scanner
  }, []);

  const stopScannerFromParent = useCallback(() => {
    try {
      if (scannerRef?.current && scannerRef.current.isRunning) {
        scannerRef.current.stopScanner();
      }
    } catch (err) {
      console.warn("Scanner not running, skip stop:", err);
    }
    setOpenScanner(false);
  }, []);

  const handleQrData = useCallback((value, err) => {
    if (err && err?.error) {
      setMessageData(err?.error);
      setMessageType("error");
    }
    dispatch(changeSearchedData(value));
    stopScannerFromParent();
    setOpenScanner(false);
  }, [dispatch, stopScannerFromParent]);
  // --- Render ---
  return (
    <div className="product-form-container">
      <Messages messageType={messageType} messageData={messageData} onComplete={() => { setMessageData(null); setMessageType(null); }} />
      <div className="excel-container">
        {/* Toolbar */}
        <div className="toolbar">
          <div className="toolbar-row">
            <div className="toolbar-left">
              <div className="search-box">
                <Search size={16} className="search-icon" />
                <input
                  type="text"
                  placeholder="Search products..."
                  value={searchTerm}
                  onChange={e => setSearchTerm(e.target.value)}
                  className="search-input"
                />
              </div>
            </div>
            <div className="toolbar-right">
              {isMobile && window.innerWidth <= 768 && (
                <BiBarcodeReader
                  // className="search-icon barcode-scanner-icon"
                  onClick={() => handleQrcode()}
                  style={{ cursor: 'pointer', marginLeft: '8px' }}
                />
              )}
              <EnhancedVoiceForm
                setVoiceData={setVoiceData}
                uomNames={["kg", "g", "ltr", "pcs", 'kgs']}
              />
              <Tooltip title="Field Setup">
                <div className="btn btn--info" onClick={handleFieldSetup}><MdOutlineAppRegistration size={19} /></div>
              </Tooltip>
              <button onClick={resetAll} className="btn btn--warning" disabled={isSubmitting}>
                <RotateCcw size={14} /> Reset
              </button>
              <button onClick={addNewRow} className="btn btn--success" disabled={isSubmitting}>
                <Plus size={14} /> Add Row
              </button>
              <button onClick={handleSubmit} className="btn btn--primary" disabled={isSubmitting || products?.length === 0}>
                <Save size={14} />
                {isSubmitting ? "Submitting..." : `Submit (${products?.length})`}
              </button>
            </div>
          </div>
        </div>
        {/* Table */}
        <div className="table-container" ref={tableRef} style={{ height: "72vh" }}>
          <table className="excel-table">
            <thead>
              <tr>
                <th>#</th>
                <th style={{ width: "300px !important" }}>Product Name *</th>
                <th>
                  UOM *
                  <DefaultSettingPopover
                    popOverHeading="Set Default UOM"
                    field="uom"
                    options={selectOptions.uom}
                    onSubmit={handleDefaultSetting}
                    currentDefault={defaults.uom}
                  />
                </th>
                <th>No. of Units *</th>
                <th>MRP *</th>
                <th>Sale Price *</th>
                {hasField('WholeSale Price') && <th>Wholesale/Special Price</th>}
                <th>
                  Category *
                  <DefaultSettingPopover
                    currentDefault={selectedDefaultCategory}
                    popOverHeading="Set Default Category"
                    field="category"
                    options={defaultCategories}
                    onSubmit={handleDefaultSetting}
                  />
                </th>
                {hasField('Sub Category') && <th>
                  Sub-Category
                  <DefaultSettingPopover
                    currentDefault={selectedDefaultSubCategory}
                    popOverHeading="Set Default Sub-Category"
                    field="subCategory"
                    options={defaultSubCategories}
                    onSubmit={handleDefaultSetting}
                    checkBoxHeading={'Apply to all selected category rows'}
                    showField={defaultCategories?.length > 0 && selectedDefaultCategory ? `Selected Category : ${defaultCategories?.find(cat => cat.value === selectedDefaultCategory)?.label}` : null}
                  />
                </th>}
                {(hasField('Sub Category') && hasField('Brand')) && <th>Brand
                  <DefaultSettingPopover
                    showField={defaultSubCategories?.length > 0 && selectedDefaultSubCategory ? `Selected Sub-Category : ${defaultSubCategories?.find(subCat => subCat.value === selectedDefaultSubCategory)?.label}` : null}
                    currentDefault={selectedDefaultBrand}
                    popOverHeading="Set Default Brand"
                    field="brand"
                    options={defaultBrands}
                    onSubmit={handleDefaultSetting}
                    checkBoxHeading={'Apply to all selected sub-category rows'}
                  />
                </th>}
                {hasField('EMI Allowed') && <th>EMI Allowed</th>}
                {hasField('Auto Generate QRCode') && <th>Auto Generate QRCode</th>}
                {hasField('Auto Generate QRCode') && <th>Scanner/AddQrCode</th>}
                {hasField('Stock Maintenance') && <th>Stock Maintenance</th>}
                {hasField('Stock Maintenance') && <th>Low Stock Count</th>}
                {hasField('Token Maintenance') && <th>Token Maintenance</th>}
                {hasField('Amount Per Piece') &&
                  <>
                    <th>Amount Per Piece</th>
                    <th>Per Piece Amount</th>
                    <th>Auto Generate One Piece Qrcode</th>
                    <th>Scanner/AddOnePcQrCode</th>
                    <th>No. of Piece Inside</th>
                  </>
                }
                {hasField('Product Type') && <th>Product Type</th>}
                {hasField('Tax') && <th>
                  Tax % *
                  <DefaultSettingPopover
                    popOverHeading="Set Default Tax"
                    field="tax"
                    options={selectOptions.tax}
                    onSubmit={handleDefaultSetting}
                    currentDefault={defaults.tax}
                  />
                </th>}
                {hasField('Cess') && <th>Cess</th>}
                {hasField('Discount Type') && <th>Discount Type</th>}
                {hasField('Discount Limit') && <th>Discount Limit</th>}
                {hasField('HSN') && <th>HSN Code</th>}
                {hasField('Part Number') && <th>Part Number</th>}
                {hasField('Rack') && <th>Rack</th>}
                {hasField('Batch Number') && <th>Batch Number</th>}
                {hasField('Model Number') && <th>Model Number</th>}
                {hasField('IMEI 1') && <th>IMEI 1</th>}
                {hasField('IMEI 2') && <th>IMEI 2</th>}
                {hasField('Serial Number') && <th>Serial Number</th>}
                {hasField('MacId') && <th>MacId</th>}
                {hasField('Manufacture Date') && <th>Manufacture Date</th>}
                {hasField('Expire Date') && <th>Expire Date</th>}
                {hasField('Expiry Notification Days') && <th>Expiry Notification Days</th>}
                {hasField('Available From') && <th>Available From</th>}
                {hasField('Available To') && <th>Available To</th>}
                {hasField('Product Image') && <th>Product Image</th>}
                <th>Delete</th>
              </tr>
            </thead>
            <tbody>
              {/* {products.length === 0 ? (
                <tr>
                  <td colSpan={document.querySelectorAll("thead tr th").length} className="no-products-message">
                    <div style={{ textAlign: 'left' }}>No products yet. Click{" "}
                      <strong onClick={addNewRow} style={{ cursor: "pointer", color: "#007bff" }}>
                        Add Row
                      </strong>{" "}
                      to start.</div>
                  </td>
                </tr>
              ) : (
              )} */}
              {filteredProducts?.map((product, rowIndex) => (
                <tr key={product.id}
                  className={
                    ["productName", "nou", "uom"].some(
                      field => product[field] === null || product[field] === undefined || product[field] === ""
                    )
                      ? "incomplete-row"
                      : ""
                  }
                >
                  {/* Row Number */}
                  <td className="row-number" onClick={() => insertRowAbove(rowIndex)} title="Click to add row above">
                    {rowIndex + 1}
                  </td>
                  {/* Product Name */}
                  <td >
                    {/* <div className="error-text-wrap">
                      <CellInput
                        value={product.productName}
                        onChange={e => {
                          const newValue = e.target.value?.trim();

                          const barcodeExists = products.some(
                            p => p.barcode && p.barcode.toLowerCase() === newValue.toLowerCase()
                          );

                          if (barcodeExists) {
                            handleInputChange(product.id, "productName", ""); // clear field
                            setMessageType("error");
                            setMessageData("Barcode Already Exists");
                            return;
                          }

                          handleInputChange(product.id, "productName", e.target.value)
                          debouncedProductLookup.current(e.target.value, rowIndex);
                        }}
                        onFocus={() => setSelectedCell(`${rowIndex}-0`)}
                        onKeyDown={e => handleKeyDown(e, rowIndex, `${rowIndex}-0`)}
                        dataCell={`${rowIndex}-0`}
                        dataBarcode={true}
                        placeholder="Enter product name..."
                        hasError={!!getError(product.id, "productName")}
                      />
                      {getError(product.id, "productName") && <span className="error-text">{getError(product.id, "productName")}</span>}

                    </div> */}

                    <div className="error-text-wrap">
                      <div className="input-with-scanner">
                        <CellInput
                          value={product.productName}
                          onChange={e => {
                            const newValue = e.target.value?.trim();

                            const barcodeExists = products.some(
                              p => p.barcode && p.barcode.toLowerCase() === newValue?.toLowerCase()
                            );

                            if (barcodeExists) {
                              handleInputChange(product.id, "productName", ""); // clear field
                              setMessageType("error");
                              setMessageData("Barcode Already Exists");
                              return;
                            }

                            handleInputChange(product.id, "productName", e.target.value)
                            debouncedProductLookup.current(e.target.value, rowIndex);
                          }}
                          onFocus={() => setSelectedCell(`${rowIndex}-0`)}
                          onKeyDown={e => handleKeyDown(e, rowIndex, `${rowIndex}-0`)}
                          dataCell={`${rowIndex}-0`}
                          dataBarcode={true}
                          placeholder="Enter product name..."
                          hasError={!!getError(product.id, "productName")}
                        />


                      </div>
                      {getError(product.id, "productName") && (
                        <span className="error-text">{getError(product.id, "productName")}</span>
                      )}
                    </div>
                  </td>
                  {/* UOM */}
                  <td>
                    <div className="error-text-wrap">
                      <CellSelect
                        value={product.uom}
                        onChange={e => handleInputChange(product.id, "uom", e.target.value)}
                        onKeyDown={e => handleKeyDown(e, rowIndex, `${rowIndex}-1`)}
                        dataCell={`${rowIndex}-1`}
                        options={selectOptions.uom}
                        hasError={!!getError(product.id, "uom")}
                        placeholder="Select UOM"
                        onClick={() => setSelectedCell(`${rowIndex}-1`)}
                      />
                      {getError(product.id, "uom") && <span className="error-text">{getError(product.id, "uom")}</span>}
                    </div>
                  </td>
                  {/* No. of Units */}
                  <td>
                    <div className="error-text-wrap">
                      <CellInput
                        type="number"
                        value={product.nou}
                        onChange={e => handleInputChange(product.id, "nou", e.target.value)}
                        onKeyDown={e => {
                          if (
                            !(
                              (e.key >= "0" && e.key <= "9") ||
                              ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                            )
                          ) {
                            e.preventDefault();
                          }
                          handleKeyDown(e, rowIndex, `${rowIndex}-2`)
                        }}
                        onFocus={() => setSelectedCell(`${rowIndex}-2`)}
                        dataCell={`${rowIndex}-2`}
                        placeholder="0"
                        hasError={!!getError(product.id, "nou")}
                      />
                      {getError(product.id, "nou") && <span className="error-text">{getError(product.id, "nou")}</span>}
                    </div>
                  </td>
                  {/* MRP */}
                  <td>
                    <div className="error-text-wrap">
                      <CellInput
                        type="number"
                        value={product.mrp}
                        onChange={e => handleInputChange(product.id, "mrp", e.target.value)}
                        onKeyDown={e => {
                          if (
                            !(
                              (e.key >= "0" && e.key <= "9") ||
                              ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                            )
                          ) {
                            e.preventDefault();
                          }
                          handleKeyDown(e, rowIndex, `${rowIndex}-3`);
                        }}
                        dataCell={`${rowIndex}-3`}
                        onFocus={() => setSelectedCell(`${rowIndex}-3`)}
                        placeholder="₹ 0.00"
                        step="0.01"
                        hasError={!!getError(product.id, "mrp")}
                      />
                      {getError(product.id, "mrp") && <span className="error-text">{getError(product.id, "mrp")}</span>}
                    </div>
                  </td>
                  {/* Sale Price */}
                  <td>
                    <div className="error-text-wrap">
                      <CellInput
                        type="number"
                        value={product.salePrice}
                        onChange={e => handleInputChange(product.id, "salePrice", e.target.value)}
                        onKeyDown={e => {
                          if (
                            !(
                              (e.key >= "0" && e.key <= "9") ||
                              ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                            )
                          ) {
                            e.preventDefault();
                          }
                          handleKeyDown(e, rowIndex, `${rowIndex}-4`);
                        }}
                        dataCell={`${rowIndex}-4`}
                        onFocus={() => setSelectedCell(`${rowIndex}-4`)}
                        placeholder="₹ 0.00"
                        step="0.01"
                        hasError={!!getError(product.id, "salePrice")}
                      />
                      {getError(product.id, "salePrice") && <span className="error-text">{getError(product.id, "salePrice")}</span>}
                    </div>
                  </td>
                  {hasField('WholeSale Price') && (<td>
                    <CellInput
                      type="number"
                      onKeyDown={e => {
                        if (
                          !(
                            (e.key >= "0" && e.key <= "9") ||
                            ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                          )
                        ) {
                          e.preventDefault();
                        }
                      }}
                      value={product.whSalePrice}
                      onChange={e => handleInputChange(product.id, "whSalePrice", e.target.value)}
                      placeholder="Wholesale/Special Price"
                      onFocus={() => setSelectedCell(`${rowIndex}-whSalePrice`)}
                    />
                  </td>)}
                  {/* Category */}
                  <td>
                    <div className="error-text-wrap">
                      <CellSelect
                        value={product.category}
                        onChange={e => handleCategoryChange(product.id, e.target.value)}
                        onKeyDown={e => handleKeyDown(e, rowIndex, `${rowIndex}-5`)}
                        dataCell={`${rowIndex}-5`}
                        onClick={() => setSelectedCell(`${rowIndex}-5`)}
                        options={selectOptions.categories}
                        hasError={!!getError(product.id, "category")}
                        placeholder="Select Category"
                      />
                      {getError(product.id, "category") && <span className="error-text">{getError(product.id, "category")}</span>}
                    </div>
                  </td>
                  {/* Sub-Category */}
                  {hasField('Sub Category') && <td>
                    <CellSelect
                      value={product.subCategory}
                      onChange={e => handleSubCategoryChange(product.id, e.target.value)}
                      onKeyDown={e => handleKeyDown(e, rowIndex, `${rowIndex}-6`)}
                      dataCell={`${rowIndex}-6`}
                      onClick={() => setSelectedCell(`${rowIndex}-6`)}
                      options={product.availableSubCategories}
                      hasError={!!getError(product.id, "subCategory")}
                      placeholder="Select Sub-Category"
                    />
                  </td>}
                  {(hasField('Brand') && hasField('Sub Category')) && <td>
                    <CellSelect
                      value={product.brand || ""}
                      onChange={e => handleInputChange(product.id, "brand", e.target.value)}
                      options={product.availableBrands || []} // define your brand options
                      placeholder="Select Brand"
                      onClick={() => setSelectedCell(`${rowIndex}-brand`)}
                    />
                  </td>}
                  {/* EMI Allowed */}
                  {hasField('EMI Allowed') && <td>
                    <Radio.Group
                      value={product.emiAllowed}
                      onChange={e => handleInputChange(product.id, "emiAllowed", e.target.value)}
                      options={[
                        { label: "Yes", value: "Yes" },
                        { label: "No", value: "No" }
                      ]}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </td>}
                  {/* Auto Generate QRCode */}
                  {hasField('Auto Generate QRCode') && <>
                    <td>
                      <Radio.Group
                        value={product.autoGenerateQrcode}
                        onChange={e => {
                          const val = e.target.value;
                          handleInputChange(product.id, "autoGenerateQrcode", val);
                          handleInputChange(product.id, "qrcode", "");
                        }}
                        options={[
                          { label: "Yes", value: "Yes" },
                          { label: "No", value: "No" }
                        ]}
                        optionType="button"
                        buttonStyle="solid"
                      />
                    </td>
                    {/* Scanner/AddQrCode */}
                    {product.autoGenerateQrcode === "No" ? (
                      <td>
                        <CellInput
                          value={product.qrcode}
                          onChange={e => handleInputChange(product.id, "qrcode", e.target.value)}
                          placeholder="Scan/Add QR"
                          onFocus={() => setSelectedCell(`${rowIndex}-qrcode`)}
                        />
                      </td>
                    ) : (<td style={{ textAlign: 'center', color: '#999', cursor: 'not-allowed' }}>-</td>)}
                  </>}
                  {hasField('Stock Maintenance') && <>
                    {/* Stock Maintenance */}
                    <td>
                      <Radio.Group
                        value={product.stockMaintenance}
                        onChange={e => {
                          const val = e.target.value;
                          handleInputChange(product.id, "stockMaintenance", val);
                          if (val === "Yes") {
                            handleInputChange(product.id, "lowStockCount", 0);
                          } else {
                            handleInputChange(product.id, "lowStockCount", undefined);
                          }
                        }}
                        options={[
                          { label: "Yes", value: "Yes" },
                          { label: "No", value: "No" }
                        ]}
                        optionType="button"
                        buttonStyle="solid"
                      />
                    </td>
                    {/* Low Stock Count */}
                    {product.stockMaintenance === "Yes" ? (
                      <td>
                        <CellInput
                          type="number"
                          onKeyDown={e => {
                            if (
                              !(
                                (e.key >= "0" && e.key <= "9") ||
                                ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                              )
                            ) {
                              e.preventDefault();
                            }
                          }}
                          value={product?.lowStockCount}
                          onChange={e => handleInputChange(product.id, "lowStockCount", e.target.value)}
                          placeholder="0"
                          onFocus={() => setSelectedCell(`${rowIndex}-lowStockCount`)}
                        />
                      </td>
                    ) : (
                      <td style={{ textAlign: 'center', color: '#999', cursor: 'not-allowed' }}>-</td>
                    )}
                  </>}
                  {/* Token Maintenance */}
                  {hasField('Token Maintenance') && <td>
                    <Radio.Group
                      value={product.tokenMaintenance}
                      onChange={e => handleInputChange(product.id, "tokenMaintenance", e.target.value)}
                      options={[
                        { label: "Yes", value: "Yes" },
                        { label: "No", value: "No" }
                      ]}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </td>}
                  {/* Amount Per Piece */}
                  {hasField('Amount Per Piece') && <>
                    <td>
                      <Radio.Group
                        value={product.amountPerPiece}
                        onChange={e => {
                          const val = e.target.value;
                          handleInputChange(product.id, "amountPerPiece", val);
                          if (val === "Yes") {
                            handleInputChange(product.id, "perPieceAmount", 0);
                          } else {
                            handleInputChange(product.id, "perPieceAmount", undefined);
                            handleInputChange(product.id, "autoGenerateOnePcQrcode", 'No');
                            handleInputChange(product.id, "onePcQrcode", "");
                            handleInputChange(product.id, "noOfPieceInside", "")
                          }
                        }}
                        options={[
                          { label: "Yes", value: "Yes" },
                          { label: "No", value: "No" }
                        ]}
                        optionType="button"
                        buttonStyle="solid"
                      />
                    </td>
                    {/* Per Piece Amount, Auto Generate One Piece Qrcode, Scanner/AddOnePcQrCode, No. of Piece Inside */}
                    {product.amountPerPiece === "Yes" ? (
                      <>
                        <td>
                          <CellInput
                            type="number"
                            onKeyDown={e => {
                              if (
                                !(
                                  (e.key >= "0" && e.key <= "9") ||
                                  ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                                )
                              ) {
                                e.preventDefault();
                              }
                            }}
                            value={product.perPieceAmount}
                            onChange={e => handleInputChange(product.id, "perPieceAmount", e.target.value)}
                            placeholder="Amount"
                            onFocus={() => setSelectedCell(`${rowIndex}-perPieceAmount`)}
                          />
                        </td>
                        <td>
                          <Radio.Group
                            value={product.autoGenerateOnePcQrcode}
                            onChange={e => {
                              const val = e.target.value;
                              handleInputChange(product.id, "autoGenerateOnePcQrcode", val);
                              handleInputChange(product.id, "onePcQrcode", "");
                            }}
                            options={[
                              { label: "Yes", value: "Yes" },
                              { label: "No", value: "No" }
                            ]}
                            optionType="button"
                            buttonStyle="solid"
                          />
                        </td>
                        {product.autoGenerateOnePcQrcode === "No" ? (
                          <td>
                            <CellInput
                              value={product.onePcQrcode}
                              onChange={e => handleInputChange(product.id, "onePcQrcode", e.target.value)}
                              placeholder="Scan/Add OnePc QR"
                              onFocus={() => setSelectedCell(`${rowIndex}-onePcQrcode`)}
                            />
                          </td>
                        ) : (
                          <td style={{ textAlign: 'center', color: '#999', cursor: 'not-allowed' }}>-</td>
                        )}
                        <td>
                          <CellInput
                            type="number"
                            onKeyDown={e => {
                              if (
                                !(
                                  (e.key >= "0" && e.key <= "9") ||
                                  ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                                )
                              ) {
                                e.preventDefault();
                              }
                            }}
                            value={product.noOfPieceInside}
                            onChange={e => handleInputChange(product.id, "noOfPieceInside", e.target.value)}
                            placeholder="No. of Piece"
                            onFocus={() => setSelectedCell(`${rowIndex}-noOfPieceInside`)}
                          />
                        </td>
                      </>
                    ) : (
                      <>
                        <td style={{ textAlign: 'center', color: '#999', cursor: 'not-allowed' }}>-</td>
                        <td style={{ textAlign: 'center', color: '#999', cursor: 'not-allowed' }}>-</td>
                        <td style={{ textAlign: 'center', color: '#999', cursor: 'not-allowed' }}>-</td>
                        <td style={{ textAlign: 'center', color: '#999', cursor: 'not-allowed' }}>-</td>
                      </>
                    )}
                  </>}
                  {/* Product Type */}
                  {hasField('Product Type') && <td>
                    <CellSelect
                      value={product.productType}
                      onChange={e => handleInputChange(product.id, "productType", e.target.value)}
                      options={productTypeData?.filter(pt => pt?.ConfigName !== 'Others')?.map(pt => ({ label: pt.ConfigName, value: pt.ConfigId }))}
                      placeholder="Select Type"
                      onClick={() => setSelectedCell(`${rowIndex}-productType`)}
                    />
                  </td>}
                  {/* Tax */}
                  {hasField('Tax') && <td>
                    <div className="error-text-wrap">
                      <CellSelect
                        value={product.tax}
                        onChange={e => handleInputChange(product.id, "tax", e.target.value)}
                        onKeyDown={e => handleKeyDown(e, rowIndex, 7)}
                        dataCell={`${rowIndex}-7`}
                        onClick={() => setSelectedCell(`${rowIndex}-7`)}
                        options={selectOptions.tax}
                        hasError={!!getError(product.id, "tax")}
                        placeholder="Select Tax"
                      />
                      {getError(product.id, "tax") && <span className="error-text">{getError(product.id, "tax")}</span>}
                    </div>
                  </td>}
                  {/* Cess */}
                  {hasField('Cess') && <td>
                    <CellInput
                      type="number"
                      onKeyDown={e => {
                        if (
                          !(
                            (e.key >= "0" && e.key <= "9") ||
                            ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                          )
                        ) {
                          e.preventDefault();
                        }
                      }}
                      value={product.cess}
                      onChange={e => handleInputChange(product.id, "cess", e.target.value)}
                      placeholder="Cess"
                      onFocus={() => setSelectedCell(`${rowIndex}-cess`)}
                    />
                  </td>}

                  {/* Percentage/Fixed */}
                  {hasField('Discount Type') && <td>
                    <Radio.Group
                      value={product.discountType}
                      onChange={e => handleInputChange(product.id, "discountType", e.target.value)}
                      options={[
                        { label: "Percentage", value: "P" },
                        { label: "Fixed", value: "F" }
                      ]}
                      optionType="button"
                      buttonStyle="solid"
                    />
                  </td>}

                  {/* Discount Limit */}
                  {hasField('Discount Limit') && <td>
                    <div className="error-text-wrap">
                      <CellInput
                        type="number"
                        onKeyDown={e => {
                          if (
                            !(
                              (e.key >= "0" && e.key <= "9") ||
                              ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape", "Period", "."].includes(e.key)
                            )
                          ) {
                            e.preventDefault();
                          }
                        }}
                        value={product.discountLimit}
                        onChange={e => handleInputChange(product.id, "discountLimit", e.target.value)}
                        placeholder="Discount Limit"
                        onFocus={() => setSelectedCell(`${rowIndex}-discountLimit`)}
                        hasError={!!getError(product.id, "discountLimit")}
                      />
                      {getError(product.id, "discountLimit") && <span className="error-text">{getError(product.id, "discountLimit")}</span>}
                    </div>
                  </td>}

                  {/* HSN Code */}
                  {hasField('HSN') && <td>
                    <CellInput
                      value={product.hsnCode}
                      onChange={e => handleHSNChange(product.id, e.target.value)}
                      placeholder="HSN Code"
                      onFocus={() => setSelectedCell(`${rowIndex}-hsnCode`)}
                      list={`hsnList-${product.id}`}
                    />
                    {hsnDetails?.length > 0 && (
                      <datalist id={`hsnList-${product.id}`}>
                        {hsnDetails
                          .filter(item => {
                            const search = (selectedHsn || "").toLowerCase();
                            return (
                              item.HSN_CD?.toLowerCase()?.includes(search) ||
                              item.Description?.toLowerCase()?.includes(search)
                            );
                          })
                          .map((item, index) => (
                            <option
                              key={index}
                              value={item.HSN_CD}
                              label={item.Description}
                            />
                          ))}
                      </datalist>
                    )}
                  </td>}

                  {/* Part Number */}
                  {hasField('Part Number') && <td>
                    <CellInput
                      value={product.partNumber}
                      onChange={e => handleInputChange(product.id, "partNumber", e.target.value)}
                      placeholder="Part Number"
                      onFocus={() => setSelectedCell(`${rowIndex}-partNumber`)}
                    />
                  </td>}

                  {/* Rack */}
                  {hasField('Rack') && <td>
                    <CellInput
                      value={product.rack}
                      onChange={e => handleInputChange(product.id, "rack", e.target.value)}
                      placeholder="Rack"
                      onFocus={() => setSelectedCell(`${rowIndex}-rack`)}
                    />
                  </td>}

                  {/* Batch Number */}
                  {hasField('Batch Number') && <td>
                    <CellInput
                      value={product.batchNumber}
                      onChange={e => handleInputChange(product.id, "batchNumber", e.target.value)}
                      placeholder="Batch Number"
                      onFocus={() => setSelectedCell(`${rowIndex}-batchNumber`)}
                    />
                  </td>}

                  {/* Model Number */}
                  {hasField('Model Number') && <td>
                    <CellInput
                      value={product.modelNumber}
                      onChange={e => handleInputChange(product.id, "modelNumber", e.target.value)}
                      placeholder="Model Number"
                      onFocus={() => setSelectedCell(`${rowIndex}-modelNumber`)}
                    />
                  </td>}
                  {/* IMEI 1 */}
                  {hasField('IMEI 1') && <td>
                    <div className="error-text-wrap">
                      <CellInput
                        value={product.imei1}
                        onChange={e => handleInputChange(product.id, "imei1", e.target.value)}
                        placeholder="IMEI 1"
                        onFocus={() => setSelectedCell(`${rowIndex}-imei1`)}
                        hasError={!!getError(product.id, "imei1")}
                      />
                      {getError(product.id, "imei1") && <span className="error-text">{getError(product.id, "imei1")}</span>}
                    </div>
                  </td>}

                  {/* IMEI 2 */}
                  {hasField('IMEI 2') && <td>
                    <div className="error-text-wrap">
                      <CellInput
                        value={product.imei2}
                        onChange={e => handleInputChange(product.id, "imei2", e.target.value)}
                        placeholder="IMEI 2"
                        onFocus={() => setSelectedCell(`${rowIndex}-imei2`)}
                        hasError={!!getError(product.id, "imei2")}
                      />
                      {getError(product.id, "imei2") && <span className="error-text">{getError(product.id, "imei2")}</span>}

                    </div>
                  </td>}

                  {/* Serial Number */}
                  {hasField('Serial Number') && <td>
                    <CellInput
                      value={product.serialNumber}
                      onChange={e => handleInputChange(product.id, "serialNumber", e.target.value)}
                      placeholder="Serial Number"
                      onFocus={() => setSelectedCell(`${rowIndex}-serialNumber`)}
                    />
                  </td>}

                  {/* MacId */}
                  {hasField('MacId') && <td>
                    <div className="error-text-wrap">
                      <CellInput
                        value={product.macId}
                        onChange={e => handleInputChange(product.id, "macId", e.target.value)}
                        placeholder="MacId"
                        onFocus={() => setSelectedCell(`${rowIndex}-macId`)}
                        hasError={!!getError(product.id, "macId")}
                      />
                      {getError(product.id, "macId") && <span className="error-text">{getError(product.id, "macId")}</span>}
                    </div>
                  </td>}

                  {/* Manufacture Date */}
                  {hasField('Manufacture Date') && <td>
                    <DatePicker
                      value={product.manufactureDate ? dayjs(product.manufactureDate) : null}
                      onChange={(_, dateString) => {
                        handleInputChange(product.id, "manufactureDate", dateString || null);
                        // If manufacture date changes, clear expire date
                        handleInputChange(product.id, "expireDate", null);
                      }}
                      size="small"
                      style={{ width: 120 }}
                      format="YYYY-MM-DD"
                      placeholder="Manufacture"
                      allowClear
                      inputReadOnly
                    />
                  </td>}

                  {/* Expire Date */}
                  {hasField('Expire Date') && <td>
                    <DatePicker
                      value={product.expireDate ? dayjs(product.expireDate) : null}
                      onChange={(_, dateString) => handleInputChange(product.id, "expireDate", dateString || null)}
                      size="small"
                      style={{ width: 120 }}
                      format="YYYY-MM-DD"
                      placeholder="Expire"
                      allowClear
                      inputReadOnly
                      disabledDate={current => {
                        // Disable dates before manufactureDate (if set)
                        if (product.manufactureDate) {
                          return current && current.isBefore(dayjs(product.manufactureDate), "day");
                        }
                        return false;
                      }}
                    />
                  </td>}

                  {/* Expiry Notification Days */}
                  {hasField('Expiry Notification Days') && <td>
                    <CellInput
                      type="number"
                      value={product.expiryNotificationDays}
                      onChange={e => handleInputChange(product.id, "expiryNotificationDays", e.target.value)}
                      placeholder="0"
                      min={0}
                      onFocus={() => setSelectedCell(`${rowIndex}-expiryNotificationDays`)}
                      onKeyDown={e => {
                        if (
                          !(
                            (e.key >= "0" && e.key <= "9") ||
                            ["Backspace", "Tab", "ArrowLeft", "ArrowRight", "Delete", "Home", "End", "Enter", "Escape"].includes(e.key)
                          )
                        ) {
                          e.preventDefault();
                        }
                      }}
                    />
                  </td>}

                  {/* Available From */}
                  {hasField('Available From') && <td>
                    <TimePicker
                      value={product.availableFrom ? dayjs(product.availableFrom, "hh:mm a") : null}
                      onChange={(_, timeString) => {
                        handleInputChange(product.id, "availableFrom", timeString || null);
                        handleInputChange(product.id, "availableTo", null);
                      }}
                      size="small"
                      style={{ width: 110 }}
                      format="hh:mm a"
                      use12Hours
                      placeholder="From"
                      allowClear
                      inputReadOnly
                    />
                  </td>}

                  {/* Available To */}
                  {hasField('Available To') && <td>
                    <TimePicker
                      value={product.availableTo ? dayjs(product.availableTo, "hh:mm a") : null}
                      onChange={(_, timeString) => handleInputChange(product.id, "availableTo", timeString || null)}
                      size="small"
                      style={{ width: 110 }}
                      format="hh:mm a"
                      use12Hours
                      placeholder="To"
                      allowClear
                      inputReadOnly
                    />
                  </td>}
                  {/* Product Image */}
                  {/* {hasField('Product Image') &&
                    <td style={{ verticalAlign: "bottom" }}>
                      <div className="imageuploadSction">
                        <EnhancedCropUpload
                          onlineImage={imageData.onlineImage}
                          ImageLink={imageData.imageUrl}
                          updateImageUrl={updateImageUrl}
                          isProductList={isProductList}
                        />

                        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                          <button
                            className="BrowseimgaeBTN"
                            onClick={handleBrowseImages}
                            disabled={!product.productName}
                            loading={loading}
                          >
                            Browse Images
                          </button>
                        </div>
                      </div>
                    </td>} */}
                  {/* {hasField('Product Image') &&
                    <td style={{ verticalAlign: "bottom" }}>
                      <div className="imageuploadSction">
                        <CropUpload
                          key={rowIndex}
                          onlineImage={rowIndex === imageModalRowIndex ? onlineImage : null}
                          ImageLink={product.productImage}
                          setOnlineImage={setOnlineImage}
                          updateImageUrl={url => {
                            setProducts(prev =>
                              prev.map((p, idx) =>
                                idx === rowIndex ? { ...p, productImage: url } : p
                              )
                            );
                          }}
                        />
                        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                          <button
                            className="BrowseimgaeBTN"
                            onClick={() => handleBrowseImages(product?.productName, rowIndex)}
                            disabled={!product.productName}
                          >
                            Browse
                          </button>
                        </div>
                      </div>
                    </td>} */}
                  {hasField('Product Image') &&
                    <td style={{ verticalAlign: "middle", textAlign: "center" }}>
                      <div className="imageuploadSction1">
                        <FaRegEye
                          style={{ background: "none", cursor: "pointer" }}
                          size={25}
                          color={product?.productImage && "#1F9B3A"}
                          onClick={() => {
                            setImageModalRowIndex(rowIndex);
                            setUploadImageModal(true);
                            setOnlineImage(null);
                            setSelectedImage(null);
                          }} />

                      </div>
                    </td>
                  }
                  {/* Delete */}
                  <td style={{ textAlign: "center" }}>
                    <button
                      onClick={() => deleteRow(product.id)}
                      className="action-btn action-btn--delete"
                      disabled={isSubmitting}
                    >
                      <Trash2 size={12} />
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
        {/* Stats */}
        <div className="stats-bar">
          <div className="stats-item">Total Products: <strong>{products?.length}</strong></div>
          <div className="stats-item">Showing: <strong>{filteredProducts?.length}</strong> of <strong>{products?.length}</strong></div>
          <div className="stats-help">
            <div>
              <span>• Click row numbers to insert </span>
              <span>• Tab/Enter to navigate </span>
            </div>
            <div>
              <span>• Arrows to move </span>
              <span>• * = Required</span>
            </div>
          </div>
        </div>
      </div>
      {isMobile && screenWidth <= 768 && openScanner && (
        <DefaultModal
          title="Barcode Reader"
          width={800}
          open={true}
          footer={false}
          handleCancel={() => {
            handleQrData(null);
            setOpenScanner(false); // close on cancel
          }}
        >
          <BarcodeScannerTurbo
            ref={scannerRef}
            openScanner={openScanner}   // same state for both modal + scanner
            setOpenScanner={setOpenScanner}
            handleQrData={handleQrData}
            type="Search"
          />
        </DefaultModal>
      )}
      <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>
        }
      />
      <DefaultModal
        title="ONLINE IMAGE UPLOADER"
        width={800}
        open={imageModal}
        footer={
          selectedImage === null || selectedImage === undefined ? false : true
        }
        buttonText="Submit"
        children={
          <Form className="">
            <div className="productonlineImg">
              {onlineImageData?.map((item, index) => (
                <div
                  className={`singleimg ${selectedImage === item ? 'selected' : ''}`}
                  key={index}
                  onClick={() => setSelectedImage(item)}
                >
                  <img
                    src={item.image}
                    style={{ height: '100%', width: '100%' }}
                    alt="no image"
                  />
                </div>
              ))}
            </div>
          </Form>
        }
        handleSubmit={handleSubmitImage}
        handleCancel={handleOnlineImageModalClose}
      ></DefaultModal>
      <DefaultModal
        title="Product Image"
        width={500}
        open={uploadImageModal}
        footer={false}
        handleCancel={() => {
          setUploadImageModal(false);
          setOnlineImage(null);
          setImageModalRowIndex(null);
          setSelectedImage(null);
        }}
        children={
          <div className="imageuploadSction">
            <CropUpload
              key={products?.[imageModalRowIndex]?.id}
              onlineImage={onlineImage}
              ImageLink={products?.[imageModalRowIndex]?.productImage}
              updateImageUrl={url => {
                setProducts(prev =>
                  prev.map((p, idx) =>
                    idx === imageModalRowIndex ? { ...p, productImage: url } : p
                  )
                );
              }}
            />
            <Tooltip title={products?.[imageModalRowIndex]?.productName ? "" : "Please enter product name first"} >
              <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
                <button
                  className="BrowseimgaeBTN"
                  onClick={() => handleBrowseImages(products?.[imageModalRowIndex]?.productName, imageModalRowIndex)}
                  disabled={!products?.[imageModalRowIndex]?.productName}
                >
                  Browse
                </button>
              </div>
            </Tooltip>
          </div>
        }
      />
    </div>
  );
};

export default TurboAddForm;