import { useEffect, useState, useCallback, useRef } from 'react';
import { useDispatch } from 'react-redux';
import { setPageTitle } from '../../store/themeConfigSlice';
import AsyncSelect from 'react-select/async';

interface SelectOption {
    value: string;
    label: string;
}

interface CardData {
    cardId?: string;
    video_link: string;
    product_id: string;
    product_sku: string;
    product_title: string;
    reg_price: number;
    sale_price: number;
}

interface ModalData {
    isOpen: boolean;
    cardId: string | null;
    video_link: string;
    product_id: string;
}

const IAmAurum = () => {
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(setPageTitle('Dashboard Admin'));
    }, []);

    const [cards, setCards] = useState<CardData[]>([]);
    const [modal, setModal] = useState<ModalData>({
        isOpen: false,
        cardId: null,
        video_link: '',
        product_id: '',
    });

    const [status, setStatus] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
    const [selectedProducts, setSelectedProducts] = useState<SelectOption[]>([]);

    useEffect(() => {
        const loadData = async () => {
            setIsLoading(true);
            try {
                const api_url = process.env.API_URL;
                const res = await fetch(`${api_url}api/setting/i-am-aurum-product`);
                const resData = await res.json();

                if (resData.product && resData.product.length > 0) {
                    const formatProducts = resData.product.map((item: any) => ({
                        cardId: item._id,
                        product_title: item.product_id?.product_title || '',
                        product_sku: item.product_id?.product_sku || '',
                        product_id: item.product_id?._id || '',
                        reg_price: item.product_id?.product_reg_price_display || 0,
                        sale_price: item.product_id?.product_sale_price_display || 0,
                        video_link: item.video_link || '',
                    }));

                    setCards(formatProducts);
                } else {
                    setCards([]);
                }
            } catch (error) {
                console.error('Error loading data:', error);
            } finally {
                setIsLoading(false);
            }
        };

        loadData();
    }, []);

    const addCard = () => {
        setModal({
            isOpen: true,
            cardId: null,
            video_link: '',
            product_id: '',
        });
        setSelectedProducts([]);
    };

    const removeCard = async (cardId: string) => {
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/setting/i-am-aurum-product/${cardId}`, {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
            });

            if (response.ok) {
                setCards(cards.filter((card) => card.cardId !== cardId));
            } else {
                console.error('Error deleting card');
            }
        } catch (error) {
            console.error('Error deleting card:', error);
        }
    };

    const openEditModal = (card: CardData) => {
        setModal({
            isOpen: true,
            cardId: card.cardId || null,
            video_link: card.video_link,
            product_id: card.product_id,
        });

        setSelectedProducts([
            {
                value: card.product_id,
                label: card.product_title,
            },
        ]);
    };

    const closeModal = () => {
        setModal({
            isOpen: false,
            cardId: null,
            video_link: '',
            product_id: '',
        });
        setSelectedProducts([]);
    };

    const fetchData = useCallback(async (inputValue: string): Promise<SelectOption[]> => {
        try {
            const api_url = process.env.API_URL;
            const response = await fetch(`${api_url}api/products/product-list?q=${inputValue}`, {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' },
                credentials: 'include',
            });

            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

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

            return products.map((item: any) => ({
                value: item.id,
                label: item.product_title,
            }));
        } catch (error) {
            console.error('Error fetching data:', error);
            return [];
        }
    }, []);

    const loadOptions = useCallback(
        (inputValue: string): Promise<SelectOption[]> => {
            return new Promise((resolve) => {
                if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);

                if (inputValue.length >= 2) {
                    debounceTimeoutRef.current = setTimeout(async () => {
                        try {
                            setIsLoading(true);
                            const options = await fetchData(inputValue);
                            resolve(options);
                        } catch (error) {
                            console.error('Error loading options:', error);
                            resolve([]);
                        } finally {
                            setIsLoading(false);
                        }
                    }, 300);
                } else {
                    resolve([]);
                }
            });
        },
        [fetchData]
    );

    const getIamAurumStatus = async () => {
        const api_url = process.env.API_URL;
        const response = await fetch(`${api_url}api/setting/i-am-aurum-status`);
        const data = await response.json();
        setStatus(data.status);
    };

    useEffect(() => {
        getIamAurumStatus();
    }, []);

    const saveCard = async () => {
        try {
            const api_url = process.env.API_URL;
            let response;

            if (modal.cardId) {
                response = await fetch(`${api_url}api/setting/i-am-aurum-product/${modal.cardId}`, {
                    method: 'PATCH',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        product_id: modal.product_id,
                        video_link: modal.video_link,
                    }),
                    credentials: 'include',
                });
            } else {
                response = await fetch(`${api_url}api/setting/i-am-aurum-product/add`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    credentials: 'include',
                    body: JSON.stringify({
                        product_id: modal.product_id,
                        video_link: modal.video_link,
                    }),
                });
            }

            if (response.ok) {
                const iamAurumResponse = await fetch(`${api_url}api/setting/i-am-aurum-product`);
                const iamAurumData = await iamAurumResponse.json();

                if (iamAurumData.product && iamAurumData.product.length > 0) {
                    const formatProducts = iamAurumData.product.map((item: any) => ({
                        cardId: item._id,
                        product_title: item.product_id?.product_title || '',
                        product_sku: item.product_id?.product_sku || '',
                        product_id: item.product_id?._id || '',
                        reg_price: item.product_id?.product_reg_price_display || 0,
                        sale_price: item.product_id?.product_sale_price_display || 0,
                        video_link: item.video_link || '',
                    }));

                    setCards(formatProducts);
                } else {
                    setCards([]);
                }
                closeModal();
            }
        } catch (error) {
            console.error('Error saving card:', error);
        }
    };
    const handleProductChange = (selectedItem: SelectOption | null) => {
        if (selectedItem) {
            setSelectedProducts([selectedItem]);
            setModal((prevModal) => ({
                ...prevModal,
                product_id: selectedItem.value,
            }));
        } else {
            setSelectedProducts([]);
            setModal((prevModal) => ({
                ...prevModal,
                product_id: '',
            }));
        }
    };

    const handleStatusChange = async () => {
        try {
            const api_url = process.env.API_URL;
            const newStatus = !status;

            const response = await fetch(`${api_url}api/setting/i-am-aurum-product/status-update`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                },
                credentials: 'include',
                body: JSON.stringify({
                    status: newStatus,
                }),
            });

            if (response.ok) {
                setStatus(newStatus);
            } else {
                console.error('Gagal mengubah status');
            }
        } catch (error) {
            console.error('Error mengubah status:', error);
        }
    };

    useEffect(() => {
        const getStatus = async () => {
            try {
                const api_url = process.env.API_URL;
                const response = await fetch(`${api_url}api/setting/i-am-aurum-status`);
                const data = await response.json();
                setStatus(data.status);
            } catch (error) {
                console.error('Error mendapatkan status:', error);
            }
        };

        getStatus();
    }, []);

    return (
        <>
                <div className="mx-auto max-w-6xl">
                    <div className="panel">
                        <div className="panel-header flex items-center justify-between">
                            <div className="flex flex-row items-center gap-6">
                                <h1 className="text-2xl font-bold text-gray-800 dark:text-white">I Am Aurum Product</h1>
                                <div className="flex flex-row items-center justify-center">
                                    <label className=" inline-flex cursor-pointer items-center">
                                        <input type="checkbox" value="" className="peer sr-only" checked={status} onChange={handleStatusChange} />
                                        <div className="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600 dark:peer-focus:ring-blue-800 rtl:peer-checked:after:-translate-x-full"></div>
                                        <span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Active</span>
                                    </label>
                                </div>
                            </div>
                            <button onClick={addCard} className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
                                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
                                </svg>
                                Masukan Produk
                            </button>
                        </div>
                    </div>

                    <div className="mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
                        {cards.map((card) => (
                            <div key={card.cardId} className="max-w-sm rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
                                {card.video_link && (
                                    <video width="100%" height="auto" autoPlay={true} muted={true} loop={true}>
                                        <source src={card.video_link} type="video/mp4" />
                                        Your browser does not support the video tag.
                                    </video>
                                )}
                                <div className="p-5">
                                    <p className="hidden">{card.product_id}</p>
                                    <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{card.product_title || 'New Card'}</h5>
                                    <p className="mb-2 text-lg tracking-tight text-gray-900 dark:text-white">{card.product_sku || 'SKU'}</p>
                                    {card && (
                                        <div className="mb-3 flex gap-2">
                                            {card.reg_price && <span className="text-sm text-gray-500 line-through">Rp {card.reg_price.toLocaleString()}</span>}
                                            {card.sale_price && <span className="text-sm font-semibold text-green-600">Rp {card.sale_price.toLocaleString()}</span>}
                                        </div>
                                    )}
                                    <div className="flex gap-2">
                                        <button
                                            onClick={() => openEditModal(card)}
                                            className="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                                        >
                                            Edit
                                        </button>
                                        <button
                                            onClick={() => removeCard(card.cardId!)}
                                            className="inline-flex items-center rounded-lg bg-red-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800"
                                        >
                                            Hapus
                                        </button>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* Modal Edit */}
                    {modal.isOpen && (
                        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
                            <div className="mx-4 w-full max-w-md rounded-lg bg-white p-6 dark:bg-gray-800">
                                <h3 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">{modal.cardId ? 'Edit Card' : 'Tambah Card Baru'}</h3>
                                <div className="space-y-4">
                                    <div>
                                        <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Link Video</label>
                                        <input
                                            type="url"
                                            value={modal.video_link}
                                            onChange={(e) => setModal((prev) => ({ ...prev, video_link: e.target.value }))}
                                            className="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                            placeholder="Masukkan URL video"
                                        />
                                    </div>

                                    <div className="custom-select">
                                        <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">Pilih Product</label>
                                        <AsyncSelect<SelectOption, false>
                                            loadOptions={loadOptions}
                                            className="w-full"
                                            placeholder="Search for product"
                                            value={selectedProducts[0] || null}
                                            onChange={handleProductChange}
                                            noOptionsMessage={() => 'Tidak ada produk ditemukan'}
                                            loadingMessage={() => 'Mencari produk...'}
                                            isClearable
                                            isSearchable
                                            cacheOptions={false}
                                            isLoading={isLoading}
                                            menuPlacement="auto"
                                            classNamePrefix="user-form-select"
                                        />
                                    </div>
                                </div>

                                <div className="mt-6 flex justify-end gap-2">
                                    <button
                                        onClick={closeModal}
                                        className="rounded-lg bg-gray-200 px-4 py-2 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-500"
                                    >
                                        Batal
                                    </button>
                                    <button onClick={saveCard} className="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
                                        Simpan
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
        </>
    );
};

export default IAmAurum;