import React, { useState, useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { Space, Tooltip } from 'antd';
import { DeleteFilled, PlusCircleOutlined } from '@ant-design/icons';
import { Tables } from "../../Components/Tables/Table";
import { DropDowns } from "../../Components/Forms/DropDown.jsx";
import { DefaultModal } from "../../Components/Modal/DefaultModal.jsx";
import AddSupplierModal from '../SupplierMaster/QuickAddSupplier.jsx';
import FeaturesFunctionalities from '../BookingScreen/Components/BookingFunctionality/FeaturesFunctionalities.jsx';
import {
    getSupplaierProducts,
    postSupplaierProducts,
    getSupplaierIdBasedProducts
} from '../../Features/SupplierProductMapping/SupplierProductMapping.js';
import { getsupplierBasedOnCmpId, getsupplierBasedOnCmpIdBrId } from '../../Features/SupplierMaster/SupplierMaster.js';
import "../../Pages/SupplierProductMapping/SupplierProductMapping.scss"

const SupplierProductMappingForm = ({
    isModalOpen = false,
    setIsModalOpen,
    CompId,
    BranchId,
    AppId,
    setMessage,
    onMappingAdded
}) => {
    const dispatch = useDispatch();

    // State variables
    const [supplierOptions, setSupplierOptions] = useState([]);
    const [productOptions, setProductOptions] = useState([]);
    const [tempProductOptions, setTempProductOptions] = useState([]);
    const [modelTableData, setModelTableData] = useState([]);
    const [addProduct, setAddProduct] = useState(false);
    const [dropdownKey, setDropdownKey] = useState(0);
    const [modalSelectedSupplier, setModalSelectedSupplier] = useState(null);
    const [modalSelectedProduct, setModalSelectedProduct] = useState(null);
    const [tabledata, setTabledata] = useState([]);
    const [filteredTableData, setFilteredTableData] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(8);
    const details = {
        name: "tamil",
        address: {
            city: "hosur"
        }
    }
    const { address: { city } } = details

    // Fetch suppliers function
    const fetchSypplaiers = async () => {
        try {
            const response = await dispatch(getsupplierBasedOnCmpIdBrId({ cmpId: CompId, BranchId, AppId }))?.unwrap();
            if (response?.data?.statusCode === 1) {
                const filteredData = response?.data?.data?.filter(filter => filter.ActiveStatus === 'A');
                setSupplierOptions(filteredData);
            }
        } catch (error) {
            console.error('Error fetching suppliers:', error);
        }
    };

    // Fetch table data function
    const TableData = async () => {
        try {
            const response = await dispatch(getSupplaierProducts({ CompId, BranchId, AppId }))?.unwrap();
            if (response?.data?.statusCode === 1) {
                setTabledata(response?.data?.data);
                setFilteredTableData(response?.data?.data);
            }
        } catch (error) {
            console.error('Error fetching table data:', error);
        }
    };

    // Handle supplier selection change
    const handleModelSuplaierOnChange = async (event) => {
        setModalSelectedSupplier(event);
        try {
            const response = await dispatch(getSupplaierIdBasedProducts({ CompId, BranchId, AppId, SuppId: event }))?.unwrap();
            if (response?.data?.statusCode === 1) {
                setTempProductOptions(response?.data?.data?.[0]?.ProductDetails);
                setProductOptions(response?.data?.data?.[0]?.ProductDetails);
                setModelTableData([]);
                setModalSelectedProduct(null);
                setDropdownKey(prev => prev + 1);
            }
        } catch (error) {
            console.error('Error fetching supplier products:', error);
        }
    };

    // Handle product selection change
    const handleModelProductOnChange = (prodId) => {
        setModalSelectedProduct(null);
        setDropdownKey(prev => prev + 1);
        const isAlreadyAdded = modelTableData?.find(find => find.ProdId === prodId);
        if (isAlreadyAdded) {
            setMessage({ type: "error", data: "Product Already Added" });
        } else {
            setModelTableData(prev => [...prev, productOptions?.find(find => find.ProdId === prodId)]);
            setProductOptions(prev => [...prev.filter(item => item.ProdId !== prodId)]);
            setMessage({ type: "success", data: "Product Added Successfully" });
        }
    };

    // Handle product removal from table
    const handleSelectedProductCancel = (prodId) => {
        setModelTableData(prev => [...prev.filter(filter => filter.ProdId !== prodId)]);
        setProductOptions(prev => [...prev, tempProductOptions?.find(find => find.ProdId === prodId)]);
        setModalSelectedProduct(null);
        setDropdownKey(prev => prev + 1);
        setMessage({ type: "success", data: "Product Deleted Successfully" });
    };

    // Toggle add product modal
    const addProductOnClick = () => {
        setAddProduct(prev => !prev);
    };

    // Handle product addition callback
    const onProductAdded = async () => {
        // addProductOnClick();
        if (modalSelectedSupplier) {
            try {
                const response = await dispatch(getSupplaierIdBasedProducts({ CompId, BranchId, AppId, SuppId: modalSelectedSupplier }))?.unwrap();
                if (response?.data?.statusCode === 1) {
                    if (modelTableData?.length > 0) {
                        setProductOptions(response?.data?.data?.[0]?.ProductDetails?.filter(item => !modelTableData?.some(some => some.ProdId === item.ProdId)));
                    } else {
                        setProductOptions(response?.data?.data?.[0]?.ProductDetails);
                    }
                }
            } catch (error) {
                console.error('Error refreshing products:', error);
            }
        } else {
            setProductOptions([]);
            setModelTableData([]);
        }
        setAddProduct(false)
    };

    // Handle modal cancel
    const handleModalCancel = () => {
        setIsModalOpen(false);
        setModalSelectedSupplier(null);
        setModalSelectedProduct(null);
        setModelTableData([]);
        setProductOptions([]);
        setTempProductOptions([]);
        setDropdownKey(0);
    };

    // Handle modal submit
    const handleModalSubmit = async () => {
        if (!modalSelectedSupplier) {
            setMessage({ type: "error", data: "Please select a supplier" });
            return;
        }

        if (modelTableData.length === 0) {
            setMessage({ type: "error", data: "Please add at least one product" });
            return;
        }

        try {
            const payload = {
                CompId,
                BranchId,
                AppId,
                SuppId: modalSelectedSupplier,
                ProductDetails: modelTableData.map(item => ({ ProdId: item.ProdId }))
            };

            const response = await dispatch(postSupplaierProducts(payload))?.unwrap();
            if (response?.data?.statusCode === 1) {
                setMessage({ type: "success", data: "Supplier product mapping saved successfully" });
                handleModalCancel();
                if (onMappingAdded) {
                    onMappingAdded();
                }
            } else {
                setMessage({ type: "error", data: response?.data?.message || "Failed to save mapping" });
            }
        } catch (error) {
            console.error('Error saving mapping:', error);
            setMessage({ type: "error", data: "Failed to save supplier product mapping" });
        }
    };

    // Initialize data on component mount
    useEffect(() => {
        if (isModalOpen) {
            fetchSypplaiers();
        }
    }, [isModalOpen, CompId]);

    const tableColumns = [
        {
            title: "SL.No",
            key: "ProdId",
            align: "center",
            width: "80px",
            render: (text, object, index) => (
                <span>{(currentPage - 1) * pageSize + index + 1}</span>
            ),
        },
        {
            title: "Product Name",
            dataIndex: "ProdName",
            key: "ProdName",
        },
        {
            title: "Action",
            key: "Action",
            dataIndex: "Action",
            render: (_, record, index) =>
                <Space size="middle">
                    <DeleteFilled
                        style={{ color: "#FF4D4F", cursor: "pointer" }}
                        onClick={() => handleSelectedProductCancel(record.ProdId)}
                    />
                </Space>
        }
    ];

    const allProductMap = () => {
        const allProducts = productOptions;
        const newTableData = [...modelTableData, ...allProducts];
        setModelTableData(newTableData);
        setProductOptions([]);
        setMessage({ type: "success", data: "All Products Added Successfully" });
    }

    return (
        <DefaultModal
            open={isModalOpen}
            title="Add Supplier Product Mapping"
            handleCancel={handleModalCancel}
            handleSubmit={handleModalSubmit}
            buttonText="SAVE"
            width={800}
            destroyOnClose={true}
            footer={true}
        >
            <div className="modal-content">
                <div className="modal-dropdowns">
                    <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", position: "relative" }}>
                        <DropDowns
                            label={<label className='required'>Supplier Name</label>}
                            options={supplierOptions?.map(item => ({
                                value: item.SuppId,
                                label: item.SuppName ?? item.SuppMobile ?? "No Name"
                            }))}
                            valueData={modalSelectedSupplier}
                            onChangeFunction={handleModelSuplaierOnChange}
                            isOnchanges={false}
                            alphabetfilter="Yes"
                        />
                        <AddSupplierModal onSupplierAdded={fetchSypplaiers} message={setMessage} />
                    </div>

                    {modalSelectedSupplier && (
                        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", position: "relative" }}>
                            <DropDowns
                                key={`product-dropdown-${dropdownKey}`}
                                label={<label className='required'>Product Name</label>}
                                options={productOptions.map(item => {
                                    const size = (item.Size === null ? "" : " (" + item.Size + " " + (item.UomName === null ? "" : item.UomName) + ") ")
                                    const brand = item.BrandName === null ? "" : item.BrandName
                                    return {
                                        value: item.ProdId,
                                        label: item.ProdName + size + brand
                                    }
                                })}
                                valueData={modalSelectedProduct}
                                onChangeFunction={handleModelProductOnChange}
                                isOnchanges={false}
                                alphabetfilter="Yes"
                            />
                            <button style={{ padding: '10px 10px', margin: '0px 15px', borderRadius: '6px', fontFamily: 'poppins', background: '#901D77', color: 'white', border: 'none', cursor: 'pointer' }}
                                onClick={allProductMap}>Add All</button>

                            <div style={{ position: "absolute", left: "16rem", top: "1px" }}>
                                <Tooltip title={"Add Product"} placement={"top"}>
                                    <PlusCircleOutlined
                                        onClick={addProductOnClick}
                                        style={{ cursor: "pointer", fontSize: "16px" }}
                                    />
                                </Tooltip>
                                <FeaturesFunctionalities
                                    handleQuickAddCancel={onProductAdded}
                                    QuickAdd={addProduct}
                                />
                            </div>
                        </div>
                    )}
                </div>

                <div className="ProductMappingTable" style={{ marginTop: "1rem" }}>
                    <Tables
                        columns={tableColumns}
                        data={modelTableData}
                        dataSource={modelTableData}
                        pagination={{
                            current: currentPage,
                            pageSize: pageSize,
                            total: modelTableData.length,
                            showSizeChanger: false,
                            onChange: (page, size) => {
                                setCurrentPage(page);
                                setPageSize(size);
                            },
                        }}
                        ownPagination={true}
                        rowKey="ProdId"
                    />
                </div>
            </div>
        </DefaultModal>
    );
};

export default SupplierProductMappingForm;