import { useEffect, useState } from 'react';
import {
  Button,
  DatePicker,
  Input,
  Modal,
  Space,
  Spin,
  Table,
  message,
  Descriptions,
  Popover,
  Popconfirm,
  Tag,
  Select,
} from 'antd';
import {
  DownloadOutlined,
  EyeOutlined,
  CheckCircleOutlined,
} from '@ant-design/icons';
import { AddSpoilageModal } from './AddSpoilageModal';
import dayjs, { Dayjs } from 'dayjs';
import { AppContainer } from '../../components/AppContainer';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';

const ENTITY_LABEL = 'Stocks';
const ENTITY_EXPORT = ENDPOINTS.PURCHASE_EXPORT;
// const ENTITY_EXPORT_PDF = ENDPOINTS.PURCHASE_EXPORT_PDF;
const ENTITY_ENDPOINT = ENDPOINTS.PURCHASE; // e.g. '/api/purchases'

interface DataRecord {
  key: string;
  id: string;
  purchaseDate: string;
  billNo: string;
  lotNo: string;
  unit: string;
  rateType?: 'UNIT' | 'KG';
  bags?: string | number;
  weightPerBag?: string | number | null;
  quantity: string | number;
  ratePerUnit: string | number;
  grandTotal: string | number;
  costPerUnit: string | number;
  advanceAmount: string | number;
  balanceAmount: string | number;
  remainingQuantity?: string | number;
  remainingBags?: string | number;
  supplierId?: string;
  vegetableId?: string;
  cashSupplierName?: string;
  supplierName?: string;
  supplier?: { name: string };
  vegetable?: { id?: string; name: string; isFlexible?: boolean };
  status?: string;
  arrivalDate?: string;
  createdAt?: string;
  remarks?: string;
  transportFee?: string | number;
  loadingUnloadingFee?: string | number;
  otherCharges?: string | number;
  thaiyalCharges?: string | number;
  extraCharges?: string | number;
  goodsTotal?: string | number;
  surchargeTotal?: string | number;
}

// Helper to calculate stock metrics based on unit & rate_type
const getStockMetrics = (record: any) => {
  const unit = (record?.unit || 'KG').toUpperCase();
  const rawRateType = record?.rateType?.toUpperCase();
  const rateType = rawRateType || (unit === 'KG' ? 'KG' : 'UNIT');

  const totalKg = Number(record?.quantity || 0);
  const remainingKg = Number(record?.remainingQuantity || 0);
  const soldKg = Math.max(0, totalKg - remainingKg);

  const totalBags = Number(record?.bags || 0);
  const remainingBags = Number(record?.remainingBags || 0);
  const soldBags = Math.max(0, totalBags - remainingBags);

  const rate = Number(record?.ratePerUnit || 0);

  const isPureKg = unit === 'KG';
  const isUnitRate = !isPureKg && rateType === 'UNIT';
  const isKgRateBag = !isPureKg && rateType === 'KG';

  const unitLabel = unit === 'BOX' ? 'Box' : (unit === 'BAG' ? 'Bag' : unit);
  const unitPlural = unit === 'BOX' ? 'Boxes' : (unit === 'BAG' ? 'Bags' : unit);

  let rateDisplay = '';
  let rateTypeLabel = '';

  if (isPureKg) {
    rateDisplay = `₹${rate.toFixed(2)} / KG`;
    rateTypeLabel = 'Rate / KG';
  } else if (isUnitRate) {
    rateDisplay = `₹${rate.toFixed(2)} / ${unitLabel}`;
    rateTypeLabel = `Rate / ${unitLabel} (rate_type UNIT)`;
  } else {
    rateDisplay = `₹${rate.toFixed(2)} / KG`;
    rateTypeLabel = `Rate / KG (rate_type KG - ${unitLabel})`;
  }

  return {
    unit,
    rateType,
    isPureKg,
    isUnitRate,
    isKgRateBag,
    totalKg,
    remainingKg,
    soldKg,
    totalBags,
    remainingBags,
    soldBags,
    rate,
    rateDisplay,
    rateTypeLabel,
    unitLabel,
    unitPlural,
  };
};

