import AsyncSelect from 'react-select/async';
import { OptionsOrGroups } from 'react-select';
import { useEffect, useState, useRef } from 'react';

interface FreeItemProductSelectorProps {
    productId?: string | string[];
    onProductChange: (productIds: string[]) => void;
    isUpdate?: boolean;
}

const FreeItemProductSelector: React.FC<FreeItemProductSelectorProps> = ({ productId, onProductChange, isUpdate = false }) => {
    const [selectedProducts, setSelectedProducts] = useState<any[]>([]);
    const timeOut = useRef<any>(null);

    const getSelectedProducts = async (productIds: string | string[]) => {
        try {
            if (!productIds) {
                setSelectedProducts([]);
                return;
            }

            let productIdArray: string[] = [];
            if (Array.isArray(productIds)) {
                productIdArray = productIds;
            } else {
                try {
                    productIdArray = JSON.parse(productIds);
                } catch {
                    productIdArray = productIds
                        .split(',')
                        .map((id) => id.trim())
                        .filter((id) => id);
                }
            }

            if (productIdArray.length === 0) {
                setSelectedProducts([]);
                return;
            }

            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/products/product-list`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ products: productIdArray }),
                credentials: 'include',
            });

            if (!response.ok) {
                return;
            }

            const data = await response.json();
            const products = Array.isArray(data) ? data : [];

            if (products.length > 0) {
                const formattedProducts = products.map((product: any) => ({
                    value: (product._id || product.id).toString(),
                    label: product.product_title || '',
                    qty: product.product_qty || 0,
                }));
                setSelectedProducts(formattedProducts);
            } else {
                setSelectedProducts([]);
            }
        } catch (error) {
            console.error('Error fetching selected products:', error);
        }
    };

    useEffect(() => {
        if (isUpdate && productId) {
            getSelectedProducts(productId);
        } else if (!productId) {
            setSelectedProducts([]);
        }
    }, [isUpdate, productId]);

    const loadProductOptions = async (inputValue: string): Promise<OptionsOrGroups<any, any>> => {
        if (!inputValue || inputValue.length < 2) return [];

        if (timeOut.current) {
            clearTimeout(timeOut.current);
        }

        return new Promise((resolve) => {
            timeOut.current = setTimeout(async () => {
                try {
                    const api_url = process.env.API_URL;
                    const response = await fetch(`${api_url}api/products/product-list?q=${inputValue}&product_status=publish`, {
                        method: 'GET',
                        headers: { 'Content-Type': 'application/json' },
                        credentials: 'include',
                    });
                    const data = await response.json();
                    const options = (Array.isArray(data) ? data : [])
                        .filter((item: any) => item && (item._id || item.id))
                        .map((item: any) => ({
                            value: (item._id || item.id).toString(),
                            label: item.product_title || '',
                            qty: item.product_qty || 0,
                        }));

                    resolve(options);
                } catch (error) {
                    console.error('Error loading product options:', error);
                    resolve([]);
                }
            }, 500);
        });
    };

    const handleProductChange = (selectedOptions: any) => {
        const selectedItems = selectedOptions || [];
        setSelectedProducts(selectedItems);

        const productIds = selectedItems.map((item: any) => item.value);
        onProductChange(productIds);
    };

    return <AsyncSelect loadOptions={loadProductOptions} isMulti className="w-full" placeholder="Pilih produk" value={selectedProducts} onChange={handleProductChange} isClearable classNamePrefix="user-form-select" />;
};

export default FreeItemProductSelector;