import { useEffect, useState } from 'react';
import {
    Button,
    Col,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Row,
    Select,
    Space,
    message,
    Tooltip,
    Spin,
    Card,
    Upload,
    Modal,
    type UploadFile,
} from 'antd';
import {
    PlusOutlined,
    DeleteOutlined,
    WarningOutlined,
    ArrowLeftOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import { useNavigate, useParams } from 'react-router-dom';
import { AppContainer } from '../../components/AppContainer';
import jwtAxios from '../../api/axiosInstance';
import { ENDPOINTS } from '../../api/endpoints';

interface NamedOption {
    id: string;
    name: string;
}

interface SaleMeta {
    vegetables: NamedOption[];
}

interface AvailableLot {
    id: string;
    lotNo: string;
    batchIndex?: number;
    batchLabel?: string;
    remainingQuantity: string;
    remainingBags: string;
    weightPerBag: string | null;
    costPerUnit: string;
    unit: string;
    rateType: string;
    vegetable: { id: string; name: string; isFlexible?: boolean };
    supplier: { name: string };
}

export const QuickSale = () => {
    const navigate = useNavigate();
    const { id } = useParams<{ id: string }>();
    const editingId = id && id !== 'new' ? id : null;
    const [form] = Form.useForm();
    const [loading, setLoading] = useState<boolean>(false);
    const [meta, setMeta] = useState<SaleMeta>({ vegetables: [] });
    const [availableLots, setAvailableLots] = useState<Record<string, AvailableLot[]>>({});
    const [allAvailableLots, setAllAvailableLots] = useState<AvailableLot[]>([]);
    const [rowCostPerUnit, setRowCostPerUnit] = useState<Record<number, number>>({});
    const [rowSellingRate, setRowSellingRate] = useState<Record<number, number>>({});
    const [rowSaleUnit, setRowSaleUnit] = useState<Record<number, string>>({});
    const [rowLot, setRowLot] = useState<Record<number, AvailableLot | undefined>>({});

    // Upload images state
    const [fileList, setFileList] = useState<UploadFile[]>([]);
    const [previewOpen, setPreviewOpen] = useState(false);
    const [previewImage, setPreviewImage] = useState('');
    const [previewTitle, setPreviewTitle] = useState('');

    const handlePreview = async (file: UploadFile) => {
        if (!file.url && !file.preview && file.originFileObj) {
            file.preview = await new Promise((resolve) => {
                const reader = new FileReader();
                reader.readAsDataURL(file.originFileObj as Blob);
                reader.onload = () => resolve(reader.result as string);
            });
        }
        setPreviewImage(file.url || (file.preview as string));
        setPreviewOpen(true);
        setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
    };

    const fetchMeta = async () => {
        try {
            const res = await jwtAxios.get(ENDPOINTS.SALES_META);
            setMeta(res.data?.result || { vegetables: [] });
        } catch (err: any) {
            message.error(err.response?.data?.message || 'Failed to fetch metadata');
        }
    };

    const fetchAvailableLots = async (vegetableId: string, fieldKey: number) => {
        try {
            const res = await jwtAxios.get(`${ENDPOINTS.SALES_AVAILABLE_LOTS}?vegetableId=${vegetableId}`);
            setAvailableLots((prev) => ({
                ...prev,
                [fieldKey]: res.data?.result || [],
            }));
        } catch {
            message.error('Failed to fetch available lots');
        }
    };

    const fetchAllAvailableLots = async () => {
        try {
            const res = await jwtAxios.get(ENDPOINTS.SALES_AVAILABLE_LOTS);
            setAllAvailableLots(res.data?.result || []);
        } catch {
            // silent catch
        }
    };

    const computeSubTotal = (items: any[]) => {
        let subTotal = 0;
        (items || []).forEach((item: any) => {
            if (item.saleUnit === 'BOX' || item.saleUnit === 'BAG') {
                const bags = Number(item.bags) || 0;
                const rate = Number(item.sellingRate) || 0;
                subTotal += bags * rate;
            } else {
                const qty = Number(item.quantity) || 0;
                const rate = Number(item.sellingRate) || 0;
                subTotal += qty * rate;
            }
        });
        return Number(subTotal.toFixed(2));
    };

    const calculateTotals = () => {
        const items = form.getFieldValue('items') || [];
        const subTotal = computeSubTotal(items);
        const discount = Number(form.getFieldValue('discount')) || 0;
        const freightCharge = Number(form.getFieldValue('freightCharge')) || 0;
        const grandTotal = Number((subTotal - discount + freightCharge).toFixed(2));

        form.setFieldsValue({
            subTotal,
            grandTotal,
            _subTotalDisplay: subTotal.toFixed(2),
            _grandTotalDisplay: grandTotal.toFixed(2),
        });
    };

    const handleSubmit = async (values: any) => {
        setLoading(true);
        try {
            const subTotal = computeSubTotal(values.items);
            const discount = Number(values.discount) || 0;
            const freightCharge = Number(values.freightCharge) || 0;
            const grandTotal = Number((subTotal - discount + freightCharge).toFixed(2));

            const enteredCash = Number(values.cashAmount) || 0;
            const upiAmount = Number(values.upiAmount) || 0;
            const bankAmount = Number(values.bankAmount) || 0;
            const totalPaymentEntered = enteredCash + upiAmount + bankAmount;

            // If user did not enter any split, default cashAmount to grandTotal
            const cashAmount = (totalPaymentEntered === 0 && grandTotal > 0) ? grandTotal : enteredCash;
            const receivedAmount = Number((cashAmount + upiAmount + bankAmount).toFixed(2));

            if (receivedAmount !== grandTotal) {
                message.error(`Walk-in sales must be paid in full at the time of sale. Received: ₹${receivedAmount.toFixed(2)}, Grand Total: ₹${grandTotal.toFixed(2)}`);
                setLoading(false);
                return;
            }

            const payload = {
                ...values,
                subTotal,
                grandTotal,
                cashAmount,
                upiAmount,
                bankAmount,
                receivedAmount,
                remarks: values.remarks || "",
                invoiceDate: values.invoiceDate.format('YYYY-MM-DD'),
            };

            const formData = new FormData();
            Object.keys(payload).forEach((key) => {
                if (key === 'items') {
                    formData.append('items', JSON.stringify(payload.items));
                } else if (payload[key] !== undefined && payload[key] !== null) {
                    formData.append(key, String(payload[key]));
                }
            });

            const existingImages: string[] = [];
            fileList.forEach((file) => {
                if (file.originFileObj) {
                    formData.append('images', file.originFileObj);
                } else if (file.name) {
                    existingImages.push(file.name);
                }
            });
            formData.append('existingImages', JSON.stringify(existingImages));

            if (editingId) {
                await jwtAxios.put(`${ENDPOINTS.SALES}/${editingId}`, formData, { headers: { 'Content-Type': 'multipart/form-data' } });
                message.success('Quick sale updated successfully');
            } else {
                await jwtAxios.post(ENDPOINTS.SALES, formData, { headers: { 'Content-Type': 'multipart/form-data' } });
                message.success('Quick sale created successfully');
            }
            navigate('/sales/quick-sales');
        } catch (err: any) {
            if (err.response?.status === 422 && err.response?.data?.errors) {
                const fieldErrors = err.response.data.errors;
                const formErrors: { name: string | (string | number)[]; errors: string[] }[] = [];

                Object.keys(fieldErrors).forEach((fieldName) => {
                    const rawErrors = fieldErrors[fieldName];
                    const errorMsgs = Array.isArray(rawErrors) ? rawErrors : [rawErrors];

                    let namePath: string | (string | number)[] = fieldName;
                    if (fieldName.includes('.')) {
                        namePath = fieldName.split('.').map((p) => (!isNaN(Number(p)) ? Number(p) : p));
                    }

                    formErrors.push({
                        name: namePath,
                        errors: errorMsgs,
                    });
                });

                form.setFields(formErrors);
                const msg = err.response?.data?.message || 'Please fix the validation errors in the form.';
                message.error(msg);
            } else {
                const msg = err.response?.data?.message || 'Failed to create quick sale';
                message.error(msg);
            }
        } finally {
            setLoading(false);
        }
    };

    const fetchSaleDetails = async (id: string) => {
        setLoading(true);
        try {
            const res = await jwtAxios.get(`${ENDPOINTS.SALES}/${id}`);
            const record = res.data?.result;

            if (record.saleReturns && record.saleReturns.length > 0) {
                message.error("Cannot edit a sale that already has returns.");
                navigate('/sales/quick-sales');
                return;
            }

            const newRowLot: Record<number, AvailableLot | undefined> = {};
            const newRowSaleUnit: Record<number, string> = {};
            const newRowCostPerUnit: Record<number, number> = {};
            const newRowSellingRate: Record<number, number> = {};

            const items = (record.items || []).map((item: any, index: number) => {
                const mappedLot = {
                    ...item.purchase,
                    id: item.purchase?.id,
                    vegetable: item.purchase?.vegetable,
                } as AvailableLot;

                newRowLot[index] = mappedLot;
                newRowSaleUnit[index] = item.saleUnit;
                newRowCostPerUnit[index] = Number(item.costPerUnit);
                newRowSellingRate[index] = Number(item.sellingRate);

                setAllAvailableLots(prev => {
                    if (!prev.find(p => p.id === mappedLot.id)) {
                        return [...prev, mappedLot];
                    }
                    return prev;
                });

                return {
                    vegetableId: item.purchase?.vegetableId,
                    purchaseId: item.purchase?.id,
                    saleUnit: item.saleUnit,
                    bags: (item.saleUnit === 'PIECES' || item.saleUnit === 'THAAR') ? undefined : (item.bags ? Number(item.bags) : undefined),
                    quantity: Number(item.quantity || (item.saleUnit === 'THAAR' ? item.bags : 0) || 0),
                    sellingRate: Number(item.sellingRate),
                    isNew: false,
                };
            });

            setRowLot(newRowLot);
            setRowSaleUnit(newRowSaleUnit);
            setRowCostPerUnit(newRowCostPerUnit);
            setRowSellingRate(newRowSellingRate);

            const cashAmount = Number(record.cashAmount || 0);
            const upiAmount = Number(record.upiAmount || 0);
            const bankAmount = Number(record.bankAmount || 0);
            const effectiveCash = (cashAmount === 0 && upiAmount === 0 && bankAmount === 0 && Number(record.receivedAmount || record.grandTotal) > 0)
                ? Number(record.receivedAmount || record.grandTotal)
                : cashAmount;

            form.setFieldsValue({
                walkInName: record.walkInName,
                walkInMobile: record.walkInMobile,
                invoiceDate: dayjs(record.invoiceDate),
                discount: Number(record.discount || 0),
                freightCharge: Number(record.freightCharge || 0),
                cashAmount: effectiveCash,
                upiAmount: upiAmount,
                bankAmount: bankAmount,
                subTotal: Number(record.subTotal || 0),
                grandTotal: Number(record.grandTotal || 0),
                _subTotalDisplay: Number(record.subTotal || 0).toFixed(2),
                _grandTotalDisplay: Number(record.grandTotal || 0).toFixed(2),
                remarks: record.remarks,
                items,
            });

            let existingImgs: string[] = [];
            if (record.images) {
                try {
                    existingImgs = typeof record.images === 'string' ? JSON.parse(record.images) : record.images;
                } catch {
                    existingImgs = [];
                }
            }
            const baseUrl = (import.meta.env.VITE_API_BASE_URL || '').replace(/\/$/, '');
            const mappedFiles: UploadFile[] = (existingImgs || []).map((fileName: string, idx: number) => ({
                uid: `-${idx}`,
                name: fileName,
                status: 'done',
                url: `${baseUrl}/uploads/sales/${fileName}`,
                response: { path: fileName },
            }));
            setFileList(mappedFiles);
        } catch (err: any) {
            message.error('Failed to load sale details');
            navigate('/sales/quick-sales');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchMeta();
        fetchAllAvailableLots();
        if (editingId) {
            fetchSaleDetails(editingId);
        } else {
            setFileList([]);
            form.setFieldsValue({
                invoiceDate: dayjs(),
                discount: 0,
                freightCharge: 0,
                cashAmount: undefined,
                upiAmount: undefined,
                bankAmount: undefined,
                items: [{}],
            });
        }
    }, [editingId]);

    return (
        <Spin spinning={loading}>
            <AppContainer
                title={editingId ? `Edit Quick Sale #${editingId}` : "Quick Sale (Walk-in / Counter)"}
                headerAction={
                    <Space>
                        <Button icon={<ArrowLeftOutlined />} onClick={() => navigate('/sales/quick-sales')}>
                            Back to Quick Sales
                        </Button>
                        <Button type="primary" onClick={() => form.submit()}>
                            {editingId ? "Update Sale" : "Submit Sale"}
                        </Button>
                    </Space>
                }
            >
                <Card style={{ marginBottom: 24 }}>
                    <Form form={form} layout="vertical" onFinish={handleSubmit} onValuesChange={calculateTotals}>
                        {/* Customer Info */}
                        <Row gutter={16}>
                            <Col span={8}>
                                <Form.Item
                                    name="walkInName"
                                    label="Customer Name"
                                    rules={[{ required: true, message: 'Enter a name for reference' }]}
                                >
                                    <Input placeholder="e.g. Counter — Ramesh" />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item
                                    name="walkInMobile"
                                    label="Mobile (optional)"
                                    rules={[
                                        {
                                            pattern: /^(?:(?:\+?91)|0)?[6-9]\d{9}$/,
                                            message: 'Please enter a valid 10-digit mobile number (e.g. 9876543210)',
                                        },
                                    ]}
                                >
                                    <Input type="number" placeholder="Optional, for receipt" maxLength={10} />
                                </Form.Item>
                            </Col>
                            <Col span={8}>
                                <Form.Item
                                    name="invoiceDate"
                                    label="Invoice Date"
                                    rules={[{ required: true, message: 'Please select a date' }]}
                                >
                                    <DatePicker style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>
                        </Row>

                        {/* Sale Items */}
                        <div style={{ border: '1px solid #d9d9d9', padding: 16, marginBottom: 16, borderRadius: 8 }}>
                            <h4>Sale Items</h4>
                            <Form.List name="items">
                                {(fields, { add, remove }) => (
                                    <>
                                        {fields.map(({ key, name, ...restField }) => {
                                            const isFlexibleLot = !!rowLot[name]?.vegetable?.isFlexible || rowLot[name]?.unit === 'THAAR' || rowSaleUnit[name] === 'PIECES';
                                            const costPerUnit = rowCostPerUnit[name];
                                            let unitCost = costPerUnit;
                                            if (rowSaleUnit[name] && rowSaleUnit[name] !== 'KG' && Number(rowLot[name]?.weightPerBag) > 0 && costPerUnit !== undefined) {
                                                unitCost = costPerUnit * Number(rowLot[name]!.weightPerBag);
                                            }
                                            const sellingRate = rowSellingRate[name];
                                            const isBelowCost =
                                                !isFlexibleLot &&
                                                unitCost !== undefined &&
                                                sellingRate !== undefined &&
                                                sellingRate < unitCost;

                                            return (
                                                <div key={key} className="bg-gray-50 border border-gray-200 rounded-lg py-3 px-4 mb-3">
                                                    <Row gutter={12} className="items-start mb-4">
                                                        <Col span={5}>
                                                            <Form.Item
                                                                {...restField}
                                                                label="Vegetable"
                                                                name={[name, 'vegetableId']}
                                                                rules={[{ required: true, message: 'Select vegetable' }]}
                                                            >
                                                                <Select
                                                                    placeholder="Select vegetable"
                                                                    showSearch
                                                                    allowClear
                                                                    disabled={!!editingId && !form.getFieldValue(['items', name, 'isNew'])}
                                                                    optionFilterProp="label"
                                                                    filterOption={(input, option) =>
                                                                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                                                                    }
                                                                    options={meta.vegetables.map((v) => ({
                                                                        label: v.name,
                                                                        value: v.id,
                                                                    }))}
                                                                    onChange={(val) => {
                                                                        if (val) {
                                                                            fetchAvailableLots(val, name);
                                                                            form.setFieldValue(['items', name, 'purchaseId'], undefined);
                                                                        } else {
                                                                            setAvailableLots((prev) => ({ ...prev, [name]: [] }));
                                                                            form.setFieldValue(['items', name, 'vegetableId'], undefined);
                                                                            form.setFieldValue(['items', name, 'purchaseId'], undefined);
                                                                            setRowLot((prev) => ({ ...prev, [name]: undefined }));
                                                                        }
                                                                        setRowCostPerUnit((prev) => {
                                                                            const n = { ...prev };
                                                                            delete n[name];
                                                                            return n;
                                                                        });
                                                                    }}
                                                                />
                                                            </Form.Item>
                                                        </Col>
                                                        <Col span={12}>
                                                            <Form.Item
                                                                {...restField}
                                                                label="Lot"
                                                                name={[name, 'purchaseId']}
                                                                rules={[{ required: true, message: 'Select lot' }]}
                                                            >
                                                                {(() => {
                                                                    const rowVegId = form.getFieldValue(['items', name, 'vegetableId']);
                                                                    const getVegId = (l: any) => l.vegetable?.id ?? l.vegetableId ?? l.vegetable_id;

                                                                    const vegLots = (availableLots[name] && availableLots[name].length > 0)
                                                                        ? availableLots[name]
                                                                        : allAvailableLots.filter((l) => rowVegId && String(getVegId(l)) === String(rowVegId));

                                                                    let optionsPool = rowVegId ? vegLots : allAvailableLots;

                                                                    // Ensure the currently selected lot is always in the options pool (crucial for Edit mode)
                                                                    if (rowLot[name] && !optionsPool.find((l) => String(l.id) === String(rowLot[name]!.id))) {
                                                                        optionsPool = [...optionsPool, rowLot[name]!];
                                                                    }

                                                                    return (
                                                                        <Select
                                                                            placeholder="Select or enter lot no"
                                                                            showSearch
                                                                            allowClear
                                                                            disabled={!!editingId && !form.getFieldValue(['items', name, 'isNew'])}
                                                                            optionFilterProp="label"
                                                                            filterOption={(input, option) => {
                                                                                const searchText = input.toLowerCase();
                                                                                const label = String(option?.label || '').toLowerCase();
                                                                                const lotNo = String(option?.lotNo || '').toLowerCase();
                                                                                const vegName = String(option?.vegName || '').toLowerCase();
                                                                                return label.includes(searchText) || lotNo.includes(searchText) || vegName.includes(searchText);
                                                                            }}
                                                                            onSearch={(value) => {
                                                                                if (!value || !value.trim()) return;
                                                                                const trimmed = value.trim().toLowerCase();
                                                                                const exists = allAvailableLots.some(
                                                                                    (l) =>
                                                                                        l.lotNo.toLowerCase().includes(trimmed) ||
                                                                                        (l.batchLabel && l.batchLabel.toLowerCase().includes(trimmed)) ||
                                                                                        (l.vegetable?.name && l.vegetable.name.toLowerCase().includes(trimmed))
                                                                                );
                                                                                if (!exists) {
                                                                                    message.warning(`Lot number "${value.trim()}" is not available or out of stock.`);
                                                                                }
                                                                            }}
                                                                            options={optionsPool.map((lot) => ({
                                                                                label: `${lot.batchLabel || lot.lotNo} ${lot.vegetable?.name ? `(${lot.vegetable.name})` : ''} (Avail: ${Number(lot.remainingQuantity) > 0 ? lot.remainingQuantity + ' KG' : ''}${Number(lot.remainingBags) > 0 ? (Number(lot.remainingQuantity) > 0 ? ' / ' : '') + lot.remainingBags + ' ' + lot.unit : ''} - Cost: ₹${Number(lot.costPerUnit).toFixed(2)})`,
                                                                                value: lot.id,
                                                                                lotNo: lot.lotNo,
                                                                                vegName: lot.vegetable?.name || '',
                                                                            }))}
                                                                            onChange={(lotId) => {
                                                                                if (!lotId) {
                                                                                    form.setFieldValue(['items', name, 'purchaseId'], undefined);
                                                                                    form.setFieldValue(['items', name, 'vegetableId'], undefined);
                                                                                    setRowCostPerUnit((prev) => { const n = { ...prev }; delete n[name]; return n; });
                                                                                    setRowLot((prev) => ({ ...prev, [name]: undefined }));
                                                                                    return;
                                                                                }
                                                                                const lot = optionsPool.find((l) => l.id === lotId) || allAvailableLots.find((l) => l.id === lotId);
                                                                                if (lot) {
                                                                                    const currentVegId = form.getFieldValue(['items', name, 'vegetableId']);
                                                                                    const lotVegId = getVegId(lot);
                                                                                    if (lotVegId && String(currentVegId) !== String(lotVegId)) {
                                                                                        form.setFieldValue(['items', name, 'vegetableId'], lotVegId);
                                                                                        fetchAvailableLots(lotVegId, name);
                                                                                        // message.info(`Vegetable "${lot.vegetable?.name || ''}" loaded for Lot ${lot.batchLabel || lot.lotNo}`);
                                                                                    }
                                                                                    setRowCostPerUnit((prev) => ({
                                                                                        ...prev,
                                                                                        [name]: Number(lot.costPerUnit),
                                                                                    }));
                                                                                    setRowLot((prev) => ({ ...prev, [name]: lot }));
                                                                                    const isLotFlexible = !!lot.vegetable?.isFlexible || lot.unit === 'THAAR';
                                                                                    const defaultUnit: string = isLotFlexible
                                                                                        ? (lot.unit === 'THAAR' ? 'THAAR' : (lot.unit === 'KG' ? 'PIECES' : (lot.unit || 'PIECES')))
                                                                                        : (lot.rateType === 'UNIT' ? (lot.unit || 'KG') : (Number(lot.remainingQuantity) > 0 ? 'KG' : (lot.unit || 'KG')));
                                                                                    setRowSaleUnit((prev) => ({ ...prev, [name]: defaultUnit }));
                                                                                    form.setFieldValue(['items', name, 'saleUnit'], defaultUnit);
                                                                                    form.setFieldValue(['items', name, 'bags'], undefined);
                                                                                }
                                                                            }}
                                                                        />
                                                                    );
                                                                })()}
                                                            </Form.Item>
                                                        </Col>
                                                        <Col span={7}>
                                                            <Form.Item
                                                                {...restField}
                                                                label="Sell By"
                                                                name={[name, 'saleUnit']}
                                                                initialValue="KG"
                                                                rules={[{ required: true, message: 'Required' }]}
                                                            >
                                                                {(() => {
                                                                    const currentPurchaseId = form.getFieldValue(['items', name, 'purchaseId']);
                                                                    const selectedLot = rowLot[name] || (currentPurchaseId ? allAvailableLots.find((l: any) => l.id === currentPurchaseId) : undefined);
                                                                    const isLotFlexible = !!selectedLot?.vegetable?.isFlexible || selectedLot?.unit === 'THAAR';
                                                                    return (
                                                                        <Select
                                                                            options={
                                                                                isLotFlexible
                                                                                    ? [
                                                                                        { label: 'PIECES', value: 'PIECES' },
                                                                                        ...(selectedLot?.unit === 'THAAR'
                                                                                            ? [{ label: 'THAAR', value: 'THAAR' }]
                                                                                            : selectedLot?.unit === 'BAG'
                                                                                                ? [{ label: 'BAG', value: 'BAG' }, { label: 'KG', value: 'KG' }]
                                                                                                : selectedLot?.unit === 'BOX'
                                                                                                    ? [{ label: 'BOX', value: 'BOX' }, { label: 'KG', value: 'KG' }]
                                                                                                    : [{ label: 'KG', value: 'KG' }]),
                                                                                    ]
                                                                                    : selectedLot?.rateType === 'UNIT'
                                                                                        ? [{ label: selectedLot.unit, value: selectedLot.unit }]
                                                                                        : selectedLot?.rateType === 'KG'
                                                                                            ? [{ label: 'KG', value: 'KG' }]
                                                                                            : [
                                                                                                ...(Number(selectedLot?.remainingQuantity) > 0 ? [{ label: 'KG', value: 'KG' }] : []),
                                                                                                ...(selectedLot?.unit !== 'KG' && Number(selectedLot?.remainingBags) > 0
                                                                                                    ? [{ label: selectedLot!.unit, value: selectedLot!.unit }]
                                                                                                    : []),
                                                                                            ]
                                                                            }
                                                                            disabled={(!!editingId && !form.getFieldValue(['items', name, 'isNew'])) || (isLotFlexible ? false : !!selectedLot?.rateType)}
                                                                            onChange={(val) => {
                                                                                setRowSaleUnit((prev) => ({ ...prev, [name]: val }));
                                                                                if (val === 'KG') {
                                                                                    if (selectedLot?.unit === 'KG') {
                                                                                        form.setFieldValue(['items', name, 'bags'], undefined);
                                                                                    }
                                                                                } else if (val === 'PIECES') {
                                                                                    form.setFieldValue(['items', name, 'bags'], undefined);
                                                                                } else {
                                                                                    form.setFieldValue(['items', name, 'quantity'], undefined);
                                                                                }
                                                                            }}
                                                                        />
                                                                    );
                                                                })()}
                                                            </Form.Item>
                                                        </Col>
                                                    </Row>
                                                    <Row gutter={12} className="items-start">
                                                        <Col span={6}>
                                                            <Form.Item label={rowSaleUnit[name] === 'PIECES' ? "Cost / Piece" : (rowSaleUnit[name] && rowSaleUnit[name] !== 'KG' ? `Cost / ${rowSaleUnit[name] === 'THAAR' ? 'Thaar' : (rowLot[name]?.unit || rowSaleUnit[name])}` : "Cost / Kg")}>
                                                                <Input
                                                                    readOnly
                                                                    value={
                                                                        rowSaleUnit[name] === 'PIECES'
                                                                            ? '-'
                                                                            : (costPerUnit !== undefined
                                                                                ? `₹${(
                                                                                    rowSaleUnit[name] && rowSaleUnit[name] !== 'KG' && Number(rowLot[name]?.weightPerBag) > 0
                                                                                        ? costPerUnit * Number(rowLot[name]!.weightPerBag)
                                                                                        : costPerUnit
                                                                                ).toFixed(2)}`
                                                                                : '-')
                                                                    }
                                                                    className="font-bold bg-gray-100 text-gray-600 cursor-default border-gray-300"
                                                                />
                                                            </Form.Item>
                                                        </Col>
                                                        <Col span={6}>
                                                            {(rowSaleUnit[name] === 'PIECES' || rowSaleUnit[name] === 'THAAR') ? (
                                                                <Form.Item
                                                                    {...restField}
                                                                    label={rowSaleUnit[name] === 'THAAR' ? 'Thaar Count' : 'Pieces Count'}
                                                                    name={[name, 'quantity']}
                                                                    rules={[{ required: true, message: 'Required' }]}
                                                                >
                                                                    <InputNumber placeholder={rowSaleUnit[name] === 'THAAR' ? 'Thaar Count' : 'Pieces'} min={1} step={1} className="w-full" />
                                                                </Form.Item>
                                                            ) : rowSaleUnit[name] && rowSaleUnit[name] !== 'KG' ? (
                                                                <Form.Item
                                                                    {...restField}
                                                                    label={rowLot[name]?.unit || rowSaleUnit[name] || 'Bags'}
                                                                    name={[name, 'bags']}
                                                                    rules={[{ required: true, message: 'Required' }]}
                                                                >
                                                                    <InputNumber
                                                                        placeholder={rowLot[name]?.unit || rowSaleUnit[name] || 'Bags'}
                                                                        min={1}
                                                                        step={1}
                                                                        className="w-full"
                                                                    />
                                                                </Form.Item>
                                                            ) : (
                                                                <div className="flex gap-1">
                                                                    {(rowLot[name]?.unit === 'BAG' || rowLot[name]?.unit === 'BOX') && (
                                                                        <Form.Item
                                                                            {...restField}
                                                                            label="Bags"
                                                                            name={[name, 'bags']}
                                                                            rules={[{ required: true, message: 'Req' }]}
                                                                            className="flex-1"
                                                                        >
                                                                            <InputNumber placeholder="Bags" min={1} step={1} className="w-full" />
                                                                        </Form.Item>
                                                                    )}
                                                                    <Form.Item
                                                                        {...restField}
                                                                        label="Qty (Kg)"
                                                                        name={[name, 'quantity']}
                                                                        rules={[{ required: true, message: 'Req' }]}
                                                                        className="flex-1"
                                                                    >
                                                                        <InputNumber
                                                                            placeholder="Qty"
                                                                            min={0}
                                                                            step={0.01}
                                                                            className="w-full"
                                                                        />
                                                                    </Form.Item>
                                                                </div>
                                                            )}
                                                        </Col>
                                                        <Col span={6}>
                                                            <Form.Item
                                                                {...restField}
                                                                label={rowSaleUnit[name] === 'PIECES' ? "Selling Rate / Piece" : (rowSaleUnit[name] && rowSaleUnit[name] !== 'KG' ? `Selling Rate / ${rowSaleUnit[name] === 'THAAR' ? 'Thaar' : (rowLot[name]?.unit || rowSaleUnit[name])}` : "Selling Rate / Kg")}
                                                                name={[name, 'sellingRate']}
                                                                rules={[{ required: true, message: 'Required' }]}
                                                            >
                                                                <InputNumber
                                                                    placeholder="Rate"
                                                                    min={0}
                                                                    step={0.01}
                                                                    className={`w-full ${isBelowCost ? 'border-yellow-500' : ''}`}
                                                                    onChange={(val) => {
                                                                        setRowSellingRate((prev) => ({
                                                                            ...prev,
                                                                            [name]: Number(val),
                                                                        }));
                                                                    }}
                                                                />
                                                            </Form.Item>
                                                            {isBelowCost && (
                                                                <Tooltip
                                                                    title={`Selling rate \u20b9${sellingRate.toFixed(
                                                                        2
                                                                    )} is below cost \u20b9${(unitCost || costPerUnit).toFixed(
                                                                        2
                                                                    )}. You will incur a loss on this item.`}
                                                                >
                                                                    <div className="-mt-4 mb-2 text-xs text-yellow-500 cursor-help">
                                                                        <WarningOutlined /> Below cost
                                                                    </div>
                                                                </Tooltip>
                                                            )}
                                                        </Col>
                                                        <Col span={6} className="flex justify-end pt-7">
                                                            <Button
                                                                type="primary"
                                                                danger
                                                                onClick={() => remove(name)}
                                                                icon={<DeleteOutlined />}
                                                            >
                                                                Remove Item
                                                            </Button>
                                                        </Col>
                                                    </Row>
                                                </div>
                                            );
                                        })}
                                        <Button type="dashed" onClick={() => add({ isNew: true })} block icon={<PlusOutlined />}>
                                            Add Item
                                        </Button>
                                    </>
                                )}
                            </Form.List>
                        </div>

                        {/* Totals & Payment */}
                        <Row gutter={16}>
                            {/* <Col span={6}>
                                <Form.Item name="discount" label="Discount">
                                    <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col> */}
                            <Col span={6}>
                                <Form.Item name="freightCharge" label="Freight Charge">
                                    <InputNumber min={0} step={0.01} style={{ width: '100%' }} />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    name="cashAmount"
                                    label="Cash"
                                >
                                    <InputNumber min={0} step={0.01} style={{ width: '100%' }} placeholder="Cash" />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    name="upiAmount"
                                    label="UPI"
                                >
                                    <InputNumber min={0} step={0.01} style={{ width: '100%' }} placeholder="UPI" />
                                </Form.Item>
                            </Col>
                            <Col span={6}>
                                <Form.Item
                                    name="bankAmount"
                                    label="Bank"
                                >
                                    <InputNumber min={0} step={0.01} style={{ width: '100%' }} placeholder="Bank" />
                                </Form.Item>
                            </Col>
                        </Row>

                        <Row gutter={16}>
                            <Col span={6}>
                                <Form.Item name="remarks" label="Remarks">
                                    <Input />
                                </Form.Item>
                            </Col>
                            <Col span={18} />
                        </Row>

                        <Form.Item noStyle shouldUpdate={(prev, cur) =>
                            prev.cashAmount !== cur.cashAmount ||
                            prev.upiAmount !== cur.upiAmount ||
                            prev.bankAmount !== cur.bankAmount ||
                            prev._grandTotalDisplay !== cur._grandTotalDisplay ||
                            prev._subTotalDisplay !== cur._subTotalDisplay
                        }>
                            {({ getFieldValue }) => {
                                const subTotal = Number(getFieldValue('_subTotalDisplay') || 0);
                                const grandTotal = Number(getFieldValue('_grandTotalDisplay') || 0);
                                const cash = Number(getFieldValue('cashAmount') || 0);
                                const upi = Number(getFieldValue('upiAmount') || 0);
                                const bank = Number(getFieldValue('bankAmount') || 0);
                                const totalReceived = cash + upi + bank;

                                let invoiceBalance = grandTotal - totalReceived;
                                let excessReceived = 0;

                                if (invoiceBalance < 0) {
                                    excessReceived = Math.abs(invoiceBalance);
                                    invoiceBalance = 0;
                                }

                                return (
                                    <div style={{ marginTop: '24px', padding: '16px', background: '#fafafa', borderRadius: '8px', border: '1px solid #f0f0f0' }}>
                                        <Row gutter={[16, 12]}>
                                            <Col span={6}>
                                                <div style={{ color: '#8c8c8c', marginBottom: 4 }}>Sub Total</div>
                                                <div style={{ fontWeight: 'bold', fontSize: '1.2em' }}>₹{subTotal.toFixed(2)}</div>
                                            </Col>
                                            <Col span={6}>
                                                <div style={{ color: '#8c8c8c', marginBottom: 4 }}>Invoice Total</div>
                                                <div style={{ fontWeight: 'bold', fontSize: '1.2em' }}>₹{grandTotal.toFixed(2)}</div>
                                            </Col>
                                            <Col span={6}>
                                                <div style={{ color: '#8c8c8c', marginBottom: 4 }}>Total Received</div>
                                                <div style={{ fontWeight: 'bold', fontSize: '1.2em', color: totalReceived > 0 ? '#389e0d' : undefined }}>₹{totalReceived.toFixed(2)}</div>
                                            </Col>
                                            <Col span={6}>
                                                <div style={{ color: '#8c8c8c', marginBottom: 4 }}>Invoice Balance</div>
                                                <div style={{ fontWeight: 'bold', fontSize: '1.2em', color: invoiceBalance > 0 ? '#cf1322' : '#389e0d' }}>₹{invoiceBalance.toFixed(2)}</div>
                                            </Col>
                                        </Row>

                                        {excessReceived > 0 && (
                                            <>
                                                <div style={{ margin: '16px 0', borderTop: '1px dashed #d9d9d9' }} />
                                                <Row gutter={[16, 12]}>
                                                    <Col span={8}>
                                                        <div style={{ color: '#8c8c8c', marginBottom: 4 }}>Excess Received</div>
                                                        <div style={{ fontWeight: 'bold', fontSize: '1.1em', color: '#1890ff' }}>₹{excessReceived.toFixed(2)}</div>
                                                    </Col>
                                                </Row>
                                            </>
                                        )}
                                    </div>
                                );
                            }}
                        </Form.Item>

                        {/* INVOICE IMAGES UPLOAD SECTION */}
                        <div style={{ marginTop: 16, border: '1px solid #d9d9d9', padding: 16, borderRadius: 8 }}>
                            <h4 style={{ marginBottom: 12 }}>Invoice Images (Max 10 images, up to 5MB each)</h4>
                            <Upload
                                accept="image/jpeg,image/png,image/jpg"
                                listType="picture-card"
                                fileList={fileList}
                                multiple
                                maxCount={10}
                                beforeUpload={(file) => {
                                    const isImage = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
                                    if (!isImage) {
                                        message.error(`${file.name} is not an image file! Only JPG, JPEG, and PNG images are allowed.`);
                                        return Upload.LIST_IGNORE;
                                    }
                                    const isLt5M = file.size / 1024 / 1024 < 5;
                                    if (!isLt5M) {
                                        message.error('Image must be smaller than 5MB!');
                                        return Upload.LIST_IGNORE;
                                    }
                                    return false;
                                }}
                                onChange={({ fileList }) => setFileList(fileList)}
                                onPreview={handlePreview}
                            >
                                {fileList.length >= 10 ? null : (
                                    <div>
                                        <PlusOutlined />
                                        <div style={{ marginTop: 8 }}>Upload</div>
                                    </div>
                                )}
                            </Upload>
                        </div>
                    </Form>
                </Card>

                {/* MODAL FOR IMAGE UPLOAD PREVIEW */}
                <Modal
                    open={previewOpen}
                    title={previewTitle}
                    footer={null}
                    onCancel={() => setPreviewOpen(false)}
                >
                    <img alt="preview" style={{ width: '100%' }} src={previewImage} />
                </Modal>
            </AppContainer>
        </Spin>
    );
};