const { RangePicker } = DatePicker;

const Stock = () => {
  const [searchText, setSearchText] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('ALL');
  // undefined = "All" (no paymentStatus param sent to backend)
  const [dateRange, setDateRange] = useState<[Dayjs, Dayjs] | null>(null);
  const [data, setData] = useState<DataRecord[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [exportLoading, setExportLoading] = useState<boolean>(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: Number(import.meta.env.VITE_PAGE_SIZE) || 10,
    total: 0,
    totalPages: 0,
  });

  // View modal state
  const [viewOpen, setViewOpen] = useState(false);
  const [viewLoading, setViewLoading] = useState(false);
  const [viewRecord, setViewRecord] = useState<any>(null);

  // Spoilage state
  const [spoilageModalOpen, setSpoilageModalOpen] = useState(false);
  const [selectedLot, setSelectedLot] = useState<any>(null);

  const handleExport = async () => {
    if (!data || data.length === 0) {
      message.warning('No data available to export');
      return;
    }
    setExportLoading(true);
    try {
      const params = new URLSearchParams();
      if (searchText) params.set('search', searchText);
      if (statusFilter && statusFilter !== 'ALL') params.set('status', statusFilter);
      if (dateRange) {
        params.set('dateFrom', dateRange[0].format('YYYY-MM-DD'));
        params.set('dateTo', dateRange[1].format('YYYY-MM-DD'));
      }

      const url = `${ENTITY_EXPORT}${params.toString() ? '?' + params.toString() : ''}`;
      const response = await jwtAxios.get(url, { responseType: 'blob' });

      const disposition = response.headers['content-disposition'];
      let fileName = `stock-${dayjs().format('YYYY-MM-DD')}.xlsx`;
      if (disposition) {
        const match = disposition.match(/filename\*?=(?:UTF-8'')?"?([^"\n;]+)"?/i);
        if (match?.[1]) fileName = decodeURIComponent(match[1]);
      }

      const blob = new Blob([response.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      const objectUrl = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = objectUrl;
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL(objectUrl);

      message.success('Stock exported successfully');
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to export stock');
    } finally {
      setExportLoading(false);
    }
  };

  const handleView = async (id: string) => {
    setViewLoading(true);
    setViewOpen(true);
    try {
      const res = await jwtAxios.get(`${ENTITY_ENDPOINT}/${id}`);
      const record = res.data?.result ?? res.data;
      setViewRecord(record);
    } catch (err: any) {
      message.error(err.response?.data?.message || `Failed to load ${ENTITY_LABEL.toLowerCase()}`);
      setViewOpen(false);
    } finally {
      setViewLoading(false);
    }
  };

  // -----------------------------
  // Fetch list — runs on initial load, page change, page-size change,
  // and whenever a search or filter is triggered.
  // -----------------------------
  const fetchData = async (
    page: number = pagination.current,
    limit: number = pagination.pageSize,
    search: string = searchText,
    range: [Dayjs, Dayjs] | null = dateRange,
    status: string = statusFilter
  ) => {
    setLoading(true);

    try {
      // Only add params to the query string when they're actually set.
      let url = ENTITY_ENDPOINT + `?page=${page}&limit=${limit}&search=${search}`;
      if (range) {
        url += `&dateFrom=${range[0].format('YYYY-MM-DD')}&dateTo=${range[1].format('YYYY-MM-DD')}`;
      }
      if (status && status !== 'ALL') {
        url += `&status=${status}`;
      }

      const res = await jwtAxios.get(url);
      const records = res.data?.result?.data || [];
      const metaInfo = res.data?.result?.meta || {};

      const formattedData = records.map((item: any) => ({
        key: item.id,
        ...item,
      }));

      setData(formattedData);
      setPagination((prev) => ({
        ...prev,
        current: metaInfo.page ?? page,
        pageSize: metaInfo.limit ?? limit,
        total: metaInfo.total ?? prev.total,
        totalPages: metaInfo.totalPages ?? prev.totalPages,
      }));
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to fetch data');
      setData([]);
    } finally {
      setLoading(false);
    }
  };

  // Initial load: first page of records.
  useEffect(() => {
    fetchData(1, pagination.pageSize, '', null, 'ALL');
  }, []);

  // -----------------------------
  // Search — onChange just updates the input text; onSearch (Enter / icon)
  // actually triggers the API call and resets to page 1.
  // -----------------------------
  const handleSearch = (value: string) => {
    fetchData(1, pagination.pageSize, value, dateRange, statusFilter);
  };

  // Date range filter — same idea.
  const handleDateRangeChange = (values: any) => {
    const range = values ? (values as [Dayjs, Dayjs]) : null;
    setDateRange(range);
    fetchData(1, pagination.pageSize, searchText, range, statusFilter);
  };

  const handleCloseLot = async (id: string) => {
    setLoading(true);
    try {
      const res = await jwtAxios.patch(`${ENTITY_ENDPOINT}/${id}/close`);
      message.success(res.data?.message || 'Lot closed successfully');
      fetchData(pagination.current, pagination.pageSize, searchText, dateRange, statusFilter);
    } catch (err: any) {
      message.error(err.response?.data?.message || 'Failed to close lot');
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: 'S.No',
      render: (_: any, __: any, index: number) => (pagination.current - 1) * pagination.pageSize + index + 1,
      width: 60,
    },
    {
      title: 'Date of Purchase',
      dataIndex: 'purchaseDate',
      ellipsis: true,
      render: (date: string) => (date ? dayjs(date).format('DD MMM YYYY') : '-'),
    },
    {
      title: 'Lot No',
      dataIndex: 'lotNo',
      ellipsis: true,
      render: (lotNo: string) => (
        <Tag color="blue" className="font-semibold">
          {lotNo || '-'}
        </Tag>
      ),
    },
    {
      title: 'Item Name',
      dataIndex: 'vegetable',
      ellipsis: true,
      render: (vegetable: DataRecord['vegetable'], record: any) => (
        <span className="font-medium text-slate-800">{vegetable?.name || record.vegetableName || '-'}</span>
      ),
    },
    {
      title: 'Balance ',
      dataIndex: 'remainingQuantity',
      render: (_: any, record: DataRecord) => {
        if (record.status === 'CLOSED') {
          return <Tag color="default">CLOSED</Tag>;
        }

        const m = getStockMetrics(record);

        if (m.isPureKg) {
          const color = m.remainingKg === 0 ? 'red' : (m.remainingKg <= m.totalKg * 0.2 ? 'orange' : 'green');
          return (
            <div className="flex items-center gap-1.5 flex-wrap">
              <Tag color={color} className="font-medium">
                {m.remainingKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG
              </Tag>
              {m.remainingKg === 0 && (
                <Tag color="volcano" title="This lot is fully depleted — the lot number can be reused">
                  ♻ Recyclable
                </Tag>
              )}
            </div>
          );
        }

        if (m.isUnitRate) {
          const color = m.remainingBags === 0 ? 'red' : (m.totalBags > 0 && m.remainingBags <= m.totalBags * 0.2 ? 'orange' : 'green');
          return (
            <div className="flex items-center gap-1.5 flex-wrap">
              <Tag color={color} className="font-medium">
                {m.remainingBags} {m.unitPlural}
              </Tag>
              {m.remainingKg > 0 && (
                <span className="text-xs text-gray-500">
                  ({m.remainingKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG)
                </span>
              )}
              {m.remainingBags === 0 && (
                <Tag color="volcano" title="This lot is fully depleted — the lot number can be reused">
                  ♻ Recyclable
                </Tag>
              )}
            </div>
          );
        }

        // isKgRateBag (stored in Bags/Boxes, rate per KG)
        const color = m.remainingKg === 0 ? 'red' : (m.totalKg > 0 && m.remainingKg <= m.totalKg * 0.2 ? 'orange' : 'green');
        return (
          <div className="flex items-center gap-1.5 flex-wrap">
            <Tag color={color} className="font-medium">
              {m.remainingKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG
            </Tag>
            <Tag color="default">
              {m.remainingBags} {m.unitPlural}
            </Tag>
            {m.remainingKg === 0 && m.remainingBags === 0 && (
              <Tag color="volcano" title="This lot is fully depleted — the lot number can be reused">
                ♻ Recyclable
              </Tag>
            )}
          </div>
        );
      },
    },
    {
      title: 'Sold Weight',
      render: (_: any, record: DataRecord) => {
        const m = getStockMetrics(record);

        if (m.isPureKg) {
          return (
            <span className="font-semibold text-blue-600">
              {m.soldKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG
            </span>
          );
        }

        if (m.isUnitRate) {
          return (
            <div>
              <span className="font-semibold text-blue-600">
                {m.soldBags} {m.unitPlural}
              </span>
              {m.soldKg > 0 && (
                <span className="text-xs text-gray-500 ml-1">
                  ({m.soldKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG)
                </span>
              )}
            </div>
          );
        }

        // isKgRateBag
        return (
          <div>
            <span className="font-semibold text-blue-600">
              {m.soldKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG
            </span>
            {m.soldBags > 0 && (
              <span className="text-xs text-gray-500 ml-1">
                ({m.soldBags} {m.unitPlural})
              </span>
            )}
          </div>
        );
      },
    },
    {
      title: 'Rate',
      dataIndex: 'ratePerUnit',
      render: (_: any, record: DataRecord) => {
        const m = getStockMetrics(record);
        let tagColor = 'purple';
        if (m.isPureKg) tagColor = 'purple';
        else if (m.isUnitRate) tagColor = 'cyan';
        else tagColor = 'blue';

        return (
          <Tag color={tagColor} className="font-semibold">
            {m.rateDisplay}
          </Tag>
        );
      },
    },
    {
      title: 'Supplier Name',
      dataIndex: 'supplier',
      ellipsis: true,
      render: (supplier: DataRecord['supplier'], record: any) =>
        supplier?.name || record.cashSupplierName || record.supplierName || 'Cash Supplier',
    },
    {
      title: 'Status',
      dataIndex: 'status',
      width: 100,
      render: (status: string) => {
        const isClosed = status === 'CLOSED';
        return (
          <Tag color={isClosed ? 'default' : 'green'} className="font-semibold">
            {isClosed ? 'CLOSED' : 'ACTIVE'}
          </Tag>
        );
      },
    },
    {
      title: 'Actions',
      width: 130,
      render: (_: any, record: any) => (
        <Space size="small">
          <Popover content="Click to View Details">
            <Button type="link" icon={<EyeOutlined />} onClick={() => handleView(record.id)} />
          </Popover>
          {record.vegetable?.isFlexible && record.status !== 'CLOSED' && (
            <Popover content="Close Flexible Lot (Deplete remaining balance)">
              <Popconfirm
                title="Close Flexible Lot"
                description={`Are you sure you want to close flexible lot "${record.lotNo}"? It will no longer be available for sale.`}
                okText="Yes, Close Lot"
                cancelText="Cancel"
                okButtonProps={{ danger: true }}
                onConfirm={() => handleCloseLot(record.id)}
              >
                <Button
                  size="small"
                  icon={<CheckCircleOutlined />}
                  style={{ color: '#d97706', borderColor: '#f59e0b' }}
                >
                  Close Lot
                </Button>
              </Popconfirm>
            </Popover>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Spin spinning={loading}>
        <AppContainer
          title={`${ENTITY_LABEL}`}
          headerAction={
            <Space>
              <Button
                icon={<DownloadOutlined />}
                style={{ color: '#52c41a', borderColor: '#52c41a' }}
                onClick={handleExport}
                loading={exportLoading}
              >
                Export
              </Button>
            </Space>
          }
        >
          {/* Toolbar Section */}
          <div className="flex justify-between items-center mb-4 pb-4 border-b border-gray-200">
            <Space>
              <Select
                value={statusFilter}
                onChange={(val) => {
                  setStatusFilter(val);
                  fetchData(1, pagination.pageSize, searchText, dateRange, val);
                }}
                style={{ width: 130 }}
                options={[
                  { value: 'ALL', label: 'All Lots' },
                  { value: 'ACTIVE', label: 'Active Lots' },
                  { value: 'CLOSED', label: 'Closed Lots' },
                ]}
              />
              <RangePicker value={dateRange as any} onChange={handleDateRangeChange} />
              <Input.Search
                placeholder="Search..."
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)} // just updates what's typed
                onSearch={handleSearch} // fires the API call (Enter / icon click)
                allowClear
                style={{ width: 200 }}
              />
            </Space>
          </div>

          {/* Table Section */}
          <Table
            rowKey="key"
            columns={columns}
            dataSource={data}
            loading={loading}
            scroll={{ x: 'max-content', y: 400 }}
            pagination={{
              current: pagination.current,
              pageSize: pagination.pageSize,
              total: pagination.total,
              showSizeChanger: true,
            }}
            onChange={(pageInfo) => {
              fetchData(pageInfo.current!, pageInfo.pageSize!, searchText, dateRange, statusFilter);
            }}
          />
          <div className="text-center mt-2">
            <Tag color="cyan">
              Page {pagination.current} of {pagination.totalPages}
            </Tag>
          </div>
        </AppContainer>

        {/* View Modal */}
        <Modal
          title="Stock Details"
          open={viewOpen}
          onCancel={() => {
            setViewOpen(false);
            setViewRecord(null);
          }}
          footer={
            <Button
              onClick={() => {
                setViewOpen(false);
                setViewRecord(null);
              }}
            >
              Close
            </Button>
          }
          width={760}
        >
          <Spin spinning={viewLoading}>
            {viewRecord && (() => {
              const m = getStockMetrics(viewRecord);
              return (
                <Descriptions column={2} bordered size="small">
                  <Descriptions.Item label="Date of Purchase">
                    {viewRecord.purchaseDate ? dayjs(viewRecord.purchaseDate).format('DD MMM YYYY') : '-'}
                  </Descriptions.Item>
                  <Descriptions.Item label="Lot No">
                    <Tag color="blue" className="font-semibold">{viewRecord.lotNo || '-'}</Tag>
                  </Descriptions.Item>

                  <Descriptions.Item label="Item Name">
                    {viewRecord.vegetable?.name || viewRecord.vegetableName || '-'}
                  </Descriptions.Item>
                  <Descriptions.Item label="Supplier Name">
                    {viewRecord.supplier?.name || viewRecord.cashSupplierName || viewRecord.supplierName || '-'}
                  </Descriptions.Item>

                  <Descriptions.Item label="Rate">
                    <Tag color="purple" className="font-semibold text-sm">{m.rateDisplay}</Tag>
                  </Descriptions.Item>
                  <Descriptions.Item label="Rate Type">
                    <Tag color="default">{m.rateTypeLabel}</Tag>
                  </Descriptions.Item>

                  <Descriptions.Item label="Purchased Stock">
                    {m.isPureKg && `${m.totalKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG`}
                    {m.isUnitRate && `${m.totalBags} ${m.unitPlural}${m.totalKg > 0 ? ` (${m.totalKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG)` : ''}`}
                    {m.isKgRateBag && `${m.totalKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG (${m.totalBags} ${m.unitPlural})`}
                  </Descriptions.Item>
                  <Descriptions.Item label="Bal (Remaining Stock)">
                    <Tag color={m.remainingKg === 0 && m.remainingBags === 0 ? 'red' : 'green'} className="font-medium">
                      {m.isPureKg && `${m.remainingKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG`}
                      {m.isUnitRate && `${m.remainingBags} ${m.unitPlural}${m.remainingKg > 0 ? ` (${m.remainingKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG)` : ''}`}
                      {m.isKgRateBag && `${m.remainingKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG (${m.remainingBags} ${m.unitPlural})`}
                    </Tag>
                  </Descriptions.Item>

                  <Descriptions.Item label="Sold Weight / Qty">
                    <span className="font-semibold text-blue-600">
                      {m.isPureKg && `${m.soldKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG`}
                      {m.isUnitRate && `${m.soldBags} ${m.unitPlural}${m.soldKg > 0 ? ` (${m.soldKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG)` : ''}`}
                      {m.isKgRateBag && `${m.soldKg.toLocaleString('en-IN', { maximumFractionDigits: 2 })} KG (${m.soldBags} ${m.unitPlural})`}
                    </span>
                  </Descriptions.Item>
                  <Descriptions.Item label="Bill No">
                    {viewRecord.billNo || '-'}
                  </Descriptions.Item>

                  <Descriptions.Item label="Cost / Unit">
                    ₹{Number(viewRecord.costPerUnit ?? 0).toFixed(2)}
                  </Descriptions.Item>
                  <Descriptions.Item label="Goods Total">
                    ₹{Number(viewRecord.goodsTotal ?? 0).toFixed(2)}
                  </Descriptions.Item>

                  {/* <Descriptions.Item label="Transport Fee">
                    ₹{Number(viewRecord.transportFee ?? 0).toFixed(2)}
                  </Descriptions.Item>
                  <Descriptions.Item label="Loading/Unloading Fee">
                    ₹{Number(viewRecord.loadingUnloadingFee ?? 0).toFixed(2)}
                  </Descriptions.Item>

                  <Descriptions.Item label="Other Charges">
                    ₹{Number(viewRecord.otherCharges ?? 0).toFixed(2)}
                  </Descriptions.Item>
                  <Descriptions.Item label="Surcharge Total">
                    ₹{Number(viewRecord.surchargeTotal ?? 0).toFixed(2)}
                  </Descriptions.Item> */}

                  <Descriptions.Item label="Extra Charges">
                    <span className="font-bold text-slate-900">₹{Number(viewRecord.extraCharges ?? 0).toFixed(2)}</span>
                  </Descriptions.Item>
                  <Descriptions.Item label="Grand Total">
                    <span className="font-bold text-slate-900">₹{Number(viewRecord.grandTotal ?? 0).toFixed(2)}</span>
                  </Descriptions.Item>
                  <Descriptions.Item label="Advance Amount">
                    ₹{Number(viewRecord.advanceAmount ?? 0).toFixed(2)}
                  </Descriptions.Item>

                  <Descriptions.Item label="Balance Amount">
                    <span className="font-semibold text-red-600">₹{Number(viewRecord.balanceAmount ?? 0).toFixed(2)}</span>
                  </Descriptions.Item>
                  <Descriptions.Item label="Arrival Date">
                    {viewRecord.arrivalDate ? dayjs(viewRecord.arrivalDate).format('DD MMM YYYY') : '-'}
                  </Descriptions.Item>

                  <Descriptions.Item label="Created At">
                    {viewRecord.createdAt ? dayjs(viewRecord.createdAt).format('DD MMM YYYY, hh:mm A') : '-'}
                  </Descriptions.Item>
                  <Descriptions.Item label="Remarks">
                    {viewRecord.remarks || '-'}
                  </Descriptions.Item>
                </Descriptions>
              );
            })()}
          </Spin>
        </Modal>

        {/* Spoilage Modals and Drawers */}
        <AddSpoilageModal
          open={spoilageModalOpen}
          selectedLot={selectedLot}
          onCancel={() => {
            setSpoilageModalOpen(false);
            setSelectedLot(null);
          }}
          onSuccess={() => {
            setSpoilageModalOpen(false);
            setSelectedLot(null);
            fetchData(pagination.current, pagination.pageSize, searchText, dateRange);
          }}
        />
      </Spin>
    </div>
  );
};

export default Stock;