// Right panel: a_material list (top) + order/cart lines with checkboxes (bottom only)
const { useState, useEffect, useRef, useCallback } = React;
const _fmt = typeof window !== 'undefined' ? window.formatCurrency : null;
const formatCurrency = _fmt || ((v) => (v != null ? Number(v).toFixed(0) : '0'));

const PAGE_SIZE = 80;

function OrderMaterialsRightPanel({
    selectedCompany,
    api,
    showAlert,
    cart,
    addToCart,
    removeFromCart
}) {
    const [materials, setMaterials] = useState([]);
    const [searchTerm, setSearchTerm] = useState('');
    const [offset, setOffset] = useState(0);
    const [hasMore, setHasMore] = useState(true);
    const [loading, setLoading] = useState(false);
    const [loadingMore, setLoadingMore] = useState(false);
    const [selectedIds, setSelectedIds] = useState(() => new Set());
    const scrollRef = useRef(null);
    const searchTimeoutRef = useRef(null);
    // Эцэг render бүрт api object шинэчлэгдэхэд useCallback/useEffect дахин ажиллаж бараа байн дахин ачаалагдана — ref-ээр тогтвортой дуудлага.
    const apiRef = useRef(api);
    const showAlertRef = useRef(showAlert);
    useEffect(() => {
        apiRef.current = api;
        showAlertRef.current = showAlert;
    }, [api, showAlert]);

    const loadMaterials = useCallback(async (off = 0, reset = false, search = '') => {
        const client = apiRef.current;
        const alertFn = showAlertRef.current;
        const b_id = selectedCompany?.b_id;
        if (!client || !b_id) return;
        if (reset) setLoading(true);
        else setLoadingMore(true);
        try {
            const dep_id = 0;
            const result = await client.getProductsPaginated(b_id, dep_id, off, PAGE_SIZE, search);
            if (result.success && result.data) {
                const rows = result.data;
                if (reset) setMaterials(rows);
                else setMaterials((prev) => [...prev, ...rows]);
                setHasMore(rows.length === PAGE_SIZE);
                setOffset(off + rows.length);
            } else {
                if (reset) setMaterials([]);
                setHasMore(false);
            }
        } catch (e) {
            console.error(e);
            if (alertFn) alertFn('Бараа ачаалахад алдаа: ' + (e.message || e));
            if (reset) setMaterials([]);
            setHasMore(false);
        } finally {
            setLoading(false);
            setLoadingMore(false);
        }
    }, [selectedCompany?.b_id]);

    const hasApi = !!api;

    useEffect(() => {
        if (!selectedCompany?.b_id || !hasApi) return;
        if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
        const q = (searchTerm || '').trim();
        const run = () => {
            if (!apiRef.current) return;
            setMaterials([]);
            setOffset(0);
            setHasMore(true);
            loadMaterials(0, true, q);
        };
        if (q === '') {
            run();
        } else {
            searchTimeoutRef.current = setTimeout(run, 400);
        }
        return () => {
            if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
        };
    }, [searchTerm, selectedCompany?.b_id, hasApi, loadMaterials]);

    const onScrollMaterials = () => {
        const el = scrollRef.current;
        if (!el || loadingMore || !hasMore || loading) return;
        if (el.scrollHeight - el.scrollTop - el.clientHeight < 120) {
            loadMaterials(offset, false, searchTerm);
        }
    };

    const handleMaterialClick = async (m) => {
        if (!m || !m.m_id) return;
        const product = {
            ...m,
            name: m.m_name || m.name || 'Бүтээгдэхүүн',
            tcount: 1,
            quantity: 1
        };
        try {
            await addToCart(product);
        } catch (e) {
            if (showAlert) showAlert('Сагсанд нэмэхэд алдаа: ' + (e.message || e));
        }
    };

    const toggleCartLine = (id) => {
        setSelectedIds((prev) => {
            const next = new Set(prev);
            if (next.has(id)) next.delete(id);
            else next.add(id);
            return next;
        });
    };

    useEffect(() => {
        const ids = new Set((cart || []).map((c) => c.id));
        setSelectedIds((prev) => {
            const next = new Set();
            prev.forEach((id) => {
                if (ids.has(id)) next.add(id);
            });
            return next;
        });
    }, [cart]);

    const allCartSelected =
        cart.length > 0 && cart.every((item) => selectedIds.has(item.id));
    const toggleSelectAllCart = () => {
        if (allCartSelected) setSelectedIds(new Set());
        else setSelectedIds(new Set(cart.map((c) => c.id)));
    };

    const removeSelectedLines = async () => {
        const ids = [...selectedIds];
        if (ids.length === 0) {
            if (showAlert) showAlert('Мөр сонгоно уу');
            return;
        }
        for (const id of ids) {
            await removeFromCart(id);
        }
        setSelectedIds(new Set());
    };

    return (
        <aside className="order-materials-right-panel">
            <div className="order-materials-right-panel-top">
                <h2 className="order-materials-right-panel-title">Бараа (a_material)</h2>
                <input
                    type="text"
                    className="order-materials-right-panel-search"
                    placeholder="Хайх..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                />
                <div
                    className="order-materials-right-panel-list"
                    ref={scrollRef}
                    onScroll={onScrollMaterials}
                >
                    {loading && materials.length === 0 && (
                        <div className="order-materials-right-panel-empty">Ачаалж байна...</div>
                    )}
                    {!loading && materials.length === 0 && (
                        <div className="order-materials-right-panel-empty">Бараа олдсонгүй</div>
                    )}
                    {materials.map((m) => (
                        <button
                            type="button"
                            key={String(m.m_id ?? m.id ?? '') + '-' + (m.dotcode || '')}
                            className="order-materials-right-panel-row"
                            onClick={() => handleMaterialClick(m)}
                        >
                            <span className="order-materials-right-panel-row-name">
                                {m.m_name || m.name || '—'}
                            </span>
                            <span className="order-materials-right-panel-row-meta">
                                {m.dotcode || m.barcode || ''} · {formatCurrency(m.price_low || m.price || 0)}
                            </span>
                        </button>
                    ))}
                    {loadingMore && (
                        <div className="order-materials-right-panel-loading-more">...</div>
                    )}
                </div>
            </div>

            <div className="order-materials-right-panel-bottom">
                <div className="order-materials-right-panel-bottom-head">
                    <span>Захиалгын бараа</span>
                    <label className="order-materials-right-panel-selectall">
                        <input
                            type="checkbox"
                            checked={allCartSelected && cart.length > 0}
                            onChange={toggleSelectAllCart}
                        />
                        <span>Бүгд</span>
                    </label>
                </div>
                <div className="order-materials-right-panel-order-list">
                    {cart.length === 0 ? (
                        <div className="order-materials-right-panel-empty small">Сагс хоосон</div>
                    ) : (
                        cart.map((item) => (
                            <label
                                key={item.id}
                                className="order-materials-right-panel-order-line"
                            >
                                <input
                                    type="checkbox"
                                    checked={selectedIds.has(item.id)}
                                    onChange={() => toggleCartLine(item.id)}
                                />
                                <span className="order-materials-right-panel-order-name">
                                    {(item.shortname && item.shortname.trim()) ||
                                        item.name ||
                                        item.m_name ||
                                        '—'}
                                </span>
                                <span className="order-materials-right-panel-order-qty">
                                    ×{parseFloat(item.quantity || item.tcount || 1) || 1}
                                </span>
                            </label>
                        ))
                    )}
                </div>
                <button
                    type="button"
                    className="order-materials-right-panel-remove-btn"
                    onClick={removeSelectedLines}
                    disabled={selectedIds.size === 0}
                >
                    Сонгосон мөрийг устгах ({selectedIds.size})
                </button>
            </div>
        </aside>
    );
}

if (typeof window !== 'undefined') {
    window.OrderMaterialsRightPanel = OrderMaterialsRightPanel;
}