(function(wp) {

    const { registerPlugin } = wp.plugins;

    const { useSelect, useDispatch } = wp.data;

    const { useEffect } = wp.element;



    // Helper function to check if it's the front page

    function isFrontPage() {

        const postId = wp.data.select('core/editor').getCurrentPostId();

        const homePageId = wp.data.select('core').getSite()?.home;

        return postId === homePageId;

    }



    registerPlugin('clarity-seo', {

        render: () => {

            const postTitle = useSelect((select) => select('core/editor').getEditedPostAttribute('title'), []);

            const postExcerpt = useSelect((select) => select('core/editor').getEditedPostAttribute('excerpt'), []);

            const postContent = useSelect((select) => select('core/editor').getEditedPostAttribute('content'), []);

            const postFeaturedImage = useSelect((select) => select('core/editor').getEditedPostAttribute('featured_media'), []);

            const meta = useSelect((select) => select('core/editor').getEditedPostAttribute('meta'), []);

            const { editPost } = useDispatch('core/editor');



            useEffect(() => {

                // Automatically pre-fill if fields are empty or content changes

                const metaTitle = postTitle ? (isFrontPage() ? clarity_seo_admin_data.siteTitle : postTitle + ' - ' + clarity_seo_admin_data.siteTitle) : '';

                let metaDescription = postExcerpt || '';

                let schemaService = postExcerpt || '';



                // Extract content from HTML block or paragraph

                if (!metaDescription && postContent) {

                    const blocks = wp.blocks.parse(postContent);

                    let htmlContent = '';

                    const contentBlock = blocks.find(block => block.name === 'core/paragraph' || block.name === 'core/html');

                    if (contentBlock && contentBlock.attributes.content) {

                        htmlContent = contentBlock.attributes.content.replace(/(<([^>]+)>)/gi, '').trim();

                        metaDescription = htmlContent.substring(0, 160);

                        schemaService = htmlContent.substring(0, 300);

                    }

                }



                // Fallback for frontpage

                if (!metaDescription && isFrontPage()) {

                    metaDescription = clarity_seo_admin_data.siteDescription;

                    schemaService = clarity_seo_admin_data.organizationDescription;

                }



                const metaKeywords = clarity_seo_admin_data.defaultKeywords + (postTitle && !isFrontPage() ? ', ' + postTitle.toLowerCase().replace(/\s+/g, ', ') : '');

                const ogImage = postFeaturedImage ? wp.data.select('core').getMedia(postFeaturedImage)?.source_url : clarity_seo_admin_data.defaultOgImage;



                // Update meta fields if they are empty

                const newMeta = {};

                if (!meta._clarity_seo_meta_title) newMeta._clarity_seo_meta_title = metaTitle;

                if (!meta._clarity_seo_meta_description) newMeta._clarity_seo_meta_description = metaDescription;

                if (!meta._clarity_seo_meta_keywords) newMeta._clarity_seo_meta_keywords = metaKeywords;

                if (!meta._clarity_seo_og_image) newMeta._clarity_seo_og_image = ogImage;

                if (!meta._clarity_seo_service) newMeta._clarity_seo_service = schemaService;



                if (Object.keys(newMeta).length > 0) {

                    editPost({ meta: { ...meta, ...newMeta } });

                }

            }, [postTitle, postExcerpt, postContent, postFeaturedImage, meta]);



            // New: Load Google Trends in metabox (simple embed or API call)

            useEffect(() => {

                const trendsDiv = document.getElementById('clarity-seo-trends');

                if (trendsDiv) {

                    trendsDiv.innerHTML = '<iframe src="https://trends.google.com/trends/embed/explore/TIMESERIES?req=%7B%22comparisonItem%22%3A%5B%7B%22keyword%22%3A%22seo%22%2C%22geo%22%3A%22%22%2C%22time%22%3A%22today%205-y%22%7D%5D%2C%22category%22%3A0%2C%22property%22%3A%22%22%7D" width="300" height="200"></iframe>';

                }

            }, []);



            return null; // Metabox is added via PHP

        }

    });

})(window.wp);