import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import { usePopper } from 'react-popper';
import { createPortal } from 'react-dom';

interface DropdownProps {
    button: React.ReactNode;
    children: React.ReactNode;
    placement?: any;
    offset?: [number, number];
    btnClassName?: string;
    closeOnItemClick?: boolean; // ✅ NEW PROP
}

const Dropdown = (props: DropdownProps, forwardedRef: any) => {
    const {
        button,
        children,
        placement = 'bottom-end',
        offset = [0, 8],
        btnClassName,
        closeOnItemClick = true, // ✅ DEFAULT TRUE
    } = props;

    const [visibility, setVisibility] = useState(false);
    const [isMounted, setIsMounted] = useState(false);

    const referenceRef = useRef<HTMLDivElement>(null);
    const [popperEl, setPopperEl] = useState<HTMLDivElement | null>(null);

    const { styles, attributes, update } = usePopper(referenceRef.current, popperEl, {
        placement,
        strategy: 'absolute',
        modifiers: [
            { name: 'offset', options: { offset } },
            { name: 'preventOverflow', options: { boundary: 'viewport' as any } },
            {
                name: 'flip',
                options: {
                    fallbackPlacements: ['top-end', 'bottom-start', 'left', 'right'],
                },
            },
        ],
    });

    // 🔁 Force popper update after mount
    useEffect(() => {
        if (visibility && isMounted && update) {
            const timer = setTimeout(() => update(), 10);
            return () => clearTimeout(timer);
        }
    }, [visibility, isMounted, update]);

    // Track popper mount
    const setPopperRef = (el: HTMLDivElement | null) => {
        if (el) {
            setPopperEl(el);
            setIsMounted(true);
        }
    };

    // 🔑 CLICK OUTSIDE HANDLER (FIXED)
    const handleDocumentClick = (event: MouseEvent) => {
        // Click on trigger button → ignore
        if (referenceRef.current?.contains(event.target as Node)) {
            return;
        }

        // Click inside dropdown
        if (popperEl?.contains(event.target as Node)) {
            if (!closeOnItemClick) {
                return; 
            }
        }

        setVisibility(false);
    };

    useEffect(() => {
        if (visibility) {
            document.addEventListener('mousedown', handleDocumentClick);
        }
        return () => {
            document.removeEventListener('mousedown', handleDocumentClick);
        };
    }, [visibility, popperEl, closeOnItemClick]);

    // Expose close() to parent
    useImperativeHandle(forwardedRef, () => ({
        close() {
            setVisibility(false);
        },
    }));

    return (
        <>
            {/* Trigger */}
            <div
                ref={referenceRef}
                role="button"
                tabIndex={0}
                className={btnClassName}
                onClick={() => setVisibility((v) => !v)}
                onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                        setVisibility((v) => !v);
                    }
                }}
            >
                {button}
            </div>

            {visibility &&
                createPortal(
                    <div
                        ref={setPopperRef}
                        {...attributes.popper}
                        style={{
                            ...styles.popper,
                            zIndex: 9999,
                        }}
                        className="bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-slate-200 dark:border-gray-700 py-2 min-w-[200px]"
                    >
                        {children}
                    </div>,
                    document.body,
                )}
        </>
    );
};

export default forwardRef(Dropdown);