import { useEffect, useState, createPortal } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import LibraryModal from './LibraryModal';

const LibraryButton = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [container, setContainer] = useState(null);

    useEffect(() => {
        // ১. টার্গেট পরিবর্তন: এখন আমরা ডানদিকের 'Settings' এরিয়া খুঁজছি
        const targetSelectors = [
            '.edit-post-header__settings',      // সাধারণ এডিটর (ডান পাশ)
            '.editor-header__settings',         // সাইট এডিটর (ডান পাশ)
            '.edit-site-header__actions'        // FSE (ডান পাশ)
        ];

        let targetNode = null;

        const findToolbar = () => {
            for (const selector of targetSelectors) {
                const node = document.querySelector(selector);
                if (node) return node;
            }
            return null;
        };

        const injectContainer = () => {
            targetNode = findToolbar();

            if (targetNode) {
                let existingContainer = document.getElementById('awt-library-button-container');

                if (!existingContainer) {
                    existingContainer = document.createElement('div');
                    existingContainer.id = 'awt-library-button-container';
                    existingContainer.style.display = 'inline-flex';
                    existingContainer.style.alignItems = 'center';
                    existingContainer.style.marginRight = '10px'; // ডানদিকের আইকন থেকে একটু দূরত্ব

                    // ২. পজিশন পরিবর্তন: 'appendChild' এর বদলে 'prepend' ব্যবহার করছি
                    // যাতে এটি ডানদিকের গ্রুপের সবার শুরুতে (বামে) বসে।
                    if (targetNode.firstChild) {
                        targetNode.insertBefore(existingContainer, targetNode.firstChild);
                    } else {
                        targetNode.appendChild(existingContainer);
                    }
                }

                setContainer(existingContainer);
                return true;
            }
            return false;
        };

        if (!injectContainer()) {
            let attempts = 0;
            const interval = setInterval(() => {
                attempts++;
                if (injectContainer() || attempts > 20) {
                    clearInterval(interval);
                }
            }, 500);

            return () => clearInterval(interval);
        }

    }, []);

    // বাটন রেন্ডার
    const ButtonComponent = (
        <>
            <Button
                variant="primary"
                onClick={() => setIsOpen(true)}
                icon="layout"
                style={{
                    backgroundColor: 'rgba(59, 103, 254, 0.1)',
                    color: '#3b67fe',
                    border: '1px solid transparent',
                    borderRadius: '4px',
                    height: '36px',
                    padding: '0 12px',
                    display: 'flex',
                    alignItems: 'center',
                    gap: '6px',
                    fontWeight: '500',
                    textDecoration: 'none',
                    transition: 'all 0.3s ease'
                }}
                className="awt-library-btn"
            >
                {__('Author Website Templates', 'author-website-templates')}
            </Button>

            {isOpen && (
                <LibraryModal
                    isOpen={isOpen}
                    onClose={() => setIsOpen(false)}
                />
            )}
        </>
    );

    if (container) {
        return createPortal(ButtonComponent, container);
    }

    return null;
};

export default LibraryButton;